/* ── SELF-HOSTED FONTS ────────────────────────────────────────────────────
   Copied verbatim from the previous homepage. These MUST stay self-hosted:
   _headers sets font-src 'self' and connect-src 'none', and the product
   claim on the security page is that you can count the requests leaving
   your machine. A Google Fonts link would be blocked by our own CSP and
   would falsify that claim in the same stroke.
   ─────────────────────────────────────────────────────────────────────── */
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f7.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f8.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f9.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f7.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f8.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f9.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CofferShield — shared design system
   ───────────────────────────────────────────────────────────────────────────
   Every value here was extracted from the existing homepage, not invented.
   The tokens were previously written only as var() fallbacks (642 of them,
   never declared), which meant the design system existed in 639 inline style
   attributes and nowhere else. Declaring them once makes eight pages share
   one visual language without changing a single colour.

   Nothing in this file introduces a new colour, a new font, or a new radius.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS: dark (canonical) ──────────────────────────────────────────── */
:root{
  --bg:#08120C; --bg2:#0C1A12; --bg3:#132A1C; --sunken:#050C08;
  --brass:#C8A24C; --brass2:#E7CB8A; --ink:#F2EEE1; --ok:#7CC98E;
  --onbrass:#08120C;
  --ink-a:242,238,225; --brass-a:200,162,76; --brass2-a:231,203,138;
  --ok-a:124,201,142; --warn-a:216,166,87; --glow-a:28,66,44;
  --navbg-a:8,18,12; --sunken-a:5,12,8; --sh-a:0,0,0; --sh-k:1;
  --dot1:#3A4A40; --dot2:#2A3A30;
  --t34:rgba(242,238,225,.34); --t4:rgba(242,238,225,.4);
  --t42:rgba(242,238,225,.42); --t44:rgba(242,238,225,.44);
  --t46:rgba(242,238,225,.46); --t48:rgba(242,238,225,.48);
  --t5:rgba(242,238,225,.5);   --t55:rgba(242,238,225,.55);
  --t58:rgba(242,238,225,.58); --t6:rgba(242,238,225,.6);
  --t62:rgba(242,238,225,.62); --t64:rgba(242,238,225,.64);
  --t66:rgba(242,238,225,.66); --t68:rgba(242,238,225,.68);
  --t8:rgba(242,238,225,.8);

  /* type */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing scale — one ratio, used everywhere, so rhythm is not per-section guesswork */
  --s1:8px; --s2:14px; --s3:22px; --s4:32px; --s5:48px; --s6:70px; --s7:104px; --s8:148px;
  --shell:1180px; --gut:28px;
  --r1:9px; --r2:14px; --r3:20px; --r4:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --hair:1px solid rgba(var(--ink-a),.07);
  --edge:1px solid rgba(var(--brass-a),.2);
}
html[data-theme="light"]{
  --bg:#F6F1E4; --bg2:#FFFDF6; --bg3:#FBF5E8; --sunken:#EFE8D6;
  --brass:#7A6220; --brass2:#5F4C17; --ink:#17251C; --ok:#276B43;
  --onbrass:#FFFDF6;
  --ink-a:23,37,28; --brass-a:122,98,32; --brass2-a:95,76,23;
  --ok-a:39,107,67; --warn-a:146,102,20; --glow-a:216,228,208;
  --navbg-a:255,253,246; --sunken-a:236,229,211; --sh-a:23,37,28; --sh-k:.3;
  --dot1:#C6BDA5; --dot2:#D9D1BB;
  --t34:#596257; --t4:#535c52; --t42:#515a50; --t44:#4f584e; --t46:#4d574d;
  --t48:#4b554b; --t5:#495349; --t55:#444e44; --t58:#414c42; --t6:#3f4a40;
  --t62:#3d483e; --t64:#3b463c; --t66:#39443b; --t68:#374239; --t8:#2b372e;
}

/* ── BASE ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit}

/* Focus: WCAG 2.4.7, and visible against both themes. */
:focus-visible{outline:2px solid var(--brass2);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brass);
  color:var(--onbrass);padding:12px 20px;border-radius:0 0 var(--r1) 0;font-weight:600}
.skip:focus{left:0}

/* ── LAYOUT ────────────────────────────────────────────────────────────── */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.shell-narrow{max-width:860px}
/* Sticky header is 76px tall; anchor targets need to clear it or the heading
   lands underneath. */
