/*
Theme Name: Argosy
Theme URI: http://107.150.41.186:8136/
Author: Studio build
Description: A product site for developer infrastructure. Dark-first because the product is an interface; one warm accent instead of the violet gradient every AI product ships; and every claim shown as a real artefact — a latency table, a request trace, a terminal, a streamed response — never as an icon in a card.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: argosy

--------------------------------------------------------------------------
THE RULES THIS THEME IS HELD TO
--------------------------------------------------------------------------
1. No feature is ever illustrated by an icon in a rounded card. It is
   shown as the thing itself: a table, a trace, a terminal, a payload.
2. One accent (--ac). It appears a handful of times per screen and
   nowhere else. Semantic colour (ok/warn/bad) is separate from it.
3. Numerals that sit in columns are tabular and monospaced. Always.
4. Motion is one layer — a short fade and rise on entry. No parallax,
   no magnetic cursor, no ambient GPU field. Transitions serve cohesion,
   not spectacle.
5. Hairlines, not shadows, do the dividing. Shadow is only used to lift
   the one product surface off the page.
--------------------------------------------------------------------------
*/

:root{
  --bg:#08090c; --s1:#0e1016; --s2:#14171f; --s3:#1b1f29;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.13);
  --tx:#f3f5f9; --tx2:rgba(243,245,249,.62); --tx3:rgba(243,245,249,.38);
  --ac:#ff7a45; --ac-dim:rgba(255,122,69,.14);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --blue:#6ea8ff; --vio:#a78bfa;
  --ff:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --fm:"Azeret Mono",ui-monospace,"Cascadia Mono",monospace;
  --w:1180px;
  --ease:cubic-bezier(.22,.68,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--ff);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.028em;text-wrap:balance}
p{margin:0}
img,svg,canvas{max-width:100%;display:block}
::selection{background:var(--ac);color:#0c0d10}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.rule{height:1px;background:var(--line)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ac);color:#0c0d10;
  padding:12px 18px;font-family:var(--fm);font-size:12px;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}

/* =====================================================================
   Atmosphere. Two soft blooms and a hairline grid, both static. It
   exists so the product surface has something to sit in — nothing here
   moves and nothing here is the point.
   ===================================================================== */
.bloom{position:absolute;left:50%;top:-260px;width:1500px;height:900px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 42% at 50% 50%, rgba(255,122,69,.16), transparent 70%),
    radial-gradient(36% 40% at 32% 62%, rgba(88,120,255,.13), transparent 72%),
    radial-gradient(30% 34% at 70% 58%, rgba(52,211,153,.07), transparent 72%);
  filter:blur(18px)}
.gridbg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 46% at 50% 22%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 46% at 50% 22%, #000 30%, transparent 78%)}

/* =====================================================================
   Nav
   ===================================================================== */
.nav{position:sticky;top:0;z-index:50;height:60px;border-bottom:1px solid var(--line);
  background:rgba(8,9,12,.72);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4)}
