/* ==========================================================================
   Catalase design system
   --------------------------------------------------------------------------
   Layer 1  primitives : raw palette, type stacks, the spacing + type scales
   Layer 2  semantic   : what a value MEANS (--bg, --ink, --accent), themed
   Layer 3  component  : per-component rules, further down this file

   Rules
   - Never hard-code a colour, size or space in a component. Use a token.
   - Spacing is an 8px-based scale. Do not invent in-between values.
   - Type sizes come from the scale below. Headings are serif, labels mono.
   - Every colour pair used for text is checked against WCAG AA (4.5:1 body,
     3:1 large text and non-text boundaries). See the contrast notes inline.
   ========================================================================== */

:root{
  /* --- Layer 1: primitives ------------------------------------------- */

  /* Paper (light) ramp — warm, low-chroma, so code colour stands out */
  --paper-50:#FAF8F3; --paper-100:#F4F1EA; --paper-200:#EDE8DD;
  --paper-300:#D9D3C5; --paper-700:#5B564B; --paper-900:#1B1A17;
  /* Ink (dark) ramp */
  --night-900:#121108; --night-850:#15140F; --night-800:#1E1D17;
  --night-700:#262520; --night-600:#36342B; --night-300:#B3AD9F; --night-50:#F1EDE2;
  /* Brand — crimson and amber, from the product's own STYLE_GUIDE.md.
     Catalase is a heme protein built around an iron core: crimson for the
     protein, amber for the iron at the active site. Two crimsons are needed
     because one value cannot both carry white button text and be readable
     as link text on paper:
       --crimson-600 #DC3340  the app's accent. 4.57:1 white-on-it → button FILLS
       --crimson-700 #C81F30  deepened for paper. 5.04:1 on --bg → TEXT and links
     Amber is a fill-only highlight: at 1.6:1 on paper it must never be text. */
  --crimson-600:#DC3340; --crimson-700:#C81F30; --crimson-800:#A81728;
  --crimson-300:#FF9BA0; --crimson-100:#FBE3E4; --crimson-050:#FDF1F1;
  --amber-500:#FFB020; --amber-700:#A67C00;
  --amber-100:#FFF1CC; --amber-900:#5E4108; --amber-200:#3A2E0E; --amber-50:#F4DCA0;

  /* Type stacks */
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;

  /* Type scale — 1.25 major third, fluid between 390px and 1440px.
     Each step is clamp(min, preferred, max) so nothing needs a media query. */
  --fs-xs:13px;
  --fs-sm:14.5px;
  --fs-base:17px;
  --fs-md:clamp(17px, 1.1vw + 14px, 19px);
  --fs-lg:clamp(19px, 1.4vw + 15px, 22px);
  --fs-h3:clamp(19px, 0.7vw + 17px, 23px);
  --fs-h2:clamp(27px, 2.2vw + 18px, 40px);
  --fs-h1:clamp(34px, 4.1vw + 16px, 60px);
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.65;

  /* Spacing scale (8px base). Section rhythm uses --s-16/--s-20. */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px;
  --s-16:64px; --s-20:80px; --s-24:96px;
  --section-y:clamp(56px, 6vw, 96px);      /* vertical rhythm for sections */
  --gutter:clamp(20px, 4vw, 32px);         /* page side padding */

  /* Radii, elevation, motion */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(27,26,23,.06), 0 2px 8px -2px rgba(27,26,23,.08);
  --shadow-md:0 4px 12px -4px rgba(27,26,23,.12), 0 12px 32px -12px rgba(27,26,23,.14);
  --shadow-lg:0 24px 60px -24px rgba(27,26,23,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.18s;
  --maxw:1180px;
  --maxw-prose:72ch;

  /* --- Layer 2: semantic (light theme) -------------------------------- */
  --bg:var(--paper-100);
  --bg-sunken:var(--paper-200);          /* alternating band */
  --surface:#FFFFFF;
  --surface-2:var(--paper-50);
  --ink:var(--paper-900);                /* 15.6:1 on --bg */
  --muted:var(--paper-700);              /* 6.9:1 on --bg  */
  --line:var(--paper-300);
  --line-strong:#8A8680;                 /* 3.2:1 on --bg, 3.6:1 on --surface. Used for
                                            input and button borders, where the boundary
                                            itself carries meaning (WCAG 1.4.11, 3:1). */
  --accent:var(--crimson-600);           /* button FILLS — 4.57:1 white-on-it */
  --accent-hover:var(--crimson-700);
  --accent-ink:#FFFFFF;
  --accent-soft:var(--crimson-100);
  --accent-text:var(--crimson-700);      /* accent AS TEXT on paper — 5.04:1 */
  --brand:var(--amber-500);              /* fill-only highlight, never text */
  --warn-bg:var(--amber-100);--warn-ink:var(--amber-900);
  --code-bg:var(--paper-900);--code-ink:#EDE8DB;
  --focus:var(--crimson-700);
}

/* Dark theme. Kept in sync as two blocks: a media query for system preference
   (opt-out via [data-theme="light"]) and an explicit [data-theme="dark"]. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--night-850);
    --bg-sunken:var(--night-900);
    --surface:var(--night-800);
    --surface-2:var(--night-700);
    --ink:var(--night-50);               /* 14.8:1 */
    --muted:var(--night-300);            /* 7.4:1  */
    --line:var(--night-600);
    --line-strong:#757164;               /* 3.8:1 on --bg, 3.5:1 on --surface */
    /* On dark, crimson is a FILL only. As text it fails, so links and
       soft-accent text use --crimson-300 (#FF9BA0), 8.9:1 on --bg. This is
       the same rule the app's style guide states. */
    --accent:var(--crimson-600);
    --accent-hover:#E8505C;
    --accent-ink:#FFFFFF;
    --accent-soft:#3A1B1E;
    --accent-text:var(--crimson-300);
    --brand:var(--amber-500);
    --warn-bg:var(--amber-200);--warn-ink:var(--amber-50);
    --code-bg:#0E0D0A;--code-ink:#EDE8DB;
    --focus:var(--crimson-300);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.5);
    --shadow-md:0 4px 12px -4px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:var(--night-850);
  --bg-sunken:var(--night-900);
  --surface:var(--night-800);
  --surface-2:var(--night-700);
  --ink:var(--night-50);
  --muted:var(--night-300);
  --line:var(--night-600);
  --line-strong:#757164;
  --accent:var(--crimson-600);
  --accent-hover:#E8505C;
  --accent-ink:#FFFFFF;
  --accent-soft:#3A1B1E;
  --accent-text:var(--crimson-300);
  --brand:var(--amber-500);
  --warn-bg:var(--amber-200);--warn-ink:var(--amber-50);
  --code-bg:#0E0D0A;--code-ink:#EDE8DB;
  --focus:var(--crimson-300);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-md:0 4px 12px -4px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{max-width:100%;height:auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--section-y) 0}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-0.018em;
  line-height:var(--lh-tight);margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);max-width:22ch}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
