:root{--bg:#fbfbf9;--panel:#fff;--line:#e6e4dc;--fg:#1b1b18;--muted:#5c5b53;--dim:#8a8880;--dr:#2f7d75;--db:#3d6b45;--radius:14px}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0f1113;--panel:#16191c;--line:#272b2f;--fg:#eceae4;--muted:#a9a79f;--dim:#7d7b74;--dr:#4c9c93;--db:#5c8f65}}
  :root[data-theme="dark"]{--bg:#0f1113;--panel:#16191c;--line:#272b2f;--fg:#eceae4;--muted:#a9a79f;--dim:#7d7b74;--dr:#4c9c93;--db:#5c8f65}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 Inter,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1000px;margin:0 auto;padding:clamp(28px,7vw,72px) 20px 64px}
  header{display:flex;align-items:center;gap:10px;margin-bottom:clamp(36px,8vw,72px)}
  header a.homelink{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}

  .mark{width:52px;height:52px;display:block}
  .brand{font-weight:600;letter-spacing:-.01em}
  h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(34px,6.4vw,58px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance;max-width:16ch}
  .lede{color:var(--muted);font-size:clamp(16px,2.1vw,19px);max-width:62ch;margin:0}
  .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:clamp(34px,6vw,56px)}
  .card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 22px;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
  .card:hover{border-color:var(--accent,var(--dr));transform:translateY(-2px)}
  .card.dr{--accent:var(--dr)} .card.db{--accent:var(--db)}
  .card .rail{width:34px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:16px}
  .card h2{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
  .card p{color:var(--muted);margin:0 0 18px;font-size:15px;flex:1}
  .card ul{list-style:none;padding:0;margin:0 0 20px;font-size:14px;color:var(--muted)}
  .card li{padding-left:16px;position:relative;margin-bottom:5px}
  .card li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
  .go{font-weight:500;color:var(--accent);font-size:15px}


  .coverage{margin-top:clamp(40px,7vw,64px)}
  .legend{list-style:none;display:flex;gap:16px;padding:0;margin:0 0 14px;font-size:13px;color:var(--muted)}
  .legend li{display:flex;align-items:center;gap:8px}
  .sw{width:11px;height:11px;border-radius:3px;display:inline-block;background:var(--db)}
  .usmap{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}
  .usmap .st{fill:var(--line);stroke:var(--panel);stroke-width:1.2}
  .usmap .tx{fill:var(--db);stroke:var(--panel);stroke-width:1.2}
  footer{margin-top:clamp(48px,9vw,88px);padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:13px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--fg)}

  .who{margin-top:clamp(40px,7vw,64px)} .who h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(26px,4vw,36px);letter-spacing:-.02em;margin:0 0 6px}
  .who .sub{color:var(--muted);max-width:64ch;margin:0 0 22px}
  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
  .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;text-decoration:none;color:inherit;display:block}
  .tile:hover{border-color:var(--dr)} .tile h3{margin:0 0 6px;font-size:18px} .tile p{color:var(--muted);margin:0 0 10px;font-size:14.5px} .tile .go{font-size:14px}
  .proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:22px}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px} .stat b{display:block;font-size:24px;letter-spacing:-.02em} .stat span{color:var(--muted);font-size:13px}
  .faq{margin-top:clamp(40px,7vw,64px)} .faq details{border-top:1px solid var(--line);padding:14px 0} .faq summary{cursor:pointer;font-weight:500} .faq p{color:var(--muted);margin:8px 0 0;max-width:70ch}
  .page h1{font-size:clamp(30px,5.2vw,48px)} .page .lede{margin-bottom:26px} .page h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(22px,3.2vw,30px);margin:36px 0 10px;letter-spacing:-.02em}
  .page p, .page li{color:var(--muted)} .page ul{padding-left:20px} .page a{color:var(--dr)} .page .cta{display:inline-block;margin-top:14px;padding:10px 16px;border-radius:10px;background:var(--dr);color:#fff;text-decoration:none;font-weight:500}
  .crumbs{font-size:13px;color:var(--dim);margin-bottom:18px} .crumbs a{color:var(--dim)}
  .disclaimer{font-size:13px;color:var(--dim);border-top:1px solid var(--line);margin-top:36px;padding-top:14px}

  .mainnav{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-left:auto;font-size:.93rem}
  .mainnav a{color:inherit;opacity:.82;text-decoration:none}
  .mainnav a:hover{opacity:1}
  .mainnav .navcta{border:1px solid rgba(127,127,127,.4);border-radius:8px;padding:7px 14px;opacity:1;font-weight:600}
  @media(max-width:820px){.mainnav{gap:12px;font-size:.85rem;width:100%;margin:10px 0 0}}
  .sitefoot{margin-top:64px;padding-top:28px;border-top:1px solid rgba(127,127,127,.22)}
  .footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px 24px;margin-bottom:22px}
  .footgrid h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin:0 0 10px;font-weight:600}
  .footgrid a{display:block;font-size:.9rem;opacity:.85;text-decoration:none;color:inherit;margin-bottom:7px}
  .footgrid a:hover{opacity:1;text-decoration:underline}
  .footlegal{font-size:.8rem;opacity:.6;line-height:1.6;margin:0 0 8px}

  /* professional chrome: sticky header, real buttons, trust bar */
  body{scroll-behavior:smooth}
  header{position:sticky;top:0;z-index:50;background:var(--bg,#fbfbf9);backdrop-filter:saturate(180%) blur(8px);padding:14px 0;margin-bottom:clamp(28px,6vw,56px);border-bottom:1px solid rgba(127,127,127,.14)}
  .btn{display:inline-block;padding:12px 22px;border-radius:10px;border:1px solid rgba(127,127,127,.32);text-decoration:none;color:inherit;font-weight:600;font-size:.95rem;transition:transform .12s ease,box-shadow .12s ease}
  .btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
  .btn-primary{background:#111;color:#fff;border-color:#111}
  .btn-quiet{border-color:rgba(127,127,127,.2);font-weight:500;opacity:.85}
  .herocta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 12px}
  .herotrust{font-size:.88rem;opacity:.65;margin:0 0 34px}
  .statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px 28px;padding:26px 0 30px;margin-bottom:8px;border-top:1px solid rgba(127,127,127,.16);border-bottom:1px solid rgba(127,127,127,.16)}
  .statbar b{display:block;font-size:1.85rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
  .statbar span{display:block;font-size:.82rem;opacity:.62;margin-top:5px;line-height:1.45}
  @media(prefers-color-scheme:dark){header{background:rgba(12,14,16,.86)}.btn-primary{background:#f4f4f2;color:#111;border-color:#f4f4f2}}

  /* panel-directed hero: one primary action, a restrained typographic trust line, no vanity stat grid */
  .herocta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:30px 0 18px}
  .btn-text{font-size:.95rem;font-weight:500;color:inherit;opacity:.78;text-decoration:none;text-underline-offset:4px}
  .btn-text:hover{opacity:1;text-decoration:underline}
  .trustline{font-size:.83rem;line-height:1.7;opacity:.62;max-width:64ch;margin:0 0 40px;padding-top:16px;border-top:1px solid rgba(127,127,127,.16)}
  .trustline a{color:inherit;text-decoration:underline;text-underline-offset:3px}
  .statbar{display:none}
  header .mark{width:34px;height:34px;color:currentColor}
  header .brand{font-size:1.05rem;letter-spacing:-.01em}
  h1{max-width:14ch}

  /* ---- final cleanup pass (5-model CSS panel consensus) ---------------------------------------------
     The global `.page a{color:var(--dr)}` rule matches every link inside the page wrapper, including the
     header and footer, and ties on specificity with `.footgrid a`. Chrome and footer links are therefore
     scoped one level deeper so they win outright rather than depending on source order. */
  header a.homelink, header .mainnav a, .sitefoot .footgrid a, .sitefoot .footlegal a {
    color: inherit;
    text-decoration: none;
  }
  header{gap:12px;padding:16px 0;border-bottom:1px solid rgba(127,127,127,.12)}
  header .mark{width:44px;height:44px}
  header .brand{font-weight:600;font-size:1.12rem;letter-spacing:-.015em}
  header .mainnav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:.9rem;font-weight:500}
  header .mainnav a{opacity:.72;transition:opacity .15s;white-space:nowrap}
  header .mainnav a:hover{opacity:1}
  header .mainnav a.navcta{opacity:1;padding:8px 16px;border-radius:7px;background:rgba(127,127,127,.1);border:none;font-weight:600}
  header .mainnav a.navcta:hover{background:rgba(127,127,127,.16)}
  @media(max-width:760px){header .brand{display:none} header .mainnav{gap:16px;font-size:.82rem;width:auto;margin-left:auto}}

  .sitefoot{margin-top:88px;padding:44px 0 28px;border-top:1px solid rgba(127,127,127,.16)}
  .sitefoot .footgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 26px;margin-bottom:36px}
  .sitefoot .footgrid h4{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.5;margin:0 0 13px}
  .sitefoot .footgrid a{display:block;font-size:.89rem;opacity:.72;margin-bottom:9px;line-height:1.45;transition:opacity .15s}
  .sitefoot .footgrid a:hover{opacity:1}
  .sitefoot .footlegal{font-size:.79rem;opacity:.52;line-height:1.65;margin:0}
  .sitefoot .footlegal a{text-decoration:underline;text-underline-offset:2px}
  @media(max-width:860px){.sitefoot .footgrid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.sitefoot .footgrid{grid-template-columns:repeat(2,1fr);gap:26px 18px}}

  /* readability: a measured column, tighter headings, quieter content links */
  .page p, .page li{line-height:1.65}
  .page > p, .page .sub{max-width:70ch}
  .page h2{font-size:1.42rem;line-height:1.25;letter-spacing:-.015em;margin:2.4rem 0 .6rem}
  .page h3{line-height:1.3}
  .page a{text-decoration-thickness:1px;text-underline-offset:2px}

  /* ---- visual panel pass: wider measure, stronger hierarchy, product cards with room ---------------- */
  .wrap{max-width:1120px}
  .page h1{max-width:16ch;font-size:clamp(38px,5.2vw,60px);line-height:1.06;letter-spacing:-.025em}
  .page .lede{max-width:60ch;font-size:1.06rem;line-height:1.62}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin:8px 0 12px}
  .cards .card{padding:28px 26px;border:1px solid rgba(127,127,127,.2);border-radius:12px;transition:border-color .15s,box-shadow .15s}
  .cards .card:hover{border-color:rgba(127,127,127,.34);box-shadow:0 6px 22px rgba(0,0,0,.05)}
  .cards .card h2{margin-top:14px;font-size:1.24rem}
  .cards .card ul{margin:14px 0 18px;padding-left:0;list-style:none}
  .cards .card ul li{position:relative;padding-left:16px;margin-bottom:6px;font-size:.93rem;opacity:.82}
  .cards .card ul li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--dr,#2f6f52);opacity:.65}
  .grid3{gap:20px}
  .who{margin-top:52px}
  /* one measure everywhere: no paragraph should run the full 1120px container */
  .page .sub, .page section p, .page section li{max-width:72ch}
  .page .disclaimer{max-width:80ch}

  /* long headings must never run off the container; links must be legible in both themes */
  h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
  .page h2{max-width:24ch}
  .page a{color:var(--dr)}
  .page a:visited{color:var(--dr)}
  .page .tile a, .page .tile{color:inherit}
  /* buttons must outrank the generic .page a colour rule in both themes */
  .page a.btn{color:inherit;text-decoration:none}
  .page a.btn-primary{background:#111;color:#fff;border-color:#111}
  .page a.btn-text{color:inherit}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .page a.btn-primary{background:#f2f2ef;color:#111;border-color:#f2f2ef}}

  /* ---- enterprise chrome: announcement bar, two-column hero, framed live demo, proof band ---------- */
  .announce{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:.84rem;padding:9px 14px;margin:0 -24px 0;background:rgba(127,127,127,.07);border-bottom:1px solid rgba(127,127,127,.12)}
  .announce a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
  .hero2{display:grid;grid-template-columns:1.15fr 1fr;gap:40px 56px;align-items:start;margin:clamp(38px,7vw,72px) 0 44px}
  .hero2 h1{margin:6px 0 0;max-width:12ch;font-size:clamp(40px,5.6vw,64px);line-height:1.03;letter-spacing:-.03em}
  .hero2 .herside p{font-size:1.04rem;line-height:1.62;margin:6px 0 0;max-width:46ch;opacity:.86}
  .hero2 .herocta{margin:24px 0 10px}
  .hero2 .herotrust{font-size:.84rem;opacity:.6;border:0;padding:0;margin:0}
  @media(max-width:860px){.hero2{grid-template-columns:1fr;gap:22px}.hero2 h1{max-width:16ch}}
  .demo{margin:8px 0 56px}
  .demoframe{border:1px solid rgba(127,127,127,.22);border-radius:14px;overflow:hidden;background:rgba(127,127,127,.035);box-shadow:0 10px 40px rgba(0,0,0,.06)}
  .demohead{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid rgba(127,127,127,.16);background:rgba(127,127,127,.05)}
  .demohead .dot{width:9px;height:9px;border-radius:50%;background:rgba(127,127,127,.3)}
  .demotitle{margin-left:10px;font-size:.8rem;opacity:.6;letter-spacing:.02em}
  .demobody{padding:26px 24px 22px}
  .demolead{font-size:.95rem;opacity:.78;max-width:64ch;margin:0 0 16px}
  .demorow{display:flex;gap:10px;flex-wrap:wrap;max-width:620px}
  .demorow input{flex:1;min-width:230px;padding:13px 15px;border:1px solid rgba(127,127,127,.3);border-radius:10px;background:transparent;color:inherit;font:inherit}
  .demoout{min-height:1.5em;margin:14px 0 6px;font-size:.96rem}
  .demofoot{font-size:.8rem;opacity:.55;margin:6px 0 0}
  .provenance{padding:34px 0 12px;border-top:1px solid rgba(127,127,127,.16);border-bottom:1px solid rgba(127,127,127,.16);margin-bottom:52px}
  .proveyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;opacity:.5;margin:0 0 20px}
  .provgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 30px}
  .provgrid b{display:block;font-size:1.95rem;font-weight:700;letter-spacing:-.025em;line-height:1.05}
  .provgrid span{display:block;font-size:.83rem;opacity:.6;margin-top:6px;line-height:1.45}
  .provnote{font-size:.84rem;opacity:.62;max-width:78ch;margin:24px 0 4px;line-height:1.6}
  .codeblk{margin:14px 0 0;padding:14px 16px;border:1px solid rgba(127,127,127,.2);border-radius:10px;background:rgba(127,127,127,.06);overflow-x:auto;font-size:.83rem;line-height:1.6}
  .codeblk code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
  .demofoot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  /* :visited was outranking the chrome rules, so nav/footer links changed colour once clicked —
     which is why the header read as half teal, half white. Chrome links never take the accent. */
  header a.homelink, header a.homelink:visited,
  header .mainnav a, header .mainnav a:visited,
  .sitefoot .footgrid a, .sitefoot .footgrid a:visited,
  .sitefoot .footlegal a, .sitefoot .footlegal a:visited,
  .page a.btn, .page a.btn:visited, .page a.btn-text, .page a.btn-text:visited,
  .tile, .tile:visited{color:inherit}
  .page a.btn-primary, .page a.btn-primary:visited{background:#111;color:#fff}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .page a.btn-primary,
    :root:not([data-theme="light"]) .page a.btn-primary:visited{background:#f2f2ef;color:#111}}
  /* enterprise offer panel + two-audience fork (10-model remodel consensus) */
  .offer{margin:6px 0 54px}
  .offergrid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px 48px;align-items:start;padding:34px 32px;border:1px solid rgba(127,127,127,.2);border-radius:16px;background:rgba(127,127,127,.04)}
  .offermain h2{margin:6px 0 12px;font-size:1.72rem;line-height:1.18;letter-spacing:-.02em;max-width:20ch}
  .offermain p{font-size:1rem;line-height:1.62;opacity:.84;max-width:52ch;margin:0}
  .offermain .herocta{margin:22px 0 0}
  .offerlist{list-style:none;margin:0;padding:0}
  .offerlist li{padding:13px 0;border-top:1px solid rgba(127,127,127,.16)}
  .offerlist li:first-child{border-top:0;padding-top:0}
  .offerlist b{display:block;font-size:.9rem;letter-spacing:.01em}
  .offerlist span{display:block;font-size:.87rem;opacity:.66;margin-top:4px;line-height:1.5}
  @media(max-width:860px){.offergrid{grid-template-columns:1fr;padding:26px 22px}}
  .fork{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
  .forkcard{display:block;padding:28px 26px;border:1px solid rgba(127,127,127,.22);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
  .forkcard:hover{border-color:rgba(127,127,127,.36);box-shadow:0 6px 22px rgba(0,0,0,.06)}
  .forkeyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;opacity:.55;margin:0 0 10px}
  .forkcard h3{margin:0 0 10px;font-size:1.26rem;line-height:1.25;letter-spacing:-.015em}
  .forkcard p{font-size:.94rem;line-height:1.6;opacity:.78;margin:0 0 14px;max-width:46ch}
  @media(max-width:760px){.fork{grid-template-columns:1fr}}
  .closer{margin:26px 0 8px}
  .closer p{font-size:.92rem;opacity:.6;max-width:72ch}
  /* ---- the two products, front and center: big shiny rectangles -------------------------------- */
  .bigprod{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:10px 0 56px}
  .prodcard{position:relative;display:flex;flex-direction:column;padding:40px 36px 34px;border-radius:20px;text-decoration:none;color:inherit;border:1px solid rgba(127,127,127,.25);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
  .prodcard::before{content:"";position:absolute;inset:0;opacity:.9;pointer-events:none}
  .prodcard.router::before{background:radial-gradient(120% 90% at 12% 0%,rgba(109,91,224,.16),transparent 55%)}
  .prodcard.buster::before{background:radial-gradient(120% 90% at 12% 0%,rgba(14,159,110,.15),transparent 55%)}
  .prodcard:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(0,0,0,.14);border-color:rgba(127,127,127,.45)}
  .prodcard.router:hover{border-color:rgba(109,91,224,.55)}
  .prodcard.buster:hover{border-color:rgba(14,159,110,.55)}
  .prodeyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;opacity:.6;margin:0 0 14px}
  .prodcard h2{font-family:Newsreader,serif;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px}
  .prodcard.router h2{color:#6D5BE0}.prodcard.buster h2{color:#0E9F6E}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .prodcard.router h2{color:#a79af0}
    :root:not([data-theme="light"]) .prodcard.buster h2{color:#4cc39a}}
  .prodsub{font-size:.98rem;line-height:1.6;opacity:.82;margin:0 0 18px;max-width:44ch}
  .prodpts{list-style:none;margin:0 0 22px;padding:0}
  .prodpts li{padding:6px 0 6px 22px;position:relative;font-size:.9rem;opacity:.75}
  .prodpts li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%}
  .prodcard.router .prodpts li::before{background:#6D5BE0}.prodcard.buster .prodpts li::before{background:#0E9F6E}
  .prodcta{margin-top:auto;display:inline-block;font-weight:600;font-size:.95rem}
  .prodcard.router .prodcta{color:#6D5BE0}.prodcard.buster .prodcta{color:#0E9F6E}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .prodcard.router .prodcta{color:#a79af0}
    :root:not([data-theme="light"]) .prodcard.buster .prodcta{color:#4cc39a}}
  @media(max-width:820px){.bigprod{grid-template-columns:1fr}}
  /* ---- bigprod panel polish (5-model consensus pass) ------------------------------------------ */
  .hero2 h1{font-size:clamp(46px,6vw,72px);line-height:1.05;letter-spacing:-.025em}
  .hero2 .herside p{line-height:1.6;max-width:520px}
  .prodcard h2{font-size:1.9rem}                       /* cards support the hero, never compete */
  .prodcard{box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .bigprod{gap:30px;margin-top:26px}
  .prodeyebrow{font-size:11px;letter-spacing:.06em;opacity:.65}
  .eyebrow{letter-spacing:.06em}
  .prodpts li{padding:8px 0 8px 22px;line-height:1.65}
  .prodcta{transition:transform .15s}
  .prodcard:hover .prodcta{transform:translateX(4px)}
  .provenance{margin-top:64px;padding-top:44px}
  .provgrid b{font-size:2.6rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .sitefoot .footgrid h4{opacity:.7}
  .sitefoot .footgrid a{font-weight:500;font-size:14px}
  /* CTA hierarchy: one decision, not two equal buttons */
  .hero2 .herocta .btn:not(.btn-primary){border-color:rgba(127,127,127,.35);background:transparent}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
    & .prodcard{border-color:rgba(255,255,255,.09);box-shadow:none}
    & .prodcard.router::before{background:radial-gradient(120% 90% at 12% 0%,rgba(139,92,246,.13),transparent 55%)}
    & .prodcard.buster::before{background:radial-gradient(120% 90% at 12% 0%,rgba(16,185,129,.12),transparent 55%)}
    & .prodsub,& .hero2 .herside p{opacity:.88}
    & .prodpts li{opacity:.8}
    & .herocta .btn:not(.btn-primary){border-color:rgba(255,255,255,.18)}
  }}
  /* founder: center the footer */
  .sitefoot .footgrid{justify-content:center;grid-template-columns:repeat(5,auto);gap:28px clamp(28px,5vw,72px);text-align:left;margin:0 auto;width:fit-content}
  @media(max-width:900px){.sitefoot .footgrid{grid-template-columns:repeat(2,auto)}}
  .sitefoot .footlegal{text-align:center}
  .sitefoot .footlegal p{margin-left:auto;margin-right:auto;max-width:78ch}
  /* three products: the grid goes to three across, stacking earlier on narrow screens */
  .bigprod{grid-template-columns:repeat(3,1fr)}
  .prodcard.desk::before{background:radial-gradient(120% 90% at 12% 0%,rgba(212,118,26,.14),transparent 55%)}
  .prodcard.desk h2{color:#b8610f} .prodcard.desk .prodcta{color:#b8610f}
  .prodcard.desk .prodpts li::before{background:#d4761a}
  .prodcard.desk:hover{border-color:rgba(212,118,26,.55)}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
    & .prodcard.desk h2,& .prodcard.desk .prodcta{color:#e0913f}
    & .prodcard.desk::before{background:radial-gradient(120% 90% at 12% 0%,rgba(224,145,63,.13),transparent 55%)}
  }}
  @media(max-width:1000px){.bigprod{grid-template-columns:1fr}}
  /* DocketDesk: full-width beneath the two, and warm amber that beats the generic accent.
     The earlier rules lost to `.page a` inheritance, so these carry the anchor in the selector. */
  .bigprod{grid-template-columns:1fr 1fr}
  .page .bigprod .prodcard.desk{grid-column:1 / -1}
  .page .prodcard.desk h2,
  .page .prodcard.desk .prodcta{color:#C2610A}
  .page .prodcard.desk .prodpts li::before{background:#E08A2B}
  .page .prodcard.desk::before{background:radial-gradient(90% 140% at 8% 0%,rgba(224,138,43,.20),transparent 60%)}
  .page .prodcard.desk{border-color:rgba(224,138,43,.35)}
  .page .prodcard.desk:hover{border-color:rgba(224,138,43,.7)}
  .page .prodcard.desk .prodsub{max-width:62ch}
  .page .prodcard.desk .prodpts{display:flex;flex-wrap:wrap;gap:6px 34px}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
    & .page .prodcard.desk h2,& .page .prodcard.desk .prodcta{color:#F0A44E}
    & .page .prodcard.desk .prodpts li::before{background:#F0A44E}
    & .page .prodcard.desk::before{background:radial-gradient(90% 140% at 8% 0%,rgba(240,164,78,.16),transparent 60%)}
  }}
  @media(max-width:820px){.bigprod{grid-template-columns:1fr}}
  /* the DocketX suite card: brand-named, with the Virtual Front Office as a nested square */
  .page .bigprod .prodcard.desk#docketx-suite{grid-column:1 / -1;display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:stretch;cursor:default}
  #docketx-suite .deskmain{display:flex;flex-direction:column}
  .page #docketx-suite .deskstack{display:flex;flex-direction:column;gap:14px}
  .page #docketx-suite .deskstack .desksquare{flex:1}
  @media(max-width:820px){.page .bigprod .prodcard.desk#docketx-suite{grid-template-columns:1fr}}
  .page #docketx-suite h2{color:#C2610A}
  .page a.desksquare{display:flex;flex-direction:column;border:1px solid rgba(224,138,43,.45);border-radius:14px;padding:22px 20px;text-decoration:none;color:inherit;background:rgba(224,138,43,.07);transition:border-color .15s,transform .15s}
  .page a.desksquare:hover{border-color:rgba(224,138,43,.85);transform:translateY(-2px)}
  .page a.desksquare h3{font-family:Newsreader,serif;font-size:1.35rem;margin:0 0 8px;color:#C2610A}
  .page a.desksquare p{font-size:.9rem;line-height:1.55;opacity:.8;margin:0 0 12px}
  .page a.desksquare .prodcta{margin-top:auto;color:#C2610A}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
    & .page #docketx-suite h2,& .page a.desksquare h3,& .page a.desksquare .prodcta{color:#F0A44E}
    & .page a.desksquare{background:rgba(240,164,78,.08);border-color:rgba(240,164,78,.35)}
  }}
  @media(max-width:820px){.page .bigprod .prodcard.desk#docketx-suite{grid-template-columns:1fr}}
  /* founder: swap the product colours — Router is GREEN, Buster is PURPLE (final override block) */
  .page .bigprod a.prodcard.router h2,.page .bigprod a.prodcard.router .prodcta{color:#0E9F6E}
  .page .bigprod a.prodcard.buster h2,.page .bigprod a.prodcard.buster .prodcta{color:#6D5BE0}
  .page .bigprod a.prodcard.router .prodpts li::before{background:#0E9F6E}
  .page .bigprod a.prodcard.buster .prodpts li::before{background:#6D5BE0}
  .page .bigprod a.prodcard.router::before{background:radial-gradient(120% 90% at 12% 0%,rgba(14,159,110,.15),transparent 55%)}
  .page .bigprod a.prodcard.buster::before{background:radial-gradient(120% 90% at 12% 0%,rgba(109,91,224,.16),transparent 55%)}
  .page .bigprod a.prodcard.router:hover{border-color:rgba(14,159,110,.55)}
  .page .bigprod a.prodcard.buster:hover{border-color:rgba(109,91,224,.55)}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
    & .page .bigprod a.prodcard.router h2,& .page .bigprod a.prodcard.router .prodcta{color:#4cc39a}
    & .page .bigprod a.prodcard.buster h2,& .page .bigprod a.prodcard.buster .prodcta{color:#a79af0}
    & .page .bigprod a.prodcard.router .prodpts li::before{background:#4cc39a}
    & .page .bigprod a.prodcard.buster .prodpts li::before{background:#a79af0}
    & .page .bigprod a.prodcard.router::before{background:radial-gradient(120% 90% at 12% 0%,rgba(76,195,154,.13),transparent 55%)}
    & .page .bigprod a.prodcard.buster::before{background:radial-gradient(120% 90% at 12% 0%,rgba(167,154,240,.14),transparent 55%)}
  }}
  /* compact the leading DocketX card so Router and Buster stay visible above the fold */
  .page .bigprod .prodcard.desk#docketx-suite{padding:30px 30px 26px}
  #docketx-suite .prodsub{margin-bottom:14px}
  #docketx-suite .prodpts{display:flex;flex-wrap:wrap;gap:6px 30px;margin-bottom:0}
  #docketx-suite .prodpts li{padding:4px 0 4px 20px}
  /* header sits flush at the top — no dead band above it */
  .wrap.page{padding-top:0}
  .wrap.page header{padding-top:18px;padding-bottom:14px}
  /* pricing cards: buttons pinned level at the bottom regardless of copy length */
  .fork > .forkcard{display:flex;flex-direction:column}
  .credstrip{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:-18px 0 26px;font-size:.82rem;opacity:.62}
  .credstrip a{color:inherit;text-decoration:underline;text-underline-offset:3px}
  .creddot{opacity:.5}
  .credstrip{justify-content:center;margin:34px 0 18px}
  /* final credstrip: truly centered, slimmer, 25% less gap */
  .credstrip{width:100%;justify-content:center;text-align:center;font-size:.76rem;margin:24px auto 13px}


  /* ===== Docket Scrambler · the data-flow animation ================================================
     Same technique as our qareef demos (site/index.html, assets/demo-engine.css): hand-written CSS
     keyframes over real-looking markup and inline SVG. No library, no video, no JavaScript.
     Every moving part shares ONE 16s linear infinite timeline, so a percentage below is just a time
     (1s = 6.25%) and the four stages stay in step without a single timer. Only transform, opacity
     and colour animate; no animated property can reflow the page.
       0.0- 3.2s  stage 1  the filing, real names, on the firm's own hardware
       3.2- 6.0s  stage 2  the scan sweeps; both local detectors light; the name, address, telephone
                           and cause number flip to stable placeholders IN PLACE; the padlock lands
       6.1- 9.1s  stage 3  the pseudonymized copy crosses the boundary and docks at the model, which
                           works while it holds the copy
       9.4-11.9s  stage 4  the answer returns still carrying the placeholders, then the restore beat:
                           each real name comes back in turn with a brief highlight, "restored" lands
      12.0-16.0s           the restored answer holds, then clears and the loop starts over
     The base (un-animated) state of every moving part is deliberately the reduced-motion still - all
     four stages at once - and the keyframes are gated behind `prefers-reduced-motion: no-preference`,
     with a belt-and-braces `reduce` block at the end. */
  .who#scrambler{
    --sxgap:28px;--sxpad:26px;--sxpadb:26px;--sxrow1:26px;--sxh:566px;--sxfs:17px;--sxdur:16s;
    --sxa:var(--dr);--sxat:rgba(47,125,117,.13);--sxon:#fff;
    --sxb:#6D5BE0;--sxbt:rgba(109,91,224,.15);
    --sxok:#0E9F6E;--sxokt:rgba(14,159,110,.16);--sxln:rgba(127,127,127,.26);
    --sxz1:rgba(47,125,117,.055);--sxz2:rgba(127,127,127,.05);
    --sxcx:calc(100% + var(--sxgap));--sxcy:209px;
    --sxax:calc(100% + var(--sxgap));--sxay:-119px}
  .who#scrambler > .sub{max-width:68ch}
  .who#scrambler > .herocta{margin:26px 0 30px}
  .who#scrambler > .sxfig{margin:0}
  .page .sxfig p{max-width:none}

  /* --- the stage: two zones with a real boundary down the middle -------------------------------- */
  /* row 1 is the two zone labels, row 2 is everything else; `align-content:start` plus the explicit
     1fr second row keeps the min-height's slack out of row 1, which would otherwise take half of it */
  .sxstage{position:relative;overflow:hidden;display:grid;align-content:start;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    column-gap:var(--sxgap);row-gap:11px;
    padding:var(--sxpad) var(--sxpad) var(--sxpadb);min-height:var(--sxh);
    border:1px solid var(--sxln);border-radius:18px;
    background:linear-gradient(90deg,var(--sxz1) 0 50%,var(--sxz2) 50%)}
  .sxzone{grid-row:1;align-self:start;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    font-size:calc(var(--sxfs) * .63);color:var(--dim)}
  .sxzone-a{grid-column:1}
  .sxzone-b{grid-column:2;text-align:center}
  .sxrail{position:absolute;top:var(--sxpad);bottom:var(--sxpad);left:50%;width:0;
    border-left:2px dashed var(--sxln);pointer-events:none}
  /* the chip behind the label composites exactly like the stage does, or it reads as a white sticker */
  .sxrail-l{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
    writing-mode:vertical-rl;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    font-size:calc(var(--sxfs) * .6);color:var(--muted);padding:10px 3px;
    background-color:var(--bg);
    background-image:linear-gradient(90deg,var(--sxz1) 0 50%,var(--sxz2) 50%)}
  .sxside{grid-row:2;grid-column:1;min-width:0}
  .sxside-net{grid-column:2;display:flex;justify-content:center;align-items:flex-start}

  /* --- stage 1: the case file ------------------------------------------------------------------- */
  .sxcard{position:relative;overflow:hidden;border:1px solid var(--sxln);border-radius:14px;
    background:var(--panel);padding:15px 18px 17px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
  .sxch{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:9px;
    border-bottom:1px solid rgba(127,127,127,.2)}
  .sxch-t{font-family:Newsreader,Georgia,serif;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--fg);font-size:calc(var(--sxfs) * .88)}
  .sxbadge{margin-left:auto;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
    font-size:calc(var(--sxfs) * .58);color:var(--sxa);border:1px solid var(--sxa);
    border-radius:999px;padding:3px 9px;opacity:.9}
  .sxbody{font-family:Newsreader,Georgia,serif;font-size:var(--sxfs);line-height:1.95;
    color:var(--fg);margin:0}
  /* the swap is a two-child grid stacked in ONE cell, so the cell is always as wide as the wider of
     the real text and its placeholder - a crossfade can never move the words around it. */
  .sxtok{display:inline-grid;white-space:nowrap}
  .sxtok > i{grid-area:1/1;font-style:normal}
  .sxreal{opacity:1;color:var(--fg);border-radius:4px;padding:1px 2px;margin:0 -2px;
    box-shadow:inset 0 -1px 0 var(--sxln)}
  .sxph{opacity:0;align-self:center;text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78em;font-weight:600;
    color:var(--sxa);background:var(--sxat);border-radius:5px;padding:2px 5px}

  /* --- stage 2: the scan sweep and the two local detectors -------------------------------------- */
  .sxscan{position:absolute;left:0;right:0;top:0;height:100%;opacity:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 34%,var(--sxa) 50%,transparent 66%)}
  .sxdet{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 0}
  .sxchip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-radius:999px;
    padding:5px 13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    font-size:calc(var(--sxfs) * .64);border:1px solid var(--sxa);background:var(--sxat);color:var(--sxa)}
  .sxchip > b{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:1}
  .sxchip em{font-style:normal;font-weight:500;letter-spacing:.03em;text-transform:none;opacity:.78}
  .sxchip em::before{content:"\00b7\00a0"}
  .sxkeep{display:flex;align-items:center;gap:8px;margin:13px 0 0;opacity:1;font-weight:500;
    font-size:calc(var(--sxfs) * .72);color:var(--muted)}
  .sxkeep svg{flex:none;width:15px;height:15px;color:var(--sxa)}

  /* --- stage 3: the frontier model, no vendor --------------------------------------------------- */
  .sxnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
    width:100%;padding:26px 20px 22px;border-radius:16px;background:var(--panel);
    border:1px solid var(--sxb);box-shadow:0 0 0 5px var(--sxbt);color:var(--sxb)}
  /* the copy's landing slot, anchored to the node itself so it lines up at every width */
  .sxnode::after{content:"the copy arrives here";position:absolute;left:0;right:0;
    top:calc(100% + 18px);height:var(--sxdock,108px);opacity:0;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    border:1px dashed var(--sxln);border-radius:14px;
    font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
    font-size:calc(var(--sxfs) * .62)}
  .sxnode-g{display:block;width:52px;height:52px;opacity:.92}
  .sxnode-t{font-family:Newsreader,Georgia,serif;font-weight:600;letter-spacing:.04em;margin-top:8px;
    font-size:calc(var(--sxfs) * 2)}
  .sxnode-s{font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
    text-align:center;font-size:calc(var(--sxfs) * .6)}
  .sxdots{display:flex;gap:6px;margin-top:13px;opacity:0}
  .sxdots b{width:6px;height:6px;border-radius:50%;background:var(--sxb)}

  /* --- the two packets that actually travel ----------------------------------------------------- */
  .sxflow{position:absolute;left:var(--sxpad);right:var(--sxpad);
    top:calc(var(--sxpad) + var(--sxrow1));bottom:var(--sxpad);pointer-events:none;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--sxgap)}
  .sxlane{position:relative;grid-column:1;min-width:0}
  .sxpkt{position:absolute;left:0;right:0;border-radius:14px;padding:12px 16px 14px;
    border:1px solid var(--sxln);background:var(--panel);
    box-shadow:0 14px 38px rgba(0,0,0,.18);will-change:transform,opacity}
  .sxcopy{top:14px;border-color:var(--sxa);opacity:1;
    transform:translate3d(var(--sxcx),var(--sxcy),0)}
  .sxans{bottom:0;border-color:var(--sxok);opacity:1;transform:translate3d(0,0,0)}
  .sxpkt-h{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;font-size:calc(var(--sxfs) * .58);color:var(--dim)}
  .sxpkt-k{letter-spacing:.08em;border-radius:999px;padding:3px 10px;
    font-size:calc(var(--sxfs) * .56);background:var(--sxa);color:var(--sxon)}
  .sxpkt-k2{background:var(--sxok)}
  .sxpkt-b{font-family:Newsreader,Georgia,serif;font-size:calc(var(--sxfs) * .88);line-height:1.95;
    color:var(--fg);margin:0}
  .sxpkt-b code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78em;font-weight:600;
    color:var(--sxa);background:var(--sxat);border-radius:5px;padding:2px 5px}
  .sxtick{display:flex;align-items:center;gap:8px;margin:12px 0 0;opacity:1;font-weight:700;
    letter-spacing:.05em;font-size:calc(var(--sxfs) * .72);color:var(--sxok)}
  .sxtick svg{flex:none;width:14px;height:14px}
  /* The space the answer comes back into is reserved from the first paint - that is what keeps the
     box from reflowing - so it is DRAWN as a labelled slot rather than left as a hole. The stage's
     own ::after is a grid item, which is how the same element can be the bottom of the firm column
     on a wide screen and share the answer's row when the stage stacks. */
  .sxstage::after{content:"the answer returns here";grid-row:2;grid-column:1;align-self:end;
    height:144px;display:flex;align-items:center;justify-content:center;opacity:0;
    border:1px dashed var(--sxln);border-radius:14px;pointer-events:none;
    font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
    font-size:calc(var(--sxfs) * .62)}
  .sxcap{margin:14px 2px 0;font-size:12.5px;line-height:1.6;color:var(--dim);max-width:88ch}

  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .who#scrambler{
    --sxa:#4c9c93;--sxat:rgba(76,195,154,.15);--sxon:#0f1113;
    --sxb:#a79af0;--sxbt:rgba(167,154,240,.16);--sxok:#4cc39a;--sxokt:rgba(76,195,154,.18);
    --sxln:rgba(255,255,255,.14);--sxz1:rgba(76,195,154,.06);--sxz2:rgba(255,255,255,.035)}}

  /* --- the one timeline, 16s ---------------------------------------------------------------------
     (1% = 0.16s. The restore beat is deliberately long: the answer lands at 10.6s, the names come
     back one at a time from 10.8s with a highlight that holds past 12.8s, and the tick lands last.) */
  @keyframes sx-real {0%,20%{opacity:1}22.5%,67.5%{opacity:0}71.9%,100%{opacity:1}}
  @keyframes sx-ph   {0%,20%{opacity:0}22.5%,67.5%{opacity:1}71.9%,100%{opacity:0}}
  @keyframes sx-flash{0%,71.9%{background-color:transparent}74%,80%{background-color:var(--sxokt)}
    87%,100%{background-color:transparent}}
  @keyframes sx-scan {0%,20%{opacity:0;transform:translateY(-72%)}22%{opacity:.9}32%{opacity:.9}
    34%,100%{opacity:0;transform:translateY(72%)}}
  @keyframes sx-chip {0%,20%{border-color:var(--sxln);background:transparent;color:var(--dim)}
    22%,67%{border-color:var(--sxa);background:var(--sxat);color:var(--sxa)}
    72%,100%{border-color:var(--sxln);background:transparent;color:var(--dim)}}
  @keyframes sx-chipdot{0%,20%{opacity:.3;transform:scale(.7)}22%,67%{opacity:1;transform:scale(1)}
    72%,100%{opacity:.3;transform:scale(.7)}}
  @keyframes sx-keep {0%,27%{opacity:0;transform:translateY(6px)}31%,100%{opacity:1;transform:none}}
  @keyframes sx-copy {0%,36%{opacity:0;transform:translate3d(0,0,0)}
    38%,39.5%{opacity:1;transform:translate3d(0,0,0)}
    43%,54%{opacity:1;transform:translate3d(var(--sxcx),var(--sxcy),0)}
    57%,100%{opacity:0;transform:translate3d(var(--sxcx),var(--sxcy),0)}}
  @keyframes sx-node {0%,41%{border-color:var(--sxln);box-shadow:0 0 0 0 transparent}
    44%,64%{border-color:var(--sxb);box-shadow:0 0 0 5px var(--sxbt)}
    68%,100%{border-color:var(--sxln);box-shadow:0 0 0 0 transparent}}
  @keyframes sx-dotwin{0%,42%{opacity:0}45%,62%{opacity:1}66%,100%{opacity:0}}
  @keyframes sx-dotpulse{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
  @keyframes sx-ans  {0%,56%{opacity:0;transform:translate3d(var(--sxax),var(--sxay),0)}
    58.5%,61%{opacity:1;transform:translate3d(var(--sxax),var(--sxay),0)}
    66.5%,93%{opacity:1;transform:translate3d(0,0,0)}
    96%,100%{opacity:0;transform:translate3d(0,0,0)}}
  @keyframes sx-tick {0%,71%{opacity:0;transform:scale(.8)}74%,93%{opacity:1;transform:scale(1)}
    96%,100%{opacity:0;transform:scale(1)}}
  @keyframes sx-ghost{0%,58%{opacity:1}63%,94%{opacity:0}99%,100%{opacity:1}}
  @keyframes sx-dock {0%,37%{opacity:1}41%,56%{opacity:0}61%,100%{opacity:1}}

  @media(prefers-reduced-motion:no-preference){
    .sxfig .sxreal{animation:sx-real var(--sxdur) linear infinite,sx-flash var(--sxdur) linear infinite}
    .sxfig .sxph{animation:sx-ph var(--sxdur) linear infinite}
    /* a small positive stagger reads as four separate detections, and as four separate restores; it
       is a third of a second, and every token is back to its real name through the loop seam, so the
       phase offset never shows */
    .sxtok:nth-of-type(2) > i{animation-delay:.12s}
    .sxtok:nth-of-type(3) > i{animation-delay:.24s}
    .sxtok:nth-of-type(4) > i{animation-delay:.36s}
    .sxscan{animation:sx-scan var(--sxdur) linear infinite}
    .sxchip{animation:sx-chip var(--sxdur) linear infinite}
    .sxchip > b{animation:sx-chipdot var(--sxdur) linear infinite}
    .sxchip-b,.sxchip-b > b{animation-delay:.8s}
    .sxkeep{animation:sx-keep var(--sxdur) linear infinite}
    .sxnode{animation:sx-node var(--sxdur) linear infinite}
    .sxdots{animation:sx-dotwin var(--sxdur) linear infinite}
    .sxdots b{animation:sx-dotpulse 1.05s ease-in-out infinite}
    .sxdots b:nth-child(2){animation-delay:.12s}
    .sxdots b:nth-child(3){animation-delay:.24s}
    .sxcopy{animation:sx-copy var(--sxdur) linear infinite}
    .sxans{animation:sx-ans var(--sxdur) linear infinite}
    .sxtick{animation:sx-tick var(--sxdur) linear infinite}
    .sxstage::after{animation:sx-ghost var(--sxdur) linear infinite}
    .sxnode::after{animation:sx-dock var(--sxdur) linear infinite}
  }
  @media(prefers-reduced-motion:reduce){
    .sxfig *,.sxfig *::before,.sxfig *::after{animation:none!important;transition:none!important}
  }

  /* --- below 900px the stage stacks and the flow runs downwards instead of across ----------------
     Here the two packets stop being an overlay: `display:contents` on their wrappers promotes them to
     real rows of the stage grid, so the layout reserves their space exactly at every width and no
     tuned pixel offset can ever clip them. They still only animate transform and opacity, travelling
     in from off their own slot, so the reserved space is identical at rest and in flight. */
  @media(max-width:900px){
    .who#scrambler{--sxgap:20px;--sxpad:18px;--sxpadb:18px;--sxrow1:22px;--sxh:auto;--sxfs:15.5px;
      --sxcy:-480px;--sxay:265px}
    .sxstage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:0;
      background:var(--sxz2)}
    .sxflow,.sxlane{display:contents}
    /* relative, not static: the packets must stay in the positioned paint layer so the stage's
       ::after slot never draws on top of the answer that has landed in it */
    .sxpkt{position:relative;top:auto;right:auto;bottom:auto;left:auto;margin-top:17px}
    .sxrail{position:relative;grid-row:4;grid-column:1;left:auto;top:auto;bottom:auto;width:auto;
      height:0;margin:17px 0;border-left:0;border-top:2px dashed var(--sxln)}
    .sxrail-l{left:0;transform:translateY(-50%);writing-mode:horizontal-tb;padding:0 10px 0 0;
      background-image:none}
    .sxzone-a{margin-bottom:11px}
    .sxzone-b{grid-row:5;grid-column:1;text-align:left;margin-bottom:11px}
    .sxside-net{grid-row:6;grid-column:1;justify-content:flex-start}
    .sxstage::after{grid-row:3;grid-column:1;align-self:stretch;height:auto;margin-top:17px}
    .sxans{grid-row:3;grid-column:1;transform:none}
    .sxcopy{grid-row:7;grid-column:1;transform:none}
    .sxnode{flex-direction:row;align-items:center;gap:14px;width:100%;padding:16px 18px}
    .sxnode::after{top:calc(100% + 17px);height:var(--sxdock,104px)}
    .sxnode-g{width:38px;height:38px}
    .sxnode-t{margin-top:0;font-size:calc(var(--sxfs) * 1.6)}
    .sxnode-s{text-align:left;flex:1}
    .sxdots{margin-top:0}
  }
  @media(max-width:620px){.who#scrambler{--sxfs:14px;--sxcy:-490px;--sxay:250px;--sxdock:120px}}
  /* the stacked packets land on their own laid-out slot, so their keyframes run the other way round */
  @keyframes sx-copy-v{0%,36%{opacity:0;transform:translate3d(0,var(--sxcy),0)}
    38%,39.5%{opacity:1;transform:translate3d(0,var(--sxcy),0)}
    43%,54%{opacity:1;transform:none}
    57%,100%{opacity:0;transform:none}}
  @keyframes sx-ans-v{0%,56%{opacity:0;transform:translate3d(0,var(--sxay),0)}
    58.5%,61%{opacity:1;transform:translate3d(0,var(--sxay),0)}
    66.5%,93%{opacity:1;transform:none}
    96%,100%{opacity:0;transform:none}}
  @media(prefers-reduced-motion:no-preference){@media(max-width:900px){
    .sxcopy{animation-name:sx-copy-v}
    .sxans{animation-name:sx-ans-v}
  }}