.demo{padding:48px 0;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-warm) 100%);position:relative;overflow:hidden}
@media(min-width:768px){.demo{padding:64px 0}}
.demo::before{content:'';position:absolute;top:-200px;left:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);pointer-events:none}
.demo__header{text-align:center;margin-bottom:24px;position:relative;z-index:1}
.demo__sub{font-size:1rem;color:var(--ink-muted);max-width:640px;margin:6px auto 0;line-height:1.5}

.demo__card{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:0;box-shadow:var(--shadow-md);position:relative;z-index:1}
@media(max-width:600px){.demo__card{border-radius:var(--radius-lg)}}

/* Tab nav - duplicated at the top AND bottom of the card so navigation
   is always within reach, no matter how far the user has scrolled. */
.demo__tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}
.demo__tabs--bottom{border-bottom:none;border-top:1px solid var(--border)}
.demo__tab{flex:1;padding:18px 12px;background:none;border:none;font-family:inherit;font-size:0.95rem;font-weight:600;color:var(--ink-muted);cursor:pointer;border-bottom:3px solid transparent;border-top:3px solid transparent;transition:color 0.2s,border-color 0.2s,background 0.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.demo__tab:hover{color:var(--ink);background:#fff}
.demo__tab.is-active{color:var(--accent-dark);background:#fff}
.demo__tabs:not(.demo__tabs--bottom) .demo__tab.is-active{border-bottom-color:var(--accent-dark)}
.demo__tabs--bottom .demo__tab.is-active{border-top-color:var(--accent-dark)}
.demo__tab-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--border-light);color:var(--ink-muted);font-size:0.72rem;font-weight:700}
.demo__tab.is-active .demo__tab-num{background:var(--accent-dark);color:#fff}
.demo__tab-label{font-weight:600}

/* Tab panels - stacked content + prev/next nav at the bottom */
.demo__tab-panel{padding:24px 36px 64px;position:relative;height:800px}
.demo__tab-panel > .demo__brand-layout,
.demo__tab-panel > .demo__ship-content{height:100%}
/* All three panels render at the same fixed height (800px) so switching tabs
   doesn't shift the layout. Brand and Style flex to fill the available space. */
.demo__tab-panel[data-tab-panel="brand"]{display:flex;flex-direction:column;gap:12px}
.demo__tab-panel[data-tab-panel="brand"] > .demo__brand-layout{height:auto;flex:1;min-height:0}
.demo__tab-panel[data-tab-panel="brand"] .demo__brand-form{justify-content:space-between;height:100%}
.demo__tab-panel[data-tab-panel="brand"] .demo__brand-preview-side{align-self:center;justify-self:center;margin:0 auto}
.demo__tab-panel[data-tab-panel="build"]{display:flex;flex-direction:column;gap:14px}
.demo__build-clip-block--below{margin:0}
.demo__brand-preview-side--bottom{align-self:center;margin:0 auto;width:auto}
.demo__brand-preview-side--bottom .demo__build-tour-row{justify-content:center}
.demo__tab-panel > .demo__ship-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.demo__panel-nav{display:contents}
.demo__panel-nav > *:first-child{position:absolute;left:18px;bottom:14px;z-index:5}
.demo__panel-nav > *:last-child{position:absolute;right:18px;bottom:14px;z-index:5}
.demo__panel-nav > span{display:none}
@media(max-width:600px){
  .demo__tab-panel{height:auto;min-height:auto}
  /* All mobile widths: flow Back / Next as a flex row at the natural end of
     the panel content rather than absolute-positioned over the bottom
     padding. Avoids the empty-space-under-buttons artefact and gives them
     equal flex widths so they never overlap. */
  .demo__panel-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;flex-shrink:0;margin-top:auto;padding-top:8px}
  .demo__panel-nav > *:first-child,
  .demo__panel-nav > *:last-child{position:static;left:auto;right:auto;bottom:auto}
  .demo__panel-nav > span{display:none}
  .demo__panel-nav > .btn{padding:10px 14px;font-size:0.86rem;flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}
  /* Tight bottom padding now that the nav flows in document order. */
  .demo__tab-panel{padding:24px 24px 24px}
  .demo__tab-panel[data-tab-panel="build"]{padding-bottom:24px}
  .demo__tab-panel[data-tab-panel="brand"]{padding-bottom:24px}
  /* Make the ship panel a flex column too, so the nav row ends up below
     the ship-content rather than getting pushed off by justify-content. */
  .demo__tab-panel[data-tab-panel="ship"]{display:flex;flex-direction:column;gap:14px}
  .demo__tab-panel[data-tab-panel="ship"] > .demo__ship-content{height:auto;justify-content:flex-start;flex:0 1 auto}
}
@media(max-width:380px){
  .demo__panel-nav > .btn{padding:9px 10px;font-size:0.78rem}
}
.demo__tab-panel[hidden]{display:none}
@media(max-width:600px){.demo__tab-panel{padding:24px 24px 90px}}
.demo__tab-nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px}
.demo__tab-nav span{display:inline-block;width:1px}
.demo__tab-nav .btn{flex-shrink:0}
/* Inline variant - sits inside the Brand it form column at the bottom */
.demo__tab-nav--inline{margin-top:8px}
.demo__tab-nav--end{justify-content:flex-end;gap:8px}

/* First section in a panel - no top border (would be ugly under the tabs) */
.demo__tab-panel .demo__section:first-of-type{padding-top:0;margin-top:0;border-top:none}

.demo__section{margin-top:32px}
.demo__section:first-of-type{margin-top:0}
.demo__section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.demo__section-label{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink);display:flex;align-items:center;gap:10px}
.demo__section-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--accent-soft);color:var(--accent-dark);border-radius:50%;font-size:0.72rem;font-weight:700;letter-spacing:0}
.demo__section-hint{font-size:0.78rem;color:var(--ink-muted);font-weight:500}
.demo__section-hint.demo__hint--locked{display:inline-flex;align-items:center;gap:5px}
.demo__section-hint.demo__hint--locked svg{width:12px;height:12px;flex-shrink:0;color:var(--ink-muted)}

/* Photo in - three columns (upload | sample | pitch), each the same width
   as a Pick Your Reel tile so nothing looms larger than the Reel tiles below. */
/* Build it - Photo + Music side by side. Photo block is sized to match the
   live preview width on the right (~200px); Music fills the remaining space. */
.demo__build-photo-music-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:stretch}
@media(max-width:680px){.demo__build-photo-music-row{grid-template-columns:1fr}}
/* Stack title + locked badge vertically (badge on line 2) - applies to both
   photo and music blocks so the headers visually match. */
.demo__build-photo-music-row .demo__brand-block-header{flex-direction:column;align-items:flex-start;gap:4px;flex-wrap:nowrap}
.demo__build-photo-music-row .demo__brand-block-status.demo__brand-block-status--locked{margin-left:0}
.demo__build-photo-block{flex:0 0 auto;width:fit-content}
.demo__build-photo-block .demo__photo-in-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;width:200px}
.demo__build-photo-block .demo__photo-in{aspect-ratio:9/16;flex-direction:column;padding:10px;text-align:center;gap:8px;align-items:center;justify-content:center;min-height:0;height:auto;width:100%;border-radius:8px}
.demo__build-photo-block .demo__photo-in-icon{width:36px;height:36px;flex-shrink:0}
.demo__build-photo-block .demo__photo-in-icon svg{width:18px;height:18px}
.demo__build-photo-block .demo__photo-in-title{font-size:0.82rem;line-height:1.2}
.demo__build-photo-block .demo__photo-sample{aspect-ratio:9/16;height:auto;width:100%;flex-shrink:0;border-radius:8px}
.demo__photo-pitch{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 4px;font-size:0.82rem;color:var(--ink-muted);line-height:1.5}
.demo__photo-pitch p{margin:0;font-weight:600;color:var(--ink)}
.demo__photo-pitch ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.demo__photo-pitch li{position:relative;padding-left:14px;line-height:1.4}
.demo__photo-pitch li::before{content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent-dark)}
.demo__photo-sample{aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow-md)}
.demo__photo-sample img{width:100%;height:100%;object-fit:cover;display:block}
.demo__photo-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:9/16;padding:18px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink-muted);font-family:inherit;cursor:pointer;opacity:0.7;transition:opacity 0.2s,transform 0.2s,border-color 0.2s,box-shadow 0.2s;text-align:center}
.demo__photo-in:hover{opacity:0.95;border-color:var(--ink-muted);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.demo__photo-in-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:#fff;border:1.5px solid var(--border);color:var(--ink-muted)}
.demo__photo-in-icon svg{width:20px;height:20px}
.demo__photo-in-title{font-family:var(--font-display);font-size:1rem;color:var(--ink);font-weight:400;line-height:1.2}
.demo__photo-in-text{display:inline-flex;align-items:center;gap:5px;font-size:0.72rem;color:var(--ink-muted);line-height:1.3;justify-content:center}
.demo__photo-in-text svg{width:10px;height:10px;flex-shrink:0}

/* Pick your Reel - 3 columns (Hook | Story | Finale), each with arrows */
.demo__picks{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:14px;justify-content:start}
@media(max-width:600px){.demo__picks{grid-template-columns:1fr;gap:18px}}
.demo__pick-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.demo__pick-col-label{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink)}
.demo__pick-col-label span{font-weight:500;color:var(--ink-muted);letter-spacing:0;text-transform:none;margin-left:4px;font-size:0.72rem}