.nv{max-width:var(--w);margin:0 auto;padding:0 28px;height:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.015em;font-size:15px}
.logo i{width:19px;height:19px;border-radius:5px;display:block;flex:none;
  background:linear-gradient(145deg,var(--ac),#ffb08a 60%,#7a5cff);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 4px 12px -3px rgba(255,122,69,.6)}
.links{display:flex;gap:26px;justify-self:center;list-style:none;margin:0;padding:0}
.links a{font-size:13.5px;color:var(--tx2);transition:color .18s var(--ease)}
.links a:hover,.links .current-menu-item>a{color:var(--tx)}
.navr{display:flex;gap:8px;justify-self:end;align-items:center}
.ghost{font-size:13.5px;color:var(--tx2);padding:7px 12px;border-radius:7px;
  transition:color .18s var(--ease),background .18s var(--ease)}
.ghost:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.solid{font-size:13.5px;font-weight:500;color:#140b06;background:#f3f5f9;
  padding:7px 14px;border-radius:7px}
.navtoggle{display:none}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;padding-top:58px;overflow:hidden}
/* The bloom is 900px tall and the hero on an inner page is not, so
   overflow:hidden would cut the gradient mid-falloff and leave a hard
   horizontal seam. This fades the last 170px back to the ground colour
   so the clip lands where there is nothing left to clip. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;
  background:linear-gradient(180deg,rgba(8,9,12,0),var(--bg));pointer-events:none}
.top{text-align:center;max-width:1000px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:11.5px;
  color:var(--tx2);border:1px solid var(--line-2);background:rgba(255,255,255,.028);
  padding:5px 11px 5px 6px;border-radius:100px;margin-bottom:26px}
.pill b{font-family:var(--fm);font-weight:500;font-size:10.5px;letter-spacing:.06em;
  color:var(--ac);background:var(--ac-dim);padding:3px 7px;border-radius:100px}
.pill span{color:var(--tx3)}
.h1{font-size:60px;line-height:1.04;letter-spacing:-.034em}
.h1 em{font-style:normal;background:linear-gradient(96deg,#ffb595 4%,var(--ac) 46%,#ff9a6b 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:20px auto 0;max-width:560px;font-size:16.5px;line-height:1.6;color:var(--tx2)}
.cta{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.b1{background:#f3f5f9;color:#0c0d10;font-weight:600;font-size:14px;padding:10px 18px;border-radius:9px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 24px -10px rgba(0,0,0,.9)}
.b2{border:1px solid var(--line-2);color:var(--tx);font-size:14px;font-weight:500;
  padding:10px 16px;border-radius:9px;background:rgba(255,255,255,.03);
  display:inline-flex;align-items:center;gap:8px;transition:background .18s var(--ease)}
.b2:hover{background:rgba(255,255,255,.07)}
.b2 svg{opacity:.5}
.cmd{margin:18px auto 0;display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);
  font-size:12px;color:var(--tx2);border:1px solid var(--line);background:rgba(255,255,255,.022);
  padding:8px 10px 8px 13px;border-radius:8px;max-width:100%}
.cmd s{text-decoration:none;color:var(--tx3);flex:none}
.cmd b{font-weight:400;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd button{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);cursor:pointer;padding:0}
.cmd button:hover{background:rgba(255,255,255,.11)}

.stage{margin-top:52px;height:430px;padding:0 28px;position:relative;z-index:1}

/* =====================================================================
   The console surface. The one place a shadow is allowed.
   ===================================================================== */
.app{height:100%;margin:0 auto;max-width:var(--w);border:1px solid var(--line-2);border-bottom:0;
  border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--s1),#0b0d12);
  box-shadow:0 -1px 0 rgba(255,255,255,.07) inset,0 40px 90px -30px rgba(0,0,0,.95),
    0 0 90px -30px rgba(255,122,69,.22);
  display:grid;grid-template-columns:212px 1fr;overflow:hidden}
.side{border-right:1px solid var(--line);padding:14px 10px;background:rgba(255,255,255,.012)}
.proj{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;
  background:rgba(255,255,255,.045);margin-bottom:14px}