/* Code blocks: long lines scroll inside the block, never the page. */
pre{font-family:var(--mono);font-size:14px;line-height:1.6;
  background:var(--bg-sunken);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;
  overflow-x:auto;white-space:pre;margin:12px 0}
pre code{background:none;border:0;padding:0;font:inherit}

.eyebrow{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s-4);
  display:flex;align-items:center;gap:var(--s-3)}
/* A short rule after the eyebrow gives the section a visible starting edge.
   Hidden below 620px, where a wrapped eyebrow would strand it on its own line. */
.eyebrow::after{content:"";flex:0 0 28px;height:1px;background:currentColor;opacity:.45}
@media (max-width:620px){.eyebrow{display:block}.eyebrow::after{display:none}}
.lede{font-size:var(--fs-lg);color:var(--muted);max-width:62ch;margin-top:var(--s-5);
  line-height:1.55}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:13px 22px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-base);
  text-decoration:none;border:1.5px solid var(--line-strong);color:var(--ink);
  background:var(--surface);min-height:48px;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.btn:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:var(--shadow-sm)}
.btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);
  box-shadow:var(--shadow-md)}
.btn.ghost{background:transparent;border-color:transparent;padding-left:var(--s-2);
  padding-right:var(--s-2)}
.btn.ghost:hover{background:var(--surface);border-color:var(--line)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--s-1)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--surface);padding:var(--s-2) var(--s-3);
  z-index:99;border-radius:var(--r-sm);box-shadow:var(--shadow-md)}
mark.ph{background:var(--warn-bg);color:var(--warn-ink);padding:0 5px;border-radius:3px;font-family:var(--mono);font-size:.82em}
.tagnote{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:2px 8px;border-radius:999px;border:1px dashed var(--muted);color:var(--muted);vertical-align:middle;margin-left:6px;text-transform:uppercase;letter-spacing:.05em}

