/* v4 ONE story. Token-based (base.html :root, SPEC v3 section 1) so Design's SPEC v4 can restyle without touching markup.
   TODO(Design SPEC v4): replace the placeholder scene styling below with Design's visuals. */
.s4{--s4-card:var(--glass-bg-solid,#122038);--s4-line:var(--glass-border,rgba(255,255,255,.08));--s4-grey:#8b95a5;--s4-grey-bg:rgba(139,149,165,.12);
  padding:4.5rem 0 2rem;position:relative}
.s4-head{text-align:center;margin-bottom:2rem}
.s4-head h2{margin:.6rem auto 0;font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--text-primary);max-width:40rem;line-height:1.1}
/* ---- live (JS + motion allowed) vs static (no JS / reduced motion) ---- */
.s4-live{display:none;position:relative;height:calc(var(--beats) * 85vh)}
.s4.s4-on .s4-live{display:block}
.s4.s4-on .s4-static{display:none}
.s4-anchor{position:absolute;left:0;width:1px;height:1px}
.s4-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding-top:4rem}
.s4-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:center;width:100%}
.s4-copycol{display:grid}
.s4-copy{grid-area:1/1;opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity var(--dur-2) var(--ease-out-expo),transform var(--dur-3) var(--ease-out-expo),visibility 0s linear var(--dur-2)}
.s4-copy.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.s4-act2{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 .8rem}
.s4-kick{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--brass-soft);margin:0 0 .5rem}
.s4-h{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.12;color:var(--text-primary);margin:0}
.s4-b{margin:.8rem 0 0;color:var(--text-secondary);font-size:var(--fs-lg);line-height:1.55}
.s4-cap{margin:1rem 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
.s4-cap span{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-secondary);border:1px solid var(--s4-line);border-radius:999px;padding:.1rem .5rem;margin-right:.35rem}
.s4-links{margin:.9rem 0 0;display:flex;gap:1.2rem;flex-wrap:wrap}
.s4-links a{color:var(--brass-soft);font-weight:600;font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px}
.s4-copy .btn,.s4-fcopy .btn{margin-top:1.2rem;color:var(--btn-primary-text);background:var(--btn-primary-bg)}
/* ---- stage ---- */
.s4-stage{position:relative;aspect-ratio:16/11;border-radius:22px;background:radial-gradient(120% 90% at 30% 0%,#17294a 0%,#0c1830 60%,#09142a 100%);border:1px solid var(--s4-line);box-shadow:var(--shadow-3);overflow:hidden}
.s4-label{position:absolute;left:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#c9cfd8;background:rgba(8,16,30,.66);border:1px solid var(--s4-line);border-radius:999px;padding:5px 11px 5px 9px}
.s4-label i{width:6px;height:6px;border-radius:50%;background:var(--brass-soft)}
.s4-rail{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:4px;margin:0;padding:4px;list-style:none;background:rgba(8,16,30,.66);border:1px solid var(--s4-line);border-radius:999px;opacity:0;transition:opacity var(--dur-2) var(--ease-out-expo)}
.s4-rail li{font-size:11px;font-weight:600;color:var(--text-muted);padding:4px 10px;border-radius:999px}
.s4-rail li.on{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.s4-rail li.loop{box-shadow:0 0 0 1px var(--brass-soft) inset;color:var(--brass-soft)}
.s4-stage[data-act="loop"] .s4-rail,.s4-stage.is-static .s4-rail{opacity:1}
.s4-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:3.4rem 1.6rem 3.2rem;opacity:0;visibility:hidden;transform:scale(.98);transition:opacity var(--dur-3) var(--ease-out-expo),transform var(--dur-3) var(--ease-out-expo),visibility 0s linear var(--dur-3)}
.s4-scene.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.s4-stage.is-static{aspect-ratio:auto;min-height:20rem}
.s4-stage.is-static .s4-scene{position:relative;opacity:1;visibility:visible;transform:none;min-height:20rem}
/* ---- shared scene bits ---- */
.s4-chat,.s4-dash,.s4-sheet,.s4-rules,.s4-retest,.s4-cart{width:min(100%,30rem);background:var(--s4-card);border:1px solid var(--s4-line);border-radius:16px;padding:1rem;box-shadow:var(--shadow-2);color:var(--text-primary);font-size:var(--fs-sm)}
.s4-chat-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:.8rem}
.s4-engines{display:inline-flex;gap:5px}
.s4-engines .engine-tile{width:24px;height:24px;border-radius:7px;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.s4-engines .engine-tile img{width:15px;height:15px}.s4-engines .engine-tile.is-app-icon img{width:100%;height:100%;border-radius:7px}
.s4-scene.on .s4-engines .engine-tile{animation:s4pulse .9s var(--ease-out-expo) calc(var(--i) * 120ms + 200ms) 1 both}
@keyframes s4pulse{0%{transform:scale(1)}40%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(226,195,155,.25)}100%{transform:scale(1)}}
.s4-bubble{margin-left:auto;max-width:85%;background:#1f3357;border-radius:14px 14px 4px 14px;padding:.7rem .9rem;font-size:var(--fs-base)}
.s4-bubble-sm{font-size:var(--fs-sm);margin-bottom:.8rem}
.s4-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;border-radius:999px;padding:.15rem .55rem;border:1px solid}
.s4-chip.ok{color:var(--status-live);background:var(--status-live-bg);border-color:var(--status-live-border)}
.s4-chip.unk{color:var(--status-unknown);background:var(--status-unknown-bg);border-color:var(--status-unknown-border)}
.s4-chip.grey{color:var(--s4-grey);background:var(--s4-grey-bg);border-color:rgba(139,149,165,.3)}
.s4-chip.fit{color:var(--text-secondary);background:rgba(255,255,255,.05);border-color:var(--s4-line)}
.s4-ph{display:inline-block;width:28px;height:28px;border-radius:8px;background:var(--s4-grey-bg);border:1px dashed rgba(139,149,165,.35);flex:none}
.s4-ph.wide{width:100%;height:4.5rem}
.s4-fs{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);border:1px dashed var(--s4-line);border-radius:999px;padding:.1rem .45rem;white-space:nowrap}
/* beat 2 */
.s4-answer{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.s4-row{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem;border-radius:12px;border:1px solid var(--s4-line)}
.s4-row.is-brand{border-color:var(--status-live-border);background:rgba(79,191,152,.06)}
.s4-row.is-other{color:var(--s4-grey)}
.s4-rank{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.s4-row.is-brand .s4-rank{background:var(--brass-soft);color:#0a1628}
.s4-rbody{display:grid;gap:.25rem}.s4-rfacts{font-size:var(--fs-xs);color:inherit;opacity:.9}.s4-chips{display:flex;gap:.35rem;flex-wrap:wrap}
/* beat 3 */
.s4-split{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.s4-pane{background:var(--s4-card);border:1px solid var(--s4-line);border-radius:14px;padding:.8rem;display:grid;gap:.6rem;align-content:start}
.s4-pane.is-other{color:var(--s4-grey)}
.s4-pane.is-brand{border-color:var(--status-live-border)}
.s4-pane-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.s4-pane.is-brand .s4-pane-label{color:var(--brass-soft)}
.s4-generic{display:grid;gap:.5rem}.s4-lines{display:grid;gap:.3rem}.s4-lines i{height:6px;border-radius:3px;background:var(--s4-grey-bg)}.s4-lines i+i{width:60%}
.s4-pdp{display:grid;gap:.5rem}
.s4-cmp{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.s4-cmp .c{border:1px solid var(--s4-line);border-radius:10px;padding:.5rem;display:grid;gap:.15rem;font-size:var(--fs-xs)}
.s4-cmp .c.on{border-color:var(--brass-soft)}.s4-cmp small{color:var(--text-muted)}
.s4-note{margin:0;font-size:11px;color:var(--text-muted)}
/* beat 2/3 v4.1 */
.s4-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s4-chip.link{color:var(--brass-soft);background:rgba(226,195,155,.1);border-color:rgba(226,195,155,.35)}
.s4-split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:stretch}
.s4-left{display:grid;gap:.6rem;align-content:start}
.s4-banner{height:.9rem;border-radius:4px;background:var(--s4-grey-bg)}
.s4-grid4{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}.s4-grid4 i{height:1.6rem;border-radius:6px;background:var(--s4-grey-bg)}
.s4-stock{display:grid;gap:.4rem}.s4-ph.photo{width:100%;height:2.6rem}
.s4-stock .sz{min-width:1.6rem;text-align:center;border:1px solid rgba(139,149,165,.3);border-radius:6px;font-size:10px;padding:.1rem .3rem}
.s4-stock .sz.on{background:var(--s4-grey);color:#0a1628}
.s4-trip{gap:.4rem;font-size:11px;line-height:1.35;background:#f6f4f0;color:#11151b;border-color:transparent}
.s4-trip .s4-pane-label{color:#7a5a32}
.s4-why{font-size:10px;color:#3d4a5c;background:rgba(10,22,40,.06);border:1px solid rgba(10,22,40,.12);border-radius:8px;padding:.2rem .45rem}
.s4-why b{color:#0a1628;margin-right:.2rem}
.s4-trip-h{margin:0;font-size:var(--fs-base);font-weight:800;letter-spacing:var(--tracking-snug);color:#0a1628}
.s4-trip-sub{margin:0;color:#3d4a5c}
.s4-trip-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.s4-box{border:1px solid rgba(10,22,40,.12);border-radius:8px;padding:.35rem .45rem;display:grid;gap:.2rem}
.s4-box-l{font-size:10px;font-weight:700;letter-spacing:.02em;color:#0a1628}
.s4-box ul{margin:0;padding-left:.9rem;display:grid;gap:.1rem}
.s4-route{grid-template-columns:auto 1fr 1fr;align-items:start;gap:.4rem}.s4-route .c{border:1px solid rgba(10,22,40,.12);border-radius:6px;padding:.2rem .35rem}.s4-route .c.on{border-color:#c89968}
.s4-fitline{margin:0;color:#2b3646}
.s4-trip .s4-chip.unk{justify-self:start;color:#8a6414;background:rgba(220,176,92,.18);border-color:#dcb05c}
.s4-trip .s4-chip.fit{color:#2b3646;background:rgba(10,22,40,.05);border-color:rgba(10,22,40,.12)}
.s4-addons{display:flex;gap:.3rem;flex-wrap:wrap}
.s4-trip .s4-note{color:#5b6576;font-size:10px}
.s4-trip .s4-fs{color:#5b6576;border-color:rgba(10,22,40,.2)}
.s4-muted{font-weight:500;color:var(--text-muted)}
.s4-scene[data-key="clicks"]{padding:3.2rem 1rem 3rem;align-items:center}
/* beat 4 */
.s4-q{display:flex;justify-content:space-between;gap:.6rem;align-items:center;font-size:var(--fs-xs);color:var(--text-secondary);margin-bottom:.7rem}
.s4-cards{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.7rem}
.s4-card{border:1px solid var(--s4-line);border-radius:10px;padding:.6rem;display:grid;gap:.35rem;justify-items:start}
.s4-opps{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:var(--fs-xs)}
.s4-opps li{display:flex;gap:.5rem;align-items:baseline}
.s4-pri{font-size:10px;font-weight:700;border-radius:6px;padding:.05rem .4rem;flex:none}
.s4-pri.pri-high{background:rgba(226,195,155,.18);color:var(--brass-soft)}.s4-pri.pri-medium{background:rgba(255,255,255,.08);color:var(--text-secondary)}
/* beat 5 */
.s4-sheet-h{font-weight:700;margin-bottom:.6rem}
.s4-fact{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;padding:.45rem 0;border-top:1px solid var(--s4-line)}
.s4-fv{font-weight:600}.s4-src{font-size:11px;color:var(--text-muted)}
.s4-toggle{width:30px;height:17px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:background var(--dur-1)}
.s4-toggle i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform var(--dur-2) var(--ease-spring)}
.s4-scene.on .s4-toggle.on,.is-static .s4-toggle.on{background:var(--status-live)}
.s4-scene.on .s4-toggle.on i,.is-static .s4-toggle.on i{transform:translateX(13px)}
.s4-scene.on .s4-fact .s4-toggle,.s4-scene.on .s4-fact .s4-toggle i{transition-delay:calc(var(--i) * 140ms + 250ms)}
.s4-fact.is-unk{grid-template-columns:auto auto 1fr;color:var(--status-unknown)}
/* beat 6 */
.s4-rule{border:1px solid var(--brass-soft);border-radius:12px;padding:.7rem;line-height:1.45;margin-bottom:.7rem}
.s4-tray{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.s4-asset{display:inline-flex;gap:.4rem;align-items:center;font-size:var(--fs-xs);border:1px solid var(--s4-line);border-radius:10px;padding:.3rem .5rem .3rem .3rem}
.s4-asset .s4-ph{width:22px;height:22px;border-style:solid;border-color:var(--status-live-border);background:var(--status-live-bg)}
.s4-btns{display:flex;gap:.4rem}.s4-btn{font-size:var(--fs-xs);font-weight:600;border:1px solid var(--s4-line);border-radius:999px;padding:.25rem .7rem}
/* beat 7 */
.s4-cart{display:grid;gap:.8rem}
.s4-sizes{display:flex;gap:.35rem}.s4-sizes .sz{min-width:2rem;text-align:center;border:1px solid var(--s4-line);border-radius:8px;padding:.25rem .4rem;font-size:var(--fs-xs)}
.s4-add{display:inline-flex;justify-content:center;border-radius:10px;background:#f4f1ea;color:#0a1628;font-weight:700;padding:.5rem}
.s4-toast{border:1px solid var(--status-live-border);background:rgba(79,191,152,.08);border-radius:12px;padding:.6rem .7rem;font-weight:600;transform:translateY(8px);opacity:0;transition:opacity var(--dur-2) var(--ease-out-expo) .5s,transform var(--dur-3) var(--ease-spring) .5s}
.s4-scene.on .s4-toast,.is-static .s4-toast{opacity:1;transform:none}
/* beat 8 */
.s4-retest{display:grid;gap:.6rem}.s4-ba{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.s4-arrow{color:var(--text-muted)}
/* beat 9 */
.s4-end-h{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:var(--tracking-tight);text-align:center;color:var(--text-primary);margin:0}
/* step buttons */
.s4-steps{display:flex;gap:.35rem;justify-content:flex-end}
.s4-step{width:2rem;height:2rem;border-radius:999px;border:1px solid var(--s4-line);background:rgba(255,255,255,.03);color:var(--text-muted);font-size:var(--fs-xs);font-weight:600;cursor:pointer}
.s4-step[aria-current="step"]{background:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:transparent}
.s4-step:focus-visible{outline:2px solid var(--brass-soft);outline-offset:2px}
/* ---- static frames ---- */
.s4-static{list-style:none;padding-left:1.5rem;padding-right:1.5rem;display:grid;gap:2.5rem;margin-top:0}
.s4-frame{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:center}
.s4-num{font-size:var(--fs-xs);color:var(--text-muted);margin:0 0 .4rem}
/* ---- mobile ---- */
@media (max-width:899px){
  .s4-pin{padding-top:3.6rem;justify-content:flex-start;gap:.8rem}
  .s4-grid{grid-template-columns:1fr;gap:1rem}
  .s4-copycol{min-height:12.5rem;align-content:start}
  .s4-b{font-size:var(--fs-base)}
  .s4-stage{aspect-ratio:auto;height:min(52vh,26rem)}
  .s4-scene{padding:3rem .8rem 2.8rem}
  .s4-split{grid-template-columns:1fr;gap:.5rem}               /* Brand B, Brand C first; Valdren last */
  .s4-left{grid-template-columns:1fr 1fr}
  .s4-live .s4-scene[data-key="clicks"]{align-items:flex-start;overflow-y:auto}
  .s4-trip-grid{grid-template-columns:1fr}
  .s4-split .s4-pane.is-other .s4-ph.wide{height:2.2rem}
  .s4-rail li{padding:3px 7px;font-size:10px}
  .s4-steps{justify-content:center}
  .s4-step{width:1.8rem;height:1.8rem}
  .s4-frame{grid-template-columns:1fr;gap:1rem}
  .s4-chat,.s4-dash,.s4-sheet,.s4-rules,.s4-retest,.s4-cart{font-size:var(--fs-xs)}
}
@media (prefers-reduced-motion: reduce){ .s4 *{animation:none !important;transition:none !important} }
/* Beat 3 is dense (v4.1 trip page). Until Design's SPEC v4 visual lands, scale the split to fit the stage. TODO(Design SPEC v4). */
.s4-live .s4-scene[data-key="clicks"] .s4-split{zoom:.72}
.s4-box ul li{margin:0}
@media (min-width:1400px){ .s4-live .s4-scene[data-key="clicks"] .s4-split{zoom:.76} }
@media (max-width:899px){ .s4-live .s4-scene[data-key="clicks"]{overflow:hidden;align-items:flex-start} .s4-live .s4-scene[data-key="clicks"] .s4-split{zoom:.6} }
.s4-url{font-size:10px;color:var(--text-muted);font-weight:500;letter-spacing:0;text-transform:none}
.s4-trip .s4-url{color:#5b6576}
.s4-route .c em{display:block;font-style:normal;color:#5b6576}
.s4-sheet-h small{display:block;font-weight:500;font-size:11px;color:var(--text-muted)}
.s4-cartlist{margin:0;padding-left:1rem;display:grid;gap:.2rem}
.s4-stock small{font-size:10px;color:var(--s4-grey);align-self:center;margin-left:.3rem}
.s4-banner{font-size:10px;font-weight:700;color:var(--s4-grey);padding:.1rem .4rem;height:auto}
.s4-left-label{font-size:10px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--s4-grey)}
@media (max-width:899px){.s4-left-label{grid-column:1/-1}}
/* mobile: beats 2 and 5 are taller than the 390px stage, so scale them to fit (placeholder until SPEC v4 visuals) */
@media (max-width:899px){ .s4-live .s4-scene[data-key="answers"]>*,.s4-live .s4-scene[data-key="approve"]>*{zoom:.74} .s4-live .s4-scene[data-key="answers"],.s4-live .s4-scene[data-key="approve"]{align-items:center;overflow:hidden} }
/* v4.2 beat 2: gateway request log (rows animate in one by one) + inference chip; beat 1 "what she typed" label */
.s4-typed{display:block;margin-top:.55rem;font-size:11px;color:var(--s4-grey)}
.s4-log{width:min(100%,460px);border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-2);padding:14px 16px}
.s4-log-h{font-size:12px;font-weight:600;color:#fff;margin-bottom:8px}
.s4-log-rows{list-style:none;margin:0;padding:0;font:500 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}
.s4-lr{display:grid;grid-template-columns:minmax(0,1.2fr) 14px minmax(0,1fr);gap:6px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.82)}
.s4-lr .ar{color:var(--accent-end)}
.s4-lr .v{color:#fff}.s4-lr .ok{color:var(--status-live)}
.s4-lr.is-not_requested{opacity:.5}.s4-lr.is-not_requested small{color:var(--s4-grey)}
.s4-on .s4-scene[data-key="gateway"] .s4-lr{opacity:0;transform:translateY(6px);transition:opacity var(--dur-2) var(--ease-out-quart),transform var(--dur-2) var(--ease-out-quart);transition-delay:calc(var(--i) * 140ms)}
.s4-on .s4-scene[data-key="gateway"].on .s4-lr{opacity:1;transform:none}
.s4-on .s4-scene[data-key="gateway"].on .s4-lr.is-not_requested{opacity:.5}
.s4-infer{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border-radius:10px;background:rgba(200,153,104,.08);border:1px solid rgba(200,153,104,.3)}
.s4-infer-l{font-size:10px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--s4-grey);width:100%}
.s4-infer-t{font-size:13px;color:#fff}
.s4-trip{position:relative}
.s4-trip>.pilot-badge{position:absolute;top:8px;right:8px}
.s4-rail .pilot-badge{margin-left:4px;font-size:8px;padding:0 5px}
.s4-h .pilot-badge{vertical-align:middle;font-size:11px}
@media (max-width:899px){ .s4-live .s4-scene[data-key="gateway"]>*{zoom:.86} }
@media (prefers-reduced-motion:reduce){ .s4-on .s4-scene[data-key="gateway"] .s4-lr{transition:none;opacity:1;transform:none} }
.s4-trip>.pilot-badge{background:transparent;color:#0a1628;border-color:var(--accent-end)}  /* light page: navy text, brass outline (pilot spec) */
@media (max-width:899px){ .s4-live .s4-scene[data-key="answers"]{align-items:flex-start;padding-top:2.4rem} }
/* beat 4 (two clicks): the pinned "Fictional brands" pill moves into the left column (Brand B/C), never over the Valdren frame */
.s4-stage[data-key="clicks"]>.s4-label{display:none}
.s4-label.s4-label-inline{position:static;align-self:flex-start;margin-top:auto;white-space:nowrap}
@media (max-width:899px){ .s4-label.s4-label-inline{margin:2px 0 4px} }
@media (max-width:899px){ .s4-label.s4-label-inline{grid-column:1/-1} }
/* Design 11:02: gateway log column headers, 11-12px muted #9ca3af (same grid as the rows) */
.log-cols{display:grid;gap:6px;font-size:11px;font-weight:500;line-height:1.3;color:#9ca3af;letter-spacing:.02em}
.s4-log-cols{grid-template-columns:minmax(0,1.2fr) 14px minmax(0,1fr);padding:2px 0 4px}

/* ===== Design SPEC v4 desktop port (>=1100px; Design 11:45 moved the 4-card breakpoint to 1100): canvas stage, rail outside the canvas,
   label above the stage, act-grouped steps. Below 1100px the section is hidden and partials/story_mobile.html (4 cards) shows.
   No JS / reduced motion (>=1100px): the 10 static frames, each with its canvas scene (CSS-only scale below). ===== */
.s4-canvas,.s4-dlabel,.s4-drail,.s4-count{display:none}
.s4-act{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.s4-act-l{display:none;font-size:.66rem;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s4-act.cur .s4-act-l{color:var(--brass-soft)}
.s4-act-row{display:flex;gap:.3rem}
.s4-step{position:relative;overflow:hidden}
.s4-fill{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#c89968,#e2c39b);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.s4-steps{display:flex;gap:.9rem;align-items:flex-end}
@media (max-width:899px){ .s4-steps{gap:.3rem} .s4-fill{display:none} }
@media (min-width:1100px){
  .s4.s4-js .s4-live{height:calc(var(--beats) * 100vh)}
  .s4.s4-js .s4-live .wrap{max-width:80rem;padding:0 2.5rem}
  .s4.s4-js .s4-grid{grid-template-columns:minmax(16rem,21.5rem) minmax(0,1fr);gap:2.5rem}
  .s4.s4-js .s4-copy .s4-cap{display:none} /* §3.3: 'How it works' captions live in the canvas on desktop */
  .s4.s4-js .s4-count{display:inline-block;font-size:.72rem;font-weight:600;color:#e6e9ee;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.15rem .55rem;margin:0 0 .8rem}
  .s4.s4-js .s4-steps{display:grid;grid-template-columns:minmax(16rem,21.5rem) minmax(0,4fr) minmax(0,5fr) minmax(4.5rem,1fr);column-gap:.9rem;align-items:end}
  .s4.s4-js .s4-steps::before{content:""}
  .s4.s4-js .s4-act[data-act="moment"]{margin-left:1.6rem}
  .s4.s4-js .s4-act[data-act="promise"] .s4-act-l{overflow:visible;text-align:right;direction:rtl}
  .s4.s4-js .s4-step{height:2rem;width:auto;border-radius:8px}
  .s4.s4-js .s4-step[aria-current]{border-color:rgba(200,153,104,.75);color:#f3f5f8;background:rgba(200,153,104,.08)}
  .s4.s4-js .s4-stagecol{display:flex;flex-direction:column;align-items:flex-end}
  .s4.s4-js .s4-stagecol>*{width:100%;max-width:calc((100vh - 4rem - 8.5rem) * 16 / 9)}
  .s4.s4-js .s4-stage{aspect-ratio:16/9;background:#070f1c}
  .s4.s4-js .s4-stage>.s4-scene,.s4.s4-js .s4-stage>.s4-label,.s4.s4-js .s4-stage>.s4-rail{display:none}
  .s4.s4-js .s4-canvas{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit}
  .s4.s4-js .s4-dlabel{display:inline-flex;align-items:center;gap:.45rem;width:auto;align-self:flex-end;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:#c9cfd8;background:rgba(8,16,30,.66);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.3rem .7rem .3rem .55rem;margin:0 0 1rem;box-shadow:var(--hairline)}
  .s4.s4-js .s4-dlabel i{width:6px;height:6px;border-radius:50%;background:var(--brass-soft)}
  .s4.s4-js .s4-copycol{grid-template-rows:auto 1fr;align-content:start}
  .s4.s4-js .s4-drail{display:block;grid-area:1/1;margin-bottom:1rem}
  .s4.s4-js .s4-copy{grid-area:2/1}
  .s4.s4-js .s4-steps{max-width:none}
    .s4.s4-js .s4-act-l{display:block}
  .s4.s4-js .s4-act-row .s4-step{flex:1;min-width:0}
  /* static frames (reduced motion): one canvas scene per frame, Design's static rail above the copy */
  .s4.s4-js .s4-stage.is-static{aspect-ratio:16/9;min-height:0}
  .s4.s4-js .s4-stage.is-static>.s4-scene{display:none}
  .s4.s4-js .s4-fcopy .s4-drail{display:block;margin-bottom:.8rem}
  .s4.s4-js .s4-stage[data-key="clicks"]>.s4-label{display:none}
}
/* SPEC v4 section 3.7/6 (Design loop.css 11:27): desktop rail extends 2.75rem past the copy column with 10.5px labels -> >=18px between labels. */
/* PR grid: copy column 21.5rem + 2.5rem gap (stage stays >=816px at 1280), so the rail extends 2.5rem - 4px (4px clear of the stage). */
@media (min-width:1100px){ .s4.s4-js .s4-copycol .s4-drail .rail{width:calc(100% + 2.5rem - 4px);margin-right:calc(-2.5rem + 4px)} .s4 .rail .rn .t{font-size:10.5px} }

/* Static frames without JS (Design 11:45 call 4): the canvas scene replaces the placeholder scenes at >=1100px. */
@media (min-width:1100px){
  .s4 .s4-static .s4-stage.is-static{aspect-ratio:16/9;min-height:0;background:#070f1c}
  .s4 .s4-static .s4-stage.is-static>.s4-scene,.s4 .s4-static .s4-stage.is-static>.s4-label,.s4 .s4-static .s4-stage.is-static>.s4-rail{display:none}
  .s4 .s4-static .s4-canvas{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit}
  .s4 .s4-fcopy .s4-drail{display:block;margin-bottom:.8rem}
  .s4 .s4-fcopy .s4-cap{display:none} /* 'How it works' lives in the canvas */
}
/* CSS-only canvas scale for no-JS: the stage is a size container and --s steps in 24px increments (js/v4-loop.js fit() sets the exact
   value inline when JS runs, which wins). --lf mirrors fit(): the legibility counter-scale below scale .85. */
.s4 .s4-stage{container-type:inline-size}
@container (min-width:480px){ .s4 .v4c{--s:0.5000;--lf:1.300} }
@container (min-width:504px){ .s4 .v4c{--s:0.5250;--lf:1.300} }
@container (min-width:528px){ .s4 .v4c{--s:0.5500;--lf:1.300} }
@container (min-width:552px){ .s4 .v4c{--s:0.5750;--lf:1.300} }
@container (min-width:576px){ .s4 .v4c{--s:0.6000;--lf:1.300} }
@container (min-width:600px){ .s4 .v4c{--s:0.6250;--lf:1.300} }
@container (min-width:624px){ .s4 .v4c{--s:0.6500;--lf:1.300} }
@container (min-width:648px){ .s4 .v4c{--s:0.6750;--lf:1.259} }
@container (min-width:672px){ .s4 .v4c{--s:0.7000;--lf:1.214} }
@container (min-width:696px){ .s4 .v4c{--s:0.7250;--lf:1.172} }
@container (min-width:720px){ .s4 .v4c{--s:0.7500;--lf:1.133} }
@container (min-width:744px){ .s4 .v4c{--s:0.7750;--lf:1.097} }
@container (min-width:768px){ .s4 .v4c{--s:0.8000;--lf:1.062} }
@container (min-width:792px){ .s4 .v4c{--s:0.8250;--lf:1.030} }
@container (min-width:816px){ .s4 .v4c{--s:0.8500;--lf:1.000} }
@container (min-width:840px){ .s4 .v4c{--s:0.8750;--lf:1.000} }
@container (min-width:864px){ .s4 .v4c{--s:0.9000;--lf:1.000} }
@container (min-width:888px){ .s4 .v4c{--s:0.9250;--lf:1.000} }
@container (min-width:912px){ .s4 .v4c{--s:0.9500;--lf:1.000} }
@container (min-width:936px){ .s4 .v4c{--s:0.9750;--lf:1.000} }
@container (min-width:960px){ .s4 .v4c{--s:1.0000;--lf:1.000} }
@container (min-width:984px){ .s4 .v4c{--s:1.0250;--lf:1.000} }
@container (min-width:1008px){ .s4 .v4c{--s:1.0500;--lf:1.000} }
@container (min-width:1032px){ .s4 .v4c{--s:1.0750;--lf:1.000} }
@container (min-width:1056px){ .s4 .v4c{--s:1.1000;--lf:1.000} }
@container (min-width:1080px){ .s4 .v4c{--s:1.1250;--lf:1.000} }
@container (min-width:1104px){ .s4 .v4c{--s:1.1500;--lf:1.000} }
@container (min-width:1128px){ .s4 .v4c{--s:1.1750;--lf:1.000} }
@container (min-width:1152px){ .s4 .v4c{--s:1.2000;--lf:1.000} }
@container (min-width:1176px){ .s4 .v4c{--s:1.2250;--lf:1.000} }
@container (min-width:1200px){ .s4 .v4c{--s:1.2500;--lf:1.000} }
@container (min-width:1224px){ .s4 .v4c{--s:1.2750;--lf:1.000} }
/* Design 11:45 call 3: 'Why this page' pill >=12px everywhere. */
.s4-why b{font-size:12px}
/* SPEC v4 section 3.5: the /try links also sit under Join waitlist on beat 10 (secondary text links). */
.s4-links-sec{margin-top:.8rem}
.s4-links-sec a{color:var(--text-secondary);font-weight:500}