.proj u{width:19px;height:19px;border-radius:5px;text-decoration:none;flex:none;
  background:linear-gradient(150deg,#7a5cff,#4ba3ff)}
.proj strong{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.proj small{display:block;font-family:var(--fm);font-size:10px;color:var(--tx3)}
.navgrp{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;color:var(--tx3);
  text-transform:uppercase;padding:12px 9px 5px}
.item{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;font-size:13px;color:var(--tx2)}
.item.on{background:rgba(255,255,255,.06);color:var(--tx);font-weight:500}
.item i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.13);flex:none}
.item.on i{background:var(--ac)}
.item span{margin-left:auto;font-family:var(--fm);font-size:10px;color:var(--tx3)}
.appmain{display:flex;flex-direction:column;min-width:0}
.bar{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--tx2)}
.crumb b{color:var(--tx);font-weight:500}
.crumb s{text-decoration:none;color:var(--tx3)}
.env{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);
  font-size:11px;color:var(--tx2);border:1px solid var(--line-2);padding:4px 9px;border-radius:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(52,211,153,.16);flex:none}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.kpi{padding:14px 16px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi label{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:7px}
.kpi b{font-size:22px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi b i{font-style:normal;font-size:12px;color:var(--tx3);margin-left:3px;letter-spacing:0}
.kpi em{font-style:normal;font-family:var(--fm);font-size:10.5px;margin-left:8px}
.up{color:var(--ok)} .dn{color:var(--warn)}
.thead,.trow{display:grid;grid-template-columns:minmax(0,1.5fr) 92px 78px 78px 88px 116px;
  align-items:center;gap:14px;padding:0 16px}
.thead{height:32px;border-bottom:1px solid var(--line);font-family:var(--fm);font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tx3)}
.trow{height:52px;border-bottom:1px solid rgba(255,255,255,.045);transition:background .18s var(--ease)}
.trow:hover{background:rgba(255,255,255,.022)}
.mdl{display:flex;align-items:center;gap:10px;min-width:0}
.mdl u{width:24px;height:24px;border-radius:7px;flex:none;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--fm);font-size:9px;color:var(--tx2)}
.mdl strong{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdl small{display:block;font-family:var(--fm);font-size:10px;color:var(--tx3)}
/* Column sets live here, not in a style attribute on every row — an
   inline grid-template-columns outranks the narrow-screen rules below
   and the table silently shreds itself on a phone. */
.thead--catalogue,.trow--catalogue{grid-template-columns:minmax(0,1.5fr) 96px 84px 84px 96px 96px}
.thead--net,.trow--net{grid-template-columns:70px minmax(0,1fr) 90px 110px 120px}
.trow--net{height:46px}
.trow--net .code{color:var(--ac)}
.trow--net .place{font-size:13.5px;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The bar carries its own label, hidden while the column header supplies
   one and shown once the header goes away on a narrow screen. Both the
   wrapper and the bar need an explicit display: a bare <span> is inline,
   and height on an inline box does nothing at all. */
.trow--net .cap{display:block}
.trow--net .cap .bar-t{display:block}
.trow--net .cap em{display:none}
.num{font-family:var(--fm);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--tx2)}
.num b{color:var(--tx);font-weight:400}
.spark{height:22px;width:100%;display:block}

/* =====================================================================
   Section furniture
   ===================================================================== */
.sec{position:relative;padding:104px 0}
.sec--tight{padding:72px 0}
.eyebrow{font-family:var(--fm);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ac);margin-bottom:16px}
.h2{font-size:36px;line-height:1.14}
.h3{font-size:22px;line-height:1.2}
.lede{margin-top:14px;font-size:16px;line-height:1.62;color:var(--tx2);max-width:52ch}
.two{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:64px;align-items:start}
.two--even{grid-template-columns:1fr 1fr}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* trust strip */
.trust{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between}
.trust p{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--tx3)}
.trust p b{color:var(--tx2);font-weight:400}
.names{display:flex;gap:30px;flex-wrap:wrap}
.names span{font-size:15px;font-weight:600;letter-spacing:-.02em;color:rgba(243,245,249,.34)}

/* =====================================================================
   Panels — the generic container for every real artefact
   ===================================================================== */
.panel{border:1px solid var(--line-2);border-radius:12px;
  background:linear-gradient(180deg,var(--s1),#0b0d12);overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.ph{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;
  border-bottom:1px solid var(--line);font-family:var(--fm);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.ph em{margin-left:auto;font-style:normal;color:var(--tx2);text-transform:none;
  letter-spacing:0;font-size:11px}

/* region rows */
.rg{display:grid;grid-template-columns:52px minmax(0,1fr) 62px 92px;align-items:center;gap:12px;
  padding:0 14px;height:40px;border-bottom:1px solid rgba(255,255,255,.045)}
.rg:last-child{border-bottom:0}
.rg code{font-family:var(--fm);font-size:11.5px;color:var(--ac)}
.rg span{font-size:13.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg b{font-family:var(--fm);font-size:12.5px;font-weight:400;
  font-variant-numeric:tabular-nums;text-align:right}
.bar-t{height:4px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
.bar-t i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--ac),#ffb08a)}
.more{padding:11px 14px;font-family:var(--fm);font-size:11px;color:var(--tx3);border-top:1px solid var(--line)}

/* numbered facts */
.facts{display:grid;margin-top:34px}
.fact{padding:18px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:26px 1fr;gap:14px}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact u{text-decoration:none;font-family:var(--fm);font-size:10.5px;color:var(--tx3);padding-top:3px}
.fact h3{font-size:15.5px;letter-spacing:-.01em;font-weight:600}
.fact p{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--tx2)}

/* code + response */
.codepanel{display:grid;grid-template-columns:1fr 1fr}
.tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012)}
.tab{font-family:var(--fm);font-size:11.5px;color:var(--tx3);padding:7px 12px;
  border-radius:7px 7px 0 0;background:none;border:0;cursor:pointer}