section[id],.faq-item[id],.prose h2[id]{scroll-margin-top:96px}
.sect{padding-block:var(--s7)}
.sect-tight{padding-block:var(--s6)}
.sect-rule{border-top:var(--hair)}
.sect-sunk{background:linear-gradient(180deg,var(--sunken),var(--bg) 62%)}
.stack>*+*{margin-top:var(--s3)}

/* ── TYPE ──────────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);display:block}
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7.4vw,96px);
  line-height:.98;letter-spacing:-.028em;text-wrap:balance}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,58px);
  line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.7vw,34px);
  line-height:1.14;letter-spacing:-.016em}
.d4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.68;color:var(--t66);
  max-width:62ch;text-wrap:pretty}
.body{font-size:15.5px;line-height:1.72;color:var(--t62);max-width:70ch;text-wrap:pretty}
/* The base reset zeroes every margin, so consecutive paragraphs ran together.
   Adjacent-sibling spacing keeps single paragraphs flush against whatever
   sets their own top margin, and only pays for the gap when there are two. */
.body+.body,.lede+.body,.body+.fine,.lede+.lede{margin-top:var(--s3)}
.fine{font-size:13.5px;line-height:1.7;color:var(--t5)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass)}
.gold{color:var(--brass)}
.head{max-width:680px}
.head .d2,.head .d1{margin-top:var(--s2)}
.head .lede{margin-top:var(--s3)}
.center{text-align:center}
.center .head,.center .lede{margin-inline:auto}

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;font-weight:600;font-size:15px;
  padding:15px 26px;border-radius:var(--r1);border:1px solid transparent;
  cursor:pointer;transition:transform .22s var(--ease),background .18s,
  border-color .18s,box-shadow .28s var(--ease);min-height:48px;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brass);color:var(--onbrass);
  border-color:rgba(var(--brass2-a),.5);
  box-shadow:0 12px 34px -16px rgba(var(--brass-a),calc(.9 * var(--sh-k)))}
.btn-primary:hover{background:var(--brass2);
  box-shadow:0 20px 46px -18px rgba(var(--brass-a),calc(1 * var(--sh-k)))}
.btn-ghost{background:rgba(var(--brass-a),.05);color:var(--ink);
  border-color:rgba(var(--brass-a),.28)}
