/* ═══════════════════════════════════════════════════════════════════════════
   AUTUMN — shared design system for the five product pages.

   ONE FAMILY, FIVE ROOMS. Every page sets --tint and --accent; everything else
   is inherited. That is what makes five pages feel like one company rather than
   five agencies: the type, the spacing, the grain, the motion and the semantic
   colours are identical, and only the ground shifts under them.

   THE SEMANTIC FOUR NEVER CHANGE MEANING, on any page:
     yellow  found / discovered
     blue    reading / in progress
     green   verified / settled
     orange  needs you / worth your time
   A reader who learns them on Find can read Money without being told again.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Tokens live in tokens.css, which this page loads first. All seventeen that
   were declared here are owned there, and a second declaration loading after
   it would silently win — which is how eleven token blocks happened. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--tint);color:var(--ink);
  line-height:1.55;font-size:17px;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* Paper, not screen — one fixed grain, cheap, no image to download. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.028;mix-blend-mode:multiply;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The Platform inverts. Grain would muddy a dark ground, so it lifts instead. */
body.dark::after{mix-blend-mode:screen;opacity:.045}
/* AND THE SECONDARY INK INVERTS WITH IT, at the token rather than per rule.
   --slate is used by twelve rules; patching each with a body.dark twin is how
   one gets missed — which is exactly what happened, and "per month" under the
   Platform's price rendered at 1.52:1, effectively invisible. One token, one
   place, and every use lifts at once. */
/* AND THE BASE INK INVERTS TOO. This lived inline on platform.html, which was
   fine while dark was a whole page. Now dark is one SECTION of one page, and
   without these rules everything not explicitly overridden — every heading,
   every <span>, every price — renders near-black on near-black. It did: the
   pricing tiles showed a swatch and a description with the product name and the
   price invisible between them. */