.tab.on{color:var(--tx);background:rgba(255,255,255,.055)}
pre{margin:0;padding:18px 16px;font-family:var(--fm);font-size:12.3px;line-height:1.75;
  color:var(--tx2);overflow-x:auto}
.k{color:var(--vio)} .s{color:#8fd39b} .f{color:var(--blue)}
.c{color:rgba(243,245,249,.3)} .n{color:var(--ac)}
/* The response column carries less than the code column; let the stream
   take the slack so the metrics pin to the bottom edge of the panel. */
.resp{border-left:1px solid var(--line);display:flex;flex-direction:column}
.stream{padding:16px;font-family:var(--fm);font-size:12.3px;line-height:1.8;color:var(--tx2);flex:1}
.stream .tok{background:rgba(255,122,69,.13);border-radius:3px;padding:0 2px;color:var(--tx)}
.foot-m{display:flex;gap:18px;padding:11px 16px;border-top:1px solid var(--line);
  font-family:var(--fm);font-size:10.5px;color:var(--tx3);flex-wrap:wrap}
.foot-m b{color:var(--ok);font-weight:400}
.foot-m b.neutral{color:var(--tx2)}

/* trace waterfall */
.trace{padding:6px 0}
.tr{display:grid;grid-template-columns:150px 1fr 66px;align-items:center;gap:14px;padding:0 16px;height:38px}
.tr span{font-size:13px;color:var(--tx2)}
.tr b{font-family:var(--fm);font-size:11.5px;font-weight:400;color:var(--tx3);text-align:right;
  font-variant-numeric:tabular-nums}
.tl{height:9px;border-radius:3px;position:relative;background:rgba(255,255,255,.05)}
.tl i{position:absolute;top:0;bottom:0;border-radius:3px;display:block}

/* terminal steps */
.step{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.016);overflow:hidden;
  display:flex;flex-direction:column}
.step .sh{padding:16px 16px 0}
.step u{text-decoration:none;font-family:var(--fm);font-size:10.5px;color:var(--ac)}
.step h3{margin-top:9px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.step p{margin-top:7px;font-size:14px;line-height:1.6;color:var(--tx2);padding-bottom:16px}
.term{border-top:1px solid var(--line);background:#0a0c11;padding:13px 16px;margin-top:auto;
  font-family:var(--fm);font-size:11.3px;line-height:1.85;color:var(--tx2);min-height:118px}
.term s{text-decoration:none;color:var(--tx3)}

/* numbers strip */
.nums{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums>div{padding:30px 24px;border-right:1px solid var(--line)}
.nums>div:last-child{border-right:0}
.nums label{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:11px}
.nums b{font-size:40px;font-weight:500;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;display:block;line-height:1}
.nums b i{font-style:normal;font-size:19px;color:var(--tx3);letter-spacing:0}
.nums p{margin-top:9px;font-size:13.5px;color:var(--tx2)}

/* pricing */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.pc{border:1px solid var(--line);border-radius:14px;padding:26px 24px;
  background:rgba(255,255,255,.016);display:flex;flex-direction:column}
.pc.hi{border-color:rgba(255,122,69,.4);
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,122,69,.09),transparent 62%),rgba(255,255,255,.02)}
.pc h3{font-size:16px;font-weight:600}
.pc .amt{margin-top:16px;font-size:38px;font-weight:500;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.pc .amt i{font-style:normal;font-size:14px;color:var(--tx3);letter-spacing:0;margin-left:3px}
.pc .note{margin-top:8px;font-size:13.5px;color:var(--tx2);min-height:40px}
.pc ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.pc li{font-size:13.8px;color:var(--tx2);display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start}
.pc li s{text-decoration:none;color:var(--ok);font-family:var(--fm);font-size:11px;padding-top:2px}
.pc .pb{margin-top:auto;padding-top:24px}
.pc .pb span{display:block;text-align:center;padding:9px;border-radius:9px;font-size:13.5px;
  font-weight:500;border:1px solid var(--line-2);color:var(--tx)}
.pc.hi .pb span{background:#f3f5f9;color:#0c0d10;border-color:transparent;font-weight:600}

/* =====================================================================
   Long-form reading (docs, changelog bodies, pages)
   ===================================================================== */
.prose{max-width:68ch;font-size:15.5px;line-height:1.72;color:var(--tx2)}
.prose h2{font-size:22px;margin:2em 0 .6em;color:var(--tx);letter-spacing:-.02em}
.prose h3{font-size:17px;margin:1.7em 0 .5em;color:var(--tx);font-weight:600;letter-spacing:-.015em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em;padding:0}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--tx);font-weight:600}
.prose code{font-family:var(--fm);font-size:.88em;background:rgba(255,255,255,.06);
  border:1px solid var(--line);padding:1px 5px;border-radius:5px;color:var(--tx)}