/* Carousel - single visible tile on top, radio option list UNDER it */
.demo__carousel{display:flex;flex-direction:column;gap:10px;min-width:0}
.demo__clips,.demo__outros{position:relative;min-width:0}
.demo__clip,.demo__outro-tile{display:none}
.demo__clip.is-selected,.demo__outro-tile.is-selected{display:block;cursor:default;min-width:0}
/* Per-tile head no longer used - labels live in the option list below */
.demo__clip-head,.demo__outro-tile-head{display:none}

/* Option list - radio + label rows, current selection highlighted */
.demo__option-list{display:flex;flex-direction:column;gap:2px}
.demo__option-list--two-col{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.demo__option-list--three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px}
@media(max-width:680px){.demo__option-list--three-col{grid-template-columns:1fr}}
.demo__option-list.is-disabled{opacity:0.4;pointer-events:none;filter:grayscale(1)}
.demo__option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:0.82rem;color:var(--ink-muted);transition:background 0.15s,color 0.15s;line-height:1.3;user-select:none;position:relative}
label.demo__option{cursor:pointer}
label.demo__option:hover{background:var(--surface);color:var(--ink)}
.demo__option.is-selected{color:var(--ink)}
.demo__option.is-previewing{background:var(--accent-soft)}
.demo__option input{position:absolute;opacity:0;pointer-events:none}
.demo__option-toggle{display:inline-flex;align-items:center;cursor:pointer;padding:2px;margin:-2px}
.demo__option-toggle:hover .demo__option-box{border-color:var(--ink-muted)}
.demo__option-box{flex-shrink:0;width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:#fff;transition:all 0.15s;color:#fff}
.demo__option-box svg{width:10px;height:10px;opacity:0;transition:opacity 0.15s}
.demo__option input:checked + .demo__option-box{background:var(--accent-dark);border-color:var(--accent-dark)}
.demo__option input:checked + .demo__option-box svg{opacity:1}
.demo__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The clip-name label is the clickable "preview this style" link (role=button
   lives on the label now, not the row). */
.demo__build-tour-tabs-card .demo__option-label[role="button"]{cursor:pointer;transition:color 0.15s}
/* Gate the hover effect to real-pointer devices. Touch devices keep :hover
   sticky after a tap, which then beats the strikethrough on a skipped clip
   (higher specificity wins) and leaves the row highlighted until something
   else is tapped. */
@media (hover: hover) {
  .demo__build-tour-tabs-card .demo__option-label[role="button"]:hover{text-decoration:underline;color:var(--accent-dark)}
}
.demo__option.is-previewing .demo__option-label{color:var(--accent-dark)}
.demo__build-tour-tabs-card .demo__option-label[role="button"]:focus-visible{outline:2px solid var(--accent-dark);outline-offset:1px;border-radius:3px}
.demo__clip-video{aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000}
.demo__clip-video video{width:100%;height:100%;object-fit:cover;display:block}

/* Music chips - 6-col grid on desktop so all options fit on one row */
.demo__music{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media(max-width:680px){.demo__music{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.demo__music{grid-template-columns:1fr}}
.demo__music-chip{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:#fff;border:2px solid var(--border);border-radius:100px;font-family:inherit;font-size:0.72rem;color:var(--ink);font-weight:500;transition:all 0.2s;position:relative;min-width:0;overflow:hidden}
.demo__music-chip.is-selected{border-color:var(--accent-dark);background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.demo__music-chip.is-playing{border-color:var(--accent-dark)}
.demo__music-chip-play,.demo__music-chip-padlock{width:22px;height:22px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:none;padding:0;cursor:pointer}
.demo__music-chip-play{background:var(--accent-dark)}
.demo__music-chip-padlock{background:var(--ink-muted)}
.demo__music-chip-play:hover{background:var(--accent)}
.demo__music-chip-play svg{width:9px;height:9px;fill:#fff;display:block;color:#fff}
.demo__music-chip-play svg polyline,.demo__music-chip-play svg line{stroke:#fff}
.demo__music-chip-padlock svg{width:10px;height:10px;display:block}
.demo__music-chip-label{flex:1;min-width:0;border:none;background:none;padding:0;font:inherit;color:inherit;font-weight:inherit;text-align:left;cursor:pointer;overflow:hidden;display:flex;align-items:center;gap:6px}
.demo__music-chip-label:hover .demo__music-chip-name{text-decoration:underline}
.demo__music-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.demo__music-chip-tick{width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;color:transparent;transition:all 0.15s}
.demo__music-chip-tick svg{width:10px;height:10px;display:block}
.demo__music-chip.is-selected .demo__music-chip-tick{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.demo__music-chip-tick-only{padding:0;flex-shrink:0;flex:0 0 auto}
.demo__music-chip-input{flex:1;min-width:0;border:1px solid var(--border-light);background:#fff;font:inherit;font-size:0.7rem;color:var(--ink);padding:3px 8px;border-radius:6px;outline:none;height:22px}
.demo__music-chip-input:focus{border-color:var(--accent-dark)}
.demo__music-chip-input::placeholder{color:var(--ink-muted);opacity:0.7}

/* Handle row - base 50/50 (input + button). The --with-pic variant adds
   a leading 42px avatar (used by the Branding section). */
.demo__outro-handle-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
/* Avatar sits to the right of the Instagram button */
.demo__outro-handle-row--with-pic{grid-template-columns:1fr 64px;align-items:start;position:relative}
.demo__outro-handle-row--with-pic > .demo__inline-avatar{order:3}
@media(max-width:520px){
  .demo__outro-handle-row{grid-template-columns:1fr}
  .demo__outro-handle-row--with-pic > .btn--ig{grid-column:1 / -1;order:4}
}

/* Inline avatar with Instagram-stories style gradient ring (border = gradient, padding = white gap) */
.demo__inline-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:1.5rem;align-self:end;border:3px solid transparent;padding:2px;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433) border-box;box-sizing:border-box}
/* Avatar bottom-aligns with the input box; absolute-positioned so it can
   protrude UP into the title area without pushing the input down. */
.demo__outro-handle-row--with-pic > .demo__inline-avatar{position:absolute;right:0;bottom:0;align-self:auto}
.demo__inline-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;background:#fff}
/* Mobile: switch the row to flex so the avatar sits as a real RIGHT-side
   sibling instead of an absolute overlay. The desktop overlay starts to
   visually clash with the input as the row narrows past ~520px. Declared
   AFTER the desktop absolute rule so the cascade picks this version. */
@media(max-width:680px){
  .demo__outro-handle-row--with-pic{display:flex;flex-direction:row;align-items:center;gap:10px;grid-template-columns:none}
  .demo__outro-handle-row--with-pic > .demo__outro-input-wrap{order:1;flex:1;min-width:0}
  .demo__outro-handle-row--with-pic > .demo__inline-avatar{order:2;position:static;width:52px;height:52px;flex-shrink:0;align-self:center;right:auto;bottom:auto}
}
@media(max-width:380px){
  .demo__outro-handle-row--with-pic{gap:8px}
  .demo__outro-handle-row--with-pic > .demo__inline-avatar{width:42px;height:42px}
}
.demo__outro-input-wrap{position:relative;min-width:0}
.demo__outro-input-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--ink-muted);pointer-events:none;font-size:0.95rem}
.demo__outro-input-wrap input{width:100%;padding:11px 14px 11px 30px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:0.95rem;background:#fff;color:var(--ink)}
/* Watermark input has no prefix; reset to standard padding */
.demo__watermark-panels .demo__outro-input-wrap input{padding-left:14px}
.demo__outro-input-wrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.demo__outro-input-spinner{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent-dark);border-radius:50%;opacity:0;transition:opacity 0.2s;animation:demoSpin 0.7s linear infinite;pointer-events:none}
.demo__outro-input-spinner.is-loading{opacity:1}
@keyframes demoSpin{to{transform:translateY(-50%) rotate(360deg)}}

/* Watermark "Fetch logo" button - paired with the website input */
.demo__outro-input-prefix--web{font-size:0.78rem;font-weight:500;color:var(--ink-muted);left:12px}
.demo__outro-input-wrap input.has-prefix-web{padding-left:60px}
.btn--watermark{background:var(--ink);color:#fff;border:none;padding:11px 16px;border-radius:10px;font-weight:600;font-size:0.88rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;transition:background 0.2s,transform 0.2s;width:100%;white-space:nowrap}
.btn--watermark:hover{background:var(--ink-light);transform:translateY(-1px)}
.btn--watermark:disabled{opacity:0.65;cursor:default;transform:none}
.btn--watermark svg{width:15px;height:15px;flex-shrink:0}

/* Watermark - sub-toggle + thumb sit inline to the RIGHT of the input. The
   min-height matches the thumb so the row stays the same height in Image
   mode and Text mode (the thumb + sub-toggle hide in Text mode but the row
   doesn't collapse). */
.demo__watermark-controls{display:grid;grid-template-columns:1fr auto 64px;gap:12px;align-items:center;position:relative;min-height:64px}
.demo__watermark-panels{min-width:0}
.demo__inline-thumb{width:64px;height:64px;border-radius:10px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;flex-shrink:0}
/* Text mode: hide the sub-toggle + logo thumb, let the text input span the row. */
body.is-text-watermark .demo__watermark-controls{grid-template-columns:1fr}
body.is-text-watermark .demo__watermark-subtoggle,
body.is-text-watermark .demo__watermark-controls > .demo__inline-thumb{display:none}
.demo__inline-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:none}
.demo__inline-thumb.has-logo img{display:block}
.demo__inline-thumb.has-logo .demo__inline-thumb-empty{display:none}
.demo__inline-thumb-empty{font-size:1.2rem;color:var(--ink-muted);font-weight:300}

/* Watermark - same proportional rules in every preview, sized via container
   query units so it scales with whichever preview it's sitting in (not its
   wrapper). 12% of container height, capped at 60% of container width.
   The cqh/cqw units need `container-type: size` on the parent preview. */
.demo__preview{container-type:size}
.demo__outro-watermark-corner{position:absolute;top:8%;right:14%;z-index:4;opacity:0;transition:opacity 0.4s ease 0.3s;pointer-events:none}
.demo__outro-watermark-corner.has-logo{opacity:1}
.demo__outro-watermark-corner img{height:8cqh;max-width:30cqw;width:auto;display:block;object-fit:contain;filter:brightness(0) invert(1)}
.demo__outro-watermark-corner [data-outro-watermark-text]{display:none;font-family:var(--font-brand-display,var(--font-display));color:#fff;font-size:4cqh;font-weight:600;line-height:1;white-space:nowrap;letter-spacing:0.02em;text-shadow:0 1px 6px rgba(0,0,0,0.25)}
body.is-text-watermark .demo__outro-watermark-corner [data-outro-watermark-text]:not(:empty){display:block}
body.is-text-watermark .demo__outro-watermark-corner img{display:none}

/* "Use my Instagram" CTA + collapsible email-capture form */
.btn--ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;border:none;padding:11px 16px;border-radius:10px;font-weight:600;font-size:0.88rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 3px 12px rgba(220,39,67,0.28);width:100%;white-space:nowrap}
.btn--ig:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(220,39,67,0.38)}
.btn--ig svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.btn--ig:disabled{opacity:0.65;cursor:default;transform:none}
/* Header variant: compact, sits in the block header next to the title */
.btn--ig--header{width:auto;padding:5px 12px;font-size:0.78rem;border-radius:100px;box-shadow:0 2px 6px rgba(220,39,67,0.25);flex:0 0 auto}
.btn--ig--header svg{width:13px;height:13px}

.demo__ig-status{margin-top:8px;font-size:0.78rem;color:var(--ink-muted);min-height:1.1em;line-height:1.4}
.demo__ig-status.ok{color:#2e7d32;font-weight:600}
.demo__ig-status.err{color:#c0392b;font-weight:600}

.demo__ig-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.demo__ig-status-row .demo__ig-status{margin-top:0;flex:1;min-width:0}
.demo__ig-disable{display:inline-flex;align-items:center;gap:5px;font-size:0.78rem;color:var(--ink-muted);cursor:pointer;user-select:none;flex-shrink:0}
.demo__ig-disable input{margin:0;cursor:pointer;accent-color:var(--accent-dark)}
.demo__ig-disable:hover{color:var(--ink)}


.demo__outro-text-field{display:flex;flex-direction:column;gap:5px}
.demo__outro-text-field > span{font-size:0.74rem;font-weight:600;color:var(--ink-muted);letter-spacing:0.02em}
.demo__outro-text-field > span em{font-style:normal;font-weight:400;color:var(--ink-muted);opacity:0.7}
.demo__outro-text-field input{padding:10px 12px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:0.88rem;background:#fff;color:var(--ink)}
.demo__outro-text-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

.demo__outro-effect-label{margin-top:18px;margin-bottom:8px;font-size:0.74rem;font-weight:600;color:var(--ink-muted);letter-spacing:0.02em}

/* Brand it tab - form on the left, single live preview on the right */
.demo__brand-layout{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
@media(max-width:680px){.demo__brand-layout{grid-template-columns:1fr;gap:20px}}
.demo__brand-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.demo__brand-block{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--surface);border:1px solid var(--border-light);border-radius:12px;min-width:0;position:relative}
/* Tighter gap on the Instagram block - input sits closer to its title */
.demo__brand-block:has(.demo__outro-handle-row--with-pic){gap:8px}
.demo__brand-block-label{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);display:inline-flex;align-items:center;gap:6px;width:fit-content}
.demo__brand-block-icon{width:14px;height:14px;flex-shrink:0;fill:#dc2743}
.demo__brand-block-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
/* Indent the watermark header so White/Original aligns with the input's right edge */
.demo__brand-block:has(.demo__watermark-controls) .demo__brand-block-header{padding-right:76px}
.demo__brand-block-status{margin-left:auto;text-align:right;flex:0 1 auto;min-width:0;font-size:0.78rem;color:var(--ink-muted)}
.demo__brand-block-header .demo__watermark-tint{margin-left:auto;flex:0 0 auto}
/* Field-level status: small italic line that appears UNDER the input row.
   Empty by default (hidden) so it doesn't reserve space. */
.demo__field-status{font-size:0.78rem;color:var(--ink-muted);line-height:1.3;margin-top:2px}
.demo__field-status:empty{display:none}
.demo__field-status.ok{color:var(--accent-dark)}
.demo__field-status.err{color:#b3261e}
@media(max-width:520px){.demo__brand-block-status{text-align:left;flex-basis:100%}}
.demo__brand-block-status.demo__brand-block-status--locked{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-muted);flex:0 0 auto;width:fit-content;margin-left:auto;text-align:left}
.demo__brand-block-status.demo__brand-block-status--locked svg{width:11px;height:11px}
.demo__brand-block-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;width:fit-content}
.demo__brand-block-toggle input{margin:0;cursor:pointer;accent-color:var(--accent-dark);width:16px;height:16px}
.demo__brand-block-toggle:has(input:not(:checked)) > span{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--border)}
/* Section info icon + custom tooltip - instant on hover, dark pill above */
.demo__brand-block-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--ink-muted);cursor:help;flex-shrink:0;margin-left:2px}
.demo__brand-block-info svg{width:100%;height:100%}
.demo__brand-block-info:hover,.demo__brand-block-info:focus{color:var(--accent-dark);outline:none}
/* Tooltip pops BELOW the icon so it never gets clipped by the card's
   overflow:hidden when icons sit near the top of the panel. */
.demo__brand-block-info::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;font-size:0.76rem;font-weight:500;letter-spacing:0;text-transform:none;white-space:normal;width:max-content;max-width:260px;line-height:1.4;opacity:0;pointer-events:none;z-index:1000;box-shadow:0 6px 18px rgba(0,0,0,0.18);text-align:left}
.demo__brand-block-info::before{content:'';position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--ink);opacity:0;pointer-events:none;z-index:1000}
.demo__brand-block-info:hover::after,.demo__brand-block-info:focus::after,
.demo__brand-block-info:hover::before,.demo__brand-block-info:focus::before{opacity:1}
.demo__brand-block:has(.demo__brand-block-toggle input:not(:checked)) > *:not(.demo__brand-block-header):not(.demo__brand-block-toggle){opacity:0.45;pointer-events:none}
.demo__brand-block-sub{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.demo__brand-block-sub-label{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted)}

/* Brand it preview - single 9:16 outro card on the right */
.demo__brand-preview-side{display:flex;flex-direction:column;gap:8px;align-items:center;align-self:start;width:220px;flex-shrink:0}
/* Floating label sits ABOVE the card without pushing the card down */
.demo__brand-preview-card-wrap{position:relative;width:220px}
.demo__brand-preview-side--tour .demo__brand-preview-card-wrap{width:160px}
/* When both Text and Instagram are disabled there is no outro at all - hide
   the whole card so the user sees no preview. */
.demo__brand-preview-side.is-empty .demo__brand-outro-card,
.demo__brand-preview-side.is-empty .demo__brand-preview-card-wrap{visibility:hidden}
.demo__brand-preview-side.is-empty .demo__scene-dots{display:none}
/* Glass-effect floating label - bottom-middle of the dark preview card */
.demo__brand-preview-floating-label{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.18);backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);border:1px solid rgba(255,255,255,0.3);padding:4px 12px;border-radius:100px;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:#fff;z-index:5;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.25)}
.demo__brand-next-spacer{flex:1 1 auto;min-height:8px;width:100%}
.demo__brand-next{align-self:flex-end;margin-top:auto}
.demo__brand-next-row{display:flex;gap:8px;align-self:stretch;justify-content:flex-end;margin-top:auto}
@media(max-width:680px){
  .demo__brand-preview-side{align-self:auto}
  .demo__brand-next-spacer{display:none}
  .demo__brand-next,.demo__brand-next-row{align-self:stretch;margin-top:8px}
}

