/* RingBack AI — shared stylesheet.
   Extracted from index.html's inline <style> when the site became multi-page
   (pricing and faq got their own pages). One source of truth for the design
   tokens and every shared component; each page links this and adds nothing. */
/* Self-hosted variable faces (latin subset) — no CDN, instant swap, zero CSP risk */
  @font-face{font-family:'Archivo';src:url('/fonts/Archivo-var-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
  @font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-var-latin.woff2') format('woff2');font-weight:100 800;font-display:swap}
  :root{
    --ink:#0B0908;
    --coal:#151110;
    --coal2:#1E1815;
    --coal3:#282019;
    --bone:#EFE7DB;
    --bone-dim:#B4A996;
    --fog:#8A8074;
    --signal:#FFAD33;
    --signal-bright:#FFC15C;
    --signal-deep:#8A5100;
    --confirm:#7FCF95;
    --confirm-deep:#2E6B3C; /* AA-safe savings green for small text on the bone band (≥5:1) */
    --alert:#E8836B;
    --coal-2:#2A2320;
    --muted:#8C8178;
    --line:rgba(239,231,219,.10);
    --line-soft:rgba(239,231,219,.055);
    --sans:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    /* Fluid, viewport-driven type scale (type-as-graphic) */
    --step--1:clamp(0.85rem,0.8rem + 0.25vw,0.95rem);
    --step-0:clamp(1rem,0.95rem + 0.3vw,1.15rem);
    --step-1:clamp(1.3rem,1.1rem + 1vw,1.9rem);
    /* Section headings run much larger than a "safe" scale would put them. The gap
       between headline and body is what reads as editorial rather than templated —
       at a 48px ceiling the h2s sat too close to the 19px lead and the whole page
       read polite. Ceiling raised to 72px; the hero still out-ranks it at 96. */
    --step-2:clamp(2.15rem,1.3rem + 4.1vw,4.5rem);
    --step-3:clamp(2.6rem,1.6rem + 5vw,5rem);
    --step-hero:clamp(2.9rem,1.7rem + 5.4vw,6rem); /* recomputed for the two-column hero canvas */
    --ease-out:cubic-bezier(.31,.75,.22,1);
    --ease-inout:cubic-bezier(.76,0,.24,1);
    --ease-settle:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:96px}
  body{font-family:var(--sans);font-variation-settings:"wdth" 100;color:var(--bone);background:var(--ink);line-height:1.6;font-size:var(--step-0);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--signal);color:var(--ink)}
  a{color:inherit;text-decoration:none}
  svg{display:block}
  img{max-width:100%}
  .ico{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .ico.sm{width:16px;height:16px}
  .ico.lg{width:28px;height:28px}
  :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
  .skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:var(--ink);font-family:var(--mono);font-size:13px;font-weight:700;padding:12px 20px;z-index:200}
  .skip:focus{left:0}
  .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
  /* Ambient grain — a faint fixed noise field over the ink to kill banding on the dark
     gradients and the bone band. Sits under the HUD/modals; never intercepts pointers. */
  .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}

  /* type system */
  /* Velocity response. While the page is moving fast the headings shear and their
     colour channels separate, then both settle back — the single strongest "this was
     built by someone" tell in the reference reel, and it costs one scroll signal.
     Both properties read from custom properties that default to 0/0px, so with JS off,
     the CDN blocked, or reduced motion on, this block renders as ordinary type: at 0px
     offset both shadows sit exactly behind the glyph and are invisible.
     The fringe colours are a lens artefact that only exists in motion, not a second
     brand colour — hence the tight cap on --ab in the JS. */
  :is(h1,h2)[data-reveal]{
    transform:skewY(var(--sk,0deg));transform-origin:left center;
    text-shadow:calc(var(--ab,0px) * -1) 0 rgba(255,96,58,.5), var(--ab,0px) 0 rgba(86,196,255,.42);
  }
  @media(prefers-reduced-motion:reduce){:is(h1,h2)[data-reveal]{transform:none;text-shadow:none}}

  h1,h2{font-family:var(--sans);font-variation-settings:"wdth" 112;font-weight:720;letter-spacing:-.028em;line-height:1.02}
  h1{font-size:var(--step-hero);line-height:.95}
  /* 1.02 leading left the line box tighter than the font's own descender, so SplitText's
     per-line clip shaved the tails off "Pays" and "job." during the reveal — measured at
     43 shaved pixels, and raising the ceiling to 72px only made it worse. 1.07 gives the
     descender room inside the box, which fixes it at the source rather than padding the
     mask after the fact (3.4). */
  h2{font-size:var(--step-2);line-height:1.07}
  h3{font-family:var(--sans);font-variation-settings:"wdth" 112;font-weight:680;font-size:20px;letter-spacing:-.005em;line-height:1.15}
  .mlabel{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--fog)}
  .eyebrow{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line);align-self:center}
  p.lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--bone-dim);max-width:580px}
  .hl{position:relative;z-index:1;display:inline-block}
  .hl i{position:absolute;left:-1%;bottom:2%;width:102%;height:32%;background:var(--signal);z-index:-1;font-style:normal;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-inout) .45s}
  .hl.on i{transform:scaleX(1)}

  section{padding:clamp(5rem,8.5vw,9rem) 0;position:relative}
  /* deliberate surface alternation — raised "console panel" sections punctuate the dark ground */
  .panel{background:var(--coal)}
  .sec-head{max-width:840px;margin-bottom:clamp(40px,5vw,64px)}
  .sec-head h2{margin-top:18px}
  .sec-head .lead{margin-top:18px}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;padding:17px 30px;border-radius:4px;cursor:pointer;border:1px solid transparent;transition:background .25s var(--ease-out),color .25s,border-color .25s;line-height:1}
  .btn .ico{transition:transform .3s var(--ease-out)}
  .btn:hover .ico{transform:translateX(4px)}
  .btn-signal{background:var(--signal);color:var(--ink);border-color:var(--signal)}
  .btn-signal:hover{background:var(--signal-bright);border-color:var(--signal-bright)}
  .btn-ghost{background:transparent;color:var(--bone);border-color:var(--line)}
  .btn-ghost:hover{border-color:rgba(239,231,219,.34);background:rgba(239,231,219,.04)}
  .btn:disabled{opacity:.35;cursor:not-allowed}

  /* nav */
  /* HUD — a fixed dispatch overlay. Neutral elements render white and use
     mix-blend-mode:difference to auto-invert over dark ground AND the bone
     pricing band (no JS re-theme). The amber mark + CTA are exempt so the
     brand color survives on any surface. */
  .hud{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none}
  .hud a,.hud button{pointer-events:auto}
  .hud-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
  .logo{display:flex;align-items:center;gap:11px}
  .logo .mark{width:34px;height:34px;border-radius:6px;background:var(--signal);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
  .logo .mark .ico{width:19px;height:19px;stroke-width:2.1}
  .logo-word{font-variation-settings:"wdth" 121;font-weight:820;font-size:19px;letter-spacing:-.01em;text-transform:uppercase;mix-blend-mode:difference;color:#fff}
  .logo-word .ai{margin-left:.16em;opacity:.6}
  .hud-nav{display:flex;gap:26px;align-items:center}
  .hud-link{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;mix-blend-mode:difference;color:#fff;opacity:.82;transition:opacity .2s}
  .hud-link:hover,.hud-link.active-link{opacity:1}
  .hud-readout{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;mix-blend-mode:difference;color:#fff;display:flex;align-items:center;gap:8px}
  .hud-readout .hud-live{position:relative;padding-left:14px}
  .hud-readout .hud-live::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 2.4s infinite}
  .hud-readout .hud-sep{opacity:.4}
  .hud-readout b{font-weight:500;font-variant-numeric:tabular-nums;min-width:2.6em;display:inline-block}
  @keyframes blink{50%{opacity:.35}}
  .nav-cta{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--signal);padding:12px 20px;border-radius:4px;transition:background .25s}
  .nav-cta:hover{background:var(--signal-bright)}
  .nav-login{border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:11px 16px;opacity:1;transition:border-color .2s}
  .nav-login:hover{border-color:#fff}
  .hud.on-light .nav-login{border-color:rgba(59,53,46,.32)}
  .hud.on-light .nav-login:hover{border-color:var(--ink)}
  .nav-burger{display:none;align-items:center;justify-content:center;background:none;border:none;color:#fff;mix-blend-mode:difference;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
  /* On the bone (light) band the difference-blend can't invert reliably (ScrollSmoother's
     transform layer makes the HUD blend against the dark body, not the light section).
     When the HUD scrolls over a light section, JS adds .on-light and we swap to explicit
     ink so the wordmark, links and readout stay legible. The amber mark + CTA are exempt. */
  .hud.on-light .logo-word{mix-blend-mode:normal;color:var(--ink)}
  .hud.on-light .logo-word .ai{color:#6B6156;opacity:1}
  .hud.on-light .hud-link{mix-blend-mode:normal;color:#3B352E}
  .hud.on-light .hud-link:hover,.hud.on-light .hud-link.active-link{color:var(--ink)}
  .hud.on-light .hud-readout{mix-blend-mode:normal;color:#6B6156}
  .hud.on-light .hud-readout .hud-live::before{background:var(--confirm-deep)}
  .hud.on-light .nav-burger{mix-blend-mode:normal;color:var(--ink)}
  .mobile-menu{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;z-index:49;background:rgba(11,9,8,.985);backdrop-filter:blur(22px);padding:18px 24px 32px;flex-direction:column;overflow-y:auto}
  .mobile-menu.open{display:flex}
  .mobile-menu a{font-variation-settings:"wdth" 118;font-weight:700;font-size:25px;text-transform:uppercase;letter-spacing:-.01em;color:var(--bone);padding:18px 4px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(14px)}
  .mobile-menu.open a{animation:mm .5s var(--ease-out) forwards}
  .mobile-menu.open a:nth-child(2){animation-delay:.05s}.mobile-menu.open a:nth-child(3){animation-delay:.1s}.mobile-menu.open a:nth-child(4){animation-delay:.15s}.mobile-menu.open a:nth-child(5){animation-delay:.2s}.mobile-menu.open a:nth-child(6){animation-delay:.25s}
  @keyframes mm{to{opacity:1;transform:none}}
  .mobile-menu a .mlabel{font-size:11px}
  .mobile-menu .mm-cta{margin-top:26px;border:1px solid var(--signal);border-radius:5px;background:var(--signal);color:var(--ink);justify-content:center;font-size:17px;padding:20px}
  @media(max-width:960px){.hud-nav{display:none}.nav-burger{display:inline-flex}}
  body.menu-open{overflow:hidden}

  /* hero */
  .hero{position:relative;padding:clamp(140px,15vh,184px) 0 0;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,72px);align-items:center}
  .hero h1{margin:26px 0 26px}
  /* Mobile hero (Phase 9): restack so the phone demo LEADS — eyebrow → headline → demo →
     sub → CTAs (desktop is side-by-side). display:contents lifts the text column's children
     into the hero grid so the phone-stage can sit right under the headline. */
  @media(max-width:960px){
    .hero{padding-top:clamp(104px,16vw,132px)}
    .hero-grid{grid-template-columns:1fr;gap:26px}
    .hero-grid > div:first-child{display:contents}
    .hero .eyebrow{order:1}
    .hero h1{order:2;margin:0}
    .phone-stage{order:3}
    .hero .lead{order:4}
    .hero-cta{order:5}
    .hero-meta{order:6}
  }
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:36px}
  .hero-meta{margin-top:30px;display:flex;flex-direction:column;gap:10px}
  .hero-meta .mlabel{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .hero-meta a{color:var(--bone);border-bottom:1px solid var(--line);transition:border-color .2s}
  .hero-meta a:hover{border-color:var(--signal)}
  .live-dot{width:8px;height:8px;border-radius:50%;background:var(--confirm);animation:blink 2.4s infinite;flex:none}
  html.js .h-rev{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
  html.js .h-rev.in{opacity:1;transform:none}
  .h-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
  html.js .h-line>span{display:block;transform:translateY(112%);transition:transform 1s var(--ease-out)}
  html.js .played .h-line>span{transform:none}
  html.js .played .h-line:nth-child(2)>span{transition-delay:.09s}
  html.js .played .h-line:nth-child(3)>span{transition-delay:.18s}

  /* phone / live demo */
  .phone-stage{position:relative;display:flex;justify-content:center;padding:10px 0 26px}
  /* Hero phone entrance (Phase 5): container hides on JS. GSAP rises the .phone within and
     pops the chips; the CSS fallback (.stage-in) just fades the container in. */
  html.js .phone-stage{opacity:0}
  html.js .phone-stage.stage-in{opacity:1;transition:opacity .9s var(--ease-out)}
  @keyframes screenOn{from{filter:brightness(.35) saturate(.5)}to{filter:none}}
  .phone.lit .screen{animation:screenOn .7s var(--ease-out) both}
  .phone{background:#080606;border:1px solid var(--line);border-radius:34px;padding:12px;box-shadow:0 44px 90px rgba(0,0,0,.6);max-width:352px;width:100%;position:relative;z-index:2}
  .phone .notch{position:absolute;top:21px;left:50%;transform:translateX(-50%);width:108px;height:6px;border-radius:8px;background:#221c18;z-index:3}
  .screen{background:#0F0C0A;border:1px solid var(--line-soft);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
  .screen-top{background:rgba(239,231,219,.035);padding:13px 15px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:11px}
  .savatar{width:37px;height:37px;border-radius:9px;background:var(--coal3);color:var(--signal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;font-variation-settings:"wdth" 115;flex:none}
  .screen-top strong{font-size:13.5px;color:var(--bone);display:block;line-height:1.2}
  .screen-top .st-sub{display:flex;align-items:center;gap:6px;color:var(--confirm);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
  .screen-top .st-sub i{width:6px;height:6px;border-radius:50%;background:var(--confirm);animation:blink 2.4s infinite}
  .screen-top .st-time{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--fog);align-self:flex-start}
  .thread{padding:16px 14px;display:flex;flex-direction:column;gap:9px;height:398px;overflow:hidden;position:relative;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
  .thread.swap{opacity:0;transform:translateY(-14px)}
  .thread .miss{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--alert);background:rgba(232,131,107,.08);border:1px solid rgba(232,131,107,.22);border-radius:3px;padding:5px 11px;display:flex;gap:7px;align-items:center}
  .thread .miss .ico{width:11px;height:11px;stroke-width:2.4}
  .b.out{align-self:flex-start;background:var(--coal2);color:var(--bone);border-bottom-left-radius:4px}
  .b.in{align-self:flex-end;background:rgba(239,231,219,.10);border:1px solid rgba(239,231,219,.13);color:var(--bone);border-bottom-right-radius:4px}
  .b.book{align-self:flex-start;background:rgba(127,207,149,.10);border:1px solid rgba(127,207,149,.32);color:var(--confirm);font-weight:600;border-bottom-left-radius:4px;display:flex;gap:8px;align-items:center}
  .b.book .ico{width:14px;height:14px;stroke-width:2.6}
  .b.pop{animation:bpop .45s var(--ease-out) both}
  @keyframes bpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  .typing{align-self:flex-start;background:var(--coal2);border-radius:13px;border-bottom-left-radius:4px;padding:13px 15px;display:flex;gap:5px}
  .typing.right{align-self:flex-end;background:rgba(239,231,219,.10);border:1px solid rgba(239,231,219,.13);border-bottom-right-radius:4px;border-bottom-left-radius:13px}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--fog);animation:tp 1.1s infinite}
  .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
  @keyframes tp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
  .chips-col{position:absolute;z-index:3;display:flex;flex-direction:column;gap:12px;left:-72px;top:74px}
  .chip-r{left:auto;right:-58px;top:auto;bottom:100px}
  .chip-i{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:rgba(21,17,16,.92);border:1px solid var(--line);border-radius:4px;padding:9px 13px;color:var(--bone-dim);display:flex;gap:8px;align-items:center;box-shadow:0 14px 34px rgba(0,0,0,.45);backdrop-filter:blur(8px);white-space:nowrap}
  .chip-i b{color:var(--signal);font-weight:500}
  .chip-i.ok b{color:var(--confirm)}
  .chip-i .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:blink 2s infinite;flex:none}
  @media(max-width:1240px){.chips-col{left:-26px}.chip-r{right:-20px}}
  @media(max-width:960px){.chips-col,.chip-r{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:16px}.phone-stage{flex-direction:column;align-items:center}}

  /* ticker */
  .ticker{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:15px 0;overflow:hidden;margin-top:clamp(52px,6vw,84px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .ticker-track{display:inline-flex;white-space:nowrap;animation:tk 46s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fog)}
  .ticker-track span{padding:0 8px}
  .ticker-track .ok{color:var(--confirm)}
  .ticker-track .sep{color:var(--signal);padding:0 16px}
  @keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* stats */
  .statbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:clamp(44px,5vw,64px) 0 clamp(60px,7vw,96px)}
  .stat{padding:30px 26px 30px 0;position:relative}
  .stat+.stat{border-left:1px solid var(--line-soft);padding-left:26px}
  .stat .n{font-variation-settings:"wdth" 121;font-size:clamp(30px,3.4vw,44px);font-weight:800;color:var(--bone);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
  .stat .n em{font-style:normal;color:var(--signal)}
  .stat .l{font-family:var(--mono);font-size:10.5px;color:var(--fog);margin-top:10px;text-transform:uppercase;letter-spacing:.08em}
  @media(max-width:780px){.statbar{grid-template-columns:1fr 1fr}.stat+.stat{border-left:none}.stat:nth-child(even){border-left:1px solid var(--line-soft)}.stat:nth-child(n+3){border-top:1px solid var(--line-soft)}}

  /* night */
  @media(max-width:920px){.night-grid{grid-template-columns:1fr}}
  .log-head .mlabel{display:flex;gap:9px;align-items:center;color:var(--bone-dim)}
  .log-table .ok{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--confirm);white-space:nowrap;text-transform:uppercase}
  .night-stats .n{font-variation-settings:"wdth" 121;font-size:22px;font-weight:800;color:var(--signal);font-variant-numeric:tabular-nums}
  .night-stats .l{font-family:var(--mono);font-size:9.5px;color:var(--fog);text-transform:uppercase;letter-spacing:.08em;margin-top:5px}

  /* compare */
  @media(max-width:820px){.compare{grid-template-columns:1fr}}
  .col .mlabel{margin-bottom:20px;display:flex;gap:10px;align-items:center;font-size:12px}
  .col.bad .mlabel{color:var(--alert)}
  .col.good .mlabel{color:var(--signal)}
  .col.bad li{color:var(--bone-dim)}
  .col li .ico{margin-top:3px;width:15px;height:15px;stroke-width:2.4}
  .col.bad li .ico{color:var(--alert)}
  .col.good li .ico{color:var(--signal)}

  /* how it works */
  .how-flex{display:flex;gap:clamp(24px,3vw,48px)}
  .how-track{width:2px;background:var(--line);border-radius:2px;position:relative;flex:none}
  .how-track .track-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--signal);border-radius:2px}
  @media(max-width:820px){.how-track{display:none}}
  .steps{display:flex;flex-direction:column;flex:1}
  .step{display:grid;grid-template-columns:88px 1fr;gap:clamp(16px,2.4vw,34px);align-items:start;padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line);transition:border-color .4s}
  .step.lit{border-top-color:rgba(255,173,51,.55)}
  @media(max-width:600px){.step{grid-template-columns:1fr;gap:14px}}
  .step .num{font-family:var(--mono);font-size:13px;color:var(--fog);letter-spacing:.08em;padding-top:5px;transition:color .4s}
  .step.lit .num{color:var(--signal)}
  .step h3{margin-bottom:10px;font-size:22px}
  .step p{color:var(--bone-dim);font-size:15px;max-width:560px}
  .step .s-meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fog);display:flex;gap:18px;flex-wrap:wrap}
  .step .s-meta b{color:var(--signal);font-weight:500}

  /* capability list — replaced an 11-card bento grid. Dense on purpose: this section
     answers "does it do X", it doesn't sell. Two columns of plain rows read faster than
     eleven boxes and take a quarter of the height. */
  .caps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px)}
  @media(max-width:820px){.caps{grid-template-columns:1fr}}
  .caps li{padding:15px 0;border-top:1px solid var(--line-soft);color:var(--bone-dim);font-size:var(--step--1);line-height:1.55}
  .caps li b{display:inline-block;color:var(--bone);font-weight:600;font-size:15px;margin-right:9px}
  .caps li s{text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--signal);border:1px solid rgba(255,173,51,.32);border-radius:3px;padding:2px 6px;margin-right:9px;vertical-align:2px}
  .caps-note{margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:12px;line-height:2;color:var(--fog);letter-spacing:.01em}
  .caps-note b{display:block;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--bone);margin-bottom:12px}
  .caps-note em{font-style:normal;color:var(--signal)}

  /* showcase — the real app, on a tablet.
     BASE state (no JS, CDN blocked, touch, reduced-motion, <1024px) is a plain vertical
     stack: four panels, each carrying its own tablet + screenshot. Complete and readable
     on its own — nothing here needs JS to become visible.
     .sc-on is added to the SECTION by JS only on wide non-touch viewports once GSAP is
     present; it hides the rail and swaps in a full-bleed pinned stage whose slab rotation
     is scrubbed against scroll distance.
     The pin is ScrollTrigger's, never position:sticky — sticky does not work inside
     ScrollSmoother's transformed content (3.1). */
  .sc-grid{margin-top:clamp(38px,5vw,68px)}
  .sc-panel{padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--line-soft)}
  .sc-panel:first-child{border-top:0;padding-top:0}
  .sc-idx{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--fog);margin-bottom:15px}
  .sc-idx b{color:var(--signal);font-weight:600}
  .sc-panel h3{font-size:clamp(21px,2.3vw,29px);letter-spacing:-.02em;margin-bottom:13px;max-width:20ch}
  .sc-panel > p{color:var(--bone-dim);max-width:48ch}
  .sc-notes{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:9px}
  .sc-notes li{position:relative;padding-left:19px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--fog)}
  .sc-notes li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:1px;background:var(--signal);opacity:.7}
  /* tablet frame — same material as the hero phone, scaled up and squared off */
  .tablet{background:#080606;border:1px solid var(--line);border-radius:20px;padding:9px;box-shadow:0 40px 84px rgba(0,0,0,.6)}
  .tablet-scr{position:relative;aspect-ratio:1180/820;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:#0F0C0A}
  .tablet-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
  .sc-inline{margin-top:26px;max-width:600px}
  .sc-stage{display:none}

  /* --- enhanced: the rail is replaced outright by one full-bleed pinned stage ------
     The track is pure scroll length; pinning the stage against it converts scroll
     distance into a frame index and an item index at once. Every non-enhanced case
     keeps the rail above and never sees any of this.

     The object is a BAKED FRAME SEQUENCE drawn to a canvas, not a live 3D scene and
     not CSS transforms. Three.js renders it offline (see the project's r3d harness)
     and the visitor downloads WebP stills — the same trade the ChainGPT solutions
     section makes, and the reason no 3D library is in the page's CSP or payload. */
  .sc-track{display:none}
  /* Not gated to desktop. §3.1's touch rule is about smooth-scroll HIJACKING, not
     pinning, which behaves fine on touch. The stage is simply laid out per viewport. */
  /* Visually hidden rather than display:none — the track is aria-hidden decoration,
     so display:none here would leave a screen reader with nothing for this section.
     .sc-inline still kills the rail's images, so nothing extra is downloaded. */
  .sc-on .sc-rail{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sc-on .sc-inline{display:none}
  .sc-on-sec .sc-track{display:block;position:relative;height:620vh}
  .sc-on-sec{padding-bottom:0}
  /* svh, not vh: on phones the URL bar hides on scroll and vh jumps with it, which
     would resize the pinned stage mid-scroll. svh is the stable small-viewport unit. */
  .sc-on .sc-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;
    height:100vh;height:100svh;position:relative;overflow:hidden;
    padding:clamp(58px,8vh,92px) clamp(18px,4vw,60px) clamp(18px,3.5vh,40px)}
  /* The sticky book-a-demo bar is fixed over the bottom of every viewport under
     760px and is showing by the time this section is reached — without this the
     tablet's lower edge and the progress dots sit underneath it. */
  @media(max-width:760px){
    .sc-on .sc-stage{padding-bottom:96px}
  }

  /* HUD strip — section label left, live screen name right */
  .sc-hud{display:flex;justify-content:space-between;align-items:center;gap:16px;
    font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
  .sc-hud span{color:var(--fog)}
  .sc-hud b{color:var(--signal);font-weight:600}

  .sc-cols{position:relative;display:grid;grid-template-columns:1fr;align-content:center;
    gap:clamp(12px,2.6vh,28px);min-height:0}

  /* centre — the sequence. Width/height on the element itself reserve the box before
     the first frame decodes, so nothing shifts when it arrives (3.7). */
  .sc-col-c{position:relative;justify-self:center;width:min(86vw,540px);z-index:2}
  #scCv{display:block;width:100%;height:auto}
  /* contact shadow — narrows as the slab turns edge-on, which is what sells it as
     sitting in a space rather than floating on a flat backdrop */
  .sc-floor{position:absolute;left:50%;bottom:4%;width:74%;height:38px;z-index:-1;
    transform:translate(-50%,0) scaleX(var(--fs,1));pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),transparent 70%);filter:blur(15px)}

  /* left — the item list. All four share one box; JS offsets each by its distance
     from the live index, so the one being read sits still and its neighbours sit
     above and below it, dimmed. Fixed box height means no measuring and no reflow. */
  /* overflow:hidden is load-bearing — neighbours are pushed a full item-height clear
     of the active one, so without the clip they hang outside the stage. */
  .sc-list{position:relative;height:min(46vh,330px);overflow:hidden}
  .sc-it{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    will-change:transform,opacity}
  .sc-no{display:flex;align-items:baseline;gap:11px;font-family:var(--mono);font-size:11px;
    font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--fog);margin-bottom:12px}
  .sc-no i{font-style:normal;color:var(--signal);font-weight:600}
  .sc-it h3{font-size:clamp(19px,2.4vw,33px);line-height:1.13;letter-spacing:-.022em;
    margin-bottom:11px;max-width:17ch}
  .sc-it > p{color:var(--bone-dim);font-size:clamp(13px,1.05vw,15.5px);line-height:1.62;max-width:40ch}

  /* right — annotations on the object. A short accent rule over a sentence, the way
     the reference product page labels what you are looking at; a bordered table of
     field names reads as a datasheet, which is a different and colder thing.
     Hidden below 1024px, where three columns cannot fit one viewport height without
     shrinking the object past the point of the whole exercise. */
  .sc-col-r{display:none}
  .sc-spec{position:absolute;right:0;top:50%;transform:translateY(-50%);width:100%;
    display:flex;flex-direction:column;gap:clamp(20px,3.2vh,38px);will-change:opacity}
  .sc-spec p{position:relative;padding-top:15px;max-width:31ch;margin-left:auto;
    font-size:clamp(12.5px,1vw,15px);line-height:1.5;color:var(--bone-dim)}
  .sc-spec p::before{content:"";position:absolute;top:0;left:0;width:44px;height:1px;
    background:var(--signal);opacity:.9}

  /* progress rail */
  .sc-prog{display:flex;align-items:center;gap:7px;justify-content:center}
  .sc-prog s{width:24px;height:2px;background:var(--line);text-decoration:none;
    transition:background .45s var(--ease-out)}
  .sc-prog s.on{background:var(--signal)}

  @media(min-width:1024px){
    .sc-on-sec .sc-track{height:820vh}
    /* extra right padding clears the vertical rail pinned to the stage edge */
    .sc-on .sc-stage{padding-right:clamp(56px,5vw,88px)}
    .sc-cols{grid-template-columns:minmax(0,1fr) auto minmax(0,.58fr);
      align-items:center;gap:clamp(22px,3.2vw,60px)}
    .sc-col-l,.sc-col-r{position:relative;height:min(58vh,430px)}
    .sc-list{height:100%}
    .sc-col-r{display:block}
    .sc-col-c{width:min(40vw,520px)}
    .sc-prog{position:absolute;right:clamp(16px,1.5vw,26px);top:50%;transform:translateY(-50%);
      flex-direction:column;gap:9px;z-index:3;margin:0}
    .sc-prog s{width:2px;height:20px}
  }

  /* bento */
  @media(max-width:820px){.bento{grid-template-columns:1fr}}

  /* Trust / risk-reversal promises — honest, qualitative; icons stay bone (amber reserved) */
  @media(max-width:900px){.trust-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.trust-grid{grid-template-columns:1fr}}
  .promise .ico{color:var(--bone-dim);margin-bottom:18px}
  .feat.sm{grid-column:span 4}
  /* Wide anchor card (Owner dashboard): the 6th card would otherwise sit alone in a
     7-col slot with ~40% dead space beside it. Span the full row and lay it out
     horizontally so the width reads as intentional. */
  @media(max-width:820px){.feat.big,.feat.mid,.feat.sm,.feat.wide{grid-column:span 1}.feat.wide{flex-direction:column}}

  /* industries */
  @media(max-width:820px){.inds{grid-template-columns:repeat(2,1fr)}}
  /* Custom monoline industry icon family — one grid, one stroke, drawn as a set.
     Colour is inherited (currentColor) so hover ambers the icon and label together. */
  /* pricing (light band) */
  .pricing{background:var(--bone);color:#171310}
  .pricing .eyebrow{color:var(--signal-deep)}
  .pricing .eyebrow::after{background:rgba(11,9,8,.12)}
  .pricing .lead{color:#5C544A}
  .freq-wrap{display:flex;flex-direction:column;gap:12px;margin:0 0 46px}
  .freq-toggle{position:relative;display:inline-flex;background:rgba(11,9,8,.05);border:1px solid rgba(11,9,8,.14);border-radius:5px;padding:4px;width:max-content}
  .freq-opt{position:relative;z-index:2;border:none;background:none;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#5C544A;padding:14px 24px;border-radius:3px;transition:color .3s;min-height:44px}
  .freq-opt.active{color:var(--bone)}
  .freq-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#171310;border-radius:3px;transition:left .35s var(--ease-inout);z-index:1}
  .freq-toggle[data-active="yearly"] .freq-ind{left:50%}
  .freq-save{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--confirm-deep)}
  .freq-save b{color:#171310}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(11,9,8,.16);border-radius:8px;overflow:hidden}
  /* Mobile pricing (Phase 9): vertical stack of separated cards with the recommended Pro
     tier pulled to the top (desktop keeps Pro in the middle of a joined 3-col grid). */
  @media(max-width:880px){.price-grid{grid-template-columns:1fr;gap:14px;border:none;border-radius:0;overflow:visible}.pcard{border:1px solid rgba(11,9,8,.18);border-radius:10px}.pcard.pop{order:-1}}
  .pcard{padding:clamp(30px,3.4vw,44px) clamp(24px,2.6vw,36px);display:flex;flex-direction:column;position:relative;background:var(--bone)}
  .pcard+.pcard{border-left:1px solid rgba(11,9,8,.16)}
  @media(max-width:880px){.pcard+.pcard{border-left:1px solid rgba(11,9,8,.18)}}
  .pcard.pop{background:#171310;color:var(--bone)}
  .pop-tag{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--signal);border-radius:3px;padding:5px 10px}
  .tier{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6B6156}
  .pcard.pop .tier{color:var(--signal)}
  .tier-fit{font-size:13px;color:#6B6156;margin-top:8px}
  .pcard.pop .tier-fit{color:var(--fog)}
  .price{font-variation-settings:"wdth" 121;font-weight:820;letter-spacing:-.02em;margin:22px 0 4px;display:flex;align-items:flex-end;gap:4px}
  .price .amt{font-size:46px;line-height:1;transition:opacity .25s;font-variant-numeric:tabular-nums}
  .price .per{font-family:var(--mono);font-size:12px;color:#6B6156;padding-bottom:7px;letter-spacing:.03em}
  .pcard.pop .price .per{color:var(--fog)}
  .price.swap .amt{opacity:0}
  .setup{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:#6B6156;font-variant-numeric:tabular-nums}
  .pcard.pop .setup{color:var(--fog)}
  .bill-note{font-family:var(--mono);font-size:11px;color:var(--confirm-deep);font-variant-numeric:tabular-nums;margin-top:0;max-height:0;opacity:0;overflow:hidden;transition:opacity .25s,max-height .25s,margin-top .25s}
  .pcard.pop .bill-note{color:var(--confirm)}
  body[data-billing="yearly"] .bill-note{max-height:48px;opacity:1;margin-top:8px}
  .save-badge{display:none;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--confirm-deep);border:1px solid rgba(46,107,60,.45);border-radius:3px;padding:4px 9px;margin-left:10px}
  .pcard.pop .save-badge{color:var(--confirm);border-color:rgba(127,207,149,.35)}
  body[data-billing="yearly"] .save-badge{display:inline-block}
  .pcard ul{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;flex-grow:1}
  .pcard li{font-size:14px;display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid rgba(11,9,8,.09)}
  .pcard.pop li{border-top-color:var(--line-soft)}
  .pcard li .ico{width:14px;height:14px;stroke-width:2.6;color:var(--signal-deep);margin-top:4px}
  .pcard.pop li .ico{color:var(--signal)}
  .pcard .btn{width:100%}
  .pcard:not(.pop) .btn-ghost{color:#171310;border-color:rgba(11,9,8,.28)}
  .pcard:not(.pop) .btn-ghost:hover{background:rgba(11,9,8,.05);border-color:rgba(11,9,8,.5)}
  /* Focus rings on the bone band: amber-on-bone is too low-contrast, so use ink on the
     light cards; the dark "Most popular" card keeps the amber ring. */
  .pricing :focus-visible{outline-color:#171310}
  .pcard.pop :focus-visible{outline-color:var(--signal)}
  .guarantee{display:flex;align-items:flex-start;gap:12px;margin-top:36px;font-size:15px;color:#3B352E;max-width:760px}
  .guarantee .ico{color:var(--confirm-deep);margin-top:2px;flex:none}

  /* faq */
  .faq-wrap{max-width:840px}
  .acc{border-top:1px solid var(--line)}
  .acc:last-child{border-bottom:1px solid var(--line)}
  .acc summary{font-variation-settings:"wdth" 112;font-weight:650;font-size:18px;color:var(--bone);cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:24px 4px;transition:color .2s}
  .acc summary:hover{color:var(--signal)}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary .q-idx{font-family:var(--mono);font-size:11px;color:var(--fog);flex:none;font-weight:400}
  .acc summary .ico{color:var(--signal);transition:transform .35s var(--ease-out);margin-left:auto}
  .acc[open] summary .ico{transform:rotate(45deg)}
  .acc .body{padding:0 4px 26px;color:var(--bone-dim);font-size:15px;line-height:1.65;max-width:680px;overflow:hidden}

  /* book */
  .book{border-top:1px solid var(--line-soft)}
  .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
  @media(max-width:920px){.book-grid{grid-template-columns:1fr}}
  .book-copy h2{margin-top:18px}
  .book-list{list-style:none;margin:28px 0 0;display:flex;flex-direction:column}
  .book-list li{display:flex;gap:12px;font-size:15.5px;color:var(--bone);align-items:center;padding:13px 0;border-top:1px solid var(--line-soft)}
  .book-list li .ico{color:var(--signal);width:16px;height:16px;stroke-width:2.4}
  .book-call{margin-top:30px}
  .book-call .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fog)}
  .book-call a{font-variation-settings:"wdth" 118;font-size:26px;font-weight:750;color:var(--bone);transition:color .2s;display:inline-block;margin-top:4px}
  .book-call a:hover{color:var(--signal)}
  .book-card{border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3.5vw,40px);background:var(--coal)}
  .book-card form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:520px){.book-card form{grid-template-columns:1fr}}
  .fld{display:flex;flex-direction:column;gap:8px}
  .fld.full{grid-column:span 2}
  @media(max-width:520px){.fld.full{grid-column:span 1}}
  .book-card label{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--fog)}
  .book-card input{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:5px;padding:14px 15px;font-size:15px;color:var(--bone);font-family:var(--sans);outline:none;transition:border-color .15s,box-shadow .15s}
  .book-card input::placeholder{color:var(--fog)}
  .book-card input:focus{border-color:var(--signal);box-shadow:0 0 0 3px rgba(255,173,51,.14)}
  .book-card input.bad{border-color:var(--alert);box-shadow:0 0 0 3px rgba(232,131,107,.14)}
  .err{display:none;color:var(--alert);font-size:12.5px}
  .err.show{display:block}
  .book-card .btn{margin-top:4px;width:100%;font-size:14px;padding:18px}
  .consent{font-size:11.5px;color:var(--fog);line-height:1.6;margin:0}
  .consent a{color:var(--bone-dim);text-decoration:underline}
  .form-success{text-align:center;padding:34px 6px}
  .form-success .check{width:58px;height:58px;border-radius:8px;background:rgba(127,207,149,.12);color:var(--confirm);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
  .form-success h3{font-size:24px;margin-bottom:8px}
  .form-success p{color:var(--bone-dim);font-size:15px;max-width:340px;margin:0 auto}

  /* footer */
  footer{border-top:1px solid var(--line-soft);padding:64px 0 40px}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:52px}
  @media(max-width:780px){.foot-grid{grid-template-columns:1fr;gap:34px}}
  .foot-about p{color:var(--bone-dim);font-size:13.5px;max-width:380px;margin-top:18px}
  .foot-about .fine{color:var(--fog);font-size:11.5px;margin-top:12px}
  .foot-col .foot-h{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--signal);margin-bottom:16px;font-weight:500}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  .foot-col a{color:var(--bone-dim);font-size:14px;transition:color .2s}
  .foot-col a:hover{color:var(--bone)}
  .foot-bottom{padding-top:26px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:10.5px;color:var(--fog);text-transform:uppercase;letter-spacing:.07em}

  /* modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(7,5,4,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
  .modal-overlay.open{display:flex}
  .modal{background:var(--coal);border:1px solid var(--line);border-radius:10px;max-width:460px;width:100%;padding:38px 34px;position:relative;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:rise .3s var(--ease-out)}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .modal-x{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--fog);cursor:pointer;line-height:1;padding:6px}
  .modal-x:hover{color:var(--bone)}
  .modal .eyebrow::after{display:none}
  .modal h3{font-size:23px;margin:16px 0 10px}
  .modal p{color:var(--bone-dim);font-size:14.5px;margin-bottom:22px}
  .selected-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--signal);margin:-6px 0 18px}
  .modal .btn{width:100%;margin-top:18px}
  .modal .btn.btn-ghost{margin-top:10px}
  .modal-sub{text-align:center;font-family:var(--mono);font-size:11px;color:var(--fog);margin:16px 0 0}

  /* to-top / progress / mobile cta */
  .to-top{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:6px;background:var(--coal2);border:1px solid var(--line);color:var(--bone);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s,border-color .2s}
  .to-top.show{opacity:1;pointer-events:auto;transform:none}
  .to-top:hover{border-color:var(--signal)}
  .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--signal);z-index:60;pointer-events:none}
  .mcta{display:none}
  @media(max-width:760px){
    .mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:flex;gap:8px;padding:8px;background:rgba(11,9,8,.95);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s,transform .3s}
    .mcta.show{opacity:1;pointer-events:auto;transform:none}
    .mcta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:14px;border-radius:5px}
    .mcta a .ico{width:15px;height:15px}
    .mcta .call{background:rgba(239,231,219,.06);border:1px solid var(--line);color:var(--bone)}
    .mcta .bk{background:var(--signal);color:var(--ink)}
    .to-top{bottom:88px;right:16px}
  }

  /* scroll reveals (JS-gated) */
  html.js .rv{opacity:0;transform:translateY(46px)}
  html.js .rv.rv-blur{filter:blur(12px)}
  /* Heading blocks whose h2 gets a SplitText line-rise: drop the 46px block slide
     so the line reveal is the only vertical motion (JS adds .rv-fade at runtime). */
  html.js .rv.rv-fade{transform:none}
  html.js .rv.in{opacity:1;transform:none;filter:none;transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),filter .85s var(--ease-out)}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    html.js .rv,html.js .h-rev{opacity:1!important;transform:none!important;filter:none!important}
    html.js .phone-stage{opacity:1!important}
    html.js .h-line>span{transform:none!important}
    .hl i{transform:scaleX(1)!important}
  }

/* Sub-page closing CTA (/pricing, /faq). The booking form itself stays on the
   homepage — these pages just need a route back to it. */
.sub-cta{border-top:1px solid var(--line)}
.sub-cta .wrap{text-align:center;max-width:660px}
.sub-cta h2{margin-bottom:14px}
.sub-cta .lead{margin:0 auto 30px;color:var(--bone-dim)}

/* ---------- Full-page choreography ----------
   Every section between the hero and the booking form is pinned and scrubbed, so
   nothing simply scrolls past — the page advances as one performance. One
   vocabulary for all of them (rise + fade in, hold, rise + fade out) rather than
   a different effect per section, per §2.3.
   .beat-on is added by JS only when GSAP is present and motion isn't reduced;
   without it every section is an ordinary, fully-visible block. */
.beat-on [data-beat] > .wrap,
.beat-on [data-beat] > .hero-grid{will-change:transform,opacity}

/* A standalone page (/pricing, /faq) leads with an h1 rather than the homepage's
   h2, so it needs exactly one heading at the section scale — the hero's 96px
   --step-hero would swamp a page that has no hero. */
.sec-head h1{font-size:var(--step-2);line-height:1.07}