/* nav */
header.nav{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:var(--s-8);min-height:66px}
/* Menu button for narrow screens. Hidden by default; site.js reveals it.
   Three bars drawn with gradients, so no icon font or SVG is needed. */
.nav-toggle{display:none;appearance:none;cursor:pointer;flex:0 0 auto;
  width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);
  background-color:var(--surface);
  background-image:linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),
    linear-gradient(var(--ink) 0 0);
  background-repeat:no-repeat;background-size:18px 2px;
  background-position:center 13px,center 19px,center 25px}
.nav-toggle:hover{border-color:var(--ink)}
.logo{display:flex;align-items:center;gap:var(--s-3);font-family:var(--display);
  font-size:23px;font-weight:700;text-decoration:none;letter-spacing:-0.02em;flex:0 0 auto}
/* The real Catalase mark. At nav size the SVG's four separate bars read as
   noise, so the raster icon is used here — it was drawn for small sizes. */
.logo i{width:26px;height:26px;display:block;flex:0 0 auto;
  background:url("brand/catalase-icon-512.png") center/contain no-repeat}
.nav nav{display:flex;gap:var(--s-6);flex:1;font-size:15px;align-items:center}
.nav nav a{text-decoration:none;color:var(--muted);padding:6px 0;position:relative;
  transition:color var(--dur) var(--ease)}
.nav nav a:hover{color:var(--ink)}
/* underline grows from the left on hover and for the current page */
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.nav nav a:hover::after{transform:scaleX(1)}
header.nav nav a[aria-current="page"]{color:var(--ink);font-weight:600}
header.nav nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{padding:9px 18px;min-height:42px;font-size:15px;flex:0 0 auto}

/* hero — text column is wider than the illustration, and the two are top-aligned
   so the headline is never floating beside dead space. */
.hero{padding:clamp(40px,5vw,72px) 0 var(--section-y)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{max-width:19ch}
.hero p.sub{font-size:var(--fs-lg);color:var(--muted);margin-top:var(--s-6);
  max-width:46ch;line-height:1.55}
.cta-row{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-8)}
.micro{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s-5);max-width:54ch;
  line-height:1.6}
.micro a{color:var(--ink);text-underline-offset:2px}
/* trust row: the three facts that answer "is this for me" without scrolling */
/* One per line: three short facts read faster stacked than wrapped 2+1. */
.hero-trust{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-6);
  font-size:var(--fs-sm);color:var(--muted);list-style:none;padding:0}
.hero-trust li{display:flex;align-items:center;gap:var(--s-2)}
.hero-trust li::before{content:"";width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1.5px var(--accent)}

/* illustration window */
.win{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;font-size:12px}
.win-bar{display:flex;gap:6px;padding:10px var(--s-3);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 70%,var(--surface));align-items:center}
.win-bar b{width:10px;height:10px;border-radius:50%;background:var(--line-strong);
  display:block;opacity:.65}
.win-bar::after{content:"catalase — demo-app";margin-left:auto;font-family:var(--mono);
  font-size:10.5px;color:var(--muted);letter-spacing:.02em}