.prose pre{background:#0a0c11;border:1px solid var(--line);border-radius:10px;margin:0 0 1.3em}
.prose a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
/* Prose tables are still tables: hairlines, tabular figures, and they
   scroll inside themselves rather than pushing the page sideways. */
.prose .tw{overflow-x:auto;margin:0 0 1.4em}
.prose table{width:100%;border-collapse:collapse;font-size:14px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.prose th{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3);font-weight:400;border-bottom-color:var(--line-2)}
.prose td:first-child{color:var(--tx);white-space:normal}
.prose td:not(:first-child),.prose th:not(:first-child){font-family:var(--fm);
  font-variant-numeric:tabular-nums;text-align:right}
.prose blockquote{margin:0 0 1.3em;padding:2px 0 2px 18px;border-left:2px solid var(--ac);
  color:var(--tx);font-size:16px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* chips + pagination + search */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--fm);font-size:11px;letter-spacing:.06em;padding:6px 11px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--tx2);transition:color .18s var(--ease),border-color .18s var(--ease)}
.chip:hover,.chip.on{color:var(--ac);border-color:rgba(255,122,69,.45)}
.nav-links{display:flex;gap:7px;flex-wrap:wrap;padding:32px 28px 0;max-width:var(--w);
  margin:0 auto;position:relative;z-index:1}
.nav-links .page-numbers{font-family:var(--fm);font-size:11.5px;padding:8px 13px;
  border:1px solid var(--line-2);border-radius:8px;color:var(--tx2)}
.nav-links .page-numbers.current{background:var(--ac);border-color:var(--ac);color:#0c0d10}
.asearch{display:flex;gap:10px;max-width:440px}
.asearch input[type="search"]{flex:1;min-width:0;background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;color:var(--tx);
  font-family:var(--ff);font-size:14px}
.asearch input:focus{outline:none;border-color:rgba(255,122,69,.5)}
.asearch button{border:0;border-radius:9px;padding:9px 16px;background:#f3f5f9;color:#0c0d10;
  font-family:var(--ff);font-size:13.5px;font-weight:600;cursor:pointer}

/* end CTA */
.endcta{text-align:center;position:relative;padding:120px 0 110px}
.endcta::before{content:"";position:absolute;left:50%;top:0;width:1100px;height:420px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(46% 52% at 50% 40%,rgba(255,122,69,.15),transparent 70%);filter:blur(14px)}
.endcta .h2{font-size:44px;position:relative}

/* footer */
.foot{border-top:1px solid var(--line);padding:54px 0 40px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px}
.fgrid h4{margin:0 0 14px;font-family:var(--fm);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx3);font-weight:400}
.fgrid a{display:block;font-size:13.5px;color:var(--tx2);padding:5px 0}
.fgrid a:hover{color:var(--tx)}
.fgrid ul{list-style:none;margin:0;padding:0}
.fbot{display:flex;align-items:center;gap:18px;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--tx3);flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;
  color:var(--tx2);border:1px solid var(--line);padding:5px 10px;border-radius:100px}
