.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:#222;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}
.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}
.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)}