/* ===== Unhazzle — the operating surface ====================================
     Dark operates, light proves. Glass panels over a blue-slate field lit by a
     slow aurora, with film grain so nothing reads as flat black.

     TWO RULES THAT KEEP IT FROM LOOKING CHEAP:
     1. An action is not a status. The primary action is PLATINUM; the six
        status inks are reserved for what the system is telling you. Binding the
        button to the health colour is what made everything look like a generic
        SaaS template.
     2. One typeface does the talking. Supreme carries every label, button and
        heading; Fragment Mono appears ONLY on data the machine produced —
        timestamps, region codes, hashes, log rows.
     ========================================================================= */
  @font-face{font-family:'Supreme';src:url("fonts/supreme-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Supreme';src:url("fonts/supreme-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:'Supreme';src:url("fonts/supreme-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Fragment Mono';src:url("fonts/fragment-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

  :root{
    /* the field — deep blue-slate, never pure black */
    --void:#080C12;
    --page:#0C1219;
    --page-lift:#101823;

    /* glass */
    --glass:rgba(255,255,255,.045);
    --glass-raised:rgba(255,255,255,.075);
    --glass-deep:rgba(6,10,15,.42);
    --sheen:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 58%,rgba(255,255,255,0));
    --edge-lit:inset 0 1px 0 rgba(255,255,255,.10);
    --blur-glass:blur(24px) saturate(150%);
    --blur-bar:blur(20px) saturate(160%);

    /* borders — hairlines of light, not frames of ink */
    --hair:rgba(255,255,255,.085);
    --line:rgba(255,255,255,.14);
    --line-strong:rgba(255,255,255,.22);

    /* ink */
    --text-primary:#F0F5FA;
    --text-body:#C2CEDA;
    --text-muted:#97A6B4;
    --text-faint:#8593A1;

    /* THE ACTION — platinum. Never a status colour. */
    --action:#E9EFF5;
    --action-hover:#FFFFFF;
    --action-ink:#0C1219;

    /* the six status inks — desaturated and pulled toward teal (mint-green reads
       as generic SaaS); they inform, they don't decorate */
    --live:#3BB49B;      --live-text:#5FCCB4;
    --live-tint:rgba(59,180,155,.13);   --live-line:rgba(59,180,155,.34);
    --attn:#F0954E;      --attn-text:#F7B27C;
    --attn-tint:rgba(240,149,78,.14);   --attn-line:rgba(240,149,78,.36);
    --handled:#6FA8DE;   --handled-text:#93C0EA;
    --handled-tint:rgba(111,168,222,.14); --handled-line:rgba(111,168,222,.34);
    --pending:#D4B36B;   --pending-text:#DFC489;
    --pending-tint:rgba(212,179,107,.14); --pending-line:rgba(212,179,107,.34);
    --breach:#E8776B;    --breach-text:#F0938A;
    --breach-tint:rgba(232,119,107,.14);  --breach-line:rgba(232,119,107,.34);
    --seal:#D98E76;      --seal-tint:rgba(217,142,118,.14); --seal-line:rgba(217,142,118,.34);

    /* provider inks — whose iron. A 2px rule and a dot; never text. */
    --prov-hetzner:#E8697C; --prov-scaleway:#9F86EC; --prov-ovh:#7C8CF0; --prov-eu-ai:#6D97DC;
    --prov-neutral:rgba(255,255,255,.28);

    /* the aurora — large, low, slow. This is where "alive" comes from, and it
       has to be strong enough to actually read; too subtle and the page is
       just flat black again. */
    --aurora:
      radial-gradient(46% 34% at 14% 12%,rgba(59,180,155,.26),transparent 68%),
      radial-gradient(42% 32% at 84% 16%,rgba(111,168,222,.22),transparent 66%),
      radial-gradient(52% 40% at 66% 84%,rgba(146,118,214,.20),transparent 68%),
      radial-gradient(34% 28% at 8% 62%,rgba(240,149,78,.10),transparent 66%),
      radial-gradient(38% 30% at 94% 60%,rgba(59,180,155,.12),transparent 66%);
    /* film grain — the texture that keeps large dark areas from going dead */
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --hair-grid:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    --shadow-panel:0 1px 2px rgba(0,0,0,.3),0 12px 32px -18px rgba(0,0,0,.7);
    --shadow-card:0 2px 6px rgba(0,0,0,.35),0 22px 50px -26px rgba(0,0,0,.8);
    --shadow-rail:-30px 0 80px -24px rgba(0,0,0,.8);
    --ring-focus:0 0 0 3px rgba(233,239,245,.22);

    --font-sans:'Supreme',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-mono:'Fragment Mono',ui-monospace,SFMono-Regular,monospace;

    /* type scale — raised throughout; the old one was too small to read */
    --fs-hero:clamp(38px,4.4vw,64px);
    --fs-h2:clamp(29px,3.1vw,44px);
    --fs-quote:clamp(27px,3.4vw,46px);
    --fs-lede:clamp(18px,1.35vw,21px);
    --fs-body:17px;
    --fs-card:15.5px;
    --fs-label:12.5px;

    --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:20px;
    --ease:cubic-bezier(.2,.6,.2,1); --ease-rail:cubic-bezier(.32,.72,0,1);
    --t-fast:.14s; --t:.22s; --t-rail:.44s;
  }

  /* the proof surface — light. Lives inside the dark system. */
  [data-surface]{color:var(--text-primary)}
  [data-surface="proof"]{
    --page:#F2F5F8; --page-lift:#FFFFFF; --void:#E4E9EE;
    --glass:rgba(255,255,255,.86); --glass-raised:#FFFFFF; --glass-deep:rgba(255,255,255,.7);
    --sheen:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.4));
    --edge-lit:inset 0 1px 0 rgba(255,255,255,1);
    --hair:rgba(16,24,35,.09); --line:rgba(16,24,35,.14); --line-strong:rgba(16,24,35,.24);
    --text-primary:#101823; --text-body:#3D4B59; --text-muted:#5A6875; --text-faint:#78868F;
    --action:#141F2B; --action-hover:#0C1219; --action-ink:#F2F5F8;
    --live:#15795C; --live-text:#15795C;
    --live-tint:rgba(21,121,92,.1); --live-line:rgba(21,121,92,.3);
    --attn:#B45A0E; --attn-text:#96490B;
    --attn-tint:rgba(180,90,14,.1); --attn-line:rgba(180,90,14,.3);
    --handled:#245C96; --handled-text:#245C96;
    --handled-tint:rgba(36,92,150,.1); --handled-line:rgba(36,92,150,.3);
    --pending:#7A5C1E; --pending-text:#7A5C1E;
    --pending-tint:rgba(122,92,30,.1); --pending-line:rgba(122,92,30,.3);
    --breach:#A5321F; --breach-text:#A5321F;
    --seal:#7C2D23; --seal-tint:rgba(124,45,35,.1); --seal-line:rgba(124,45,35,.32);
    --aurora:none;
    --shadow-panel:0 1px 2px rgba(16,24,35,.06);
    --shadow-card:0 1px 3px rgba(16,24,35,.07),0 12px 32px -22px rgba(16,24,35,.3);
    --ring-focus:0 0 0 3px rgba(21,121,92,.2);
  }

  @keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
  /* the aurora drifts — slow enough to read as light, not as animation */
  @keyframes drift{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-2.5%,1.5%,0) scale(1.07)}
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background-color:var(--page);
    color:var(--text-primary);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-variant-numeric:tabular-nums;
    overflow-x:hidden;
    position:relative;
    min-height:100%;
  }
  /* The lit field: aurora drifting under a fixed film grain. The gradient
     centres must sit INSIDE the viewport — pushed off-edge, only their faded
     tails show and the page reads flat again.

     These sit at z-index:-1 rather than 0. body's background-color propagates
     to the canvas, which paints below every positioned layer, so a -1 layer is
     still visible above it and below all content — with NO rule needed on
     sibling elements. The earlier `body>*{position:relative}` approach had
     specificity (0,2,1) and silently overrode `.rail{position:fixed}` and
     `.chrome{position:sticky}`, which broke both. */
  .field{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--aurora);animation:drift 44s ease-in-out infinite;will-change:transform}
  /* no blend mode: `overlay` against a dark ground cancels the grain entirely */
  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.055}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  .wrap{max-width:1280px;margin:0 auto;padding:0 36px}
  @media(max-width:680px){.wrap{padding:0 20px}}

  h1,h2,h3{font-family:var(--font-sans);font-weight:500;text-wrap:balance}
  /* Display emphasis is carried by LUMINANCE, not hue — the emphasised phrase
     goes to full white while the rest of the line sits slightly back. Colour in
     a headline is what made this read as a template; light reads as expensive. */
  h1,h2{color:var(--text-heading,#D6E1EC)}
  h1 em,h2 em{font-style:normal;color:#FFFFFF}
  a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line);transition:color var(--t-fast),border-color var(--t-fast)}
  a:hover{color:var(--text-primary);border-bottom-color:var(--line-strong)}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:4px}
  ::selection{background:rgba(111,211,172,.24);color:var(--text-primary)}
  ::placeholder{color:var(--text-faint)}
  .skip{position:absolute;left:-9999px}
  .skip:focus{left:18px;top:14px;z-index:60;background:var(--action);color:var(--action-ink);padding:10px 16px;border-radius:var(--r-sm);font-weight:500}

  /* mono ONLY where the machine produced the value */
  .data{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

  /* ---------- the wordmark ----------
     Lowercase, Supreme 500, closed up, and the double z drawn as one ligature
     (symbol #wm-zz). The glyph is x-height tall and sits on the baseline, so
     em-based sizing lets the same markup live in a heading or a footer line. */
  .wm{font-weight:500;letter-spacing:-.022em;white-space:nowrap}
  .wm .zz{display:inline-block;vertical-align:baseline;width:.773em;height:.5em;margin:0 .023em;fill:currentColor}

  .kicker{font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted)}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none;box-shadow:0 0 0 3px var(--live-tint);animation:beat 2.6s ease-in-out infinite}

  [data-rv]{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  [data-rv].in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}

  /* ---------- glass ---------- */
  .glass{
    background-color:var(--glass);background-image:var(--sheen);
    backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);
    border:1px solid var(--hair);border-radius:var(--r-lg);
    box-shadow:var(--shadow-card),var(--edge-lit);
  }

  /* ---------- chrome ---------- */
  .chrome{position:sticky;top:0;z-index:30;background:rgba(12,18,25,.6);backdrop-filter:var(--blur-bar);-webkit-backdrop-filter:var(--blur-bar);border-bottom:1px solid var(--hair)}
  .chrome .wrap{display:flex;align-items:center;gap:20px;height:68px}
  .brand{font-weight:500;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:11px;color:var(--text-primary);border-bottom:none}
  .brand .mk{width:26px;height:26px;border-radius:8px;background:var(--live-tint);border:1px solid var(--live-line);display:grid;place-items:center;color:var(--live-text);flex:none}
  .env{font-size:12.5px;color:var(--text-muted);border:1px solid var(--hair);border-radius:var(--r-sm);padding:5px 11px;white-space:nowrap;background:var(--glass)}
  @media(max-width:920px){.env{display:none}}
  .chrome nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:15.5px}
  .chrome nav a{color:var(--text-body);border-bottom:none}
  .chrome nav a:hover{color:var(--text-primary)}
  /* the nav-link colour above outranks .btn, so the CTA re-states its ink here
     instead of inline on every page */
  .chrome nav a.btn{color:var(--action-ink)}
  .chrome nav a.btn:hover{color:var(--action-ink)}
  /* phones: the links stay — a first visit from a shared link is usually a
     phone, and hiding Vision/Company made them unreachable there */
  @media(max-width:640px){
    .chrome .wrap{gap:12px}
    .chrome nav{gap:12px;font-size:13.5px}
    .chrome nav .btn{padding:8px 12px;font-size:13.5px}
  }
  @media(max-width:430px){.brand .bw{display:none}}

  .btn{
    font-family:var(--font-sans);font-size:15px;font-weight:500;letter-spacing:-.005em;
    color:var(--action-ink);background:var(--action);border:1px solid transparent;border-radius:var(--r-sm);
    padding:11px 20px;cursor:pointer;display:inline-block;white-space:nowrap;
    transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
    box-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  a.btn{border-bottom:1px solid transparent}
  .btn:hover{background:var(--action-hover);color:var(--action-ink)}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{background:var(--glass);color:var(--text-body);border-color:var(--line);box-shadow:none}
  .btn.ghost:hover{color:var(--text-primary);border-color:var(--line-strong);background:var(--glass-raised)}
  .btn[disabled]{background:transparent;color:var(--text-muted);border-color:var(--line);cursor:not-allowed;box-shadow:none}
  .btn[disabled]:hover{background:transparent;color:var(--text-muted)}

  /* ---------- hero ---------- */
  .hero{padding:78px 0 46px}
  /* the hero used to carry a mock console. The platform section shows the real
     surfaces now, so what stands beside the statement is the shape of the
     company rather than a screenshot of it. */
  .hero-grid{display:grid;grid-template-columns:minmax(0,510px) minmax(0,1fr);gap:60px;align-items:center}
  .hero-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);margin-bottom:28px}
  .hero-meta .sep{color:var(--line-strong)}
  @media(max-width:560px){.hero-meta .sep{display:none}}
  .hero-meta .lv{display:inline-flex;align-items:center;gap:8px;color:var(--live-text)}
  .hero h1{font-size:var(--fs-hero);line-height:1.03;letter-spacing:-.03em;margin-bottom:24px;max-width:19ch}
  .hero .lede{font-size:var(--fs-lede);color:var(--text-body);line-height:1.6;max-width:62ch}
  .lede strong,.prose strong{font-weight:500;color:var(--text-primary)}
  .hero-cta{display:flex;align-items:center;gap:18px;margin-top:32px;flex-wrap:wrap}
  .hero-mail{font-size:15.5px}
  .hero-mail a{color:var(--text-body);border-bottom-color:var(--line)}
  .hero-mail a:hover{color:var(--text-primary)}

  /* ---------- the hero figure ----------
     Signals travel provider → layer, so every link path is authored from the
     outside inward; the two that run the other way (your app in, the evidence
     out) are authored in their own direction. --pv carries whose ink. */
  .herofig{display:block;width:100%;height:auto;max-width:640px;margin-left:auto;overflow:visible}
  .hs-halo{transform-box:view-box;transform-origin:320px 232px;animation:hs-breathe 5.4s ease-in-out infinite}
  .hs-link{fill:none;stroke:var(--pv);stroke-width:1;opacity:.26}
  .hs-sig{fill:none;stroke:var(--pv);stroke-width:2;stroke-linecap:round;stroke-dasharray:13 122;animation:hs-travel 3.6s linear infinite}
  .hs-ring{fill:var(--page-lift);stroke:var(--pv);stroke-width:1.2}
  .hs-dot{fill:var(--pv)}
  .hs-check{fill:none;stroke:var(--seal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .hs-pill{fill:rgba(255,255,255,.045);stroke:var(--line);stroke-width:1}
  .hs-mark{fill:var(--live)}
  .hs-lbl{font-family:var(--font-mono);font-size:11.5px;fill:var(--text-muted)}
  .hs-cap{font-family:var(--font-mono);font-size:11px;fill:var(--text-faint);letter-spacing:.16em;text-transform:uppercase}
  /* the core label is the wordmark: fixed 17px so the hand-placed zz ligature
     (.hs-zz) stays aligned; it does not join the ≤1000px label size bump */
  .hs-name{font-family:var(--font-sans);font-size:17px;font-weight:500;fill:var(--text-primary);letter-spacing:-.022em}
  .hs-zz{fill:var(--text-primary)}
  .hs-sub{font-family:var(--font-mono);font-size:10.5px;fill:var(--live-text)}
  @keyframes hs-travel{0%{stroke-dashoffset:135;opacity:0}12%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes hs-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}

  /* SVG text is in user units, so it shrinks with the figure. Below these
     widths it has to be re-scaled or it drops under ~7px; on a phone the
     provider names go entirely rather than sit there illegible — the coloured
     nodes still say "several providers", and the names are in Where we fit. */
  @media(max-width:1000px){
    .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
    .herofig{margin:0 auto;max-width:520px}
    .hs-lbl,.hs-cap{font-size:14px}
    .hs-sub{font-size:13px}
  }
  /* on a phone the figure has no room to be read as a diagram — it becomes
     decoration competing with the headline, so it goes */
  @media(max-width:700px){.herofig{display:none}}

  /* ---------- sections ---------- */
  section{padding:92px 0;position:relative}
  section + section{border-top:1px solid var(--hair)}
  .sec-head{max-width:800px;margin-bottom:44px}
  /* the kicker stays neutral; only its leading rule carries the section's ink,
     so sections are distinguishable without painting labels in status colours */
  .sec-head .kicker{display:flex;align-items:center;gap:11px;margin-bottom:18px;color:var(--text-muted)}
  .sec-head .kicker::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--sk,var(--live));flex:none}
  h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.026em;margin-bottom:20px}
  .sec-head p{color:var(--text-body);font-size:var(--fs-lede);line-height:1.6;max-width:60ch}
  .prose p{color:var(--text-body);font-size:var(--fs-body);line-height:1.7;margin-bottom:18px}
  .prose p:last-child{margin-bottom:0}

  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  @media(max-width:1020px){.split{grid-template-columns:minmax(0,1fr);gap:40px}}

  .pk{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--pkc,var(--attn-text));margin-bottom:16px}
  .pline{font-size:clamp(21px,2vw,28px);font-weight:500;line-height:1.28;letter-spacing:-.024em;color:var(--text-heading,#D6E1EC);max-width:34ch;margin-top:46px}
  .pline em{font-style:normal;color:#FFFFFF}

  /* ---------- topology ---------- */
  .topo{border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--glass-deep);padding:30px 28px;background-image:var(--hair-grid);background-size:36px 36px}
  .tlabel{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px}
  .trow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
  .tnode{background-color:var(--glass);background-image:var(--sheen);border:1px solid var(--hair);border-radius:var(--r-md);padding:15px 17px;box-shadow:var(--edge-lit)}
  .tnode .n{font-size:16px;font-weight:500;letter-spacing:-.015em}
  .tnode .s{font-size:14px;color:var(--text-muted);margin-top:5px}
  .tflow{display:flex;justify-content:center;align-items:center;gap:14px 40px;flex-wrap:wrap;padding:16px 0;font-size:14px;color:var(--text-muted)}
  /* what goes down into the layer, and what comes back up out of it */
  .tflow .ar.up{color:var(--seal);animation-delay:1.3s}
  .tflow .ar{color:var(--live-text);animation:beat 2.6s ease-in-out infinite;margin-right:8px}
  .tcore{border:1px solid var(--live-line);background:linear-gradient(180deg,var(--live-tint),rgba(255,255,255,.02));border-radius:var(--r-lg);padding:24px 24px;position:relative;box-shadow:var(--edge-lit)}
  .tcore .tag{position:absolute;top:-12px;left:22px;background:var(--action);color:var(--action-ink);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
  .tcore h3{font-size:22px;letter-spacing:-.022em;margin:6px 0 9px}
  .tcore p{color:var(--text-body);font-size:var(--fs-card);line-height:1.58;max-width:68ch}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .chip{font-size:14px;color:var(--text-body);border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:6px 13px;white-space:nowrap}
  .chip.is-proof{color:var(--live-text);border-color:var(--live-line);background:var(--live-tint)}
  .perim{border:1px dashed var(--live-line);border-radius:var(--r-lg);background:rgba(70,185,143,.035);padding:26px 20px 20px;position:relative;margin-top:6px}
  .perim .pl{position:absolute;top:-11px;left:20px;background:var(--page-lift);padding:2px 11px;border-radius:999px;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--live-text);border:1px solid var(--live-line)}
  .provs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px}
  .prov{background-color:var(--glass);background-image:var(--sheen);border:1px solid var(--hair);border-top:2px solid var(--pv,var(--prov-neutral));border-radius:var(--r-md);padding:14px 15px;box-shadow:var(--edge-lit)}
  .prov.more{border-top-style:dashed}
  .prov .n{font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;letter-spacing:-.012em}
  .prov .n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pv,var(--prov-neutral));flex:none}
  .prov .r{font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);margin-top:6px}
  .prov .m{font-size:14px;color:var(--text-muted);margin-top:8px;line-height:1.45}
  .pnote{margin-top:15px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--text-muted);line-height:1.6}
  .tcap{font-size:14.5px;color:var(--text-muted);text-align:center;margin-top:18px}
  .tcap b{color:var(--live-text);font-weight:500}

  /* the diagram is the argument — given its own section, it gets the room to
     be read as one, not as an illustration under a wall of text */
  #fit{padding-bottom:104px}
  #fit .topo{padding:40px 34px 34px;border-color:var(--line)}
  #fit .tlabel{font-size:13px;margin-bottom:20px}
  #fit .tnode{padding:19px 21px}
  #fit .tnode .n{font-size:17.5px}
  #fit .tnode .s{font-size:14.5px}
  #fit .tflow{padding:22px 0;font-size:14.5px}
  #fit .tcore{padding:30px 28px 28px}
  #fit .tcore h3{font-size:clamp(23px,2.3vw,31px);margin:8px 0 11px}
  #fit .tcore p{font-size:17px}
  #fit .chips{margin-top:22px}
  #fit .perim{padding:30px 24px 24px;margin-top:8px}
  #fit .prov{padding:16px 17px}
  #fit .tcap{font-size:15.5px;margin-top:24px}
  @media(max-width:680px){#fit .topo{padding:28px 18px 24px}}

  /* ================= THE PLATFORM: steps drive a pinned screen =============
     Left column scrolls, right column stays. Each step owns a band of scroll;
     when its middle crosses the middle of the viewport it lights up and its
     screen fades in. No scroll-jacking — the page still scrolls at page speed,
     up and down, and the whole thing degrades to a stacked column on mobile. */
  .plat-grid{display:grid;grid-template-columns:minmax(0,382px) minmax(0,1fr);gap:56px;align-items:start}
  /* a sticky element can only travel inside its own grid area: without this
     tail the column runs out before the last step is centred, and the screen
     unpins and slides away exactly when step 04 lights up */
  .steps{padding-bottom:min(46vh,420px)}
  .step{display:flex;flex-direction:column;justify-content:center;min-height:clamp(230px,32vh,320px);
        padding:22px 0 22px 26px;border-left:2px solid var(--hair);
        opacity:.4;transition:opacity .45s var(--ease),border-color .45s var(--ease)}
  .step.is-on{opacity:1;border-left-color:var(--sc,var(--live))}
  .step .sn{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--text-faint);transition:color .45s var(--ease)}
  .step.is-on .sn{color:var(--sc,var(--live-text))}
  .step h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.022em;margin:9px 0 11px;color:var(--text-primary)}
  .step p{font-size:var(--fs-card);color:var(--text-body);line-height:1.62}
  .step.s-operate{--sc:var(--handled-text)}
  .step.s-prove{--sc:var(--pending-text)}
  .step.s-open{--sc:var(--seal)}

  .plat-stage{position:sticky;top:88px}
  .scr-shell{display:grid;grid-template-columns:154px minmax(0,1fr);
             border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
             background-color:var(--glass-deep);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);
             box-shadow:var(--shadow-card),var(--edge-lit)}
  .scr-nav{border-right:1px solid var(--hair);background:rgba(0,0,0,.24);padding:13px 9px;display:flex;flex-direction:column;gap:2px}
  .scr-brand{display:flex;align-items:center;gap:9px;padding:3px 8px 15px;font-size:13.5px;font-weight:500;color:var(--text-body)}
  .scr-brand .mk{width:19px;height:19px;border-radius:6px;background:var(--live-tint);border:1px solid var(--live-line);display:grid;place-items:center;color:var(--live-text);flex:none}
  .ni{font-size:12.5px;color:var(--text-faint);padding:7px 10px;border-radius:var(--r-sm);white-space:nowrap;
      transition:background-color .35s var(--ease),color .35s var(--ease)}
  .ni.is-on{background:var(--glass-raised);color:var(--text-primary)}
  .stage{display:grid;min-width:0}
  /* every screen sits in the same grid cell, so the stage is as tall as the
     tallest one and nothing jumps when they swap */
  /* flex column + a footer with margin-top:auto — the stage is as tall as the
     tallest screen, so the shorter ones need their chrome pinned to the bottom
     or the empty space reads as a bug instead of as an empty list */
  .scr{grid-area:1/1;min-width:0;display:flex;flex-direction:column;
       opacity:0;visibility:hidden;transform:translateY(9px);
       transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
  .scr.is-on{opacity:1;visibility:visible;transform:none}
  .scr[data-surface="proof"]{background:var(--page)}
  .scr-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid var(--hair);background:var(--glass-deep);font-size:12.5px;color:var(--text-muted)}
  .scr-top b{color:var(--text-primary);font-weight:500}
  .scr-top .rt{margin-left:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .scr-top .rt .dot{width:6px;height:6px}
  .scr-in{padding:15px}
  .scr-foot{margin-top:auto;padding:11px 15px;border-top:1px solid var(--hair);background:var(--glass-deep);
            display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
  .scr-foot b{color:var(--text-body);font-weight:500}
  .scr-foot .go{margin-left:auto;color:var(--text-body)}
  /* the proof surface is denser than the operator chrome — it is a document */
  .scr[data-surface="proof"] .rail-h{margin:18px 0 10px;font-size:11px}
  .scr[data-surface="proof"] .rf{padding:11px 14px;font-size:13px;grid-template-columns:112px 1fr}
  .scr[data-surface="proof"] .rf .k{font-size:11px}
  .scr[data-surface="proof"] .tr{padding:10px 13px}
  .scr[data-surface="proof"] .tr .tt{font-size:13px}
  .scr[data-surface="proof"] .tr .tm{font-size:11.5px;margin-top:3px}
  .scr[data-surface="proof"] .track{gap:7px}
  .scr-h{font-size:16.5px;font-weight:500;letter-spacing:-.018em;color:var(--text-primary);line-height:1.35}
  .scr-h .n-attn{color:var(--attn-text)}
  .scr-h .n-ok{color:var(--handled-text)}
  .scr-sub{font-size:12.5px;color:var(--text-muted);margin-top:4px}
  .scr-rows{display:flex;flex-direction:column;gap:8px;margin-top:14px}

  /* feed row — the console's own event card, at screenshot scale */
  .fr{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start;
      background-color:var(--glass);background-image:var(--sheen);
      border:1px solid var(--hair);border-left:2px solid var(--ec,var(--line));border-radius:var(--r-md);padding:11px 13px}
  .fr .ic{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:var(--et,var(--glass));border:1px solid var(--el,var(--hair));color:var(--ec,var(--text-muted));flex:none}
  .fr .ttl{display:block;font-size:13.5px;font-weight:500;color:var(--text-primary);line-height:1.4;letter-spacing:-.01em}
  .fr .dsc{display:block;font-size:12.5px;color:var(--text-body);line-height:1.5;margin-top:4px}
  .fr .tm{display:block;font-size:11.5px;color:var(--text-faint);margin-top:7px}
  .fr .bg{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;border:1px solid var(--el,var(--line));background:var(--et,transparent);color:var(--ec,var(--text-muted));flex:none}
  .fr.i-attn{--ec:var(--attn-text);--et:var(--attn-tint);--el:var(--attn-line)}
  .fr.i-handled{--ec:var(--handled-text);--et:var(--handled-tint);--el:var(--handled-line)}
  .fr.i-live{--ec:var(--live-text);--et:var(--live-tint);--el:var(--live-line)}

  /* gateway table — the trade-off is a row, not a footnote */
  .scr-call{border:1px solid var(--hair);border-left:2px solid var(--handled);border-radius:var(--r-md);background:rgba(255,255,255,.022);padding:12px 14px;margin-top:13px}
  .scr-call .k{display:block;font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--handled-text);margin-bottom:7px}
  .scr-call p{font-size:12.5px;color:var(--text-body);line-height:1.55}
  .gt{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
  .gt th{text-align:left;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:0 12px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
  .gt td{padding:10px 12px 10px 0;border-bottom:1px solid var(--hair);color:var(--text-body);vertical-align:top}
  .gt tr:last-child td{border-bottom:none}
  .gt .w{color:var(--text-primary)}
  .gt .m{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);display:block;margin-top:4px}
  .zt{display:inline-flex;align-items:stretch;font-size:11px;border:1px solid var(--live-line);border-radius:var(--r-sm);overflow:hidden;white-space:nowrap}
  .zt .z{padding:2px 7px;background:var(--live-tint);color:var(--live-text);font-weight:500}
  .zt .r{padding:2px 8px;color:var(--text-muted);font-family:var(--font-mono)}
  .zt.us{border-color:var(--seal-line)}
  .zt.us .z{background:var(--seal-tint);color:var(--seal)}
  .rp{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;color:var(--live-text);border:1px solid var(--live-line);background:var(--live-tint)}
  .rp.wait{color:var(--pending-text);border-color:var(--pending-line);background:var(--pending-tint)}

  /* drafted answers — reused by the questionnaire screen */
  .ans{margin-top:14px;border-top:1px solid var(--line);padding-top:2px}
  .an{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:11px 0;align-items:start}
  .an + .an{border-top:1px solid var(--hair)}
  .an .qn{font-size:12.5px;color:var(--text-faint);padding-top:1px}
  .an .q{display:block;font-size:13.5px;color:var(--text-body);line-height:1.5}
  .an .c{display:block;font-size:12px;color:var(--live-text);margin-top:4px}
  .an .s{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--live-text);border:1px solid var(--live-line);background:var(--live-tint);border-radius:999px;padding:3px 8px;white-space:nowrap}
  .an.yours .c{color:var(--pending-text)}
  .an.yours .s{color:var(--pending-text);border-color:var(--pending-line);background:var(--pending-tint)}
  .tally{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-muted);line-height:1.6}
  .tally b{color:var(--live-text);font-weight:500}

  /* The two commercial answers, in their own section below the stage. While
     the stage is still pinned, anything under it in the same container gets
     crowded by the screen, and these are the answers people scroll back for. */
  .terms{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:900px){.terms{grid-template-columns:minmax(0,1fr)}}
  .term{background-color:var(--glass);background-image:var(--sheen);border:1px solid var(--hair);
        border-top:2px solid var(--nc,var(--live));border-radius:var(--r-lg);padding:26px 26px 24px;box-shadow:var(--edge-lit)}
  .term .tk{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--nc,var(--live-text));margin-bottom:13px}
  .term p{font-size:var(--fs-card);color:var(--text-body);line-height:1.62}
  .term.t-scope{--nc:var(--seal)}

  /* the second question in the contact head, pitched under the first */
  .sec-head p.q2{font-size:clamp(19px,1.7vw,24px);font-weight:500;line-height:1.34;letter-spacing:-.02em;
                 color:var(--text-heading,#D6E1EC);max-width:none;margin-bottom:20px}

  /* Single column between 700 and 1020px: the screen pins to the top and the
     steps scroll under it, so the swap is still visible. The screen only has
     to lose its last row or two to leave room for the step beside it; at these
     widths everything else fits. (Below 700px the screens go entirely.) */
  @media(max-width:1020px){
    .plat-grid{grid-template-columns:minmax(0,1fr);gap:8px}
    .plat-stage{position:sticky;top:76px;order:-1;margin-bottom:22px}
    .scr-shell{grid-template-columns:minmax(0,1fr)}
    .scr-nav{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--hair);padding:9px 10px;gap:4px;
             scrollbar-width:none;-ms-overflow-style:none}
    .scr-nav::-webkit-scrollbar{display:none}
    .scr-brand{display:none}
    .step{min-height:0;padding:20px 0 20px 22px}
    .steps{padding-bottom:min(30vh,220px)}
    /* one rule for every screen: each list shows its first two entries, and
       the gateway drops the callout its own step copy already makes */
    .scr-in{padding:13px}
    .scr-rows .fr:nth-child(n+3),
    .gt tbody tr:nth-child(n+3),
    .an:nth-child(n+3),
    .rail-facts .rf:nth-child(n+3),
    .track .tr:nth-child(n+3),
    .scr-call{display:none}
  }

  /* Phones drop the screens entirely. A pinned 550px frame over a 812px
     viewport leaves no room to read the step beside it, and every screen has
     to be gutted to fit — the four steps say it better on their own. */
  @media(max-width:700px){
    .plat-stage{display:none}
    .steps{padding-bottom:0}
    .step,.step.is-on{opacity:1;border-left-color:var(--sc,var(--live))}
    .step .sn,.step.is-on .sn{color:var(--sc,var(--live-text))}
  }

  /* ---------- company ---------- */
  .stat-rows{border-radius:var(--r-lg);overflow:hidden;margin-top:28px}
  .sr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:17px 20px}
  .sr + .sr{border-top:1px solid var(--hair)}
  .sr .l{font-size:16px;color:var(--text-body)}
  .sr .l b{color:var(--text-primary);font-weight:500}
  .pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;border:1px solid var(--pc,var(--line));background:var(--pt,transparent);color:var(--pc,var(--text-muted))}
  .pill.live{--pc:var(--live-text);--pt:var(--live-tint)}
  .pill.building{--pc:var(--pending-text);--pt:var(--pending-tint)}
  .regions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .rtag{display:inline-flex;align-items:stretch;font-size:13.5px;border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden;background:var(--glass)}
  .rtag .z{padding:6px 10px;background:var(--live-tint);color:var(--live-text);font-weight:500}
  .rtag .r{padding:6px 11px;color:var(--text-body)}
  .rtag .p{padding:6px 11px;color:var(--text-muted);border-left:1px solid var(--hair)}
  .stances{margin-top:34px;border-radius:var(--r-lg);overflow:hidden}
  .stances-top{padding:14px 20px;background:var(--glass-deep);border-bottom:1px solid var(--hair);font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
  .stn{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:18px 20px;font-size:16px;color:var(--text-body);line-height:1.6}
  .stn + .stn{border-top:1px solid var(--hair)}
  .stn .k{font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding-top:4px}
  .stn .k.are{color:var(--live-text)}
  .stn .k.arent{color:var(--seal)}
  .stn b{color:var(--text-primary);font-weight:500}
  @media(max-width:640px){.stn{grid-template-columns:1fr;gap:6px}}

  /* ---------- contact ---------- */
  .cgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
  @media(max-width:920px){.cgrid{grid-template-columns:minmax(0,1fr);gap:38px}}
  .cform{overflow:hidden}
  .cform-top{padding:15px 22px;background:var(--glass-deep);border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
  .cform-in{padding:24px 22px 22px}
  .crow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:560px){.crow{grid-template-columns:1fr}}
  .fld{display:block;margin-bottom:16px}
  .fld span{display:block;font-size:14px;font-weight:500;color:var(--text-muted);margin-bottom:8px}
  .fld input,.fld select,.fld textarea{
    width:100%;font-family:var(--font-sans);font-size:16px;color:var(--text-primary);
    background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
    transition:border-color var(--t-fast),box-shadow var(--t-fast);
  }
  .fld textarea{resize:vertical;min-height:104px}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--line-strong);box-shadow:var(--ring-focus)}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .cfoot{display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
  #cstatus{font-size:14.5px}
  #cstatus.ok{color:var(--live-text)}
  #cstatus.err{color:var(--breach-text)}
  .cfall{font-size:14.5px;color:var(--text-muted);margin-top:18px}
  .cfall a{color:var(--text-body)}

  /* the light-touch path: an address, nothing else. For the visitor who isn't
     ready to talk but doesn't want to lose the thread. */
  .follow{margin-top:30px;padding-top:24px;border-top:1px dashed var(--line)}
  .follow .fk{display:block;font-size:15.5px;font-weight:500;color:var(--text-primary);margin-bottom:4px}
  .follow .fs{display:block;font-size:14.5px;color:var(--text-muted);margin-bottom:14px}
  .follow-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .follow-row input{flex:1 1 200px;max-width:300px;font-family:var(--font-sans);font-size:15px;color:var(--text-primary);
    background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;
    transition:border-color var(--t-fast),box-shadow var(--t-fast)}
  .follow-row input:focus{outline:none;border-color:var(--line-strong);box-shadow:var(--ring-focus)}
  #fstatus{font-size:14px}
  #fstatus.ok{color:var(--live-text)}
  #fstatus.err{color:var(--breach-text)}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--hair);padding:38px 0 52px;background:rgba(0,0,0,.18)}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:14.5px;color:var(--text-muted)}
  footer .lv{display:inline-flex;align-items:center;gap:9px;color:var(--live-text)}
  footer .wrap.flinks{margin-top:18px;justify-content:flex-start;gap:8px 20px;font-size:13.5px}
  footer .flinks a{color:var(--text-muted);border-bottom:none}
  footer .flinks a:hover{color:var(--text-body)}
  footer .flinks .fsep{color:var(--line-strong)}

  /* ===== THE SIGNATURE: proof out of the system ==============================
     The evidence record. It used to open as a rail over the page from the hero
     console; the platform section shows it directly now, so what remains is
     the record itself — the facts table and the verifiable track. */
  .rail-facts{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--page-lift)}
  .rf{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:13px 16px;font-size:14.5px}
  .rf + .rf{border-top:1px solid var(--hair)}
  .rf .k{font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding-top:2px}
  .rf .v{color:var(--text-primary)}
  .rail-h{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:26px 0 12px;display:flex;align-items:center;gap:10px}
  .rail-h::after{content:"";flex:1;height:1px;background:var(--line)}
  .track{display:flex;flex-direction:column;gap:9px}
  .tr{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--live-line);background:var(--live-tint);border-radius:var(--r-md);padding:13px 15px}
  .tr .tk{color:var(--live-text);line-height:1;margin-top:2px}
  .tr .tt{display:block;font-size:14.5px;color:var(--text-primary);line-height:1.5}
  .tr .tm{display:block;font-size:13px;color:var(--text-muted);margin-top:5px}