.win-body{display:grid;grid-template-columns:104px minmax(0,1.5fr) minmax(0,1fr);min-height:330px}
.pane{padding:10px 12px;border-right:1px solid var(--line);min-width:0}
.pane:last-child{border-right:0;display:flex;flex-direction:column;gap:8px;background:color-mix(in srgb,var(--bg) 55%,var(--surface))}
.pane h4{margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tree div{padding:2px 0;color:var(--muted);font-family:var(--mono);font-size:11px}
.tree .on{color:var(--ink);font-weight:600}
.codeline{font-family:var(--mono);font-size:11px;white-space:pre;color:var(--muted);line-height:1.7;overflow:hidden}
.codeline .k{color:var(--accent)}.codeline .g{opacity:.55;font-style:italic}
.term{margin-top:10px;background:var(--code-bg);color:var(--code-ink);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:11px;line-height:1.6}
.bub{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:11.5px;line-height:1.45}
.bub.me{background:var(--accent-soft);border-color:transparent}
.foot{margin-top:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:7px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.cap{font-size:12.5px;color:var(--muted);margin-top:10px}

/* proof strip */
.proof{padding:0}
.proof-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.proof-row div{padding:var(--s-8) var(--s-6);border-right:1px solid var(--line)}
.proof-row div:last-child{border-right:0}
.proof-row b{display:block;font-family:var(--display);font-size:clamp(28px,2.4vw,36px);
  letter-spacing:-0.025em;line-height:1.05;color:var(--ink)}
.proof-row span{font-size:var(--fs-sm);color:var(--muted);display:block;margin-top:var(--s-2);
  line-height:1.5}

/* question → answer pairs */
.pairs{margin-top:var(--s-10);border-top:2px solid var(--ink)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--s-3) var(--s-10);
  padding:var(--s-6) 0;border-bottom:1px solid var(--line)}
.pair h3{font-size:var(--fs-h3)}
.pair p{color:var(--muted)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
  margin-top:var(--s-10)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.card p{color:var(--muted);font-size:var(--fs-base)}
.card.adv{border-style:dashed;background:transparent}
.card .lim{font-size:var(--fs-sm);color:var(--warn-ink);background:var(--warn-bg);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);margin-top:auto}
/* Screenshot placeholder. Deliberately reads as "image pending", not as a
   broken image: a camera glyph, a muted caption, and the hatch pattern. Each
   slot's text describes what the shot must show, so it doubles as a brief. */
.slot{border:1px dashed var(--line-strong);border-radius:var(--r-sm);min-height:132px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);
  text-align:center;padding:var(--s-5) var(--s-4);
  font-size:12.5px;line-height:1.45;color:var(--muted);
  background:repeating-linear-gradient(135deg,transparent 0 9px,
    color-mix(in srgb,var(--line) 55%,transparent) 9px 10px)}
.slot::before{content:"";width:26px;height:21px;flex:0 0 auto;opacity:.55;
  background:currentColor;
  -webkit-mask:var(--cam) center/contain no-repeat;mask:var(--cam) center/contain no-repeat}
:root{--cam:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20"><path d="M9 2h6l1.4 2H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4.6L9 2Zm3 5.5A4.5 4.5 0 1 0 16.5 12 4.5 4.5 0 0 0 12 7.5Zm0 2A2.5 2.5 0 1 1 9.5 12 2.5 2.5 0 0 1 12 9.5Z"/></svg>')}

/* routing */
.sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
  margin-top:var(--s-8)}
.src{border-top:3px solid var(--accent);padding-top:var(--s-4)}
.src p{color:var(--muted);font-size:var(--fs-base);margin-top:var(--s-2)}
.route-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-8);
  margin-top:var(--s-12);align-items:start}

/* tables — zebra striping and a sticky header make long comparisons readable */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;
  background:var(--surface)}
th,td{border-bottom:1px solid var(--line);padding:11px var(--s-3);text-align:left;
  vertical-align:top}
th{background:var(--surface-2);font-weight:600;position:sticky;top:0;z-index:1;
  border-bottom:2px solid var(--line-strong);font-size:var(--fs-sm)}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg) 42%,var(--surface))}
tbody tr:hover td{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
caption{caption-side:top}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);
  max-height:72vh}
.scroll table{background:transparent}
.facts{display:flex;flex-direction:column;gap:14px}
.facts p{color:var(--muted);font-size:16px}
.facts b{color:var(--ink)}

/* alternating band — the main device for separating sections */
.band{background:var(--bg-sunken);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.meter{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-6);box-shadow:var(--shadow-sm)}
.meter .row{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.bar{height:12px;border-radius:99px;background:var(--line);margin:12px 0;overflow:hidden}
.bar i{display:block;height:100%;width:24%;background:var(--accent)}
.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;margin-top:40px;align-items:start}
.list{display:flex;flex-direction:column;gap:20px}
.list p{color:var(--muted);font-size:16px;margin-top:4px}
.fine{font-size:14px;color:var(--muted);margin-top:14px}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.tabs button{font:inherit;font-weight:600;font-size:15px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.panel{display:none;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;margin-top:24px;align-items:center}
.panel.on{display:grid}
.panel p{color:var(--muted);margin-top:10px}
.panel .slot{min-height:240px}
.kbd{font-family:var(--mono);font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 6px;overflow-wrap:anywhere}
.limits{font-size:14px;color:var(--muted);margin-top:26px;font-family:var(--mono)}

/* agent */
.modes{display:inline-flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;margin-bottom:16px}
.modes span{padding:8px 18px;font-weight:600;font-size:14px}
.modes .on{background:var(--ink);color:var(--bg)}
.action{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}
.action .top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:600;font-size:15px}
.chip{font-family:var(--mono);font-size:11.5px;background:var(--warn-bg);color:var(--warn-ink);padding:2px 8px;border-radius:99px}
.action .btns{display:flex;gap:8px;flex-wrap:wrap}
.action .btns span{font-size:13px;font-weight:600;border:1.5px solid var(--ink);padding:5px 12px;border-radius:6px}
.action .btns .p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.small-note{font-size:14px;color:var(--muted);margin-top:16px}
.feat4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;margin-top:36px}
.feat4 p{color:var(--muted);font-size:16px;margin-top:4px}