.btn-ghost:hover{background:rgba(var(--brass-a),.1);border-color:rgba(var(--brass-a),.5)}
.btn-sm{font-size:13.5px;padding:11px 19px;min-height:40px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.center .btn-row{justify-content:center}
.arrow{transition:transform .28s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ── SURFACES ──────────────────────────────────────────────────────────────
   "Glass" without backdrop-filter on large areas. A full-bleed backdrop
   filter forces the compositor to re-raster everything behind it every
   frame — the same class of cost that took the hero from 27fps to 7fps
   earlier in this build. Layered gradients plus a 1px inner highlight read
   as glass at a fraction of the price, and they survive on iOS Safari,
   where large blurred layers are what caused the blank-while-scrolling bug.
   backdrop-filter is used in exactly one place: the 78px-tall header. */
.pane{position:relative;border:var(--edge);border-radius:var(--r3);
  background:
    linear-gradient(180deg,rgba(var(--ink-a),.045),rgba(var(--ink-a),.012) 40%,transparent),
    linear-gradient(140deg,rgba(var(--brass-a),.07),transparent 46%);
  box-shadow:inset 0 1px 0 rgba(var(--ink-a),.07),
             0 26px 60px -40px rgba(var(--sh-a),calc(.9 * var(--sh-k)))}
.card{position:relative;display:block;padding:26px 26px 24px;border:var(--edge);
  border-radius:var(--r2);background:rgba(var(--brass-a),.035);
  transition:border-color .2s,background .2s,transform .3s var(--ease)}
a.card:hover,.card-live:hover{border-color:rgba(var(--brass-a),.42);
  background:rgba(var(--brass-a),.06);transform:translateY(-3px)}
.card .d4{margin-bottom:var(--s1)}
.card p{font-size:14px;line-height:1.62;color:var(--t6);margin:0}
.grid{display:grid;gap:var(--s2)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))}
.split{display:grid;gap:var(--s6);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.panel{border:1px solid rgba(var(--brass-a),.22);border-radius:var(--r2);
  background:rgba(var(--brass-a),.05);padding:22px 24px}
.panel-warn{border-color:rgba(var(--warn-a),.22);background:rgba(var(--warn-a),.06);
  color:var(--brass2)}

/* ── PRODUCT MOCKUPS ───────────────────────────────────────────────────────
   Real screenshots of the running application, framed. The depth comes from
   four stacked shadows plus a 1px inset catch-light on the top edge, and the
   "glass" from two gradient overlays — not from backdrop-filter, which would
   force the compositor to re-raster everything behind a 700px surface on
   every frame. That cost is what took the old hero from 27fps to 7fps and
   what starved iOS Safari's tile memory. */
.mockup{position:relative;isolation:isolate}
/* Ambient light behind the frame. The ellipse has to reach full transparency
   well inside its own box, or the box edge shows as a faint rectangle above
   the screenshot — which is what it did at 72%. */
.mockup::before{content:"";position:absolute;inset:-26% 0 -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(74% 40% at 50% 24%,rgba(var(--brass-a),.15),rgba(var(--brass-a),.05) 44%,transparent 66%)}
/* The screenshots are dark-on-dark against a dark page, so separation has to
   come from the frame rather than from contrast in the image. A brighter rim,
   a 1px inner catch-light and a wide gold-tinted ambient shadow lift it off
   the page without touching a pixel of the screenshot itself. */
.mockup-frame{position:relative;border-radius:var(--r3);overflow:hidden;
  border:1px solid rgba(var(--brass-a),.44);background:var(--sunken);
  box-shadow:
    inset 0 1px 0 rgba(var(--ink-a),.2),
    0 0 0 1px rgba(var(--sh-a),calc(.55 * var(--sh-k))),
    0 3px 8px -2px rgba(var(--sh-a),calc(.55 * var(--sh-k))),
    0 20px 38px -18px rgba(var(--sh-a),calc(.75 * var(--sh-k))),
    0 60px 100px -44px rgba(var(--sh-a),calc(.95 * var(--sh-k))),
    0 80px 160px -66px rgba(var(--brass-a),calc(.34 * var(--sh-k)))}
.mockup-frame img{display:block;width:100%;height:auto;border-radius:inherit}
/* Light from the upper left, and a fade where the screenshot is cropped so
   the cut reads as "there is more" rather than as a mistake. */
.mockup-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(134deg,rgba(255,255,255,.05),rgba(255,255,255,.008) 20%,transparent 38%),
    linear-gradient(180deg,transparent 84%,rgba(var(--sunken-a),.42) 95%,rgba(var(--sunken-a),.72))}
html[data-theme="light"] .mockup-frame::after{
  background:linear-gradient(134deg,rgba(255,255,255,.5),transparent 42%),
             linear-gradient(180deg,transparent 70%,rgba(var(--sunken-a),.42) 92%,rgba(var(--sunken-a),.72))}
.mockup-cap{display:block;margin-top:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);opacity:.9}

/* The hero: a second, smaller frame floating over the first. Transform only,
   so it stays on the compositor. Hidden below 1024px, where it would cover
   the screenshot it is meant to add depth to. */
.mockup-stack{position:relative}
.mockup-float{display:none}
@media (min-width:1024px){
  /* transform-origin on the right edge, so the tilt rotates the frame INTO the
     column rather than pushing its right edge past the viewport. */
  .mockup-stack .mockup-frame{transform:perspective(2200px) rotateY(-2.6deg) rotateX(1.1deg);
    transform-origin:100% 50%;transition:transform .7s var(--ease)}
  .mockup-stack:hover .mockup-frame{transform:perspective(2200px) rotateY(-.8deg) rotateX(.3deg)}
  .mockup-float{display:block;position:absolute;left:-8%;bottom:-11%;width:46%;z-index:2}
  .mockup-float .mockup-frame{border-radius:var(--r2);transform-origin:50% 50%;
    transform:perspective(2200px) rotateY(-2.6deg) rotateX(1.1deg)}
  .mockup-stack:hover .mockup-float .mockup-frame{transform:perspective(2200px) rotateY(-.8deg) rotateX(.3deg)}
}
@media (prefers-reduced-motion:reduce){
  .mockup-stack .mockup-frame,.mockup-stack:hover .mockup-frame,
  .mockup-float .mockup-frame,.mockup-stack:hover .mockup-float .mockup-frame{transform:none;transition:none}
}