/* ================= MULTIPAGE ADDITIONS ================================= */
/* the current page's nav entry sits forward; the others stay back */
.chrome nav a[aria-current="page"]{color:var(--text-primary)}

/* home: what you get, and what is actually running today. This is the
   twenty-second answer, so it sits directly under the hero. */
.offer{margin-top:52px}
.offer .stat-rows{margin-top:0}
.offer-k{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px}

/* home: the platform in four lines, with the real thing one click away */
.teaser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-lg);overflow:hidden}
.tz{padding:24px 22px;border-right:1px solid var(--hair)}
.tz:last-child{border-right:none}
.tz .sn{display:block;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--sc,var(--live-text));margin-bottom:11px}
.tz p{font-size:14.5px;color:var(--text-body);line-height:1.55}
.tz.t-operate{--sc:var(--handled-text)}
.tz.t-prove{--sc:var(--pending-text)}
.tz.t-open{--sc:var(--seal)}
.more-link{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.more-link .note{font-size:14.5px;color:var(--text-muted)}
@media(max-width:900px){
  .teaser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tz{border-bottom:1px solid var(--hair)}
  .tz:nth-child(2n){border-right:none}
  .tz:nth-child(n+3){border-bottom:none}
}
@media(max-width:560px){
  .teaser{grid-template-columns:minmax(0,1fr)}
  .tz{border-right:none;border-bottom:1px solid var(--hair)}
  .tz:last-child{border-bottom:none}
}

/* the deployments screen reuses the diagram's perimeter, at screenshot scale */
.scr .perim{margin-top:14px;padding:20px 11px 11px;border-radius:var(--r-md)}
.scr .perim .pl{font-size:10.5px;left:14px;background:var(--page-lift)}
.scr .perim .gt{margin-top:4px}

/* ---------- vision ---------- */
.vgoal{margin-top:12px}
.vlist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.vlist li{position:relative;padding-left:22px;font-size:var(--fs-body);color:var(--text-body);line-height:1.62}
.vlist li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:2px;border-radius:2px;background:var(--vc,var(--text-faint))}
.vlist b{color:var(--text-primary);font-weight:500}
.v-head{--vc:var(--breach)}
.v-tail{--vc:var(--live)}
.vinit{margin-top:14px}
/* the build grid: six parts as 3×2, not six slivers in one row */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1020px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bgrid{grid-template-columns:minmax(0,1fr)}}
.vinit .tnode{padding:22px 22px}
.vinit .tnode .n{font-size:17px;margin-bottom:9px}
.vinit .tnode p{font-size:var(--fs-card);color:var(--text-body);line-height:1.58}
.vinit .tnode .ix{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--sc,var(--live-text));margin-bottom:11px}