.fic{margin-left:auto;max-width:56ch;text-align:right;line-height:1.6}

/* =====================================================================
   Motion — one layer, and only on entry.
   ===================================================================== */
.js .rv{opacity:0;transform:translateY(14px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:60ms}
.js .rv[data-d="2"]{transition-delay:120ms}
.js .rv[data-d="3"]{transition-delay:180ms}

/* transition:none, never a 1ms duration — a duration on * switches
   transitions ON everywhere and can pin stale values. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none}
}

/* =====================================================================
   Narrow
   ===================================================================== */
@media (max-width:980px){
  .two,.two--even,.three,.price,.fgrid,.codepanel{grid-template-columns:1fr;gap:26px}
  .codepanel{gap:0}
  .resp{border-left:0;border-top:1px solid var(--line)}
  .nums{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:40px} .h2{font-size:28px} .endcta .h2{font-size:32px}
  .fic{text-align:left;margin-left:0}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .stage{height:360px}
}
@media (max-width:760px){
  .navr .ghost{display:none}

  /* The link row does not fit, so it becomes a disclosure under the bar.
     Hiding it without this leaves the catalogue, the network and the
     docs unreachable from a phone. */
  .nv{grid-template-columns:auto 1fr auto}
  .navtoggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--tx2);background:none;border:1px solid var(--line-2);
    border-radius:8px;padding:7px 10px}
  .navtoggle[aria-expanded="true"]{color:var(--tx);background:rgba(255,255,255,.06)}
  /* Opaque, not translucent: the hero headline sitting behind the menu
     at three per cent is still legible enough to look like a mistake. */
  [data-nav]{position:absolute;left:0;right:0;top:60px;display:none;
    background:var(--bg);border-bottom:1px solid var(--line-2);
    box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
  [data-nav].open{display:block}
  /* width:100% is not redundant — the desktop rule leaves this list as a
     centred grid item, and it keeps shrink-wrapping to its longest label
     once the panel takes over. */
  .links{flex-direction:column;gap:0;padding:2px 18px 14px;width:100%;justify-self:stretch}
  .links li+li{border-top:1px solid var(--line)}
  .links a{display:block;padding:14px 0;font-size:15px;color:var(--tx)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(2){border-right:0}
  .kpi:nth-child(1),.kpi:nth-child(2){border-bottom:1px solid var(--line)}

  /* A six-column table does not survive 390px, so each row becomes a
     record: the name on its own line, then the figures wrapping under
     it. The figures carry their own labels because the header row that
     used to name them is gone. */
  .thead{display:none}
  .trow{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 18px;
    height:auto;padding:13px 14px}
  .trow .mdl,.trow--net .place{flex:1 0 100%}
  .trow--net .code{flex:0 0 auto;font-size:13px}
  .trow--net .place{flex:1 1 auto;order:-1;white-space:normal}
  .trow .bar-t{flex:1 0 100%;order:9}
  .trow--net .cap{flex:1 0 100%;order:9;display:flex;align-items:center;gap:11px}
  .trow--net .cap em{display:block;flex:none;font-style:normal;font-family:var(--fm);
    font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
  .trow--net .cap .bar-t{flex:1 1 auto}
  .trow .num[data-l]::before{content:attr(data-l) " ";color:var(--tx3);font-size:10px;
    letter-spacing:.08em;text-transform:uppercase}
  .trow .spark{display:none}

  .tr{grid-template-columns:104px 1fr 56px;gap:9px}
  .rg{gap:10px}
  .h1{font-size:32px}
  .stage{height:300px;padding:0 16px}
  .wrap{padding:0 18px}
  .sec{padding:72px 0}
  .prose td,.prose th{white-space:normal}
}