/* /sample/how-it-works — the three animated simulations moved off the landing page
   under the eight-section scheme (her go, 2026-09-08). Page-specific by design:
   the rules no other surface renders. */
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}

  section{padding:74px 0}
  .sec-head{max-width:680px;margin-bottom:38px}
  .sec-head h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;margin-top:12px}
  .sec-head p{color:var(--ink-soft);font-size:17px;margin-top:14px}

  .anim-toggle{display:inline-block;font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;padding:0;margin-top:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
  .anim-toggle:hover{color:var(--ink-soft)}
  .shot-frame{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden}
  .shot-frame .sf-bar,.sim .sf-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
  .shot-frame .sf-bar i,.sim .sf-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
  .shot-frame img{display:block;width:100%;height:auto}
  .shot-cap{font-size:15px;font-weight:600;color:var(--ink-soft);margin:14px auto 0;text-align:center;max-width:560px;line-height:1.5;text-wrap:balance} /* captions carry the value message — never hide them in small grey */
  .fade-init{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--fd,0ms)}
  .fade-init.inview{opacity:1;transform:none}
  /* STEPS — layout lives in .step-row (screenshot rows); see below */
  ol.steps{list-style:none;margin:0;padding:0}

  .sim{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden}
  .sim.sim-hold *{animation-play-state:paused!important} /* JS-added: scene waits at frame 0 until scrolled into view (audit R1: D5); no-JS pages run from load */
  .sim .sim-stage{position:relative;padding:16px}
  .sim-jd .sim-stage{height:330px}
  .jd-paste{position:absolute;inset:16px;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:14px 16px;opacity:0;animation:simJdPaste 12s ease infinite}
  .jp-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .jd-doc{user-select:none;color:var(--ink-soft)}
  .jd-doc b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:3px}
  .jd-doc em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-bottom:10px}
  .jd-doc p{font-size:11px;line-height:1.6;margin:0 0 9px}
  .jd-scan{position:absolute;left:28px;right:28px;top:60px;height:5px;border-radius:3px;opacity:0;z-index:2;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    box-shadow:0 6px 18px rgba(13,148,136,.35),0 2px 6px rgba(13,148,136,.25);animation:simJdScan 12s linear infinite}
  .jd-card{position:absolute;inset:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-sm);overflow:hidden;opacity:1;animation:simJdCard 12s ease infinite} /* base=1: completed scene shows the card; the keyframe animates it from 0 */
  .jc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .jc-title{flex:1;user-select:none}
  .jc-title b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
  .jc-title i{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:1px}
  .jc-line{user-select:none;font-size:10.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
  .jc-verdict{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--verdict-ink);background:var(--verdict-bg);border:1px solid var(--verdict-border);border-radius:999px;padding:3px 10px;animation:simJdVerdict 12s ease infinite}
  .jc-score{font-size:42px;font-weight:800;color:var(--accent-deep);line-height:1;animation:simJdScore 12s ease infinite}
  .jc-score span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:7px}
  .jc-subs{display:flex;gap:10px;margin:14px 0}
  .jc-subs .js{flex:1;text-align:center;background:var(--bg);border:1px solid var(--line-soft);border-radius:9px;padding:9px 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
  .jc-subs .js b{display:block;font-size:18px;color:var(--ink);margin-bottom:2px}
  .jc-subs .js:nth-child(1){animation:simJdS1 12s ease infinite}
  .jc-subs .js:nth-child(2){animation:simJdS2 12s ease infinite}
  .jc-subs .js:nth-child(3){animation:simJdS3 12s ease infinite}
  .jc-rec{font-size:12.5px;line-height:1.5;color:var(--ink-soft);background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:9px 12px;animation:simJdRec 12s ease infinite}
  .jc-rec b{color:var(--ink)}
  @keyframes simJdPaste{0%{opacity:0;transform:translateY(10px)}5%,32%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(-8px)}}
  @keyframes simJdScan{0%,13%{transform:translateY(0);opacity:0}16%{opacity:1}29%{transform:translateY(140px);opacity:1}31%,100%{transform:translateY(140px);opacity:0}} /* fade at sweep end; travel ends at the last skeleton line (audit R3: D6, R4: D3) */
  @keyframes simJdCard{0%,33%{opacity:0;transform:translateY(20px)}41%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes simJdScore{0%,42%{opacity:0;transform:scale(.6)}48%,98%{opacity:1;transform:scale(1)}99.9%,100%{opacity:0}}
  @keyframes simJdVerdict{0%,51%{opacity:0;transform:scale(1.35)}56%,98%{opacity:1;transform:scale(1)}99.9%,100%{opacity:0}} /* the 64 owns its instant; the verdict answers it (audit R4: I6) */
  @keyframes simJdS1{0%,53%{opacity:0;transform:translateY(6px)}57%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes simJdS2{0%,57%{opacity:0;transform:translateY(6px)}61%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes simJdS3{0%,61%{opacity:0;transform:translateY(6px)}65%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes simJdRec{0%,66%{opacity:0}71%,98%{opacity:1}99.9%,100%{opacity:0}}
  .rf-stage{display:grid;grid-template-columns:1.04fr .96fr;gap:14px;height:436px} /* taller: the engine proposes BEFORE the user steers (founder redesign 2026-06-11) */
  .rf-chat{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:7px;overflow:clip;min-height:0}
  .rf-h{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
  .rf-msg{max-width:92%;border-radius:11px;padding:8px 11px;font-size:12.5px;line-height:1.45}
  .rf-user{align-self:flex-end;background:var(--accent-deep);color:#fff;font-weight:600;animation:simRfUser 12s ease infinite}
  .rf-typing{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 12px;display:flex;gap:4px;opacity:0;animation:simRfTyping 12s ease infinite}
  .rf-typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:rfDot 1.2s ease infinite}
  .rf-typing i:nth-child(2){animation-delay:.18s}.rf-typing i:nth-child(3){animation-delay:.36s}
  .rf-bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);animation:simRfBot 12s ease infinite}
  .rf-bot.bota{animation:simRfBotA 12s ease infinite} /* the engine's opening proposal — speaks first */
  .rf-opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .rf-opt{font-size:11px;font-weight:700;border:1px solid var(--mint);color:var(--accent-deep);background:var(--surface);border-radius:999px;padding:3px 10px}
  .rf-opt.o2{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;animation:rfOptSel 12s ease infinite} /* base = chosen (completed scene); keyframe holds it unchosen until the user steers */
  .rf-old{font-size:11.5px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted);margin-top:7px}
  .rf-new{font-size:12px;font-weight:700;color:var(--ink);background:var(--accent-soft);border-radius:7px;padding:6px 8px;margin-top:5px}
  .rf-actions{display:flex;gap:6px;margin-top:7px;animation:simRfActions 12s ease infinite}
  .rf-btn{font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 11px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
  .rf-btn.ok{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
  .rf-prev{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:hidden}
  .rp-h{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:8px;border-bottom:1px solid var(--line-soft);margin-bottom:11px}
  .rp-h span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the label yields before the match delta ever could (audit R3: I3) */
  .rp-match{display:flex;gap:4px;font-size:10.5px;font-weight:800;color:var(--accent-deep);letter-spacing:0;text-transform:none;white-space:nowrap}
  .rp-match .m2{animation:simRfTick 12s ease infinite;flex-shrink:0}
  .rf-prev .pv-sk{display:block;height:7px;border-radius:4px;background:var(--bg-2);margin:8px 0;width:var(--w,90%)}
  .rf-prev .pv-sec{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:11px 0 7px;border-bottom:1px solid var(--line-soft);padding-bottom:5px}
  .rp-slot{position:relative;margin:8px 0}
  .rp-line{font-size:11.5px;line-height:1.4;border-radius:7px;padding:6px 8px}
  .rp-old{position:absolute;inset:0;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line-soft);opacity:0;animation:simRfOld 12s ease infinite}
  .rp-new{color:var(--ink);font-weight:600;background:var(--accent-soft);border:1px solid var(--mint);clip-path:inset(0 0 0 0);animation:simRfNew 12s ease infinite} /* explicit unclipped base = completed scene (audit R3: D7) */
  @keyframes simRfBotA{0%,3%{opacity:0;transform:translateY(10px)}7%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes rfOptSel{0%,22%{background:var(--surface);border-color:var(--mint);color:var(--accent-deep)}26%,100%{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}}
  @keyframes simRfUser{0%,15%{opacity:0;transform:translateY(8px)}19%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes simRfTyping{0%,23%{opacity:0}26%,31%{opacity:1}34%,100%{opacity:0}}
  @keyframes simRfBot{0%,33%{opacity:0;transform:translateY(10px)}38%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes simRfActions{0%,41%{opacity:0}46%,98%{opacity:1}99.9%,100%{opacity:0}}
  @keyframes simRfOld{0%,7%{opacity:0}10%,46%{opacity:1}52%,100%{opacity:0}}
  @keyframes simRfNew{0%,48%{clip-path:inset(0 100% 0 0);opacity:1}60%,98%{clip-path:inset(0 0 0 0);opacity:1}99.9%,100%{clip-path:inset(0 0 0 0);opacity:0}}
  @keyframes simRfTick{0%,63%{opacity:0;transform:translateY(4px)}69%,98%{opacity:1;transform:none}99.9%,100%{opacity:0}}
  @keyframes rfDot{0%,100%{opacity:.25}40%{opacity:1}}
  @media(max-width:840px){ /* matches the .step-row stacking point — no narrow two-column zone (audit R2: D4) */
    .rf-stage{grid-template-columns:1fr;height:auto}
    .rf-prev{min-height:200px}
    .sim-jd .sim-stage{height:340px}
  }
  .step-row{display:grid;grid-template-columns:.42fr .58fr;gap:44px;align-items:center;padding:38px 0;border-top:1px solid var(--line-soft)}
  .step-row:first-child{border-top:none;padding-top:8px}
  .step-row.flip .step-copy{order:2}
  .step-row.flip{grid-template-columns:.58fr .42fr} /* the figure always gets the wider column, flipped or not (audit R1: D4) */
  .step-row figure{margin:0}
  .step-copy .num{width:40px;height:40px;border-radius:11px;background:var(--ink);color:#fff;font-weight:800;display:grid;place-items:center;font-size:16px;margin-bottom:14px}
  .step-copy h3{font-size:20px;font-weight:800;margin-bottom:8px}
  .step-copy p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.65}
  @media(max-width:840px){.step-row{grid-template-columns:1fr;gap:18px}.step-row.flip .step-copy{order:0}}
  .page-head .anim-toggle{margin-top:8px}