/* Brand primaries only. The blue is the field here, not the accent. */
  :root{
    /* spacing scale - containers use gap from this, items carry no margins */
    --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:80px;
    --blue:#2C7BF2; --blue-d:#0F3E93; --blue-dd:#0A2C6B; --blue-l:#8FBBFA;
    /* mark tones. The center cluster (--graphite) is darkest/most
       prominent against the light "Glow" hero's ground; the "light" pair
       is palest so it recedes into it. */
    --graphite:#2F3237; --grey-m:#9AA0A6; --grey-l:#CBD0D6;
    --ink:#08142B; --ink-2:#3C4C68; --ink-3:#67748C;
    --line:rgba(10,32,72,.12);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    color:var(--ink);
    background:linear-gradient(180deg,#FCFDFF 0%,#F5F9FF 52%,#EEF4FE 100%);
    font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  svg,canvas{display:block}
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

  /* ---------- liquid glass ----------
     Four things separate this from a blurred box: a specular rim that reads as
     an edge catching light, an inner glow that gives the sheet thickness, a rim
     that blurs harder than the centre so the edge appears to bend what is
     behind it, and a highlight that tracks the pointer like light moving over a
     curved surface. */
  .lg{
    position:relative;border-radius:26px;isolation:isolate;
    background:linear-gradient(168deg,rgba(255,255,255,.34),rgba(255,255,255,.09));
    -webkit-backdrop-filter:blur(11px) saturate(125%);
            backdrop-filter:blur(11px) saturate(125%);
    box-shadow:
      inset 0 1.2px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(255,255,255,.42),
      inset 1px 0 0 rgba(255,255,255,.55),
      inset -1px 0 0 rgba(255,255,255,.55),
      inset 0 0 26px rgba(255,255,255,.30),
      0 26px 60px -34px rgba(14,42,96,.52);
  }
  /* A plain highlight gradient, not a second blur pass: stacking another
     backdrop-filter here on top of .lg's own was the classic "blur on blur"
     glassmorphism mistake - it doubled the GPU cost and muddied the edge
     instead of sharpening it. This reads as a lit rim without it. */
  .lg > .rim{
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 55%,rgba(255,255,255,.28));
    -webkit-mask:radial-gradient(126% 126% at 50% 50%,transparent 58%,#000 88%);
            mask:radial-gradient(126% 126% at 50% 50%,transparent 58%,#000 88%);
  }
  /* light following the pointer across the sheet */
  .lg > .spec{
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
    opacity:var(--go,0);transition:opacity .45s ease;
    /* dimmed 30% at the client's request: .58 -> .41 */
    background:radial-gradient(260px 260px at var(--gx,50%) var(--gy,50%),
      rgba(255,255,255,.41),rgba(255,255,255,0) 66%);
  }
  /* a slow sheen so the material never looks frozen */
  /* One pass, left to right, then it waits off-stage. It used to travel there
     AND back on a continuous 11s cycle, which read as a light permanently
     sliding around the page. Now: 60% dimmer (.42 -> .17), the travel is twice
     as slow (5.5s -> 11s one way), and a 5s pause follows each pass with the
     band parked clear of the surface. The static transform matches the first
     keyframe so it is never caught mid-surface. */
  .lg > .sheen{
    position:absolute;inset:-45%;pointer-events:none;z-index:1;
    background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.17) 50%,transparent 60%);
    transform:translateX(-45%);
    animation:sheen 16s ease-in-out infinite;
  }
  @keyframes sheen{
    0%{transform:translateX(-45%)}
    68.75%{transform:translateX(45%)}
    100%{transform:translateX(45%)}
  }
  .lg > .lgc{position:relative;z-index:2}

  /* ---------- aurora ----------
     Four soft light sources drifting on independent long cycles. Kept inside
     the blue family on purpose: an aurora normally reaches for several hues,
     but the brief is that the brand primaries do not change, so the range runs
     deep navy to pale sky rather than into violet or teal. */
  #aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #aurora span{position:absolute;display:block;border-radius:50%;will-change:transform}
  #aurora .a1{width:80vmax;height:80vmax;left:-24vmax;top:-32vmax;
    background:radial-gradient(closest-side,rgba(44,123,242,.24),rgba(44,123,242,0) 72%);
    animation:au1 27s ease-in-out infinite alternate}
  #aurora .a2{width:68vmax;height:68vmax;right:-22vmax;top:-20vmax;
    background:radial-gradient(closest-side,rgba(127,176,250,.30),rgba(127,176,250,0) 72%);
    animation:au2 33s ease-in-out infinite alternate}
  #aurora .a3{width:74vmax;height:74vmax;left:6vmax;bottom:-36vmax;
    background:radial-gradient(closest-side,rgba(18,71,168,.20),rgba(18,71,168,0) 72%);
    animation:au3 39s ease-in-out infinite alternate}
  #aurora .a4{width:58vmax;height:58vmax;right:-10vmax;bottom:-26vmax;
    background:radial-gradient(closest-side,rgba(168,203,255,.34),rgba(168,203,255,0) 72%);
    animation:au4 31s ease-in-out infinite alternate}
  @keyframes au1{to{transform:translate3d(12vmax,9vmax,0) scale(1.12)}}
  @keyframes au2{to{transform:translate3d(-11vmax,13vmax,0) scale(1.17)}}
  @keyframes au3{to{transform:translate3d(15vmax,-11vmax,0) scale(1.10)}}
  @keyframes au4{to{transform:translate3d(-13vmax,-9vmax,0) scale(1.19)}}

  /* ---------- the field, a texture inside the aurora ---------- */
  /* z-index:1 lifts every hero above #aurora (position:fixed, paints over
     any plain static-positioned descendant's background) - previously
     lived on .gradhero.v-dark itself since that WAS the visible layer;
     moved here now that .gradhero is the separate .bg child. */
  .stage{position:relative;z-index:1;min-height:100svh;overflow:hidden;background:transparent}
  .stage>.bg{position:absolute;inset:0}

  /* organic unevenness layered over a gradient - coarse-grid noise (see JS
     mkMottle), upscaled with smoothing into soft cloud-like blobs, blended
     with soft-light so it reads as depth/energy rather than a flat pattern
     or a hard-edged blotch. soft-light works the same way regardless of
     whether the ground beneath it is light or dark - it always lightens
     where the noise cell is bright and darkens where it's dim. */
  .mottle{position:absolute;inset:-10% -10%;pointer-events:none;
    mix-blend-mode:soft-light;opacity:.7;background-size:cover;background-position:center}

  /* ---------- gradient hero ---------- */
  /* Four style options were reviewed here as stacked variants: Dark
     (client's own moody stock photo, dark ground - superseded DO-NOT.md's
     original "no dark hero" rule while it was in the running), Glow, Band,
     Soft. Client's pick: "GLOW is my new favorite. It's more impactful
     than LITE" - "Let's just keep the glow hero and remove the other
     ones." The other three variants' CSS is gone with them; see NOTES.md
     for the full review history. A clean, bright, centered glow: white
     core easing straight out to brand blue at the edges, no vignette
     darkening and no .mottle texture, matching its reference photo's own
     smooth/clean read. */
  .gradhero.v-glow{
    background:
      radial-gradient(75% 72% at 50% 46%, #FFFFFF 0%, rgba(255,255,255,.9) 20%,
        rgba(143,187,250,.55) 55%, rgba(44,123,242,.30) 100%),
      linear-gradient(180deg,#F4F8FF 0%,#EAF1FF 100%)}


  .wrap{max-width:1200px;margin:0 auto;padding:0 32px}

  /* ---------- nav ---------- */
  nav{display:flex;align-items:center;gap:30px;margin-top:20px;
    padding:11px 12px 11px 24px;border-radius:100px;overflow:hidden}
  nav .lgc{display:flex;align-items:center;gap:30px;width:100%}
  .logo{font-weight:700;font-size:18px;letter-spacing:-.03em}
  .logo b{color:var(--blue)}
  nav a{font-size:13.5px;color:var(--ink-2);text-decoration:none;transition:color .16s}
  nav a:hover{color:var(--ink)}
  .sp{flex:1}
  .btn{display:inline-flex;align-items:center;font-family:inherit;font-size:13.5px;
    font-weight:600;text-decoration:none;cursor:pointer;color:#fff;
    text-transform:uppercase;
    padding:14px 22px;border-radius:100px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(168deg, rgba(58,133,247,.92), rgba(31,101,217,.78));
    border:1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
            backdrop-filter:blur(14px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 8px 20px -10px rgba(20,60,140,.55);
    transition:transform .18s ease, box-shadow .18s ease, background .25s ease;
  }
  .btn::before{
    content:"";
    position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(90px 90px at var(--bgx,50%) var(--bgy,0%), rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
    opacity:var(--bgo,0);
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:1;
  }
  .btn > *{position:relative;z-index:2}
  .btn:hover{
    background:linear-gradient(168deg, rgba(75,150,255,.95), rgba(40,110,230,.85));
    transform:translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 14px 30px -12px rgba(20,60,140,.65);
  }
  .btn:active{
    transform:translateY(0) scale(.97);
    transition-duration:.08s;
  }
  @media (prefers-reduced-motion:reduce){
    .btn,.btn:hover,.btn:active{transition:none;transform:none}
    .btn::before{display:none}
  }
  /* nav a:hover below sets color:var(--ink) generically for every link inside
     <nav> - including this .btn, since it's an <a>. That silently overrode
     .btn's own white text on hover, giving dark text on the darkened blue
     hover background. Win the specificity fight back for the button. */
  nav a.btn:hover{color:#fff}
  .btn.ghost{background:linear-gradient(168deg,rgba(255,255,255,.55),rgba(255,255,255,.2));
    color:var(--ink);border-color:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 26px -18px rgba(14,42,96,.6)}
  .btn.ghost:hover{background:#fff;color:var(--blue-d);border-color:#fff}
  .btn:focus-visible{outline:2px solid var(--blue-d);outline-offset:3px}

  /* ---------- hero: mark small on top, everything centred ---------- */
  .hero{position:relative;display:flex;flex-direction:column;align-items:center;
    padding:38px 0 64px}
  /* .lgc is a plain flex column with no gap - every child relies on its own
     margin for spacing. The new CTA button had none, so it sat flush against
     .micro (0px gap, read as overlapping). The bottom padding above was also
     trimmed (92px -> 64px) to offset the button's added height, so the hero
     doesn't grow taller than it already was. */
  .hero .cta{margin-top:20px}
  /* Edgeless glass. A backdrop-filter always stops at a hard rectangle, and
     that boundary IS the box - so the sheet is feathered out with a mask.
     Critically the mask sits on the MATERIAL only, never on .pane itself: a
     mask applies to an element AND all its descendants, so masking the panel
     faded the copy and buttons inside it along with the glass. */
  .pane{position:relative;width:min(1000px,100%);text-align:center;
    padding:44px 40px 40px;border-radius:0;overflow:visible;box-shadow:none;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    -webkit-mask-image:none;mask-image:none}

  /* The intermediate layer between the hero copy and the field is GONE at the
     client's request - no fill, no frost, no mask. The copy now sits directly on
     the animated net. Kept as an empty rule rather than deleted so the history is
     legible: this pane used to carry a masked, blurred glass sheet, and the mask
     had to sit on the material only, never on .pane itself. */
  .pane::before{content:none}
  .pane > .rim{display:none}          /* the rim is the edge; there is no edge */
  /* the white sweep and the pointer specular were the rest of that layer */
  .pane > .sheen{display:none}
  @keyframes sheenPane{0%,100%{background-position:-28% 0}50%{background-position:128% 0}}
  .pane > .spec{display:none}
  .pane .lgc{display:flex;flex-direction:column;align-items:center}
  .mark{width:158px;height:158px;margin:0 auto 26px;cursor:pointer}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.19em;
    text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.66);
    border:1px solid rgba(255,255,255,.92);border-radius:100px;padding:7px 16px;margin:0 0 24px;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  h1{margin:0 0 22px;font-weight:700;letter-spacing:-.05em;line-height:.94;
    font-size:clamp(40px,6.5vw,86px);max-width:19ch}
  h1 span{color:var(--ink)}   /* was --blue-d; client: "Harness shouldn't be in another color" */
  h1 .nb{color:var(--ink)}
  @media(min-width:640px){h1 .nb{white-space:nowrap}}
  h1 sup{font-size:.19em;top:-2.1em;font-weight:500;color:var(--ink-3);letter-spacing:0}

  .hero h1{position:relative}
  .lede{max-width:56ch;font-size:18px;line-height:1.62;color:var(--ink-2);margin:0 0 32px}
  .cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}

  /* ---------- sections ---------- */
  /* sections float on the aurora instead of covering it */
  .sec{background:rgba(255,255,255,.52);border-top:1px solid rgba(255,255,255,.75);
    -webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);
    position:relative;z-index:1}
  .sec .wrap{padding:84px 32px}
  .head{text-align:center;max-width:64ch;margin:0 auto 52px}
  .head .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-d);
    display:block;margin-bottom:16px}
  h2{margin:0 0 14px;font-weight:700;letter-spacing:-.042em;line-height:1.04;
    font-size:clamp(30px,4.2vw,50px)}
  h2 span{color:var(--blue)}
  .head p{margin:0;font-size:16.5px;line-height:1.62;color:var(--ink-2)}

  .rail{border-top:1px solid rgba(255,255,255,.75);max-width:960px;margin:0 auto}
  .row{display:grid;grid-template-columns:64px 1fr 44px;gap:24px;align-items:start;width:100%;
    text-align:left;border-bottom:1px solid rgba(255,255,255,.75);cursor:pointer;
    padding:24px 20px;border-radius:20px;transition:.25s}
  .row:hover{background:rgba(255,255,255,.62)}
  .row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  .rt{min-width:0}
  .row .n{font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);padding-top:9px;transition:.2s}
  .row[aria-expanded="true"] .n{color:var(--blue)}
  .row h3{margin:0;font-size:clamp(19px,2.2vw,27px);font-weight:600;letter-spacing:-.032em;
    line-height:1.14;transition:.2s}
  .row[aria-expanded="true"] h3{color:var(--blue)}
  .row .d{display:block;overflow:hidden;max-height:0;opacity:0;
    transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .3s,margin .42s}
  .row[aria-expanded="true"] .d{max-height:160px;opacity:1;margin-top:12px}
  .row .d p{margin:0;max-width:60ch;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
  .row .plus{position:relative;width:14px;height:14px;margin-top:11px;justify-self:end}
  .row .plus::before,.row .plus::after{content:"";position:absolute;background:var(--ink-3);
    transition:.28s cubic-bezier(.22,1,.36,1)}
  .row .plus::before{left:0;top:6.5px;width:14px;height:1.5px}
  .row .plus::after{left:6.25px;top:0;width:1.5px;height:14px}
  .row[aria-expanded="true"] .plus::before,.row[aria-expanded="true"] .plus::after{background:var(--blue)}
  .row[aria-expanded="true"] .plus::after{transform:rotate(90deg)}

  .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;padding-top:30px;
    border-top:1px solid var(--line)}
  .cols p{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
  .cols strong{color:var(--ink);font-weight:600}


  /* ---------- cards, specs, sizes, partners, footer ---------- */
  .grid{display:grid;gap:14px;max-width:1000px;margin:0 auto}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .card{padding:26px 26px 28px;border-radius:22px;overflow:hidden;
    transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .card:hover{transform:translateY(-4px)}
  .card .n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
    color:var(--blue-d);display:block;margin-bottom:12px}
  .card h3{margin:0 0 9px;font-size:19px;font-weight:600;letter-spacing:-.024em}
  .card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

  /* REMOVED 9 Sep 2026 - a dead `.spec` spec-table component whose rules were
     colliding with the glass compositor's `.spec` specular layer. It put
     max-width:820px and a white 1px border-top on all 69 specular layers, which
     surfaced as a stray outlined box on hover. Zero elements in the markup used
     the content class. Fourth collision in this file: .tc.lead, .ghost, .stack,
     .spec. GREP BEFORE NAMING - and prefer namespaced names for machinery. */

  .sizes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
  .size{width:96px;padding:20px 0 18px;border-radius:20px;text-align:center;overflow:hidden}
  .size b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em}
  .size span:not(.lgc){font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
    color:var(--ink-3);text-transform:uppercase}

  .deploy{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
  .chip{padding:12px 22px;border-radius:100px;font-size:14.5px;font-weight:600;
    letter-spacing:-.01em;overflow:hidden}

  .partners{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .partner{flex:1 1 220px;max-width:300px;padding:30px 24px;border-radius:22px;
    text-align:center;overflow:hidden}
  .partner b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}
  .partner span:not(.lgc){font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3)}

  .close{text-align:center;padding:96px 32px 88px}
  .close h2{max-width:18ch;margin:0 auto 18px}
  .close p{max-width:52ch;margin:0 auto 32px;font-size:17px;line-height:1.6;color:var(--ink-2)}
  /* ---------- site footer ----------
     The four-column dark band from concept 05, carrying the live site's own
     content. Dave marked this one "we absolutely need" - the only absolute in
     the brief - and separately asked for privacy policy, terms of use and
     copyright at the bottom of every page; the meta row below covers that.
     It is full-bleed: the only dark ground on the page, and the page's closing
     punctuation. */
  /* position+z-index is load-bearing: #aurora is position:fixed, so it paints
     ABOVE the background of any static element. Without this the aurora's blue
     bled straight across the dark footer. */
  .sitefoot{position:relative;z-index:1;
    background:var(--ink);color:#fff;padding:88px 0 40px;margin-top:96px}
  .sitefoot .wrap{padding-top:0}
  .fgrid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:44px;align-items:start}
  .fgrid .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(255,255,255,.52);display:block;margin-bottom:20px}
  .fgrid p{margin:0;font-size:14.5px;line-height:1.72;color:rgba(214,228,250,.86);
    max-width:34ch}
  .flist{display:grid;gap:9px}
  .flist a{font-size:14.5px;line-height:1.5;color:rgba(214,228,250,.86);
    text-decoration:none;transition:color .16s;width:fit-content}
  .flist a:hover{color:#fff}
  .flist a:focus-visible{outline:2px solid var(--blue-l);outline-offset:3px}
  .flist span{font-size:14.5px;line-height:1.5;color:rgba(214,228,250,.62)}
  .fmeta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
    margin-top:72px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
    color:rgba(214,228,250,.55)}
  .fmeta a{color:rgba(214,228,250,.78);text-decoration:none;
    border-bottom:1px solid rgba(214,228,250,.28)}
  .fmeta a:hover{color:#fff;border-bottom-color:#fff}
  .fmeta a:focus-visible{outline:2px solid var(--blue-l);outline-offset:3px}
  .fmeta .sp{flex:1}
  @media (max-width:900px){
    .fgrid{grid-template-columns:1fr 1fr;gap:40px 32px}
    .sitefoot{padding:64px 0 36px;margin-top:72px}
    .fmeta{margin-top:48px}
  }
  @media (max-width:560px){ .fgrid{grid-template-columns:1fr} }

  @media (max-width:820px){
    nav a{display:none}
    .wrap{padding:0 20px}
    .sec .wrap{padding:64px 20px}
    .row{grid-template-columns:44px 1fr;gap:14px}
    .row .plus{display:none}
    .cols{grid-template-columns:1fr;gap:26px}
    .g2,.g3,.g4{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr;gap:26px}
    .mark{width:116px;height:116px}
    .hero{padding-bottom:88px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
    #aurora span{animation:none}
    .lg > .sheen{animation:none;transform:translateX(-45%)}
  }
  /* ---------- wireframe additions ----------
     Everything below is new to this version. The placeholder is a real glass
     surface with a dashed plate inside it, so a figure that is not drawn yet
     still occupies the space it will occupy later and the page reads at its
     true rhythm. */
  .ph{position:relative;width:100%;min-height:300px;border-radius:26px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;padding:34px 28px;text-align:center}
  .ph::before{content:"";position:absolute;inset:16px;z-index:1;pointer-events:none;
    border:1.5px dashed rgba(44,123,242,.38);border-radius:16px;
    background:repeating-linear-gradient(135deg,
      rgba(44,123,242,.055) 0 10px,rgba(44,123,242,0) 10px 22px)}
  .ph .lgc{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:52ch}
  .ph.tall{min-height:420px}
  .ph.short{min-height:210px}
  .phk{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--blue-d);
    border:1px solid rgba(44,123,242,.34);border-radius:100px;padding:5px 13px;
    background:rgba(255,255,255,.7)}
  .pht{font-size:19px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
  .phd{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
  .phr{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3);margin-top:4px}

  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:0 auto}
  .stat{padding:26px 22px 24px;border-radius:22px;overflow:hidden;text-align:center}
  .stat .lgc{display:flex;flex-direction:column;align-items:center;gap:7px}
  .statn{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.045em;
    line-height:1;color:var(--blue-d)}
  .statl{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3)}
  .statd{font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:26ch}

  .tbl{max-width:820px;margin:0 auto 34px;border-radius:22px;overflow:hidden;padding:8px}
  .trow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:10px;padding:15px 18px;
    border-bottom:1px solid rgba(255,255,255,.8)}
  .trow:last-child{border-bottom:0}
  .trow.th .tc{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3)}
  .tc{font-size:15.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .tc.rowk{font-weight:600;color:var(--ink)}
  .tc.bad{color:var(--blue-d);font-weight:600}

  .quote{max-width:760px;margin:0 auto;text-align:center;padding:40px 30px;border-radius:26px;
    overflow:hidden}
  .quote .lgc{display:flex;flex-direction:column;align-items:center;gap:16px}
  .qt{font-size:clamp(19px,2.5vw,26px);line-height:1.42;letter-spacing:-.028em;
    font-weight:500;color:var(--ink)}
  .qa{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-3)}

  .tags{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto}
  .chip.sm{padding:9px 16px;font-size:13px;font-weight:500;border-radius:100px}
  .lead{max-width:62ch;margin:34px auto 0;font-size:15.5px;line-height:1.72;
    color:var(--ink-2);text-align:center}
  .lead b{color:var(--ink);font-weight:600}
  .stack{display:grid;gap:14px;max-width:1000px;margin:0 auto}
  .below{margin-top:34px}

  @media (max-width:820px){
    .stats{grid-template-columns:1fr}
    .trow{grid-template-columns:1fr 1fr;gap:6px 10px}
    .ph{min-height:230px}
    .ph.tall{min-height:280px}
  }

  /* long-form copy: the document is prose, so the page needs a prose measure */
  .prose{max-width:70ch;margin:0 auto}
  .prose p{margin:0 0 18px;font-size:16px;line-height:1.74;color:var(--ink-2)}
  .prose p:last-child{margin-bottom:0}
  .prose strong{color:var(--ink);font-weight:600}

  .blist{display:grid;gap:10px;max-width:900px;margin:28px auto 0}
  .bitem{padding:18px 24px;border-radius:18px;overflow:hidden}
  .bitem .lgc{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
  .bn{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
    color:var(--blue);padding-top:4px}
  .bx{font-size:15.5px;line-height:1.62;color:var(--ink-2)}

  .links{display:grid;gap:10px;max-width:900px;margin:0 auto}
  .link{display:block;padding:20px 24px;border-radius:18px;overflow:hidden;
    text-decoration:none;transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .link:hover{transform:translateY(-3px)}
  .link .lgc{display:flex;gap:18px;align-items:baseline;justify-content:space-between}
  .lt{font-size:16px;font-weight:600;letter-spacing:-.022em;color:var(--ink);line-height:1.42}
  .link:hover .lt{color:var(--blue-d)}
  .ls{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
    flex:none}

  .tbl.below{margin-top:8px}
  @media (max-width:820px){
    .link .lgc{flex-direction:column;gap:8px}
    .bitem .lgc{grid-template-columns:26px 1fr;gap:10px}
  }

  .sec .wrap{padding:104px 32px}
  .head{margin-bottom:46px}
  .head p{font-size:18px;line-height:1.56;max-width:52ch;margin:0 auto;color:var(--ink-2)}
  h2{font-size:clamp(30px,4.2vw,52px)}
  .card p{font-size:14.8px;line-height:1.62}
  .card h3{margin-bottom:8px}
  .stat{padding:30px 20px}
  .stat .lgc{gap:10px}
  .statl{max-width:16ch;line-height:1.5}
  .lede{max-width:60ch}
  .close{padding:120px 32px 92px}
  .close p{font-size:18px}
  @media (max-width:820px){
    .sec .wrap{padding:72px 20px}
    .close{padding:84px 20px 68px}
  }

  /* ---------- research pass ----------
     Reading the sites Dave sent showed the page was missing a whole layer:
     social proof. Logo bands, named testimonials, hard metrics and case-study
     outcomes are a large share of every one of those pages, and none of it
     existed here. These are the components for it. */
  .micro{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
  .mp{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
    background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
    border-radius:100px;padding:7px 15px;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .mp i{width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none}

  /* Home hero benefits: preserve the resting glass and highlight each pill. */
  .intro-section .micro .mp,.intro-section .micro .mp *{cursor:default}
  .intro-section .micro .mp{
    transition:transform .22s ease,background-color .22s ease,
      border-color .22s ease,box-shadow .22s ease,color .22s ease}
  .intro-section .micro .mp:is(:hover,:focus-visible,:focus-within){
    transform:translateY(-3px);background-color:rgba(255,255,255,.82);
    border-color:rgba(44,123,242,.28);color:var(--blue-d);
    box-shadow:0 6px 18px -7px rgba(44,123,242,.24)}
  .intro-section .micro .mp:is(:hover,:focus-visible,:focus-within) i{
    animation:hero-pill-dot .22s ease 1}
  @keyframes hero-pill-dot{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.3)}
  }
  @media (hover:none){
    .intro-section .micro .mp:is(:hover,:focus-visible,:focus-within){transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    .intro-section .micro .mp{transition:none}
    .intro-section .micro .mp:is(:hover,:focus-visible,:focus-within){
      transform:none;box-shadow:none}
    .intro-section .micro .mp:is(:hover,:focus-visible,:focus-within) i{
      transform:none;animation:none}
  }

  .lb{text-align:center}
  .lbk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:26px}
  .lbrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .lgo{flex:1 1 150px;max-width:190px;height:74px;border-radius:16px;overflow:hidden;
    display:flex;align-items:center;justify-content:center}
  .lgo .lgc{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
  .lgt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3);text-align:center;padding:0 10px}

  .tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1060px;margin:0 auto}
  .tst{padding:28px 26px;border-radius:22px;overflow:hidden}
  .tst .lgc{display:flex;flex-direction:column;height:100%;gap:18px}
  .tq{font-size:15.5px;line-height:1.6;color:var(--ink);flex:1}
  .tby{display:flex;flex-direction:column;gap:3px}
  .tn{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  .tr{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3)}
  .tst.slot .tq{color:var(--ink-3);font-style:italic}

  .roles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:960px;margin:0 auto}
  .role{padding:24px 26px;border-radius:20px;overflow:hidden}
  .role .lgc{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
  .rk{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--blue-d);white-space:nowrap}
  .rv{font-size:15.5px;line-height:1.55;color:var(--ink-2)}

  /* ---------- segmented use-case switcher ----------
     Dave: "I like this mechanism - perhaps for use cases." The four domains were
     a static 2x2 of .role cards; they are now one panel switched by a segmented
     control, which is the only interactive element borrowed from any concept.
     Real tablist semantics: roving tabindex, arrow/Home/End keys, aria-selected. */
  .segw{display:flex;justify-content:center;margin:0 0 var(--s4)}
  .seg{display:inline-flex;gap:4px;padding:5px;border-radius:100px;overflow:hidden;
    max-width:100%;flex-wrap:wrap;justify-content:center}
  .seg .lgc{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center}
  .segt{font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;
    color:var(--ink-2);background:transparent;border:1px solid transparent;
    padding:14px 22px;border-radius:100px;white-space:nowrap;transition:.18s}
  .segt:hover{color:var(--ink)}
  .segt[aria-selected="true"]{color:var(--blue-d);background:rgba(255,255,255,.92);
    border-color:rgba(255,255,255,.95);
    box-shadow:0 1px 0 rgba(255,255,255,.9),0 12px 26px -18px rgba(14,42,96,.55)}
  .segt:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px}

  .ucp{padding:34px 34px 30px;border-radius:26px;overflow:hidden}
  .ucp .lgc{display:grid;gap:var(--s3)}
  .ucp[hidden]{display:none}
  .uch{display:grid;gap:10px}
  .uck{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--blue-d)}
  .uct{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
    color:var(--ink);margin:0;max-width:26ch}
  .ucd{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch}
  /* the figure slot, same convention as the other placeholders: it carries its
     own animation spec so the graphics phase starts from the artboard */
  .ucf{position:relative;min-height:260px;border-radius:20px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;text-align:center;padding:30px 26px;
    background:repeating-linear-gradient(135deg,
      rgba(140,175,235,.055) 0 10px, rgba(140,175,235,0) 10px 20px);
    border:1px dashed rgba(120,160,220,.42)}
  .ucfk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3)}
  .ucft{font-size:17px;font-weight:600;color:var(--ink)}
  .ucfd{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:0}
  .ucfr{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
    color:var(--ink-3);margin-top:2px}
  @media (max-width:700px){
    .segt{font-size:13px;padding:12px 15px}
    .ucp{padding:26px 22px 24px}
    .uct{font-size:20px}
  }

  .faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
  .fq{padding:26px 28px;border-radius:20px;overflow:hidden}
  .fq .lgc{display:flex;flex-direction:column;gap:9px}
  .fqq{font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
  .fqa{font-size:15px;line-height:1.65;color:var(--ink-2)}

  .csx{max-width:1060px;margin:0 auto}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;
    margin:34px auto 0}

  @media (max-width:820px){
    .tsts,.metrics{grid-template-columns:1fr}
    .roles{grid-template-columns:1fr}
    .role .lgc{grid-template-columns:1fr;gap:6px}
  }

  /* ---------- brief build: additions ---------- */
  .lede b{color:var(--ink);font-weight:600}
  .phd b{color:var(--ink);font-weight:600}
  .metrics{max-width:1000px}
  /* =========================================================
     v2 LAYOUT
     Three changes. Chapters, so twenty flat sections read as six
     movements. A fixed rail, so a 16,500px page tells you where you
     are. And paired sections, so a figure sits beside the copy it
     illustrates instead of underneath it.
     ========================================================= */
  .chprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
    background:linear-gradient(90deg,var(--blue-d),var(--blue));transition:width .12s linear}

  .chnav{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:50;
    display:none;flex-direction:column;gap:1px}
  @media (min-width:1340px){.chnav{display:flex}}
  .chnav a{display:flex;align-items:center;gap:11px;text-decoration:none;padding:8px 0;
    font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-3);transition:color .22s}
  .chnav a i{display:block;width:16px;height:1px;background:currentColor;flex:none;
    transition:width .22s ease,height .22s ease}
  .chnav a:hover{color:var(--blue-d)}
  .chnav a.on{color:var(--blue-d)}
  .chnav a.on i{width:32px;height:2px}
  .chnav a:focus-visible{outline:2px solid var(--blue-d);outline-offset:4px;border-radius:2px}

  .chap{max-width:1120px;margin:0 auto;display:flex;align-items:baseline;gap:20px;
    flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .chapn{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--blue-d);flex:none}
  .chapt{font-size:14px;color:var(--ink-3)}

  /* copy on one side, its figure on the other, alternating down the page */
  .duo{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:46px;
    align-items:center;max-width:1120px;margin:0 auto}
  .duo .head{text-align:left;max-width:44ch;margin:0}
  .duo .head p{font-size:16px}
  .duo .ph{min-height:360px;margin:0}
  .duo.alt .head{order:2}
  @media (max-width:920px){
    .duo{grid-template-columns:1fr;gap:24px}
    .duo.alt .head{order:0}
    .duo .ph{min-height:300px}
  }

  /* stacked sections stop being centred columns of text */
  .head.lft{text-align:left;max-width:56ch;margin:0 0 40px}

  /* pill rows start on the same edge as the heading above them.
     .tags carried its own narrower max-width and auto margins, which put its
     box 46px right of every other block in the section. */
  .tags{justify-content:flex-start;max-width:none;margin-left:0;margin-right:0}
  .deploy{justify-content:flex-start}
  .roles{margin-left:0;margin-right:0;max-width:none}

  /* figure captions read down the same left edge, not from the middle */
  .ph{justify-content:flex-start;text-align:left}
  .ph .lgc{align-items:flex-start;max-width:60ch}
  /* =========================================================
     v3 COMPOSITION
     Structure only, taken from the reference captures. Their colour and
     type are theirs; the material here stays Liquid Glass.

     What the captures actually showed: length was never the issue
     (Zapier 31,197px, UiPath 33,087px, ours 17,427px). Every band on
     those pages is a DIFFERENT KIND OF OBJECT, and band heights swing
     20x. Ours was one species repeated twenty times. These are the
     species.
     ========================================================= */

  /* ---- band rhythm, in our own palette: plain / washed / deeper wash ---- */
  .band.tint{background:linear-gradient(180deg,rgba(226,236,252,.72),rgba(244,248,254,.5))}
  .band.deep{background:linear-gradient(180deg,rgba(206,224,250,.85),rgba(226,238,253,.62))}
  .thin{padding-top:38px;padding-bottom:38px}

  /* =========================================================
     v4 GUIDED SCROLL
     LangGraph's device: a spine down the left of each chapter with a
     node per section, the chapter title pinned above it, and each
     section pinning in turn so the next one slides over the top of it.
     ========================================================= */
  /* ---------- alternating dark chapters ----------
     Chapters 01, 03 and 05 run on a dark ground; 02, 04 and 06 stay light. 01 is
     "The problem", which is exactly the band Dave marked "Like 'The Problem'" in
     concept 02, and 06 staying light keeps a step before the dark footer instead
     of the two merging.

     Almost all of this is a TOKEN FLIP rather than per-component rules: the page
     already draws its text, rules and small labels from --ink / --ink-2 /
     --ink-3 / --line / --blue-d, so redefining those six values inside the
     chapter re-colours everything that was built properly. Only surfaces that
     hard-code white - the glass, the dashed figure slots, the chips - need real
     overrides below.

     position + z-index is load-bearing, same as the footer: #aurora is
     position:fixed and paints above the background of any static element. */
  .chapter.dark{
    position:relative;z-index:1;
    --ink:#F4F8FF; --ink-2:#BACCE8; --ink-3:#93A7C6;
    --blue-d:#93BDFB;                 /* small blue labels must lighten here */
    --line:rgba(255,255,255,.15);
    background:linear-gradient(180deg,#0B1B38 0%,#08142B 55%,#0A1730 100%);
    color:var(--ink)}
  /* Dividers. Every rule below is a hard-coded white sized for a LIGHT ground,
     where a white hairline reads as a soft highlight. On dark navy the same
     values blaze - `.chapsec + .chapsec` at .9 alpha was the worst of them. They
     are not on --line, so the token flip could not reach them; each one needs an
     explicit dark value. Anything separating content here should be felt, not
     seen: .07-.09 rather than .75-.9. */
  .chapter.dark .chapsec + .chapsec{
    border-top-color:rgba(255,255,255,.085);box-shadow:none}
  .chapter.dark .sec{border-top-color:rgba(255,255,255,.085);
    background:rgba(255,255,255,.02)}
  .chapter.dark .rail{border-top-color:rgba(255,255,255,.085)}
  .chapter.dark .row{border-bottom-color:rgba(255,255,255,.085)}
  .chapter.dark .row:hover{background:rgba(255,255,255,.05)}
  .chapter.dark .trow{border-bottom-color:rgba(255,255,255,.075)}

  /* the light-band tints are meaningless on a dark ground */
  .chapter.dark .band.tint,.chapter.dark .band.deep{background:none}
  .chapter.dark .chaphead{border-color:rgba(255,255,255,.10)}

  /* dark glass: same material, inverted. The sheet is now a lift out of the
     ground rather than a wash over it. */
  .chapter.dark .lg{
    background:linear-gradient(168deg,rgba(255,255,255,.10),rgba(255,255,255,.028));
    -webkit-backdrop-filter:blur(11px) saturate(115%);
            backdrop-filter:blur(11px) saturate(115%);
    box-shadow:
      inset 0 1.2px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.06),
      inset 1px 0 0 rgba(255,255,255,.10),
      inset -1px 0 0 rgba(255,255,255,.10),
      inset 0 0 26px rgba(255,255,255,.05),
      0 26px 60px -34px rgba(0,0,0,.6)}
  .chapter.dark .lg > .rim{
    background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 55%,rgba(255,255,255,.08))}
  .chapter.dark .lg > .spec{
    background:radial-gradient(260px 260px at var(--gx,50%) var(--gy,50%),
      rgba(255,255,255,.11),rgba(255,255,255,0) 66%)}
  .chapter.dark .lg > .sheen{
    background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}

  /* A moving, pointer-reactive highlight on a disabled "coming soon" control
     would imply it's interactive when it isn't. Keep the static rim (still
     reads as a defined edge) but drop the animated sheen and the pointer-
     tracked specular highlight. */
  .ask-ai.lg > .sheen,
  .ask-ai.lg > .spec{display:none}

  /* Placed after every unconditional .lg / .chapter.dark .lg rule above so it
     wins the cascade tie (equal specificity resolves by source order) whenever
     the query matches, rather than being silently overridden by the later
     dark-chapter rule. */
  @media (prefers-reduced-transparency: reduce){
    .lg{
      background:#eef2fb;
      -webkit-backdrop-filter:none;
              backdrop-filter:none;
    }
    .chapter.dark .lg{
      background:#101f3a;
      -webkit-backdrop-filter:none;
              backdrop-filter:none;
    }
    .lg > .rim,
    .lg > .sheen,
    .lg > .spec{display:none}
  }

  /* figure slots: the dashed artboard reads as light-on-dark */
  .chapter.dark .ph::before{
    border-color:rgba(147,189,251,.34);
    background:repeating-linear-gradient(135deg,
      rgba(147,189,251,.05) 0 10px,rgba(147,189,251,0) 10px 22px)}
  .chapter.dark .phk{
    border-color:rgba(147,189,251,.34);background:rgba(255,255,255,.06)}
  .chapter.dark .ucf{
    border-color:rgba(147,189,251,.34);
    background:repeating-linear-gradient(135deg,
      rgba(147,189,251,.05) 0 10px,rgba(147,189,251,0) 10px 20px)}

  /* the ghosted chapter numerals sit on dark now */
  .chapter.dark .subnum{color:rgba(255,255,255,.07)}

  /* buttons: the ghost variant is a white sheet, which vanishes on dark */
  .chapter.dark .btn.ghost{
    background:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
    color:var(--ink);border-color:rgba(255,255,255,.28)}
  .chapter.dark .btn.ghost:hover{
    background:rgba(255,255,255,.94);color:var(--blue-dd);border-color:#fff}
  .chapter.dark .btn:focus-visible,
  .chapter.dark .segt:focus-visible,
  .chapter.dark a:focus-visible{outline-color:var(--blue-l)}

  /* the segmented control's selected tab is a white card - keep it readable */
  .chapter.dark .segt[aria-selected="true"]{
    color:#0A2C6B;background:rgba(255,255,255,.90);border-color:rgba(255,255,255,.95)}

  .chapter{position:relative}
  /* chapter names sit in flow - pinning them was tried and dropped */
  .chaphead{position:relative;z-index:2;padding:8px 0 13px;
    border-bottom:1px solid var(--line)}
  .chaphead .chap{margin:0;padding:0;border:0}

  .chapbody{position:relative;padding:26px 0 40px 0}

  /* sections sit in normal flow. Pinning them so the next slid over the top was
     tried and dropped: sections taller than the viewport cannot pin, so some
     stacked and some did not, which read as broken. The chapter title still
     pins, and the spine still tracks progress. */
  /* No panel, no shadow. Sections are separated by space and one hairline;
     delete the .chapsec + .chapsec rule below to remove the line entirely. */
  .chapsec{position:relative;margin:0}
  .chapsec + .chapsec{border-top:1px solid rgba(255,255,255,.9);
    box-shadow:0 -1px 0 rgba(10,32,72,.05)}
  .chapsec .wrap{position:relative;padding:64px 32px;
    display:grid;align-content:start;gap:var(--s5)}
  /* spacing comes from the container's gap, never from the item - 13 of 28 sibling
     gaps were 0px because they had no .below class to carry a margin */
  .chapsec .wrap > *{margin-top:0;margin-bottom:0}
  /* a section head earns more air than two figures do - but on the scale */
  .chapsec .wrap > .head{margin-bottom:calc(var(--s6) - var(--s5))}

  /* alignment: every block starts on the section's left edge. These three were
     still auto-centring inside their own narrower max-widths. */
  /* margin-right:auto would make these shrink-to-fit as grid items - zero both
     sides instead, so each fills its track and its own max-width does the capping */
  .chapsec .letter{margin-left:0;margin-right:0}
  .chapsec .seq{max-width:none;margin-left:0;margin-right:0}
  .chapsec .metrics,.chapsec .bignums,.chapsec .roles,.chapsec .grid,
  .chapsec .tags,.chapsec .deploy,.chapsec .cmp,.chapsec .split,.chapsec .pq{
    margin-left:0;margin-right:0}
  /* number tiles read left like everything else, not centred */
  .chapsec .stat{text-align:left}
  .chapsec .stat .lgc{align-items:flex-start}
  .sub{display:grid;gap:var(--s4)}
  .sub > *{margin-top:0;margin-bottom:0}

  /* the figure slot was a glass panel wrapping a dashed frame - a box inside a
     box, each with its own shadow. Only the dashed frame survives. */
  .chapsec .ph{background:none;box-shadow:none;border:0;padding:30px 26px}
  .chapsec .ph > .rim,.chapsec .ph > .sheen,.chapsec .ph > .spec{display:none}
  .chapsec .ph::before{inset:0;border-radius:20px}
  @media (max-width:760px){.chapsec .wrap{padding:44px 20px}}


  /* the first frame must read at rest, so entry animation only enhances */
  .chapsec{opacity:1}
  .chapsec .wrap > *{transition:opacity .5s ease,transform .5s ease}
  .chapsec:not(.seen) .wrap > *{opacity:.62;transform:translateY(8px)}
  .chapsec.first .wrap > *{opacity:1;transform:none}
  .chapsec.seen .wrap > *{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    .chapsec .wrap > *,.chapsec:not(.seen) .wrap > *{opacity:1;transform:none;transition:none}
  }

  /* ---- streaming news bar ----
     From the existing site, at the client's requested height: a 22px strip above
     the nav. At that height the type is 10.5px and the arrows cannot reach the
     44px touch minimum the rest of the page meets - see NOTES.md, this is a
     deliberate, flagged deviation. It auto-advances as well, so the arrows are
     an accelerator rather than the only way to reach an item. */
  /* The strip spans the viewport so the rule under it runs edge to edge, but its
     CONTENT sits in the standard .wrap - same 1200px measure and same 32px left
     edge as the nav above it and every block on the page. */
  .newsbar{position:fixed;top:0;left:0;right:0;z-index:60;height:22px;
    background:rgba(243,247,253,.92);border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
            backdrop-filter:blur(12px) saturate(160%);
    font-size:10.5px;letter-spacing:.02em;line-height:1}
  .newsbar > .wrap{display:flex;align-items:center;gap:10px;height:22px}
  /* NOT inline-flex: flex layout drops the whitespace text node between
     "Latest" and <b>News</b>, so the chip rendered as "LATESTNEWS". */
  .newsk{flex:none;display:inline-block;height:22px;line-height:22px;
    padding:0 8px;background:var(--ink);color:#fff;
    font-family:"Roboto Mono",ui-monospace,monospace;font-size:9.5px;
    letter-spacing:.10em;text-transform:uppercase;white-space:nowrap}
  .newsk b{color:var(--blue-l);font-weight:700}
  /* the viewport the headlines slide through */
  .newsrail{position:relative;flex:1;height:22px;overflow:hidden}
  .newsi{position:absolute;inset:0;display:flex;align-items:center;
    opacity:0;transform:translateY(100%);transition:opacity .42s ease,transform .42s ease;
    pointer-events:none}
  .newsi.on{opacity:1;transform:none;pointer-events:auto}
  .newsi.out{opacity:0;transform:translateY(-100%)}
  .newsi a{color:var(--ink-2);text-decoration:none;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:100%;
    border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
  .newsi a:hover{color:var(--blue-d);border-bottom-color:rgba(15,62,147,.45)}
  .newsi a:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px}
  .newsarr{flex:none;display:flex;gap:2px}
  .newsarr button{width:22px;height:22px;display:grid;place-items:center;
    font-family:inherit;font-size:12px;line-height:1;cursor:pointer;
    color:var(--ink-3);background:none;border:0;padding:0;transition:color .16s}
  .newsarr button:hover{color:var(--ink)}
  .newsarr button:focus-visible{outline:2px solid var(--blue-d);outline-offset:-2px}
  @media (max-width:600px){ .newsarr{display:none} }

  /* ---- fixed top header ----
     The nav used to live inside .stage, which is overflow:hidden - so it scrolled
     away and position:sticky could not work there. It is now a fixed bar of its
     own, and .stage carries matching top padding so the hero starts where it did. */
  .navbar{position:fixed;top:22px;left:0;right:0;z-index:55;pointer-events:none}
  .navbar .wrap{pointer-events:none}
  /* The nav is fixed and passes over dark chapters. As translucent glass its
     ground went navy while its links stayed --ink-2, which fell under 2:1. The
     pill now carries enough of its own white to stay a light surface whatever
     scrolls beneath it - it is the one element on the page that cannot know
     what its background will be. */
  .navbar nav{pointer-events:auto;margin-top:20px;
    background:linear-gradient(168deg,rgba(255,255,255,.90),rgba(255,255,255,.78));
    transition:margin-top .22s ease,box-shadow .22s ease}
  .navbar.scrolled nav{margin-top:10px;
    box-shadow:0 1px 0 rgba(255,255,255,.55),0 14px 34px -22px rgba(14,42,96,.5)}
  .stage > .inner{padding-top:110px}
  /* anchor targets must clear the fixed bar */
  .chapter[id], main > section[id], .stage [id]{scroll-margin-top:118px}
  @media (max-width:760px){.stage > .inner{padding-top:98px}}

  /* the ghost button's animated sheen sweeps past its own box. Harmless while the
     button sat mid-page; v3 puts one at the right edge of the closing row, where
     the sweep intermittently pushed a horizontal scrollbar. */
  .btn.ghost{overflow:hidden}

  /* ---- numbered sub-chapter with a ghosted numeral (UiPath) ---- */
  .sub{position:relative;padding:54px 0 10px}
  .sub + .sub{border-top:1px solid var(--line)}
  .subnum{position:absolute;left:0;top:46px;font-size:clamp(58px,6.6vw,92px);font-weight:700;
    line-height:.78;letter-spacing:-.06em;color:transparent;pointer-events:none;z-index:0;
    -webkit-text-stroke:1.5px rgba(44,123,242,.26)}
  .subin{position:relative;z-index:1;display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:start;
    padding-left:118px}
  .subk{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--blue-d);display:block;margin-bottom:12px}
  .subin h3{margin:0 0 12px;font-size:clamp(24px,2.6vw,34px);font-weight:700;
    letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
  .subin p{margin:0;font-size:15.5px;line-height:1.66;color:var(--ink-2)}
  @media (max-width:900px){.subin{grid-template-columns:1fr;gap:20px;padding-left:0}
    .subnum{left:auto;right:0;top:4px}}

  /* ---- pull-quote as its own band (Speakeasy uses two as punctuation) ---- */
  .pq{max-width:960px;margin:0 auto}
  .pqm{display:block;font-size:40px;line-height:.9;color:var(--blue-l);margin-bottom:10px}
  .pqt{margin:0 0 26px;font-size:clamp(21px,2.7vw,31px);line-height:1.3;
    letter-spacing:-.026em;font-weight:400;color:var(--ink);max-width:27ch}
  .pqb{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .pqa{width:38px;height:38px;border-radius:50%;flex:none;
    background:rgba(44,123,242,.08);border:1px dashed rgba(44,123,242,.45)}
  .pqn{font-size:13.5px;font-weight:600;color:var(--ink)}
  .pqr{display:block;margin-top:2px;font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

  /* ---- comparison rows, not cards (Speakeasy's "wasn't built for AI" table) ---- */
  .cmp{max-width:1060px;margin:0 auto;border-top:1px solid var(--line)}
  .cmph{display:grid;grid-template-columns:180px 1fr 1fr;gap:30px;padding:12px 0;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
  .cmpr{display:grid;grid-template-columns:180px 1fr 1fr;gap:30px;padding:24px 0;
    border-bottom:1px solid var(--line);align-items:baseline}
  .cmpk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3)}
  .cmpv{font-size:15px;line-height:1.62;color:var(--ink-3)}
  .cmpv.yes{color:var(--ink-2)}
  .cmpv.yes b{color:var(--blue-d);font-weight:600}
  @media (max-width:820px){.cmph{display:none}
    .cmpr{grid-template-columns:1fr;gap:8px;padding:20px 0}}

  /* ---- giant numerals as a band (Zapier renders 593,138,979 at display size) ---- */
  .bignums{display:grid;grid-template-columns:repeat(3,1fr);gap:0 46px;max-width:1120px;margin:0 auto}
  .bn2{padding:28px 0;border-top:1px solid var(--line)}
  .bnv{display:block;font-size:clamp(38px,5.4vw,68px);font-weight:700;line-height:.94;
    letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
  .bnl{display:block;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);max-width:24ch}
  @media (max-width:820px){.bignums{grid-template-columns:1fr 1fr}}

  /* ---- narrow prose passage (Plausible's signed letter) ---- */
  .letter{max-width:60ch;margin:0 auto}
  .letter p{margin:0 0 16px;font-size:16.5px;line-height:1.76;color:var(--ink-2)}
  .letter p.first{font-size:19px;line-height:1.6;color:var(--ink)}
  .letter p:last-child{margin-bottom:0}

  /* ---- bento, deliberately uneven (n8n) ---- */
  .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1120px;margin:0 auto}
  .bento > *{margin:0}
  .b-wide{grid-column:span 2}
  @media (max-width:900px){.bento{grid-template-columns:1fr}.b-wide{grid-column:auto}}

  /* ---- numbered horizontal sequence ---- */
  .seq{display:grid;grid-template-columns:repeat(9,1fr);max-width:1120px;margin:0 auto;
    border-top:1px solid var(--line)}
  /* The divider belongs to the item it precedes, so the gutter is symmetrical.
     It used to be border-RIGHT with padding-right:14px and padding-left:0, which
     put 14px before each line and 0 after it - every item from 02 on sat jammed
     against the rule it followed, while 01 had no rule at all. */
  .sq{padding:18px 20px 22px;border-left:1px solid var(--line)}
  .sq:first-child{border-left:0;padding-left:0}
  .sq:last-child{padding-right:0}
  .sqn{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
    color:var(--blue-d);margin-bottom:8px}
  .sqt{display:block;font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
    line-height:1.3}
  @media (max-width:900px){.seq{grid-template-columns:repeat(3,1fr)}
    .sq{border-bottom:1px solid var(--line)}
    /* first column of each row loses the divider, not just the first item */
    .sq:nth-child(3n+1){border-left:0;padding-left:0}
    .sq:last-child{padding-right:20px}}

  /* ---- split: heading one side, stacked figures the other (Speakeasy) ---- */
  .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;
    align-items:start;max-width:1120px;margin:0 auto}
  /* the measure belongs on the text, not on the column - a ch cap here squeezed
     the whole heading block to a few hundred px and left the row half empty */
  .split .head{margin:0;text-align:left;max-width:none}
  .split .head h2{max-width:17ch}
  .split .head p{max-width:46ch;margin-left:0;margin-right:auto}
  .vstats{display:grid}
  .vs{padding:22px 0;border-top:1px solid var(--line)}
  .vsv{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.045em;
    line-height:1;color:var(--blue-d);font-variant-numeric:tabular-nums}
  .vsl{display:block;margin-top:9px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:40ch}
  @media (max-width:900px){.split{grid-template-columns:1fr;gap:30px}.split .head{max-width:none}}

  /* ---- closing row: heading left, actions right, short (Plausible) ---- */
  .closerow{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;
    max-width:1120px;margin:0 auto}
  .closerow h2{margin:0;text-align:left;max-width:19ch}
  .closerow p{margin:12px 0 0;color:var(--ink-2);max-width:48ch;font-size:16px}
  .closerow .cta{margin:0;justify-content:flex-end}
  @media (max-width:820px){.closerow{grid-template-columns:1fr}
    .closerow .cta{justify-content:flex-start}}

  /* ---- asymmetric hero: headline left, lede offset right (Anthropic) ---- */