/* ── EXTERNAL LINK ─────────────────────────────────────────────────────────*/
.ext{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
a:hover .ext{transform:translate(2px,-2px)}

/* ── ICONS ─────────────────────────────────────────────────────────────────
   Outlined, 1.6 stroke, currentColor. No filled shapes, no decorative
   circles — the brief asked for meaning rather than ornament. */
.ico{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:30px;height:30px}
.ico-tile{width:52px;height:52px;display:grid;place-items:center;flex:none;
  border-radius:var(--r2);border:1px solid rgba(var(--brass-a),.24);
  background:rgba(var(--brass-a),.06);color:var(--brass2)}

/* ── STAT STRIP (icons, not rings) ─────────────────────────────────────── */
.stats{display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr))}
.stat{display:flex;gap:14px;align-items:flex-start;padding:22px 20px;
  border:var(--hair);border-radius:var(--r2);background:rgba(var(--ink-a),.02)}
.stat-n{font-family:var(--serif);font-size:32px;line-height:1;color:var(--ink);
  display:block;letter-spacing:-.02em}
.stat-l{font-size:12.5px;line-height:1.45;color:var(--t58);margin-top:7px;display:block}

/* ── COMPARISON TABLE ──────────────────────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp caption{text-align:left;color:var(--t5);font-size:13.5px;padding-bottom:var(--s2)}
.cmp th,.cmp td{padding:15px 16px;border-bottom:var(--hair);text-align:left;vertical-align:middle}
.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);font-weight:500;border-bottom:1px solid rgba(var(--brass-a),.3)}
.cmp tbody th{font-weight:400;color:var(--t68);width:40%}
.cmp td{text-align:center;width:30%}
.cmp .col-us{background:rgba(var(--brass-a),.05)}
.yes{color:var(--ok)}.no{color:var(--t34)}
.cmp-note{margin-top:var(--s3);font-size:13.5px;color:var(--t5);line-height:1.7;max-width:74ch}

/* ── HEADER ────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(var(--navbg-a),.82);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(var(--brass-a),.14)}
.hdr-bar{display:flex;align-items:center;gap:18px;min-height:76px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-txt{font-family:var(--serif);font-size:20px;letter-spacing:.19em;text-indent:.19em}
.nav{display:flex;align-items:center;gap:1px;margin-left:auto}
.nav a{font-size:13.5px;color:var(--t62);padding:9px 12px;border-radius:8px;
  transition:color .18s,background .18s;white-space:nowrap}
.nav a:hover{color:var(--ink);background:rgba(var(--brass-a),.08)}
.nav a[aria-current="page"]{color:var(--brass2);background:rgba(var(--brass-a),.1)}
.hdr-cta{flex:none}
.burger{display:none;flex:none;width:44px;height:44px;place-items:center;
  background:none;border:1px solid rgba(var(--brass-a),.24);border-radius:var(--r1);cursor:pointer}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--brass),var(--brass2));transform-origin:0 50%;
  transition:width .1s linear}
/* Below 1080 the seven nav links move into the drawer. Below 700 the header
   CTA goes too: at 390px the brand, the theme toggle, the CTA and the burger
   together were 247px wider than the viewport, which is what was pushing the
   whole page sideways. The drawer carries the CTA at full width instead. */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
  .hdr-bar{gap:12px}
}
@media (max-width:700px){
  .hdr .btn-ghost[data-theme-toggle] span[data-theme-name]{display:none}
  .hdr .btn-ghost[data-theme-toggle]{padding:0 12px}
}
@media (max-width:560px){
  .hdr-cta{display:none}
}
/* Drawer: a real <dialog>-less panel, focus-trapped in JS, ESC to close. */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease),visibility .3s}
.drawer[data-open]{visibility:visible;opacity:1}
.drawer-scrim{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(88vw,360px);
  background:var(--bg2);border-left:1px solid rgba(var(--brass-a),.18);
  padding:22px 24px;overflow-y:auto;transform:translateX(14px);
  transition:transform .34s var(--ease)}
.drawer[data-open] .drawer-panel{transform:none}
.drawer-panel a{display:block;padding:14px 2px;font-size:17px;color:var(--t8);
  border-bottom:var(--hair)}