/* Build it - Hook / Story / Finale share one gray block, 3 internal columns */
.demo__panel-intro{text-align:center;max-width:560px;margin:0 auto}
.demo__panel-intro-title{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--ink);line-height:1.15;margin:0 0 6px}
.demo__panel-intro-title em{font-style:italic;color:var(--accent-dark)}
.demo__panel-intro-text{font-size:0.92rem;color:var(--ink-muted);line-height:1.45;margin:0}

/* 3-column tour: [Photo in] [Reel out] [Hook/Story/Finale]. The grid mirrors
   the 3-column width of the Music Options grid below - both span the full
   brand-block content area at the same gap. */
.demo__build-tour-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
/* Mobile: Photo + Reel out share the top row (small portrait cards side
   by side - the visual demo). The Clip Library lives below, narrower than
   the full grid width and packed into a 3-col chip layout per section so
   it doesn't run tall. Every desktop flex:1 / aspect-ratio rule is reset
   so the card hugs its content with no empty stretch space. */
@media(max-width:680px){
  .demo__build-tour-grid{grid-template-columns:1fr 1fr;grid-template-areas:"options options" "photo reel";gap:10px 10px;justify-items:center;align-items:start}
  .demo__build-tour-grid > .demo__build-tour-col:nth-child(1){grid-area:photo;max-width:140px;width:100%}
  .demo__build-tour-grid > .demo__build-tour-col:nth-child(3){grid-area:reel;max-width:140px;width:100%}
  .demo__build-tour-grid > .demo__build-tour-col--tabs{grid-area:options;width:100%;max-width:360px;justify-self:center;align-self:start}
  .demo__build-tour-grid > .demo__build-tour-col--tabs .demo__build-tour-tabs-card{flex:0 0 auto;aspect-ratio:auto;height:auto;overflow:visible;gap:3px;padding:2px}
  .demo__build-tour-tabs-head{padding:2px 4px 4px}
  .demo__build-tour-tabs-card .demo__build-clip-section{flex:0 0 auto;min-height:0;gap:1px}
  .demo__build-tour-tabs-card .demo__build-clip-section-label{font-size:0.6rem;padding:0 2px}
  /* The big one: kill the desktop flex:1 + space-around on the option-list
     and the flex:1 1 auto on options - those were what created the empty
     space when the card was forced to 9:16. */
  .demo__build-tour-tabs-card .demo__option-list{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;justify-content:stretch}
  .demo__build-tour-tabs-card .demo__option{flex:0 0 auto;padding:4px 5px;font-size:0.68rem;gap:2px;min-width:0}
  .demo__build-tour-tabs-card .demo__option-label{font-size:0.68rem}
  .demo__build-tour-tabs-card .demo__option-skip{width:14px;height:14px}
  .demo__build-tour-tabs-card .demo__option-skip svg{width:9px;height:9px}
  /* Compact LIVE badge inline in the chip - smaller font, smaller dot, but
     visible so the user can see which clip is currently playing. */
  .demo__build-tour-tabs-card .demo__option .demo__build-preview-live{font-size:0.46rem;padding:1px 4px;gap:3px;letter-spacing:0.06em}
  .demo__build-tour-tabs-card .demo__option .demo__build-preview-live::before{width:3px;height:3px}
}
.demo__build-tour-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.demo__build-tour-col-label{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);text-align:center}
.demo__build-tour-col .demo__build-example-photo,
.demo__build-tour-col .demo__brand-preview-card-wrap,
.demo__build-tour-col .demo__build-preview-card,
.demo__build-tour-tabs-card{width:100%;max-width:none;flex:1}
.demo__build-tour-col .demo__build-example-photo,
.demo__build-tour-col .demo__build-preview-card{aspect-ratio:9/16}
.demo__build-tour-col .demo__brand-preview-card-wrap{aspect-ratio:9/16}

