.website-intro{display:flex;justify-content:space-between;align-items:end;padding:44px 0;gap:30px}.website-intro .intro-note{max-width:330px}
.website-workspace{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:40px;align-items:start}.website-main{min-width:0}
.website-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #c9cac3;padding:15px 0;font-size:13px}.website-heading span:last-child{color:#71736d;font-size:12px}
.website-screen{position:relative;aspect-ratio:2/1;background:#700916;overflow:hidden}.website-screen canvas{display:block;width:100%;height:auto;aspect-ratio:2/1}.website-copy{position:absolute;top:0;bottom:0;left:0;width:48%;padding:7%;display:flex;justify-content:center;flex-direction:column;color:#fff8ee;pointer-events:none}.website-copy small{font-size:clamp(7px,.8vw,12px);letter-spacing:.08em;margin-bottom:20px}.website-copy strong{font-size:clamp(18px,3vw,50px);line-height:1.02;font-weight:400;letter-spacing:-.04em}.website-copy span{font-size:12px;margin-top:22px;border-bottom:1px solid #eee5d0;width:max-content;padding-bottom:3px}
.website-transport{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid #cececa}.website-transport button{width:36px;height:36px;background:#fff;border:1px solid #d4d4cf;border-radius:50%;font-size:14px}.website-transport input{min-width:40px;flex:1;accent-color:#20211f}.website-time{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.website-phase{font-size:12px;color:#71736d;min-width:118px;text-align:right}
.website-caption{font-size:13px;color:#6c6f65;margin-top:13px;max-width:710px;line-height:1.55}.website-treatment{border:1px solid #d6d7d1;background:#fff;position:sticky;top:22px}.website-treatment h2{font-size:23px;padding:19px 20px;border-bottom:1px solid #e0e1db}.website-controls{padding:20px}.website-controls .field{margin-bottom:20px}.website-controls input[type=range]{width:100%;accent-color:#20211f}.website-range-label{display:flex;justify-content:space-between}.website-toggle{display:flex;gap:9px;align-items:center;font-size:13px;margin:24px 0}.website-toggle input{accent-color:#20211f}.website-controls .export-button{background:#20211f;color:#fff}.website-controls .export-button:hover{background:#3a3c37}.website-original{display:block;text-align:center;padding:12px;border:1px solid #c9cdc2;margin-top:12px;font-size:13px}.website-status{font-size:12px;line-height:1.5;color:#666b60;margin-top:12px}.website-reset{display:block;margin:18px auto 0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:12px}.website-download{display:block;background:#e7eadf;margin-top:12px;padding:12px;text-align:center;font-size:13px}.website-treatment .field select{font-size:13px}
.website-story{margin-top:38px}.website-story h2{font-size:24px;margin-bottom:20px}.website-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.website-beat{border-top:1px solid #c9cac3;padding-top:12px}.website-beat small{font-size:11px;color:#6a6e63}.website-beat h3{font-size:17px;margin:9px 0}.website-beat p{font-size:13px;color:#6a6e63;line-height:1.5}.website-references{margin-top:34px;border-top:1px solid #c9cac3;padding-top:16px}.website-references summary{font-size:14px;cursor:pointer}.website-reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.website-reference-grid figure{margin:0}.website-reference-grid img{display:block;width:100%;aspect-ratio:2/1;object-fit:contain;background:#700916}.website-reference-grid figcaption{font-size:12px;margin-top:9px;color:#676b61}
@media(max-width:1100px){.website-workspace{grid-template-columns:minmax(0,1fr) 300px;gap:26px}.website-phase{display:none}.website-copy small{margin-bottom:10px}.website-copy span{margin-top:12px;font-size:10px}}
@media(max-width:760px){.website-intro{flex-direction:column;align-items:start;padding:30px 0;gap:16px}.website-intro .intro-note{font-size:14px}.website-workspace{display:flex;flex-direction:column;gap:26px}.website-main,.website-treatment{width:100%}.website-treatment{position:static}.website-heading{align-items:start;gap:10px}.website-heading span:last-child{text-align:right;font-size:10px}.website-beats{gap:12px}.website-beat h3{font-size:15px}.website-beat p{font-size:12px}.website-copy strong{font-size:clamp(18px,5vw,34px)}.website-copy small{font-size:7px;margin-bottom:8px}.website-copy span{font-size:8px;margin-top:10px}.studio-nav a{padding:7px 7px}.wordmark{font-size:12px;gap:5px}.website-reference-grid{gap:8px}.website-reference-grid figcaption{font-size:11px}}
@media(max-width:390px){.wordmark .slash{display:none}.wordmark{max-width:140px;flex-wrap:wrap;gap:0}.website-time{font-size:10px}}

/* Banners: shared image/animation builder. Legacy reveal remains available. */
.banner-workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:32px;align-items:start;padding-bottom:32px}.banner-main{min-width:0;position:sticky;top:22px}.banner-preview-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:13px;padding:0;color:var(--ui-muted,#676a6f)}.banner-stage{min-height:360px;height:clamp(360px,52vh,560px);padding:32px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;background:var(--ui-raised,#f5f6f7);border-radius:24px;position:relative}.banner-stage canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;filter:drop-shadow(0 8px 14px #00000012)}.banner-stage>p{position:absolute;inset:50% 0 auto;margin:0;text-align:center;font-size:14px}.banner-caption{font-size:13px;line-height:1.5;color:var(--ui-muted,#676a6f);margin-top:14px}.banner-guide{display:flex;justify-content:space-between;gap:12px;margin-top:30px;font-size:14px}.banner-guide b{font-weight:400;color:var(--ui-muted,#676a6f);margin-right:6px}.banner-treatment{position:static}.banner-treatment .field{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}.banner-treatment .field input:not([type=color]),.banner-treatment textarea{width:100%;min-width:0;font:inherit;padding:12px;border:1px solid var(--ui-border,#d4d5d8);border-radius:12px;background:var(--ui-field,#fff);color:var(--ui-text,#090909)}.banner-treatment textarea{resize:vertical}.banner-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.banner-pair>*{min-width:0}.banner-treatment select{width:100%;min-width:0}.banner-field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin:6px 0 12px}.banner-field-heading small{color:var(--ui-muted,#676a6f)}.banner-field-heading button{font-size:12px}.banner-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 10px;border:1px dashed var(--ui-border,#c6c7ca);border-radius:16px;cursor:pointer;background:var(--ui-raised,#f6f7f8);text-align:center;transition:background .2s,box-shadow .2s}.banner-upload strong{font-weight:400}.banner-upload span{font-size:11px;color:var(--ui-muted,#676a6f)}.banner-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.banner-upload:focus-within{outline:2px solid var(--ui-text,#090909);outline-offset:4px}.banner-upload.attention{background:#ffff61;box-shadow:0 0 0 5px #ffff6140;color:#090909}.banner-upload.attention span{color:#333}.banner-help{font-size:12px;line-height:1.5;color:var(--ui-muted,#676a6f);margin:10px 0 18px}.banner-options{margin:18px 0}.banner-options summary{display:flex;justify-content:space-between;gap:8px;cursor:pointer;font-size:14px;padding:10px 0}.banner-options[open] summary{margin-bottom:10px}.banner-colour input{width:100%;height:40px;padding:3px;background:var(--ui-field,#fff);border:1px solid var(--ui-border,#d4d5d8);border-radius:10px}.banner-asset{display:grid;grid-template-columns:36px minmax(0,1fr) 36px 36px;gap:7px;align-items:center;margin-top:10px;font-size:12px}.banner-asset img{width:36px;height:36px;object-fit:cover;border-radius:5px}.banner-asset>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.banner-asset button{width:36px;height:36px;border-radius:50%;background:var(--ui-raised,#f5f6f7);color:var(--ui-text,#090909);font-size:18px}.banner-transport{display:flex;align-items:center;gap:15px;padding-top:16px}.banner-transport button{width:40px;height:40px;border-radius:50%;background:var(--ui-raised,#f5f6f7);color:var(--ui-text,#090909)}.banner-transport input{min-width:0;flex:1;accent-color:var(--ui-text,#090909)}.banner-transport span{font-size:12px;white-space:nowrap}.banner-warning{padding:14px;background:#fff1cf;color:#533d00;font-size:14px;line-height:1.4;margin-top:12px;border-radius:12px}.banner-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}.banner-actions>span{font-size:12px;color:var(--ui-muted,#676a6f)}.banner-actions .export-button{width:auto;white-space:nowrap;gap:24px;min-width:190px}.banner-treatment progress{width:100%}#website-legacy-editor[hidden],#banner-editor[hidden],#banner-actions[hidden],#banner-transport[hidden],#banner-animation-fields[hidden],#banner-image-format[hidden]{display:none!important}
@media(max-width:1100px){.banner-workspace{grid-template-columns:minmax(0,1fr) 310px;gap:22px}.banner-stage{padding:20px}.banner-actions{gap:10px}.banner-actions>span{display:none}}
@media(max-width:760px){.banner-workspace{grid-template-columns:1fr;gap:24px}.banner-main{position:static}.banner-stage{height:300px;min-height:240px;padding:18px}.banner-preview-header{font-size:11px}.banner-guide{font-size:12px;gap:8px}.banner-actions{width:100%}.banner-actions .export-button{width:100%;min-height:42px}.banner-intro h1{font-size:42px}.banner-intro{padding-top:26px}.banner-main .website-reset{margin-top:20px}.banner-treatment .website-controls{padding:18px}.banner-asset button{min-height:40px}.banner-actions>span{display:block;max-width:110px;flex-shrink:0}.banner-actions .export-button{min-width:0;font-size:13px;gap:8px}}
@media(prefers-reduced-motion:reduce){.banner-upload{transition:none}}

.banner-intro{padding:26px 0}.banner-intro h1{font-size:clamp(34px,4vw,52px)}
@media(min-width:1151px){.motion-export-dock.studio-action-dock:has(#banner-actions:not([hidden])){grid-template-columns:minmax(0,1fr) auto}.banner-actions .export-button{margin:0;min-height:48px}}
@media(max-width:760px){.banner-intro{padding:22px 0;gap:12px}.banner-stage{height:240px;min-height:200px}.banner-actions .export-button{margin:0}.banner-actions{padding-top:2px}}

/* Shared inspector disclosure styling lives in studio-toolbar.css. */
#banner-copy-background-field[hidden],#banner-transparent-help[hidden]{display:none!important}

/* Preferred banner CTA: compact pill, grouped label and arrow. */
body.site-design :is(#banner-export,#website-export){display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:100%;min-width:0;min-height:48px;gap:20px;padding:14px 24px;border-radius:999px;font-size:14px;white-space:nowrap}
body.site-design :is(#banner-export,#website-export)>span{flex:none}
@media(max-width:760px){.banner-actions{flex-wrap:wrap;justify-content:flex-end}.banner-actions>span{margin-right:auto}body.site-design :is(#banner-export,#website-export){font-size:13px;padding:12px 18px;gap:16px;min-height:44px}}

.banner-examples{display:flex;gap:10px;align-items:center;padding-top:16px}.banner-examples[hidden]{display:none!important}.banner-examples img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--ui-border,#d4d5d7)}

/* Compact design discovery: shared selection above, six actual-content previews below. */
.banner-main{position:static}

.banner-designs{margin-top:28px;scroll-margin-top:24px}.banner-designs h2{font-size:20px;font-weight:400;margin:0 0 16px}
.banner-design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
body.site-design .banner-design-card{display:block;width:100%;padding:8px;text-align:left;border:1px solid var(--ui-border,#d4d5d8);border-radius:16px;background:var(--ui-raised,#f5f6f7);color:var(--ui-text,#090909);min-width:0;cursor:pointer}
body.site-design .banner-design-card[aria-pressed=true]{outline:2px solid var(--ui-text,#090909);outline-offset:2px}
body.site-design .banner-design-card:hover{border-color:var(--ui-text,#090909)}
.banner-design-card canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:var(--ui-field,#fff);border-radius:9px}
.banner-design-card>span{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:15px;margin:12px 3px 7px}
.banner-design-card small{display:block;font-size:12px;line-height:1.4;color:var(--ui-muted,#676a6f);margin:0 3px 6px}
.banner-treatment label[hidden]{display:none!important}
@media(max-width:760px){.banner-design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.banner-design-card small{font-size:11px}.banner-designs{scroll-margin-top:16px}}