.drawer-panel a[aria-current="page"]{color:var(--brass2)}
/* .drawer-panel a is more specific than .btn-primary, so without this the
   drawer's gold CTA inherited light link text on a gold fill — about 1.9:1. */
.drawer-panel a.btn-primary{color:var(--onbrass);border-bottom:1px solid transparent}
.drawer-panel a.btn{border-bottom:none}

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.ftr{position:relative;border-top:var(--hair);padding:var(--s6) 0 var(--s4)}
/* A named first track plus repeat(auto-fit) cannot wrap: the explicit 280px
   column and four 140px tracks demanded 840px, which is what made the footer
   488px wide inside a 390px viewport and pushed the whole page sideways.
   One uniform auto-fit track wraps properly; the brand block just spans two. */
.ftr-grid{display:grid;gap:var(--s5) var(--s4);margin-bottom:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,152px),1fr))}
.ftr-brand{grid-column:span 2;min-width:0}
@media (max-width:760px){.ftr-brand{grid-column:1/-1}}
.ftr h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s2);font-weight:500}
.ftr-col{display:flex;flex-direction:column;gap:11px}
.ftr-col a{font-size:14px;color:var(--t58);transition:color .18s}
.ftr-col a:hover{color:var(--brass2)}
.ftr-base{border-top:var(--hair);padding-top:var(--s3);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--t42)}
@media (pointer:coarse){.ftr-col a,.nav a{min-height:32px;display:flex;align-items:center}}

/* ── FAQ ACCORDION ─────────────────────────────────────────────────────── */
.faq-item{border-bottom:var(--hair)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:18px;text-align:left;padding:24px 2px;font-family:var(--serif);font-size:20px;
  background:none;border:none;cursor:pointer;transition:color .2s;color:var(--ink)}
.faq-q:hover{color:var(--brass2)}
.faq-i{width:22px;height:22px;flex:none;position:relative;
  transition:transform .3s var(--ease)}
.faq-i i{position:absolute;background:var(--brass);border-radius:2px}
.faq-i i:first-child{top:10px;left:2px;right:2px;height:2px}
.faq-i i:last-child{left:10px;top:2px;bottom:2px;width:2px;transition:opacity .3s}
.faq-q[aria-expanded="true"] .faq-i{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .faq-i i:last-child{opacity:0}
.faq-a{overflow:hidden;max-height:0;transition:max-height .38s var(--ease)}
.faq-a p{padding:0 2px 26px;font-size:15px;color:var(--t62);line-height:1.72;max-width:700px}
.faq-a a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}

/* ── STEPS ─────────────────────────────────────────────────────────────── */
.steps{display:grid;gap:var(--s2);counter-reset:step;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.step{position:relative;padding:26px 24px 24px;border:var(--edge);
  border-radius:var(--r2);background:rgba(var(--brass-a),.035)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass);
  display:block;margin-bottom:14px}
.step h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;
  margin-bottom:var(--s1)}
.step p{font-size:14px;line-height:1.62;color:var(--t6)}

/* ── PROSE (doc-style pages) ───────────────────────────────────────────── */
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);
  line-height:1.14;letter-spacing:-.016em;margin:var(--s6) 0 var(--s2)}
.prose h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:var(--s4) 0 var(--s1)}
.prose p{font-size:16px;line-height:1.75;color:var(--t66);margin-bottom:var(--s3);max-width:72ch}
.prose ul{margin:0 0 var(--s3);max-width:72ch}
.prose li{position:relative;padding-left:24px;margin-bottom:11px;font-size:15.5px;
  line-height:1.7;color:var(--t62)}
.prose li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--brass)}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}

/* ── UTIL ──────────────────────────────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hr{border:none;border-top:var(--hair);margin:0}
@media (max-width:620px){
  :root{--gut:20px;--s7:76px;--s6:54px}
  /* Full-width buttons in content, NOT in the header: an unscoped .btn rule
     here stretched the header CTA to 100% of the shell and broke the bar. */
  .btn-row .btn{width:100%;flex:1 1 100%}
  .d1{font-size:clamp(38px,11vw,60px)}
  .split{gap:var(--s5)}
  .cmp th,.cmp td{padding:13px 10px;font-size:14px}
  .cmp tbody th{width:52%}
}