body.dark{--slate:#9DA19B;color:#F1F1EC}
body.dark h1,body.dark h2,body.dark h3{color:#F6F7EB}
/* --ink is a BACKGROUND for buttons and the toggle, so it must not invert.
   Anything using it as a border needs the dark ground's own line colour. */
body.dark [style*="1px solid var(--ink)"],
body.dark .calc,body.dark .bundle{border-color:#3A3835}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{position:relative;padding:clamp(72px,11vw,160px) 0}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
         line-height:1.02;text-wrap:balance}
h1{font-size:clamp(3rem,8.4vw,7.2rem)}
h2{font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1.06}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15}
em,.hl{font-style:italic;color:var(--accent)}
p{max-width:62ch}
.lede{font-size:clamp(1.06rem,1.7vw,1.32rem);color:var(--slate);line-height:1.62}
body.dark .lede,body.dark p{color:#B9BCB6}

/* Machine voice: anything counted, measured or timestamped. */
.tech{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
      text-transform:uppercase;color:var(--slate);font-weight:500}
body.dark .tech{color:#8E938C}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

/* a{color:inherit} moved to components.css — it is a reset, and the app needs
   it too. Leaving a copy here would be two definitions of one decision. */
.btn{display:inline-flex;align-items:center;gap:11px;padding:17px 32px;border:0;
     border-radius:2px;background:var(--ink);color:var(--tint);
     font:600 .97rem/1 var(--sans);cursor:pointer;text-decoration:none;
     transition:transform .18s cubic-bezier(.2,.8,.2,1)}
body.dark .btn{background:#F6F7EB;color:#191716}
.btn:hover{transform:translateY(-2px)}
/* The primary action, at 78% accent toward ink. The raw accents are picked to
   sing as a 4rem italic against their own ground; as a 14px label reversed out
   in white they do not clear AA — Find's red measured 3.72:1 and Money's green
   3.54:1. A shade deeper is still unmistakably the product's colour and is
   actually readable, which a call to action has to be before it is anything. */
.btn--go{background:color-mix(in srgb,var(--accent) 78%,var(--ink));color:#fff}
.btn--ghost{background:transparent;color:inherit;border:1px solid currentColor}
/* SPECIFICITY, and it was live: `body.dark .btn` is (0,2,1) and beat both
   modifiers at (0,1,0), so on the Platform the primary and the ghost rendered
   as the same cream block — the page had no visible primary action at all.
   Caught by rendering it, not by reading it. The variants have to match the
   dark rule's weight to survive it. Gold takes ink rather than white (8.96:1). */
body.dark .btn--go{background:var(--accent);color:#191716}
body.dark .btn--ghost{background:transparent;color:#F1F1EC;border:1px solid currentColor}
.btn .arw{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arw{transform:translateX(5px)}
:focus-visible{outline:2.5px solid var(--info);outline-offset:3px}

/* ── LOADING ─────────────────────────────────────────────────────────────── */
#boot{position:fixed;inset:0;z-index:9998;background:var(--tint);display:grid;
      place-items:center;transition:opacity .7s ease,visibility .7s}
#boot.gone{opacity:0;visibility:hidden}
#boot .inner{text-align:center;width:min(420px,80vw)}
#bootBar{height:1px;background:var(--mist);margin-top:22px;position:relative;overflow:hidden}
#bootBar i{position:absolute;inset:0 100% 0 0;background:var(--accent);
           transition:right .5s cubic-bezier(.4,0,.2,1)}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:900;border-bottom:1px solid transparent;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
nav.solid{background:color-mix(in srgb,var(--tint) 92%,transparent);
          backdrop-filter:blur(14px);border-bottom-color:var(--mist)}
body.dark nav.solid{border-bottom-color:#2E2C2A}
nav.up{transform:translateY(-102%)}
nav .bar{max-width:var(--max);margin:0 auto;padding:16px var(--gut);display:flex;
         align-items:center;justify-content:space-between;gap:18px}
nav .brand{font-family:var(--serif);font-size:1.28rem;text-decoration:none}
nav .brand span{color:var(--accent)}
nav .links{display:flex;align-items:center;gap:24px;font-size:.9rem}
nav .links a{text-decoration:none;color:var(--slate);transition:color .2s}
body.dark nav .links a{color:#9A9E98}
nav .links a:hover{color:color-mix(in srgb,var(--accent) 70%,var(--ink))}
body.dark nav .links a:hover{color:var(--accent)}
nav .btn{padding:11px 20px;font-size:.86rem}
/* The nav CTA needs its own weight or `nav .links a` (0,1,2) paints it slate on
   the accent. Measured before this rule: 1.37:1 on the Platform, 1.52:1 on
   Operations — the most important control on the page, nearly invisible. */
nav .links a.btn--go{color:#fff}
body.dark nav .links a.btn--go{color:#191716}
@media(max-width:900px){nav .links a:not(.btn){display:none}}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:96px;padding-bottom:64px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:end;
           grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
h1 .ln{display:block;overflow:hidden}
h1 .ln>span{display:block;transform:translateY(105%);
            transition:transform .95s cubic-bezier(.16,1,.3,1)}
.ready h1 .ln>span{transform:none}
.ready h1 .ln:nth-child(2)>span{transition-delay:.1s}

.readout{display:grid;gap:14px;border-left:1px solid var(--mist);padding-left:22px}
body.dark .readout{border-left-color:#2E2C2A}
.readout .r{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.readout .v{font-family:var(--mono);font-size:clamp(1.05rem,1.7vw,1.35rem);
            font-variant-numeric:tabular-nums;font-weight:500}
.readout .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
            text-transform:uppercase;color:var(--slate);text-align:right}
body.dark .readout .k{color:#8E938C}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:7px}
.d-find{background:var(--discover)}.d-read{background:var(--info)}
.d-ver{background:var(--verified)}.d-pri{background:var(--action)}

/* ── REVEALS ─────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);
    transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}

/* ── PANELS / STEPS ──────────────────────────────────────────────────────── */
.steps{display:grid;gap:1px;background:var(--mist);border:1px solid var(--mist);margin-top:44px}
body.dark .steps{background:#2E2C2A;border-color:#2E2C2A}
.step{background:var(--tint);padding:26px 24px;display:grid;gap:9px}
/* The accent darkened toward ink, for the places it carries SMALL text. The
   brand accents are chosen to sing against their ground at heading size, and
   Money's green lands at 3.16:1 — fine for a 4rem italic, a failure for a
   .68rem label. Same hue, readable weight, one rule for all five pages. */
.step .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
         color:color-mix(in srgb,var(--accent) 70%,var(--ink))}
body.dark .step .n{color:var(--accent)}   /* on the dark ground it already clears */
.step p{font-size:.94rem;color:var(--slate);margin:0}
body.dark .step p{color:#B9BCB6}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ── SIGNATURE SCENE (pinned) ────────────────────────────────────────────── */
.scene{height:320vh;position:relative}
.scene-stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.scene-stick canvas{position:absolute;inset:0;width:100%;height:100%}
.beats{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--gut);
       pointer-events:none;z-index:3}
.beat{position:absolute;font-family:var(--serif);font-size:clamp(1.9rem,5.4vw,4.2rem);
      line-height:1.08;text-align:center;opacity:0;transform:translateY(20px) scale(.985);
      transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);max-width:17ch}
.beat.on{opacity:1;transform:none}
.scene-label{position:absolute;left:var(--gut);top:calc(50% - 46vh);z-index:3}

/* ── PRICING ─────────────────────────────────────────────────────────────── */
.toggle{display:inline-flex;border:1px solid currentColor;margin:0 0 34px}
.toggle button{border:0;background:transparent;font:600 .86rem/1 var(--sans);
               padding:13px 24px;cursor:pointer;color:var(--slate)}
body.dark .toggle button{color:#9A9E98}
.toggle button[aria-pressed=true]{background:var(--ink);color:var(--tint)}
body.dark .toggle button[aria-pressed=true]{background:#F6F7EB;color:#191716}
.plans{display:grid;gap:1px;background:var(--mist);border:1px solid var(--mist)}
body.dark .plans{background:#2E2C2A;border-color:#2E2C2A}
@media(min-width:900px){.plans--3{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--tint);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.plan.sel{background:var(--cloud);box-shadow:inset 0 3px 0 0 var(--accent)}
body.dark .plan.sel{background:#211F1D}
.plan .pn{font-family:var(--serif);font-size:1.65rem}
.plan .pp{font-family:var(--mono);font-size:clamp(2.1rem,4vw,2.9rem);font-weight:500;
          font-variant-numeric:tabular-nums;margin:16px 0 3px;line-height:1}
.plan .pu{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;
          text-transform:uppercase;color:var(--slate)}
.plan ul{list-style:none;margin:24px 0;display:grid;gap:11px;flex:1}
.plan li{font-size:.93rem;color:var(--slate);padding-left:20px;position:relative}
body.dark .plan li{color:#B9BCB6}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:1.5px;
                 background:var(--accent)}
.terms{margin-top:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
       color:var(--slate)}

/* Not yet buyable. An honest state, styled as calmly as an available one — a
   product that looks broken is worse than one that says "not yet". */
.notyet{border:1px dashed var(--mist);padding:18px 20px;margin-top:20px;
        display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.notyet .tech{color:var(--info)}

/* ── OBJECTIONS ──────────────────────────────────────────────────────────── */
.obj{border-top:1px solid var(--mist);padding:22px 0}
body.dark .obj{border-top-color:#2E2C2A}
.obj summary{cursor:pointer;list-style:none;font-size:clamp(1.02rem,1.7vw,1.2rem);
             font-weight:500;display:flex;gap:16px;align-items:baseline}
.obj summary::-webkit-details-marker{display:none}
.obj summary::before{content:"+";font-family:var(--mono);
                     color:color-mix(in srgb,var(--accent) 70%,var(--ink))}
body.dark .obj summary::before{color:var(--accent)}
.obj[open] summary::before{content:"−"}
.obj p{margin-top:13px;padding-left:32px;color:var(--slate);font-size:.98rem}

/* ── OTHER PRODUCTS STRIP ────────────────────────────────────────────────── */
.family{display:grid;gap:1px;background:var(--mist);border:1px solid var(--mist);margin-top:40px}
body.dark .family{background:#2E2C2A;border-color:#2E2C2A}
@media(min-width:760px){.family{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.family{grid-template-columns:repeat(4,1fr)}}
.fam{background:var(--tint);padding:26px 22px;text-decoration:none;display:grid;gap:8px;
     transition:background .25s}
.fam:hover{background:var(--cloud)}
body.dark .fam:hover{background:#211F1D}
.fam .swatch{width:26px;height:4px;border-radius:2px}
.fam h3{font-size:1.25rem}
.fam p{font-size:.88rem;color:var(--slate);margin:0}
body.dark .fam p{color:#9A9E98}

footer{border-top:1px solid var(--mist);padding:34px 0;font-size:.85rem;color:var(--slate)}
body.dark footer{border-top-color:#2E2C2A;color:#8E938C}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

/* ── REDUCED MOTION: the same story, standing still ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  h1 .ln>span{transform:none}
  .beat{position:static;opacity:1;transform:none;margin:18px auto}
  .beats{position:static;display:block}
  .scene{height:auto}
  .scene-stick{position:static;height:auto;padding:64px 0}
  .scene-label{position:static}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEMONSTRATIONS

   Marley, 2026-08-08: "I like all the visuals we have, I just think we can
   have more and less copy." So every mechanism that was a paragraph is now a
   component that performs it. The styles below are all instrument, not
   decoration — a promise being detected, invoices being sorted, work stacking
   behind a stage. If a rule here is not showing the product working, it should
   not survive the next edit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── COPY HIERARCHY ───────────────────────────────────────────────────────
   Three registers and no more: a big statement, one short explanation, and
   everything else behind an interaction. The page stopped being readable when
   the middle register grew. */
.state{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;
       text-wrap:balance;max-width:19ch}
.state em{color:var(--accent)}
.one-line{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--slate);max-width:46ch;
          line-height:1.6;margin-top:18px}
body.dark .one-line{color:#B9BCB6}

/* ── SHARED DEMO CHROME ───────────────────────────────────────────────────
   Every demonstration carries the same frame and the same marker, so a reader
   can always tell at a glance what is a claim and what is a picture of one. */
.demo{border:1px solid var(--mist);background:var(--panel);position:relative;
      transition:background .9s ease,border-color .9s ease}
body.dark .demo{border-color:#3A3835}
.demo-hd{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
         flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--mist)}
body.dark .demo-hd{border-bottom-color:#3A3835}
.demo-bd{padding:clamp(18px,2.6vw,30px)}
.illus{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
       color:var(--slate);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.illus::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--intel)}
.chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
      padding:5px 9px;border-radius:2px;white-space:nowrap;font-weight:500}
.chip--go{background:color-mix(in srgb,var(--action) 12%,transparent);
          color:color-mix(in srgb,var(--action) 74%,var(--ink))}
.chip--wait{background:color-mix(in srgb,var(--intel) 18%,transparent);
            color:color-mix(in srgb,var(--intel) 46%,var(--ink))}
.chip--no{background:color-mix(in srgb,var(--verified) 14%,transparent);
          color:color-mix(in srgb,var(--verified) 58%,var(--ink))}
.chip--read{background:color-mix(in srgb,var(--info) 12%,transparent);
            color:color-mix(in srgb,var(--info) 82%,var(--ink))}
body.dark .chip--go,body.dark .chip--wait,body.dark .chip--no,body.dark .chip--read{
  color:#F1F1EC;background:rgba(255,255,255,.10)}

/* ── HERO: a market arriving, then one of them ────────────────────────────── */
.hcard{border:1px solid var(--ink);background:var(--panel);padding:22px 24px;
       max-width:400px;opacity:0;transform:translateY(16px) scale(.985);
       transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.hcard.in{opacity:1;transform:none}
.hcard .hn{font-family:var(--serif);font-size:1.4rem;line-height:1.1}
.hf{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    padding:9px 0;border-bottom:1px dotted var(--mist);opacity:0;transform:translateY(6px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.hf.in{opacity:1;transform:none}
.hf:last-of-type{border-bottom:0}
.hf .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
       color:var(--slate)}
.hf .v{font-size:.94rem;text-align:right}

/* ── THE FOUR JOBS: one pinned frame, four systems ────────────────────────── */
.jobs-scene{height:340vh;position:relative}
.jobs-stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.jobs-stick canvas{position:absolute;inset:0;width:100%;height:100%}
.jpanels{position:relative;z-index:2;width:min(var(--max),100%);padding:0 var(--gut)}
/* A SCRIM, because the demonstration is full-bleed and the words are not. The
   threads and the grid run edge to edge by design — that is what a market and
   an inbox look like — so without this the copy sits ON the demo and a line
   runs straight through "Nobody chose it." Ground on the left, fading out
   before it can hide the part the reader is meant to be watching. */
.jpanels::before{content:"";position:absolute;inset:-40vh -10% -40vh -8%;z-index:-1;
  background:linear-gradient(100deg,var(--tint) 0%,var(--tint) 34%,
             color-mix(in srgb,var(--tint) 55%,transparent) 52%,transparent 72%);
  pointer-events:none;transition:background .9s ease}
.jpanel{position:absolute;inset:auto 0 auto 0;opacity:0;transform:translateY(14px);
        transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);max-width:34ch}
.jpanel.on{opacity:1;transform:none;position:relative}
.jpanel .jn{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--accent)}
.jpanel h3{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;
           margin-top:10px}
.jpanel p{margin-top:12px;color:var(--slate);font-size:1rem}
.jsteps{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}

/* ── FUNNEL ───────────────────────────────────────────────────────────────── */
.funnel{display:grid;gap:2px;margin-top:34px}
.fstep{display:grid;grid-template-columns:minmax(8em,auto) 1fr minmax(9em,auto);gap:16px;
       align-items:center;padding:15px 18px;background:var(--panel);opacity:0;
       transform:translateX(-10px);border:1px solid var(--mist);
       transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.fstep.in{opacity:1;transform:none}
/* The inverted scale. Each step down the funnel is physically larger than the
   one above it, so the eye reads "and THIS is the answer" rather than "and this
   is all that survived". */
.fstep .fn{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
           font-size:clamp(1.05rem,2vw,1.45rem);line-height:1;
           transition:font-size .4s cubic-bezier(.16,1,.3,1)}
.fstep:nth-child(2) .fn{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.fstep:nth-child(3) .fn{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.fstep:nth-child(4) .fn{font-size:clamp(2rem,4vw,3rem)}
.fstep.last .fn{font-size:clamp(2.8rem,6.4vw,5rem);letter-spacing:-.03em}
.fstep .fl{font-size:.9rem;color:var(--slate);text-align:right}
.fstep .fl b{color:var(--ink);font-weight:600}
body.dark .fstep .fl b{color:#F1F1EC}
.fstep.last{padding:24px 18px;background:var(--cloud)}
.fstep.last .fl{font-size:1rem}

/* WHAT IS IN THE 2,000. The funnel used to keep narrowing to a number that read
   as a remainder. It now stops at what the customer actually receives, and the
   composition sits underneath as a breakdown rather than a further loss. */
.inside{display:grid;gap:2px;margin-top:10px;background:var(--mist);
        border:1px solid var(--mist)}
@media(min-width:640px){.inside{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.inside{grid-template-columns:repeat(4,1fr)}}
.ins-cell{background:var(--panel);padding:22px 20px;display:grid;gap:6px;align-content:start}
.ins-cell b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
            font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;
            color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.ins-cell span{font-size:.88rem;color:var(--slate);line-height:1.45}
.fstep .fbar{height:8px;background:var(--cloud);position:relative;overflow:hidden;min-width:50px}
.fstep .fbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);
               transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.fstep.last{border-color:var(--accent)}
.fstep.last .fn{color:var(--accent)}
@media(max-width:640px){.fstep{grid-template-columns:1fr auto}.fstep .fbar{display:none}}

/* ── THREAD: promise, silence, draft ──────────────────────────────────────── */
.tstep{display:grid;grid-template-columns:6.5em 1fr;gap:18px;padding:15px 0;
       border-bottom:1px dotted var(--mist);opacity:0;transform:translateY(10px);
       transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.tstep.in{opacity:1;transform:none}
.tstep .tw{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
           color:var(--slate);padding-top:4px}
.tstep .tq{font-family:var(--serif);font-size:1.18rem;line-height:1.35}
.tstep .tnote{font-size:.9rem;color:var(--slate);margin-top:5px}
.tstep.quiet .tq{color:var(--slate);font-style:italic}
.tstep.hit{border-bottom-color:var(--action)}
.tdraft{border:1px solid var(--ink);background:var(--cloud);padding:20px 22px;margin-top:20px}
body.dark .tdraft{border-color:#3A3835}
.tdraft .body{font-size:.97rem;line-height:1.72;white-space:pre-line;margin-top:14px}
.tacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tacts button{font:600 .86rem/1 var(--sans);padding:12px 20px;border-radius:2px;cursor:pointer;
              border:1px solid var(--ink);background:transparent;color:inherit;
              transition:transform .16s ease,background .16s ease}
.tacts button:hover{transform:translateY(-1px)}
.tacts button[data-act=send]{background:var(--ink);color:var(--tint);border-color:var(--ink)}
body.dark .tacts button{border-color:#5A5651}
body.dark .tacts button[data-act=send]{background:#F6F7EB;color:#191716}
.tresult{margin-top:16px;font-size:.92rem;opacity:0;transition:opacity .4s ease;
         min-height:1.4em;font-weight:500;
         color:color-mix(in srgb,var(--verified) 62%,var(--ink))}
body.dark .tresult{color:#9DC183}
.tresult.in{opacity:1}

/* ── LEDGER: chase, wait, leave alone ─────────────────────────────────────── */
.ledger{display:grid;gap:2px;margin-top:8px}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
      padding:15px 18px;background:var(--panel);border:1px solid var(--mist);cursor:pointer;
      opacity:0;transform:translateX(-8px);text-align:left;font:inherit;width:100%;
      transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.lrow.in{opacity:1;transform:none}
.lrow:hover,.lrow.open{border-color:var(--ink)}
body.dark .lrow:hover,body.dark .lrow.open{border-color:#7A756E}
.lrow .lco{font-weight:500}
.lrow .lage{font-family:var(--mono);font-size:.84rem;color:var(--slate)}
.lrow .lamt{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:5.5em;
            text-align:right}
.lrow .lwhy{grid-column:1/-1;font-size:.9rem;color:var(--slate);max-height:0;overflow:hidden;
            transition:max-height .35s ease,margin .35s ease;margin:0}
.lrow.open .lwhy{max-height:9em;margin-top:8px}
.lhead{display:flex;gap:12px;align-items:center;margin:24px 0 8px}
.lhead i{flex:1;height:1px;background:var(--mist)}

/* ── FLOW: stages, and the one that fills ─────────────────────────────────── */
.flow{display:grid;gap:2px;margin-top:30px}
@media(min-width:860px){.flow{grid-template-columns:repeat(5,1fr)}}
.fstage{background:var(--panel);border:1px solid var(--mist);padding:20px 16px;
        opacity:0;transform:translateY(10px);position:relative;
        transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),
                   border-color .5s ease,background .5s ease}
.fstage.in{opacity:1;transform:none}
.fstage .fs{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
            color:var(--slate)}
.fstage .fq{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.1rem;
            font-weight:500;line-height:1;margin:10px 0 4px}
.fstage .fd{font-size:.85rem;color:var(--slate)}
.flowwrap.diagnosed .fstage[data-jam]{border-color:var(--action);
  background:color-mix(in srgb,var(--action) 7%,var(--panel))}
.flowwrap.diagnosed .fstage[data-jam] .fq{color:color-mix(in srgb,var(--action) 78%,var(--ink))}
body.dark .flowwrap.diagnosed .fstage[data-jam] .fq{color:#F0836D}
.verdict-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px;opacity:0;
             transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.flowwrap.diagnosed .verdict-row{opacity:1;transform:none}

/* ── COMPANY BRAIN ────────────────────────────────────────────────────────── */
.bfacts{display:grid;gap:2px;margin-top:32px}
@media(min-width:760px){.bfacts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.bfacts{grid-template-columns:repeat(4,1fr)}}
.bfact{background:var(--panel);border:1px solid var(--mist);padding:22px 20px;
       opacity:0;transform:translateY(12px);position:relative;
       transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .6s ease}
.bfact.in{opacity:1;transform:none}
.bfact .bl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.bfact .bv{font-family:var(--serif);font-size:1.24rem;line-height:1.25;margin-top:12px}
.bfact .bs{font-size:.86rem;color:var(--slate);margin-top:8px}
.brainwrap.joined .bfact{border-color:var(--intel)}
.bjoin{text-align:center;margin-top:26px;opacity:0;transform:translateY(10px);
       transition:opacity .6s ease,transform .6s ease}
.brainwrap.joined .bjoin{opacity:1;transform:none}
.bjoin .bt{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.1}
.binsights{position:relative;margin-top:26px}
.binsight{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;
          transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
          border-left:3px solid var(--intel);background:var(--panel);padding:22px 24px}
.binsight.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.binsight .bq{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.2}
.binsight p{margin-top:12px;font-size:.96rem;color:var(--slate)}
.bdots{display:flex;gap:8px;margin-top:18px;justify-content:center}
.bdot{width:34px;height:3px;border-radius:2px;background:var(--mist);border:0;cursor:pointer;
      padding:0;transition:background .3s ease}
.bdot[aria-selected=true]{background:var(--intel)}

/* ── THE WATCH ────────────────────────────────────────────────────────────── */
.watch{display:grid;gap:2px;margin-top:34px}
@media(min-width:820px){.watch{grid-template-columns:repeat(3,1fr)}}
.wmonth{background:var(--panel);border:1px solid var(--mist);padding:24px 22px;opacity:0;
        transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.wmonth.in{opacity:1;transform:none}
.wmonth .wm{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;color:var(--slate)}
.wmonth h4{font-family:var(--serif);font-size:1.4rem;margin:10px 0 16px}
.wmonth ul{list-style:none;display:grid;gap:9px}
.wmonth li{display:flex;gap:12px;align-items:baseline;font-size:.9rem;color:var(--slate)}
.wmonth li b{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:3.2em;
             color:var(--ink);font-weight:500}
body.dark .wmonth li b{color:#F1F1EC}
.wmonth li b.up{color:color-mix(in srgb,var(--verified) 66%,var(--ink))}
.wmonth li b.down{color:color-mix(in srgb,var(--action) 74%,var(--ink))}

/* ── NO SEATS ─────────────────────────────────────────────────────────────── */
.seats{border:1px solid var(--ink);background:var(--panel);padding:clamp(24px,3.4vw,40px);
       margin-top:34px}
body.dark .seats{border-color:#3A3835}
.sfig{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0;min-height:76px;align-content:flex-start}
.sfig i{width:12px;height:22px;border-radius:2px 2px 0 0;background:var(--accent);opacity:.85;
        animation:pop .3s cubic-bezier(.16,1,.3,1) backwards}
@keyframes pop{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:.85}}
.seats input[type=range]{width:100%;accent-color:var(--accent)}
.seats .srow{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;
             flex-wrap:wrap;margin-top:16px}
.seats .sn{font-family:var(--mono);font-size:1.35rem;font-weight:500}
.seats .sp{font-family:var(--mono);font-size:clamp(2rem,4vw,2.8rem);font-weight:500;line-height:1}

/* ── AVAILABILITY ─────────────────────────────────────────────────────────── */
.avail{display:grid;gap:2px;margin-top:30px}
@media(min-width:760px){.avail{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.avail{grid-template-columns:repeat(4,1fr)}}
.av{background:var(--panel);border:1px solid var(--mist);padding:20px 18px;display:grid;gap:9px;
    align-content:start}
.av .an{font-family:var(--serif);font-size:1.25rem}
.av details summary{cursor:pointer;list-style:none;font-size:.85rem;color:var(--slate);
                    text-decoration:underline;text-underline-offset:3px}
.av details summary::-webkit-details-marker{display:none}
.av details p{font-size:.85rem;color:var(--slate);margin-top:9px}

/* ── CUSTOM CURSOR ────────────────────────────────────────────────────────── */
.cur{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;opacity:0;
     transition:opacity .3s ease;will-change:transform}
.cur.live{opacity:1}
.cur i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
       background:var(--accent);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.cur span{position:absolute;left:16px;top:-9px;font-family:var(--mono);font-size:.58rem;
          letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
          background:var(--ink);color:var(--tint);padding:4px 8px;border-radius:2px;
          opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.cur.wide i{transform:scale(2.1)}
.cur.wide span{opacity:1;transform:none}
body.dark .cur span{background:#F6F7EB;color:#191716}
@media(pointer:coarse){.cur{display:none}}

/* ── FINAL ────────────────────────────────────────────────────────────────── */
.final{text-align:center;position:relative;overflow:hidden}
.final canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.final .wrap{position:relative;z-index:1}
.final h2{margin:0 auto;max-width:16ch}
.final .sub{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.6rem);color:var(--accent);
            margin-top:8px}


/* ── THE PICKER: five services, mixed and matched ──────────────────────────
   Was three Find tiers and a bundle box. There was no way to take Money and
   leave Find, and the Platform read as a discount on a basket rather than as
   the flagship it is. Now every service is a card you can pick, the Platform
   is one of them, and choosing it visibly ECLIPSES the rest rather than adding
   to them — because billing twice for one thing is not a packaging question. */
.picker{display:grid;gap:2px;margin-top:26px}
@media(min-width:700px){.picker{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.picker{grid-template-columns:repeat(4,1fr)}}
.pk{background:var(--panel);border:1px solid var(--mist);padding:22px 20px;cursor:pointer;
    display:grid;gap:9px;align-content:start;position:relative;
    transition:border-color .2s ease,background .2s ease,opacity .35s ease}
.pk:hover{border-color:var(--slate)}
.pk .sw{width:28px;height:4px;border-radius:2px}
.pk-name{font-family:var(--serif);font-size:1.45rem;line-height:1.05}
.pk-price{font-family:var(--mono);font-size:1.5rem;font-weight:500;
          font-variant-numeric:tabular-nums;line-height:1}
.pk-price i{font-style:normal;font-size:.6em;color:var(--slate)}
.pk p{font-size:.88rem;color:var(--slate);margin:0}
.pk-state{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
          font-weight:500}
.pk-state.live{color:color-mix(in srgb,var(--verified) 66%,var(--ink))}
.pk-state.soon{color:color-mix(in srgb,var(--info) 82%,var(--ink))}
/* The chosen state has to be unmissable — a tick you have to hunt for is a
   customer who is not sure what they are about to be charged. */
.pk.on{border-color:var(--ink);background:var(--cloud);box-shadow:inset 0 3px 0 0 var(--accent)}
.pk.on::after{content:"✓";position:absolute;top:14px;right:16px;font-size:.9rem;
              font-weight:700;color:var(--accent)}
.pk.eclipsed{opacity:.34;pointer-events:none}
/* Same corner as the tick, or a card that happened to be selected before shows
   the badge top-right while an unselected one drops it inline at the bottom —
   which is what it did, and it read as a rendering fault rather than a state. */
.pk.eclipsed::after{content:"IN THE PLATFORM";position:absolute;top:14px;right:16px;
                    font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
                    color:var(--slate);font-weight:500}
.pk--flag{border-color:var(--intel)}
@media(min-width:1080px){.pk--flag{grid-column:1/-1;
  grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px 24px}
  .pk--flag p{max-width:56ch}}
.pk-tier{display:grid;gap:6px;margin-top:4px}
.pk-tier select{font:inherit;font-size:.86rem;padding:9px 10px;border:1px solid var(--mist);
                background:var(--tint);border-radius:2px;cursor:pointer;width:100%}

/* The running total, and what it means. */
.pk-bar{border:1px solid var(--ink);background:var(--panel);margin-top:2px;
        padding:clamp(20px,2.6vw,30px);display:grid;gap:18px;align-items:center}
@media(min-width:860px){.pk-bar{grid-template-columns:auto 1fr auto}}
body.dark .pk-bar{border-color:#3A3835}
.pk-total{font-family:var(--mono);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:500;
          font-variant-numeric:tabular-nums;line-height:1;display:block}
.pk-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
        color:var(--slate)}
.pk-note{font-size:.9rem;color:var(--slate);margin:0;max-width:46ch}
.pk-note strong{color:var(--ink);font-weight:600}
body.dark .pk-note strong{color:#F1F1EC}
.pk-go[disabled]{opacity:.35;cursor:not-allowed;transform:none}

/* ── NARROW SCREENS ────────────────────────────────────────────────────────
   Caught by measuring, not by looking: `.illus` had a scrollWidth of 405 in a
   345px column. `white-space:nowrap` was right for a marker sitting in a demo
   header on a desktop and wrong for the same marker on a phone, where it ran
   off the edge and `overflow-x:hidden` quietly ATE the end of the sentence —
   which is the worst of both, because nothing scrolls and nothing warns you.
   Anything that cannot fit must be allowed to wrap. */
@media(max-width:700px){
  .illus,.chip{white-space:normal}
  .pk--flag{grid-column:auto}
  .pk-bar{grid-template-columns:1fr;text-align:left}
  .pk-go{justify-self:stretch;justify-content:center}
  .illus{align-items:flex-start}
  .illus::before{margin-top:.42em;flex:0 0 auto}

  /* Two-column grids inside the demos become one. minmax(8em,auto) plus a bar
     plus minmax(9em,auto) does not fit 350px however patient you are. */
  .fstep{grid-template-columns:1fr auto;gap:10px}
  .tstep{grid-template-columns:1fr;gap:4px}
  .tstep .tw{padding-top:0}
  .lrow{grid-template-columns:1fr auto;gap:6px 12px}
  .lrow .lage{grid-row:2;justify-self:start}
  .sum{grid-template-columns:auto 1fr;gap:8px 12px}
  .sum .worth{grid-column:2;text-align:left;min-width:0}
  .verdict{grid-template-columns:1fr}
  .demo-hd{gap:8px}
  .demo-bd{padding:18px 16px}

  /* The pinned four-jobs scene needs the copy to sit ON the demonstration
     rather than beside it, so the scrim covers the whole frame. */
  .jpanels::before{inset:-40vh -20% -40vh -20%;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--tint) 88%,transparent) 0%,
      color-mix(in srgb,var(--tint) 88%,transparent) 100%)}
  .jpanel{max-width:none}
  .jobs-scene{height:300vh}

  /* Scenes are shorter still: a phone scrolls faster per pixel of thumb. */
  .scene{height:150vh}
}

@media(prefers-reduced-motion:reduce){
  .jobs-scene{height:auto}
  .jobs-stick{position:static;height:auto;padding:48px 0;display:block}
  .jobs-stick canvas{display:none}
  .jpanel{position:relative;opacity:1;transform:none;margin-bottom:36px;max-width:none}
  .hcard,.hf,.fstep,.tstep,.lrow,.fstage,.bfact,.wmonth{opacity:1;transform:none}
  .bjoin,.verdict-row,.tresult{opacity:1;transform:none}
  .binsight{position:relative;opacity:1;transform:none;pointer-events:auto;margin-bottom:12px}
  .cur{display:none}
  .sfig i{animation:none}
  .fstep .fbar i{transition:none}
}