/* ================= assembly sections (assemble.js) ================= */
.assemble{position:relative}
.as-hero{height:520vh}
.as-proc{height:420vh}
.as-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--bg)}
.as-bg{position:absolute;inset:0;pointer-events:none}
.as-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(245,244,240,.09) 1px,transparent 1.4px);background-size:28px 28px;-webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 50%,#000 30%,transparent 100%)}
.as-glow{position:absolute;left:50%;top:55%;width:90vmax;height:90vmax;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,75,43,.22),rgba(255,75,43,.06) 45%,transparent 70%);filter:blur(10px)}
.as-stage{position:relative;perspective:1600px;perspective-origin:50% 40%;width:100%;display:grid;place-items:center;z-index:2}
.as-device{position:relative;width:min(1080px,72vw,calc((100svh - 200px) * 1.36));margin-top:10px;transform-style:preserve-3d;will-change:transform;container-type:inline-size}
.as-frame{border-radius:1.4cqw;overflow:hidden;background:#0d0e11;border:1px solid rgba(245,244,240,.12);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,75,43,.08),0 0 80px -20px rgba(255,75,43,.35);will-change:transform,opacity}
.as-chrome{display:flex;align-items:center;gap:.6cqw;height:3.4cqw;padding:0 1.4cqw;background:#16181c;border-bottom:1px solid rgba(245,244,240,.08)}
.as-chrome i{width:1cqw;height:1cqw;border-radius:50%;background:#3a3c42}
.as-chrome i:nth-child(1){background:#ff5f57}.as-chrome i:nth-child(2){background:#febc2e}.as-chrome i:nth-child(3){background:#28c840}
.as-url{margin:0 auto;font-size:1.05cqw;font-weight:700;color:var(--ink-dim);background:#22252b;padding:.45cqw 2.4cqw;border-radius:2cqw;letter-spacing:.02em}
.as-page{padding:2.2cqw 3.2cqw 3cqw}
.as-page [data-as]{will-change:transform,opacity}
.as-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.6cqw;border-bottom:1px solid rgba(245,244,240,.07)}
.as-logo{display:flex;align-items:center;gap:.8cqw;font-weight:800;font-size:1.35cqw}
.as-logo img{width:2.6cqw;height:auto}
.as-links{display:flex;gap:2.2cqw;font-size:1.1cqw;font-weight:600;color:var(--ink-dim)}
.as-links i{font-style:normal}
.as-pill{font-size:1.05cqw;font-weight:700;border:1px solid rgba(245,244,240,.2);border-radius:2cqw;padding:.6cqw 1.5cqw}
.as-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3cqw;align-items:center;padding:3.4cqw 0 2.6cqw}
.as-copy .eyebrow{font-size:1cqw}
.as-h1{font-size:5.4cqw;line-height:1.02;letter-spacing:-.03em;margin:1.2cqw 0 1.6cqw}
.as-h1 span{display:inline-block;transform-origin:50% 100%}
.as-lead{font-size:1.35cqw;color:var(--ink-dim);max-width:34ch;line-height:1.55}
.as-btns{display:flex;gap:1.2cqw;margin-top:2.2cqw}
.as-btn{display:inline-block;font-size:1.15cqw;font-weight:700;padding:1cqw 2cqw;border-radius:3cqw;border:1px solid rgba(245,244,240,.22)}
.as-btn-primary{background:var(--accent);color:#0a0a0c;border-color:var(--accent);box-shadow:0 0 3cqw rgba(255,75,43,.45)}
.as-media{position:relative;aspect-ratio:16/11}
.as-media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;border-radius:1.2cqw;box-shadow:0 2cqw 5cqw -1.5cqw rgba(0,0,0,.8),0 0 0 1px rgba(255,75,43,.2)}
.as-score{position:absolute;right:7cqw;bottom:-3cqw;display:grid;place-content:center;text-align:center;width:8.4cqw;height:8.4cqw;border-radius:50%;background:#0d0e11;border:.3cqw solid var(--accent);box-shadow:0 0 3cqw rgba(255,75,43,.5)}
.as-score b{font-size:2.6cqw;line-height:1;font-weight:800;color:var(--accent)}
.as-score small{font-size:.9cqw;font-weight:800;letter-spacing:.1em;color:var(--ink-dim)}
.as-score-2{right:-2.4cqw;top:-2.6cqw;bottom:auto;border-color:#3ecf8e;box-shadow:0 0 3cqw rgba(62,207,142,.45)}
.as-score-2 b{color:#3ecf8e}
.as-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqw}
.as-card{position:relative;border-radius:1cqw;background:#15171b;border:1px solid rgba(245,244,240,.1)}
.as-card img{width:100%;height:auto;aspect-ratio:16/8.4;object-fit:cover;object-position:top;border-radius:1cqw 1cqw 0 0;display:block}
.as-card span{display:block;padding:.9cqw 1.2cqw;font-size:1.1cqw;font-weight:800}
.as-stamp{position:absolute;right:-1cqw;top:-1.4cqw;font-style:normal;font-size:1.05cqw;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0a0a0c;background:var(--accent);padding:.6cqw 1.2cqw;border-radius:2cqw;box-shadow:0 0 2.4cqw rgba(255,75,43,.6)}
.as-cursor{position:absolute;left:16%;top:61%;width:2.6cqw;height:2.6cqw;z-index:5;filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.6))}
.as-cursor svg{width:100%;height:100%;fill:#fff;stroke:#0a0a0c;stroke-width:1.2}
.as-click{position:absolute;left:-1.6cqw;top:-1.6cqw;width:3.6cqw;height:3.6cqw;border-radius:50%;border:.25cqw solid var(--accent)}
.as-steps{position:absolute;left:var(--gutter);top:50%;translate:0 -50%;list-style:none;display:flex;flex-direction:column;gap:18px;z-index:3}
.as-steps li{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;gap:10px;align-items:center;transition:color .35s,transform .35s}
.as-steps li b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);font-size:.72rem;transition:background .35s,border-color .35s,color .35s}
.as-steps li.on{color:var(--ink);transform:translateX(6px)}
.as-steps li.on b{background:var(--accent);border-color:var(--accent);color:#0a0a0c;box-shadow:0 0 18px rgba(255,75,43,.6)}
.as-end{position:absolute;left:0;right:0;bottom:62px;text-align:center;z-index:3;font-weight:700;font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--ink-dim)}
.as-sticky .progress{bottom:40px}
.as-sticky .scroll-hint{bottom:12px}

/* process stage */
.proc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center;position:relative;z-index:2;width:100%}
.proc-copy h2{font-size:clamp(2.2rem,5vw,3.8rem);margin:14px 0 30px}
.proc-steps{list-style:none;display:flex;flex-direction:column;gap:6px}
.proc-steps li{display:flex;gap:16px;padding:14px 16px;border-radius:14px;border:1px solid transparent;color:var(--ink-faint);transition:background .35s,border-color .35s,color .35s}
.proc-steps li b{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);font-size:.8rem;transition:.35s}
.proc-steps li strong{display:block;font-size:1.1rem;color:inherit;margin-bottom:2px}
.proc-steps li span{font-size:.92rem}
.proc-steps li.on{color:var(--ink);background:rgba(255,75,43,.07);border-color:rgba(255,75,43,.3)}
.proc-steps li.on b{background:var(--accent);border-color:var(--accent);color:#0a0a0c;box-shadow:0 0 18px rgba(255,75,43,.55)}
.proc-stage{perspective:1400px;display:grid;place-items:center}
.proc-device{width:100%;max-width:640px;border-radius:14px;overflow:hidden;background:#0d0e11;border:1px solid rgba(245,244,240,.12);box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 70px -20px rgba(255,75,43,.35);container-type:inline-size;will-change:transform}
.proc-device .as-chrome{height:5.4cqw;gap:1cqw;padding:0 2.2cqw}
.proc-device .as-chrome i{width:1.6cqw;height:1.6cqw}
.proc-device .as-url{font-size:1.7cqw;padding:.7cqw 4cqw}
.proc-screen{position:relative;aspect-ratio:16/10.5}
.ps{position:absolute;inset:0;padding:4cqw}
.ps-wire,.ps-design{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:5cqw auto auto 1fr;grid-template-areas:"nav nav" "h1 img" "btn img" "c c";gap:2.4cqw}
.w{border:.25cqw dashed rgba(245,244,240,.28);border-radius:1.2cqw}
.w-nav{grid-area:nav}.w-h1{grid-area:h1;min-height:11cqw}.w-h2{grid-area:img}.w-btn{grid-area:btn;height:5cqw;width:55%}
.w-img,.w-c{display:none}
.ps-wire::after{content:"";grid-area:c;border:.25cqw dashed rgba(245,244,240,.28);border-radius:1.2cqw}
.d-nav{grid-area:nav;display:flex;align-items:center;gap:2cqw;border-bottom:1px solid rgba(245,244,240,.08)}
.d-nav img{width:4.4cqw;height:auto}.d-nav i{width:7cqw;height:1.2cqw;border-radius:1cqw;background:rgba(245,244,240,.18)}.d-nav b{margin-left:auto;width:11cqw;height:3.4cqw;border-radius:3cqw;border:1px solid rgba(245,244,240,.25)}
.d-h1{grid-area:h1;font-size:5cqw;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.d-btn{grid-area:btn;justify-self:start;align-self:start;font-size:2cqw;font-weight:800;color:#0a0a0c;background:var(--accent);padding:1.4cqw 3cqw;border-radius:4cqw;box-shadow:0 0 4cqw rgba(255,75,43,.45)}
.d-img{grid-area:img;border-radius:1.6cqw;overflow:hidden}.d-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.d-c{display:none}
.ps-design::after{content:"";grid-area:c;border-radius:1.4cqw;background:linear-gradient(90deg,#1b1d22 0 31%,transparent 31% 34.5%,#1b1d22 34.5% 65.5%,transparent 65.5% 69%,#1b1d22 69%)}
.ps-code{background:#0a0b0d}
.ps-code pre{margin:0;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:2.15cqw;line-height:1.75;color:#d7d6d2;white-space:pre-wrap}
.ps-code .k{color:var(--accent)}.ps-code .a{color:#ffbd44}.ps-code .v{color:#3ecf8e}.ps-code .c{color:#6c6f78}
.ps-live{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4cqw}
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw;width:100%}
.ring{position:relative;display:grid;justify-items:center;gap:1.4cqw}
.ring svg{width:100%;max-width:17cqw;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:rgba(245,244,240,.1);stroke-width:2.6}
.ring circle.arc{stroke:#3ecf8e;stroke-linecap:round}
.ring b{position:absolute;top:0;left:0;right:0;aspect-ratio:1;max-width:17cqw;margin:0 auto;display:grid;place-items:center;font-size:4.4cqw;font-weight:800;color:#3ecf8e}
.ring small{font-size:1.8cqw;font-weight:700;color:var(--ink-dim)}
.live-badge{font-size:2.4cqw;font-weight:800;color:#3ecf8e;border:1px solid rgba(62,207,142,.35);background:rgba(62,207,142,.08);padding:1.2cqw 3cqw;border-radius:4cqw}

/* phones: the hero assembles as a phone, steps run across the top */
@media(max-width:860px){
  .as-hero{height:420vh}.as-proc{height:360vh}
  .as-device{width:min(330px,72vw,calc((100svh - 300px) * 0.47));margin-top:34px}
  .as-frame{border-radius:7cqw;border-width:2px}
  .as-chrome{height:9cqw;justify-content:center}.as-chrome i{display:none}
  .as-url{font-size:3.6cqw;padding:1.4cqw 6cqw}
  .as-page{padding:4cqw 5cqw 6cqw}
  .as-logo{font-size:4cqw;gap:2cqw}.as-logo img{width:7cqw}.as-links{display:none}.as-pill{font-size:3.2cqw;padding:1.6cqw 3.6cqw;border-radius:6cqw}
  .as-nav{padding-bottom:4cqw}
  .as-hero-grid{grid-template-columns:1fr;gap:5cqw;padding:6cqw 0 5cqw}
  .as-copy .eyebrow{font-size:3cqw}
  .as-h1{font-size:12cqw;margin:3cqw 0 4cqw}
  .as-lead{font-size:3.8cqw}
  .as-btns{gap:3cqw;margin-top:5cqw}.as-btn{font-size:3.4cqw;padding:2.6cqw 4.6cqw;border-radius:8cqw}
  .as-media img{border-radius:4cqw}
  .as-score{width:20cqw;height:20cqw;left:-3cqw;bottom:-4cqw}.as-score b{font-size:6.4cqw}.as-score small{font-size:2.4cqw}
  .as-score-2{left:auto;right:-3cqw;top:-4cqw;bottom:auto}
  .as-cards{grid-template-columns:1fr 1fr;gap:4cqw}.as-card:nth-child(3){display:none}
  .as-card{border-radius:3cqw}.as-card img{border-radius:3cqw 3cqw 0 0}.as-card span{font-size:3.2cqw;padding:2.4cqw 3cqw}
  .as-stamp{font-size:2.8cqw;padding:1.6cqw 3cqw;right:-2cqw;top:-3cqw}
  .as-cursor{width:7cqw;height:7cqw;left:20%;top:41%}.as-click{left:-4cqw;top:-4cqw;width:10cqw;height:10cqw}
  .as-steps{left:0;right:0;top:80px;translate:none;flex-direction:row;justify-content:center;gap:14px}
  .as-steps li{font-size:0;gap:0}.as-steps li b{width:30px;height:30px;font-size:.7rem}
  .as-steps li.on{transform:none}
  .as-end{bottom:56px;padding:0 20px;font-size:.85rem}
  .proc-grid{grid-template-columns:1fr;gap:20px}
  .proc-copy h2{font-size:2rem;margin:8px 0 14px}
  .proc-steps{flex-direction:row;gap:6px}
  .proc-steps li{flex:1;flex-direction:column;align-items:center;text-align:center;padding:10px 6px;gap:6px}
  .proc-steps li span{font-size:0}.proc-steps li strong{font-size:.78rem;margin:0}
  .proc-device{max-width:none}
}
@media(prefers-reduced-motion:reduce){.as-hero,.as-proc{height:auto}.as-sticky{position:relative;min-height:100vh}}