/* Sections column: a single card listing all 9 clips grouped by Hook /
   Story / Finale. The auto-cycle rotates through the full nine; the parent
   section header lights up + the clip itself is highlighted as it plays. */
.demo__build-tour-col--tabs{min-width:0}
.demo__build-tour-tabs-card{display:flex;flex-direction:column;gap:6px;background:transparent;border:none;border-radius:0;padding:2px 3px;aspect-ratio:9/16;overflow:visible;min-height:0;position:relative}

/* ── Demo-first hero additions (Phase 2: trial CTA + venue branding) ────── */
.hero__trial-note{margin-top:12px;font-size:0.86rem;color:var(--ink-muted)}
.hero__tweak-link{display:inline-block;margin-top:14px;font-size:0.92rem;font-weight:600;color:var(--accent-dark);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.hero__tweak-link:hover{border-bottom-color:var(--accent-dark)}
#heroVenue:not([hidden]){display:inline}

/* Venue brand cue over the reel (right) card: avatar + @handle, the
   "branded as you" wow. Positioned over the right half of the before/after
   stage where the Reel plays. */
.hero__bafr-brand{position:absolute;left:50%;right:0;bottom:10px;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.hero__bafr-brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero__bafr-brand span{font-weight:700;font-size:0.82rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* Reel-out card = the generator's reel preview (.demo__preview) reused, so the
   card, corner watermark and outro (text scene -> profile reveal) match the
   Get-it tab verbatim. Override only the fixed width (fit the before/after grid
   cell) and scale the few px-based outro bits to the smaller card; everything
   else already uses container-query (cq) units. */
.hero__bafr-card--reel.demo__preview{width:100%;max-width:none;min-width:0}
.hero__bafr-card--reel .demo__outro{padding:6cqw;gap:3cqh}
.hero__bafr-card--reel .demo__outro-pic{width:54cqw;height:54cqw;box-shadow:0 0 0 5px rgba(75,123,245,0.4)}
.hero__bafr-card--reel .demo__outro-pic-fallback{font-size:18cqw}
.hero__bafr-card--reel .demo__outro-reveal-handle{font-family:var(--font-display);font-size:5cqh;color:#fff;margin-top:2cqh;line-height:1.1}

/* Familiarity hook: the venue's IG avatar shown big, by the title, the moment
   it resolves (in .hero__content, above the headline). */
.hero__venue{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.hero__venue[hidden]{display:none}
.hero__venue-pic{width:112px;height:112px;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:0 12px 30px rgba(20,24,40,.22),0 0 0 4px var(--accent-soft,#e8efff);flex-shrink:0}
.hero__venue-meta{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.hero__venue-name{font-family:var(--font-display);font-size:1.75rem;line-height:1.04;color:var(--ink)}
.hero__venue-handle{font-size:0.95rem;font-weight:600;color:var(--ink-muted)}
/* Loading state: while the IG profile resolves, show a discreet one-colour
   Instagram-glyph avatar placeholder + a shimmer skeleton bar for the name. The
   handle is already known (from the URL) so it stays visible underneath. */
@keyframes igSpin{to{transform:rotate(360deg)}}
@keyframes heroSkeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
.hero__venue-pic-skeleton,.hero__venue-name-skeleton{display:none}
.hero__venue.is-loading .hero__venue-pic,.hero__venue.is-loading .hero__venue-name{display:none}
.hero__venue.is-loading .hero__venue-pic-skeleton{display:inline-flex;align-items:center;justify-content:center;width:112px;height:112px;border-radius:50%;flex-shrink:0;background:#fff;border:3px solid #fff;box-shadow:0 12px 30px rgba(20,24,40,.22),0 0 0 4px var(--accent-soft,#e8efff)}
.hero__venue-pic-skeleton svg{width:48px;height:48px;color:#c4cad8}
.hero__venue.is-loading .hero__venue-name-skeleton{display:block;width:170px;max-width:100%;height:26px;margin-bottom:5px;border-radius:7px;background:linear-gradient(90deg,var(--border-light,#eceff4) 25%,var(--surface,#f4f6fb) 37%,var(--border-light,#eceff4) 63%);background-size:400% 100%;animation:heroSkeleton 1.4s ease infinite}
@media(prefers-reduced-motion:reduce){.hero__venue-name-skeleton{animation:none}}
@media(max-width:600px){
  /* Left-align on mobile + full width so the avatar is pinned to the left edge
     and does NOT shift when the name skeleton is replaced by the real name (a
     centred row recentres as the name width changes). */
  .hero__venue{justify-content:flex-start;width:100%;margin:0 0 16px}
  .hero__venue-pic{width:92px;height:92px}
  .hero__venue.is-loading .hero__venue-pic-skeleton{width:92px;height:92px}
  .hero__venue-pic-skeleton svg{width:40px;height:40px}
  .hero__venue.is-loading .hero__venue-name-skeleton{width:150px;height:22px}
  .hero__venue-name{font-size:1.5rem}
}

/* Loading spinner over the small brand avatar + the outro reveal pic while a
   profile is being fetched (body.is-ig-loading, set in reel-profile.js). */
body.is-ig-loading .demo__inline-avatar,
body.is-ig-loading .demo__outro-pic{position:relative}
body.is-ig-loading .demo__inline-avatar::before,
body.is-ig-loading .demo__outro-pic::before{content:'';position:absolute;inset:2px;border-radius:50%;background:rgba(255,255,255,.72);z-index:3}
body.is-ig-loading .demo__inline-avatar::after,
body.is-ig-loading .demo__outro-pic::after{content:'';position:absolute;inset:0;margin:auto;width:46%;height:46%;border:3px solid rgba(20,24,40,.16);border-top-color:var(--accent-dark);border-radius:50%;animation:igSpin .7s linear infinite;z-index:4}

/* ── How it works (new premise: we scan your Instagram) ─────────────────── */
.hiw{padding:72px 0;background:var(--surface-card,#fff)}
.hiw__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0 auto;max-width:980px}
.hiw__step{background:var(--surface,#f8f9fc);border:1px solid var(--border-light,#eceef4);border-radius:var(--radius-lg,20px);padding:30px 26px;text-align:left}
.hiw__num{width:40px;height:40px;border-radius:50%;background:var(--accent,#4B7BF5);color:#fff;font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.hiw__step-title{font-size:1.18rem;margin:0 0 8px;color:var(--ink)}
.hiw__step-text{margin:0;color:var(--ink-muted);font-size:0.98rem;line-height:1.55}
.hiw__teaser{max-width:760px;margin:40px auto 0;text-align:center;font-size:1.12rem;line-height:1.5;color:var(--ink)}
.hiw__cta{text-align:center;margin-top:26px}
.reels-signup__free{color:var(--accent-dark,#3461D1);letter-spacing:.01em}
.reels-signup__then{display:inline-block;margin-top:6px;font-family:var(--font-body);font-size:1.05rem;font-weight:500;color:var(--ink-muted);letter-spacing:.01em}
@media(max-width:768px){
  .hiw{padding:48px 0}
  .hiw__steps{grid-template-columns:1fr;gap:16px;max-width:460px}
  .hero__bafr-brand{bottom:8px}
}

/* Demo-first hero — keep the CTA above the fold on phones (the brief's
   one rule: never bury the button). Compress spacing, shrink the headline,
   drop the badges + the desc line-breaks on small screens. */
@media(max-width:600px){
  .hero{padding:18px 0 36px}
  .hero__inner{padding-top:6px;gap:22px}
  .reels-hero-badges{display:none}
  .hero__title{font-size:2rem;line-height:1.12;margin-bottom:12px}
  .hero__desc{font-size:0.95rem;margin:0 0 16px}
  .hero__actions{width:100%}
  .hero__actions .btn{width:100%;justify-content:center}
  .hero__trial-note{margin-top:10px;font-size:0.8rem}
  .hero__tweak-link{margin-top:10px}
}

/* Mobile hero order (styles.css sets .hero__content{display:contents} + the
   reel visual order:1 / actions order:2, i.e. "reel first, then CTA"). Keep
   that wow-first order but: reclaim the eyebrow strip, shrink the reel, and
   pull the trial note + tweak link BELOW the CTA so the button sits right
   under the reel — above the fold. */
@media(max-width:600px){
  .reels-eyebrow{display:none}
  .hero__bafr{max-width:264px;gap:10px}
  .hero__trial-note{order:3;text-align:center}
  .hero__tweak-link{order:4}
  .hero__content{text-align:center}
}

/* ── Lean conversion LP: scroll reveal, Google CTA, outcome screen ───────── */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none}}

/* Primary CTA everywhere = Continue with Google. The .btn--google fallback +
   the real GIS button container (.gis-btn) live in styles.css (global) so the
   account page + sign-in modal share them. */
/* Button + sub-line grouped to the button's width so the email link centers
   under it (narrower than the button), per spec. */
.cta-group{display:inline-flex;flex-direction:column;align-items:center;gap:18px;max-width:100%;margin-top:8px}
.cta-microcopy{margin:0;font-size:0.82rem;color:var(--ink-muted);line-height:1.45;text-align:center}
.cta-email-link{color:var(--accent-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cta-email-link:hover{text-decoration:none}
/* On blue/dark CTA bands (Screen 5) the link + eyebrow must be light to show. */
.reels-final-cta .cta-email-link{color:#fff}
.reels-final-cta .cta-eyebrow{color:rgba(255,255,255,.9)}
@media(max-width:600px){.cta-group{display:flex;width:100%}.cta-group .btn{width:100%}}

/* Hero: Example Dish Photo -> branded Reel. Photo (left) and the simple right
   arrow are both vertically centred against the taller reel. */
.hero__transform{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%}
/* The reel-frame's REEL label (top) + footer (bottom) are uneven, so centring on
   the frame leaves the photo/arrow ~14px below the reel CARD's centre - nudge up
   to sit level with the video. */
.hero__transform-left,.hero__transform-arrow{transform:translateY(-14px)}
.hero__transform-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.hero__example-photo{margin:0;width:92px}
.hero__example-photo img{width:92px;aspect-ratio:9/16;height:auto;object-fit:cover;border-radius:12px;box-shadow:var(--shadow-md);display:block}
.hero__example-photo-eyebrow,.hero__reel-eyebrow{font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dark);text-align:center;margin-bottom:2px}
.hero__example-photo-label{margin-bottom:7px;font-size:0.66rem;font-weight:600;color:var(--ink-muted);text-align:center;line-height:1.2}
.hero__example-photo figcaption{margin-top:7px;font-size:0.66rem;font-weight:600;color:var(--ink-muted);text-align:center;line-height:1.2}
.hero__transform-arrow{color:var(--accent-dark);width:46px;height:auto;flex-shrink:0}
.hero__reel-frame{width:290px;max-width:290px;flex-shrink:0}
.hero__reel-stage{position:relative}
/* Skeleton over the reel while the venue's IG profile resolves. */
.hero__reel-skeleton{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:18px;background:#0e1220;color:rgba(255,255,255,.72);font-size:0.74rem;font-weight:600;overflow:hidden}
.hero__reel-skeleton[hidden]{display:none}
.hero__reel-skeleton::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);background-size:220% 100%;animation:heroShimmer 1.5s linear infinite}
.hero__reel-skeleton-label{position:relative;z-index:1}
.hero__reel-spinner{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:igSpin .8s linear infinite}
@keyframes heroShimmer{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.hero__reel-skeleton::before,.hero__reel-spinner{animation:none}}
.hero__reel-footer{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:13px}
.hero__reel-volume{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;padding:0;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);transition:background .2s,color .2s,border-color .2s,transform .2s}
.hero__reel-volume:hover{transform:scale(1.08);border-color:var(--ink-muted)}
.hero__reel-volume.is-on{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.hero__editor-note{margin:0;font-size:0.92rem;color:var(--ink-muted)}
.hero__editor-link{color:var(--accent-dark);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.hero__editor-link:hover{border-bottom-color:var(--accent-dark)}
.cta-eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-dark)}
.hero__desc-list{list-style:disc;padding-left:22px;margin-top:0;line-height:1.5}
.hero__desc-list li{margin:0}
/* Desktop 2-col hero: vertically centre the content next to the reel so the
   spacing stays even across all four states (logged in/out x with/without a
   profile avatar) - the old push-to-bottom left odd gaps when content was short. */
@media(min-width:769px){
  .hero__inner{align-items:center}
}
@media(max-width:600px){
  .hero__transform{gap:5px}
  .hero__example-photo,.hero__example-photo img{width:70px}
  .hero__transform-arrow{width:36px}
  .hero__reel-frame{width:212px;max-width:212px}
  .hero__reel-skeleton{border-radius:14px;font-size:0.68rem;gap:11px}
  .hero__reel-spinner{width:28px;height:28px}
  /* Centre the bullet block but keep the text left-aligned (reads better than
     centred bullets). */
  .hero__desc-list{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
}

/* Screen 3 - outcome: reuses .reels-signup__stats + a future-content slot. */
.lp-outcome{padding:64px 0;text-align:center}
.lp-placeholder{max-width:580px;margin:38px auto 0;padding:26px;border:2px dashed var(--border);border-radius:var(--radius-lg);color:var(--ink-muted);font-size:0.92rem;background:var(--surface)}
.demo__build-tour-tabs-head{flex-shrink:0;padding:2px 4px 6px;border-bottom:1px dashed var(--border)}
.demo__build-clip-section{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-height:0}
.demo__build-clip-section-label{font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-muted);padding:0 4px;transition:color 0.18s;flex-shrink:0}
.demo__build-clip-section.is-active .demo__build-clip-section-label{color:var(--accent-dark)}
.demo__build-tour-tabs-card .demo__option-list{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:0}
.demo__build-tour-tabs-card .demo__option{padding:3px 4px;font-size:0.76rem;line-height:1.2;flex:1 1 auto}
.demo__build-tour-tabs-card .demo__option-label{font-size:0.76rem}
.demo__build-tour-tabs-card .demo__option-box{width:13px;height:13px}
.demo__build-tour-tabs-card .demo__option{position:relative;justify-content:space-between;gap:4px}
.demo__build-tour-tabs-card .demo__option.is-previewing{background:#fff;border-radius:5px;outline:1.5px solid var(--accent-dark);outline-offset:0}
/* Inline LIVE badge inside an option row reuses the shared .demo__build-
   preview-live styles - same dot, same colour, same animation - just
   positioned inline instead of absolute. */
.demo__option .demo__build-preview-live{position:static;top:auto;left:auto;display:none;margin-left:auto;margin-right:2px}
.demo__option.is-previewing .demo__build-preview-live{display:inline-flex}
/* Skipped state - clip not in the user's mix. Strikethrough + dimmed; the
   × button rotates to a + so it reads as "restore" without an icon swap. */
.demo__build-tour-tabs-card .demo__option:not(.is-selected) .demo__option-label{text-decoration:line-through;opacity:0.45}
.demo__build-tour-tabs-card .demo__option:not(.is-selected) .demo__option-skip{opacity:0.85;color:var(--accent-dark)}
.demo__build-tour-tabs-card .demo__option:not(.is-selected) .demo__option-skip svg{transform:rotate(45deg);transition:transform 0.15s}
.demo__option-skip{flex-shrink:0;width:18px;height:18px;border:none;background:none;padding:0;cursor:pointer;color:var(--ink-muted);opacity:0.5;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity 0.15s,color 0.15s,background 0.15s}
.demo__option-skip svg{width:12px;height:12px;display:block;transition:transform 0.15s}
.demo__option-skip:hover{opacity:1;color:var(--accent-dark);background:var(--accent-soft)}
@keyframes livePulse{0%,100%{opacity:0.95}50%{opacity:0.6}}

/* LIVE badge in the corner of the Reel out preview reinforces the link to
   the highlighted option (the connector triangle on the option points at it). */
.demo__build-preview-live{position:absolute;top:8px;left:8px;background:var(--accent-dark);color:#fff;font-size:0.55rem;font-weight:700;letter-spacing:0.08em;padding:3px 7px;border-radius:4px;line-height:1;z-index:5;display:inline-flex;align-items:center;gap:4px;animation:livePulse 1.4s ease-in-out infinite;pointer-events:none}
.demo__build-preview-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,0.7)}
.demo__build-clip-panel .demo__option{padding:6px 4px;align-items:center;gap:6px}
.demo__build-clip-panel .demo__option-label{font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}

/* Build it - single 9:16 video preview with auto-cycling clips */
.demo__build-preview-card{aspect-ratio:9/16;width:220px;background:#000;border-radius:14px;position:relative;overflow:hidden;box-shadow:var(--shadow-md);container-type:size}
.demo__build-preview-card video{width:100%;height:100%;object-fit:cover;display:block}
/* Tour mode: example photo + Reel preview side-by-side at matching size, so
   users see input → output at a glance with an "Example, for preview" caption. */
.demo__brand-preview-side--tour{width:auto}
.demo__build-tour-row{display:flex;align-items:center;gap:10px}
.demo__brand-preview-side--tour .demo__build-preview-card,
.demo__build-example-photo{aspect-ratio:9/16;width:160px;border-radius:14px;overflow:hidden;background:#000;box-shadow:var(--shadow-md);position:relative;flex-shrink:0}
.demo__build-example-photo img{width:100%;height:100%;object-fit:cover;display:block}
.demo__build-tour-arrow{font-size:1.4rem;color:var(--ink-muted);flex-shrink:0;line-height:1}
.demo__build-tour-caption{display:flex;gap:18px;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted)}
.demo__build-tour-caption-arrow{color:var(--accent-dark);font-size:1rem;font-weight:400;letter-spacing:0}
/* Hook / Story / Finale tabs sit under the preview as 3 separate pills */
.demo__build-preview-tabs{display:flex;gap:6px;justify-content:center;align-self:center;width:220px}
.demo__brand-preview-side--tour .demo__build-preview-tabs{width:160px;margin-left:auto}
.demo__build-preview-tab{flex:1 1 0;padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;color:var(--ink-muted);text-align:center;white-space:nowrap;cursor:pointer;font-family:inherit;transition:background 0.18s,color 0.18s,border-color 0.18s,transform 0.12s}
.demo__build-preview-tab:hover{background:#fff;color:var(--ink);border-color:var(--ink-muted)}
.demo__build-preview-tab:active{transform:scale(0.96)}
.demo__build-preview-tab:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.demo__build-preview-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.demo__build-preview-clip{font-size:0.78rem;color:var(--ink-muted);font-weight:500;text-align:center;align-self:center;width:220px;min-height:1.2em;line-height:1.2}
.demo__build-preview-clip:empty{display:none}
.demo__scene-dots--build .demo__scene-dot[data-build-dot="hook"].is-active,
.demo__scene-dots--build .demo__scene-dot[data-build-dot="story"].is-active,
.demo__scene-dots--build .demo__scene-dot[data-build-dot="finale"].is-active{background:var(--accent-dark)}
.demo__brand-preview-label{font-size:0.74rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted)}
.demo__brand-outro-card{aspect-ratio:9/16;width:220px;background:#000;border-radius:14px;position:relative;overflow:hidden;color:#fff;text-align:center;container-type:size;box-shadow:var(--shadow-md)}

/* Scenes - only one visible at a time, cross-fade between them */
.demo__brand-outro-card .demo__scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 14px;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.demo__brand-outro-card .demo__scene.is-active{opacity:1;pointer-events:auto}

/* Reveal scene - handle shown under the pic */
.demo__brand-outro-card .demo__outro-reveal-handle{font-family:var(--font-display);font-weight:500;font-size:5cqh;color:#fff;margin-top:1cqh;line-height:1.1;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Scene dots - small indicator under the preview card */
.demo__scene-dots{display:flex;justify-content:center;gap:6px}
.demo__scene-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background 0.2s,transform 0.2s;cursor:pointer;border:none;padding:0}
.demo__scene-dot:hover{background:var(--ink-muted);transform:scale(1.2)}
.demo__scene-dot.is-active{background:var(--accent-dark);transform:scale(1.4)}
.demo__scene-dot:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
/* Controls under the preview cards - capped to the preview width (240px)
   and centered so they line up cleanly under the tile. */
.demo__brand-text-anim-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:520px){.demo__brand-text-anim-row{grid-template-columns:1fr}}
.demo__brand-text-inputs{display:flex;flex-direction:column;gap:8px;width:100%}
/* Each text input fades in line-by-line when the Brand it panel becomes visible. */
[data-tab-panel="brand"]:not([hidden]) .demo__brand-text-inputs input{opacity:0;animation:brandInputIn 0.45s ease forwards}
[data-tab-panel="brand"]:not([hidden]) .demo__brand-text-inputs input:nth-of-type(1){animation-delay:0.05s}
[data-tab-panel="brand"]:not([hidden]) .demo__brand-text-inputs input:nth-of-type(2){animation-delay:0.18s}
[data-tab-panel="brand"]:not([hidden]) .demo__brand-text-inputs input:nth-of-type(3){animation-delay:0.31s}
[data-tab-panel="brand"]:not([hidden]) .demo__brand-text-inputs input:nth-of-type(4){animation-delay:0.44s}
@keyframes brandInputIn{
  0%   {opacity:0;transform:translateY(6px)}
  100% {opacity:1;transform:translateY(0)}
}
.demo__brand-text-inputs input{padding:10px 12px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:0.88rem;background:#fff;color:var(--ink);width:100%}
.demo__brand-text-inputs input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

/* Match the Pick Your Reel tile size (1/3 of panel) so the Brand it cards
   don't tower over the Build it tiles. */
.demo__text-preview-card{aspect-ratio:9/16;width:100%;max-width:200px;margin:0 auto;background:#000;color:#fff;border-radius:14px;padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;flex-shrink:0;position:relative;container-type:size}
.demo__text-preview-line{line-height:1.25;max-width:100%;word-break:break-word}
.demo__text-preview-line:empty{display:none}
.demo__text-preview-preline {font-family:var(--font-body);font-size:2.6cqh;font-weight:600;color:rgba(255,255,255,0.85)}
.demo__text-preview-headline{font-family:var(--font-display);font-size:7cqh;font-weight:400;line-height:1.1}
.demo__text-preview-subline {font-family:var(--font-body);font-size:2.6cqh;font-weight:600;color:rgba(255,255,255,0.85);margin-top:1cqh}
.demo__text-preview-line3   {font-family:var(--font-display);font-size:5cqh;font-weight:400}

/* container-type:size lets both handle (cqw) and watermark (cqh) scale with the tile.
   Capped to the same width as a Pick Your Reel tile so heights match across tabs. */
.demo__outro-tile-thumb{aspect-ratio:9/16;width:100%;max-width:200px;margin:0 auto;border-radius:12px;background:#000;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;container-type:size}
/* Pic radius targets ~28% of tile width, matching the tools canvas
   (which renders at radius = min(W,H) * 0.28). Handle text sits below
   the pic in DM Sans 500 - same family/weight as drawIntroFrame uses. */
.demo__outro-tile-pic{width:56%;aspect-ratio:1;border-radius:50%;background:#222;border:2px solid #fff;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:1.4rem;will-change:transform,opacity;margin-top:-14%}
.demo__outro-tile-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* Handle font scales with tile width - 9% of tile width matches tools'
   canvas (96px on a 1080px-wide canvas = 8.9%). Falls back to fixed rem
   for browsers without container query support. */
.demo__outro-tile-handle{position:absolute;bottom:11%;left:0;right:0;text-align:center;font-family:var(--font-body);font-weight:500;font-size:0.7rem;font-size:9cqw;color:#fff;pointer-events:none;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:1.1}

/* Looping preview animations - each runs over a 3.5s cycle with hold */
.demo__outro-tile-pic.fx-zoom  { animation: fxZoomLoop  3.5s ease-out infinite; }
.demo__outro-tile-pic.fx-spin  { animation: fxSpinLoop  3.5s cubic-bezier(0.2,0.9,0.3,1) infinite; }
.demo__outro-tile-pic.fx-flash { animation: fxFlashLoop 3.5s ease-out infinite; }
.demo__outro-tile-pic.fx-orbit { animation: fxOrbitLoop 3.5s cubic-bezier(0.2,0.9,0.3,1) infinite; }
.demo__outro-tile-pic.fx-pixel { animation: fxPixelLoop 3.5s ease-out infinite; }
.demo__outro-tile-pic.fx-slam  { animation: fxSlamLoop  3.5s cubic-bezier(0.34,1.56,0.64,1) infinite; }
@keyframes fxZoomLoop  { 0%{transform:scale(0.4);opacity:0} 25%,75%{transform:scale(1);opacity:1} 100%{transform:scale(0.4);opacity:0} }
@keyframes fxSpinLoop  { 0%{transform:scale(0.4) rotate(-540deg);opacity:0} 30%,75%{transform:scale(1) rotate(0);opacity:1} 100%{transform:scale(0.4) rotate(-540deg);opacity:0} }
@keyframes fxFlashLoop { 0%{transform:scale(0.6);opacity:0} 8%{transform:scale(1.15);opacity:1} 16%{transform:scale(0.95)} 24%{transform:scale(1.08)} 32%,80%{transform:scale(1);opacity:1} 100%{transform:scale(0.6);opacity:0} }
@keyframes fxOrbitLoop { 0%{transform:scale(0.5);opacity:0;box-shadow:0 0 0 0 rgba(255,255,255,0)} 30%{transform:scale(1);opacity:1;box-shadow:0 0 0 8px rgba(75,123,245,0.45)} 60%,80%{transform:scale(1);opacity:1;box-shadow:0 0 0 4px rgba(75,123,245,0.4)} 100%{transform:scale(0.5);opacity:0;box-shadow:0 0 0 0 rgba(255,255,255,0)} }
@keyframes fxPixelLoop { 0%{clip-path:circle(0% at 50% 50%);opacity:0} 30%,75%{clip-path:circle(60% at 50% 50%);opacity:1} 100%{clip-path:circle(0% at 50% 50%);opacity:0} }
@keyframes fxSlamLoop  { 0%{transform:scale(3);opacity:0} 20%{transform:scale(0.92);opacity:1} 30%,80%{transform:scale(1);opacity:1} 100%{transform:scale(3);opacity:0} }

/* ── PREVIEW ───────────────────────────────────────────────────────────── */
.demo__preview-wrap{margin-top:36px;padding-top:36px;border-top:2px dashed var(--border)}
.demo__preview-stack{display:flex;flex-direction:column;align-items:center;gap:14px}
.demo__preview{width:280px;aspect-ratio:9/16;background:#000;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);position:relative;max-width:100%}
/* Outro overlay (animated last 4–8s) */
.demo__outro{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;opacity:0;pointer-events:none;transition:opacity 0.5s ease;z-index:3;text-align:center;padding:24px}
.demo__outro.visible{opacity:1}
.demo__outro-pic{width:130px;height:130px;border-radius:50%;background:#fff;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 6px rgba(75,123,245,0.4);position:relative}
.demo__outro-pic img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.demo__outro-pic-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2.6rem;color:#fff;background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
/* 4-line outro text - looping fade-in cascade, mirrors tools' OUTRO_TIMING.
   Each line fades in sequentially with stagger, holds, then loops. Same
   keyframe + per-line animation-delay so all four cascade naturally. */
.demo__outro-preline,
.demo__outro-headline,
.demo__outro-subline,
.demo__outro-line3{opacity:0;transform:translateY(8px);text-align:center;max-width:200px;padding:0 8px;line-height:1.25;color:#fff}
/* Animate text in once when its scene becomes active, staggered for cascade effect */
.demo__scene.is-active .demo__outro-preline {animation:outroLineIn 0.55s 0s    ease forwards}
.demo__scene.is-active .demo__outro-headline{animation:outroLineIn 0.55s 0.2s  ease forwards}
.demo__scene.is-active .demo__outro-subline {animation:outroLineIn 0.55s 0.45s ease forwards}
.demo__scene.is-active .demo__outro-line3   {animation:outroLineIn 0.55s 0.7s  ease forwards}
@keyframes outroLineIn{
  0%   {opacity:0;transform:translateY(8px)}
  100% {opacity:1;transform:translateY(0)}
}
.demo__outro-preline:empty,
.demo__outro-headline:empty,
.demo__outro-subline:empty,
.demo__outro-line3:empty{display:none}
/* Sizes scale with the preview height (cqh) - same proportions as tools' canvas */
.demo__outro-preline {font-family:var(--font-body);font-size:2.6cqh;font-weight:600;color:rgba(255,255,255,0.85);animation-delay:0s}
.demo__outro-headline{font-family:var(--font-display);font-size:7cqh;font-weight:400;line-height:1.1;animation-delay:0.4s}
.demo__outro-subline {font-family:var(--font-body);font-size:2.6cqh;font-weight:600;color:rgba(255,255,255,0.85);margin-top:1cqh;animation-delay:0.8s}
.demo__outro-line3   {font-family:var(--font-display);font-size:5cqh;font-weight:400;color:#fff;animation-delay:1.2s}
@keyframes outroLineLoop {
  0%   { opacity: 0; transform: translateY(8px); }
  8%   { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  95%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(8px); }
}

/* Same looping cascade for the small in-section text preview card */
.demo__text-preview-line{animation:outroLineLoop 5s ease infinite}
.demo__text-preview-preline {animation-delay:0s}
.demo__text-preview-headline{animation-delay:0.4s}
.demo__text-preview-subline {animation-delay:0.8s}
.demo__text-preview-line3   {animation-delay:1.2s}

/* Outro effect variants - applied to .demo__outro-pic when active */
.demo__outro.visible .demo__outro-pic.fx-zoom,
.demo__brand-outro-card .demo__outro-pic.fx-zoom  { animation: fxZoom 1.0s cubic-bezier(0.22,1.4,0.36,1) both; }
.demo__outro.visible .demo__outro-pic.fx-spin,
.demo__brand-outro-card .demo__outro-pic.fx-spin  { animation: fxSpin 1.2s cubic-bezier(0.2,0.9,0.3,1) both; }
.demo__outro.visible .demo__outro-pic.fx-flash,
.demo__brand-outro-card .demo__outro-pic.fx-flash { animation: fxFlash 1.0s ease-out both; }
.demo__outro.visible .demo__outro-pic.fx-orbit,
.demo__brand-outro-card .demo__outro-pic.fx-orbit { animation: fxOrbit 1.0s cubic-bezier(0.2,0.9,0.3,1) both; }
.demo__outro.visible .demo__outro-pic.fx-pixel,
.demo__brand-outro-card .demo__outro-pic.fx-pixel { animation: fxPixel 1.3s ease-out both; }
.demo__outro.visible .demo__outro-pic.fx-slam,
.demo__brand-outro-card .demo__outro-pic.fx-slam  { animation: fxSlam 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes fxZoom  { 0%{transform:scale(0.4);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes fxSpin  { 0%{transform:scale(0.4) rotate(-540deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes fxFlash { 0%{transform:scale(0.6);opacity:0} 20%{transform:scale(1.15);opacity:1} 40%{transform:scale(0.95)} 60%{transform:scale(1.08)} 100%{transform:scale(1);box-shadow:0 0 0 6px rgba(75,123,245,0.4)} }
@keyframes fxOrbit { 0%{transform:scale(0.5);opacity:0;box-shadow:0 0 0 0 rgba(75,123,245,0)} 60%{transform:scale(1);opacity:1;box-shadow:0 0 0 14px rgba(75,123,245,0.5)} 100%{transform:scale(1);opacity:1;box-shadow:0 0 0 6px rgba(75,123,245,0.4)} }
@keyframes fxPixel { 0%{clip-path:circle(0% at 50% 50%);opacity:0} 100%{clip-path:circle(60% at 50% 50%);opacity:1} }
@keyframes fxSlam  { 0%{transform:scale(3);opacity:0} 60%{transform:scale(0.92);opacity:1} 100%{transform:scale(1)} }

/* Download row - volume toggle + small download button, side-by-side, narrower than the video */
.demo__download{display:flex;justify-content:center;align-items:center;gap:8px}
.demo__download .btn{padding:10px 20px;font-size:0.88rem;display:inline-flex;align-items:center;gap:8px}
.demo__download .btn svg{width:16px;height:16px;flex-shrink:0}
.demo__volume-btn{padding:10px 12px!important;flex-shrink:0}
.demo__volume-btn svg{width:18px;height:18px}
/* Fixed width + tabular figures so the Download button stays one big size both
   idle and while compiling ("Building 7%" -> "Building 100%") - no jump, no
   width jitter as the digits change. */
#downloadBtn{min-width:184px;justify-content:center;font-variant-numeric:tabular-nums}
.demo__volume-btn.is-playing{border-color:var(--accent-dark);color:var(--accent-dark);background:var(--accent-soft)}

/* Paywall modal */
.demo-modal{position:fixed;inset:0;background:rgba(15,20,35,0.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.25s ease}
.demo-modal.open{opacity:1;pointer-events:auto}
.demo-modal__card{background:#fff;border-radius:var(--radius-xl);padding:40px;max-width:480px;width:100%;text-align:center;box-shadow:var(--shadow-xl);transform:translateY(20px);transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);position:relative}
.demo-modal.open .demo-modal__card{transform:translateY(0)}
.demo-modal__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--surface-warm);color:var(--ink-muted);border:none;font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.demo-modal__close:hover{background:var(--border-light);color:var(--ink)}
.demo-modal__icon{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.demo-modal__icon svg{width:32px;height:32px}
.demo-modal__title{font-family:var(--font-display);font-size:1.8rem;color:var(--ink);margin-bottom:8px;font-weight:400;line-height:1.2}
.demo-modal__title em{font-style:italic;color:var(--accent-dark)}
.demo-modal__text{font-size:0.95rem;color:var(--ink-muted);line-height:1.6;margin-bottom:24px}
.demo-modal__price{font-family:var(--font-display);font-size:2.6rem;color:var(--ink);line-height:1;margin-bottom:4px}
.demo-modal__price small{font-size:1rem;color:var(--ink-muted);font-family:var(--font-body);font-weight:500}
.demo-modal__price-sub{font-size:0.85rem;color:var(--ink-muted);margin-bottom:24px}
.demo-modal__actions{display:flex;flex-direction:column;gap:8px}

/* "Here's your Reel" - centred Ship it tab content. Pricing/signup pitch
   moved to its own .reels-signup section below the demo. */
.demo__split-head{text-align:center}
.demo__split-title{font-family:var(--font-display);font-size:2rem;color:var(--ink);font-weight:400;line-height:1.15;margin-bottom:6px}
.demo__split-title em{font-style:italic;color:var(--accent-dark)}
.demo__split-sub{font-size:0.95rem;color:var(--ink-muted);line-height:1.5}

.demo__preview{width:100%;max-width:320px;margin:0 auto}
[data-tab-panel="ship"] .demo__preview{width:240px;max-width:240px;height:auto;aspect-ratio:9/16;max-height:none;border-radius:14px}
[data-tab-panel="ship"] .demo__preview-stack{display:flex;flex-direction:column;align-items:center;gap:12px;width:240px;max-width:100%}
[data-tab-panel="ship"] .demo__download{display:flex;flex-direction:row;gap:8px;margin:0;justify-content:center}
[data-tab-panel="ship"] .demo__download .btn{padding:8px 12px;font-size:0.86rem}
.demo__preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.demo__ship-preview-watermark{z-index:4}
.demo__preview .demo__outro{z-index:3;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.demo__preview .demo__outro-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 14px;opacity:0;pointer-events:none;transition:opacity 0.4s ease;text-align:center}
.demo__preview .demo__outro-scene.is-active{opacity:1;pointer-events:auto}
.demo__preview .demo__outro.visible{opacity:1;pointer-events:auto}

/* Signup section - the destination of "Get 7 Reels" from the demo,
   the hero secondary CTA, and the nav CTAs on this page. */
.reels-signup{padding:96px 0;background:var(--surface);text-align:center}
.reels-signup__head{max-width:720px;margin:0 auto 40px}
.reels-signup__head .section-title{margin:0}
.reels-signup__lead{font-size:1.05rem;color:var(--ink-muted);line-height:1.5;margin:14px 0 0;max-width:620px;margin-left:auto;margin-right:auto}
.reels-signup__list{list-style:none;text-align:left;margin:0 auto 36px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 36px;max-width:880px;justify-content:center}
@media(max-width:680px){.reels-signup__list{grid-template-columns:1fr;max-width:560px}}
.reels-signup__list li:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center}
.reels-signup__list li{display:flex;align-items:center;gap:10px;font-size:0.95rem;color:var(--ink);line-height:1.4;white-space:nowrap}
@media(max-width:520px){.reels-signup__list li{white-space:normal;align-items:flex-start}}
.reels-signup__list svg{width:16px;height:16px;color:var(--accent-dark);flex-shrink:0}
.reels-signup__cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:64px}
.reels-signup__price{font-family:var(--font-display);font-size:3rem;line-height:1.05;color:var(--ink);font-weight:400}
.reels-signup__price small{font-size:1.1rem;color:var(--ink-muted);font-family:var(--font-body);font-weight:500;margin-left:4px}
.reels-signup__sub{font-size:0.95rem;color:var(--ink-muted);margin-bottom:10px}
.reels-signup__stats-lead{max-width:720px;margin:0 auto 24px;padding-top:32px;border-top:1px dashed var(--border)}
.reels-signup__stats-lead h3{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;line-height:1.15;color:var(--ink);margin:0}
.reels-signup__stats-lead h3 em{font-style:italic;color:var(--accent-dark)}
.reels-signup__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:0 auto}
@media(max-width:680px){.reels-signup__stats{grid-template-columns:1fr;gap:12px}}
.reels-signup__stat{position:relative;background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px 20px;display:flex;flex-direction:column;gap:6px;align-items:center;box-shadow:var(--shadow-sm)}
.reels-signup__stat-info{position:absolute;top:10px;right:10px;width:14px;height:14px}
.reels-signup__stat-num{font-family:var(--font-display);font-size:2.8rem;font-weight:400;line-height:1;color:var(--accent-dark)}
.reels-signup__stat-lbl{font-size:0.92rem;color:var(--ink-muted);line-height:1.3}

/* FAQ */
.reels-faq{padding:100px 0;background:#fff}
.reels-faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color 0.2s}
.faq__item.active{border-color:var(--accent)}
.faq__question{width:100%;text-align:left;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;background:none;border:none;font-family:inherit}
.faq__question::after{content:'+';font-size:1.6rem;color:var(--accent-dark);transition:transform 0.2s;line-height:1;font-weight:300}
.faq__item.active .faq__question::after{transform:rotate(45deg)}
.faq__answer{padding:0 24px;font-size:0.92rem;color:var(--ink-muted);line-height:1.7;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height 0.25s ease,padding 0.25s ease}
.faq__item.active .faq__answer{max-height:400px;padding-top:0;padding-bottom:20px}

/* Final CTA strip - accent-dark blue contrasts cleanly with the dark footer below */
.reels-final-cta{padding:80px 0;background:var(--accent-dark);color:#fff;text-align:center;position:relative;overflow:hidden}
.reels-final-cta::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 60%);pointer-events:none}
.reels-final-cta > *{position:relative;z-index:1}
.reels-final-cta h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:400;margin-bottom:12px}
.reels-final-cta h2 em{font-style:italic;color:#fff;opacity:0.85}
.reels-final-cta p{color:rgba(255,255,255,0.85);margin-bottom:28px;font-size:1.05rem}
.reels-final-cta .btn--primary{background:#fff;color:var(--accent-dark);box-shadow:0 6px 20px rgba(0,0,0,0.18)}
.reels-final-cta .btn--primary:hover{background:var(--accent-soft);color:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.22)}
.reels-final-cta .guarantee-note{color:rgba(255,255,255,0.78)}
.reels-final-cta .guarantee-note svg path{stroke:rgba(255,255,255,0.85)!important}

/* Watermark mode (left) + tint (right) on a single flex row */
.demo__watermark-bars{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
.demo__watermark-tint{margin-left:auto}
.demo__watermark-mode,.demo__watermark-tint{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border-light);border-radius:100px;padding:4px;width:fit-content}
.demo__watermark-mode button,.demo__watermark-tint button{padding:6px 14px;background:none;border:none;border-radius:100px;font-family:inherit;font-size:0.82rem;font-weight:600;color:var(--ink-muted);cursor:pointer;transition:all 0.18s;white-space:nowrap}
@media(max-width:600px){
  .demo__watermark-mode,.demo__watermark-tint{padding:2px;gap:2px}
  .demo__watermark-mode button,.demo__watermark-tint button{padding:4px 9px;font-size:0.72rem}
}
/* Very narrow phones (down to 320px) - shrink the toggle further and let it
   wrap onto its own line under the block label if there's still no room. */
@media(max-width:400px){
  .demo__watermark-mode button,.demo__watermark-tint button{padding:3px 7px;font-size:0.65rem;letter-spacing:0}
  .demo__brand-block-header{row-gap:6px}
  .demo__brand-block-header .demo__watermark-tint{margin-left:0}
}
@media(max-width:340px){
  .demo__watermark-mode button,.demo__watermark-tint button{padding:3px 6px;font-size:0.6rem}
}
.demo__watermark-mode button:hover,.demo__watermark-tint button:hover{color:var(--ink)}
.demo__watermark-mode button.is-selected,.demo__watermark-tint button.is-selected{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}

/* Original-colour mode - drop the whitewash filter on every preview surface */
.is-color-watermark .demo__outro-watermark-corner img,
.is-color-watermark .demo__outro-tile-watermark img,
.is-color-watermark .demo__text-preview-watermark img{filter:none}

/* Pre-processed white watermark (canvas-knocked-out background) - already
   white pixels on transparent, so skip the brightness/invert filter that
   would turn opaque 2-colour logos into a solid white blob. */
.demo__outro-watermark-corner img.is-processed,
.demo__outro-tile-watermark img.is-processed,
.demo__text-preview-watermark img.is-processed{filter:none}

/* Status text under brand inputs is suppressed - the form is self-evident
   and inline status lines push the layout around when they appear. */
.demo__ig-status,.demo__field-status{display:none!important}

/* Tile watermark - same proportional rules as the outro corner so it
   shows up in the exact same relative spot regardless of tile size */
.demo__outro-tile-watermark{position:absolute;top:8%;right:14%;z-index:4;opacity:0;transition:opacity 0.25s;pointer-events:none}
.demo__outro-tile-watermark.has-logo{opacity:1}
.demo__outro-tile-watermark img{height:8cqh;max-width:30cqw;width:auto;display:block;object-fit:contain;filter:brightness(0) invert(1)}

/* Text-preview-card position+container-type are defined above; just the watermark here */
.demo__text-preview-watermark{position:absolute;top:8%;right:14%;opacity:0;transition:opacity 0.25s;pointer-events:none}
.demo__text-preview-watermark.has-logo{opacity:1}
.demo__text-preview-watermark img{height:8cqh;max-width:30cqw;width:auto;display:block;object-fit:contain;filter:brightness(0) invert(1)}