/* compare */
.cmp{margin-top:34px}
.cmp td.y{color:var(--accent);font-weight:700}
.cmp tr.sec td{background:color-mix(in srgb,var(--bg) 60%,var(--surface));font-weight:700;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.cmp th:nth-child(2),.cmp td:nth-child(2){background:var(--accent-soft)}
.legend{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:80ch}

/* limits */
.lim2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;margin-top:32px;padding:0;list-style:none}
.lim2 li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--muted)}
.lim2 li::before{content:"—";margin-right:10px;color:var(--accent);font-weight:700}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px;counter-reset:s;padding:0;list-style:none}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:14px}
.steps li::before{content:counter(s);font-family:var(--display);font-size:40px;line-height:1;display:block;margin-bottom:8px;color:var(--accent)}
.steps p{color:var(--muted);font-size:15.5px;margin-top:6px}

/* faq */
details{border-top:1px solid var(--line);padding:4px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:18px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;line-height:1;color:var(--accent)}
details[open] summary::after{content:"–"}
details p{color:var(--muted);padding:0 0 18px;max-width:70ch}
.faq{max-width:820px;margin-top:36px}

/* cta + footer */
.final{background:var(--code-bg);color:var(--code-ink);text-align:center;
  --on-dark-muted:#B9B3A4;   /* 7.4:1 on --code-bg */
  --on-dark-faint:#9A9485}   /* 5.2:1 on --code-bg */
.final h2{margin:0 auto;max-width:18ch;color:var(--code-ink)}
.final p{color:var(--on-dark-muted);margin:var(--s-4) auto 0;max-width:52ch}
.final .btn.pri{margin-top:28px;background:var(--accent);color:var(--accent-ink)}
.final .micro{margin:var(--s-4) auto 0;color:var(--on-dark-faint)}
footer{padding:48px 0;border-top:1px solid var(--line);font-size:15px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fcols b{display:block;margin-bottom:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fcols a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
.fcols a:hover{color:var(--ink)}
.legal{margin-top:32px;color:var(--muted);font-size:13.5px}

/* --- Responsive -----------------------------------------------------------
   Breakpoints: 1080 (crowded desktop), 900 (tablet), 620 (phone).
   The nav is never hidden outright — below 900px it becomes a horizontally
   scrollable row, so every internal link stays reachable and crawlable. */

@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav .wrap{gap:var(--s-5)}
  .nav nav{gap:var(--s-4)}
}

@media (max-width:900px){
  .hero-grid,.two,.route-grid,.panel.on{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:100%}
  .hero-grid figure{order:2}
  .cards,.sources{grid-template-columns:minmax(0,1fr)}
  .proof-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-row div:nth-child(2){border-right:0}
  .proof-row div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .feat4,.lim2{grid-template-columns:minmax(0,1fr)}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--s-6)}
  .win-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .win-body .pane:first-child{display:none}

  /* No-JS fallback: the nav stays a scrollable strip on its own row, so every
     link remains reachable. With JS it collapses behind the menu button. */
  .nav .wrap{flex-wrap:wrap;gap:var(--s-3) var(--s-4);padding-top:var(--s-2);
    padding-bottom:var(--s-2)}
  .nav nav{order:3;flex:1 1 100%;overflow-x:auto;gap:var(--s-5);
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--line);padding-top:var(--s-3)}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{white-space:nowrap}
  .nav .btn{margin-left:auto}

  /* JS present: single row (logo · Download · menu) and a dropdown panel */
  html.js .nav .wrap{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  html.js .nav nav{display:none;position:absolute;top:100%;left:0;right:0;
    order:0;flex:none;overflow:visible;gap:0;padding:var(--s-2) var(--gutter) var(--s-3);
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md)}
  html.js header.nav.nav-open nav{display:flex;flex-direction:column}
  html.js header.nav.nav-open nav a{padding:12px 2px;border-bottom:1px solid var(--line)}
  html.js header.nav.nav-open nav a:last-child{border-bottom:0}
  html.js header.nav.nav-open nav a::after{display:none}
  html.js .nav-toggle{display:block}
}

@media (max-width:620px){
  .proof-row{grid-template-columns:minmax(0,1fr)}
  .proof-row div{border-right:0;border-bottom:1px solid var(--line);
    padding:var(--s-5) var(--s-4)}
  .proof-row div:last-child{border-bottom:0}
  .cards,.steps{grid-template-columns:minmax(0,1fr)}
  .fcols{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .win-body{grid-template-columns:minmax(0,1fr)}
  .win-body .pane:nth-child(2){display:none}
  .cta-row .btn{flex:1 1 100%}
  .logo{font-size:21px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- shared page patterns (multi-page) ---- */
.page-hero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(34px,5vw,54px);max-width:22ch}
.crumbs{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.prose{max-width:var(--maxw-prose)}
/* Content pages read better centred than hard against the left gutter. */
.pg > .wrap > .prose,
.pg > .wrap > .scroll,
.pg > .wrap > .logo-grid,
.pg > .wrap > .cta-row,
.pg > .wrap > p.fine{margin-left:auto;margin-right:auto}
.pg > .wrap > .logo-grid{max-width:var(--maxw-prose)}
/* Narrow tables sit with the prose; wide comparison tables (.cmp) need the
   full measure, or a 10-column grid collapses into a cramped scroll box. */
.pg > .wrap > .scroll:not(.cmp){max-width:var(--maxw-prose)}
.scroll.cmp{max-width:none}
.cmp table{min-width:860px}
.cmp td,.cmp th{white-space:normal}
.cmp th:first-child,.cmp td:first-child{position:sticky;left:0;z-index:2;
  background:var(--surface-2);border-right:1px solid var(--line-strong)}
.cmp th:first-child{z-index:3}
.prose h2{font-size:clamp(26px,3.4vw,34px);max-width:none;margin:56px 0 14px}
.prose h3{margin:32px 0 8px}
.prose p,.prose li{color:var(--muted);font-size:17px}
.prose p{margin:12px 0}
.prose ul,.prose ol{padding-left:22px;margin:12px 0}
.prose li{margin:6px 0}
.prose strong{color:var(--ink)}
.prose code,code.i{font-family:var(--mono);font-size:.88em;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.callout{border-left:4px solid var(--accent);background:var(--accent-soft);padding:14px 18px;border-radius:0 8px 8px 0;margin:20px 0;font-size:16px;color:var(--ink)}
.callout.warn{border-left-color:var(--amber-700);background:var(--warn-bg);color:var(--warn-ink)}
.callout p,.callout li{color:inherit;margin:4px 0}
.doc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start;padding:48px 0 80px}
.toc{position:sticky;top:88px;font-size:14.5px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 110px);overflow:auto}
.toc b{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc a{text-decoration:none;color:var(--muted);padding:5px 0;border-left:2px solid var(--line);padding-left:12px}
.toc a:hover{color:var(--ink);border-left-color:var(--accent)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pg{padding:56px 0}
.pg.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bigtable td:first-child,.bigtable th:first-child{font-weight:600}
.yes{color:var(--accent);font-weight:700}.no{color:var(--muted)}
.pill{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pill.ok{border-color:var(--accent);color:var(--accent)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.timeline{border-left:2px solid var(--line);margin:24px 0 0 8px;padding-left:28px;display:flex;flex-direction:column;gap:32px;max-width:78ch}
.timeline article{position:relative}
.timeline article::before{content:"";position:absolute;left:-36px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
.timeline h3{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.timeline ul{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:16.5px}
.timeline li{margin:5px 0}
@media (max-width:900px){.doc-layout{grid-template-columns:minmax(0,1fr);gap:24px}.toc{position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:6px 14px}.toc b{flex:1 1 100%}.toc a{border-left:0;padding-left:0}.grid2{grid-template-columns:minmax(0,1fr)}}

.prose a,.fine a,.legend a,li a{overflow-wrap:anywhere}
header.nav nav a[aria-current="page"]{color:var(--ink);font-weight:600}