/* ============================================================
   AI Gambling Marketing — site.css
   Mobile-first responsive system. Supported range: 280px → 3840px.
   No framework. No preprocessor. ~14KB before gzip.
   ============================================================ */

/* ---------- 1. FONTS (self-hosted, subset, woff2 only) ---------- */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20A0-20BF}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20A0-20BF}
@font-face{font-family:'InstrumentSans';src:url('/assets/fonts/instrument-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20A0-20BF}
@font-face{font-family:'InstrumentSans';src:url('/assets/fonts/instrument-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20A0-20BF}
@font-face{font-family:'PlexMono';src:url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
/* CJK + Devanagari load only on those locales — see [lang] rules in §11 */

/* ---------- 2. TOKENS ---------- */
:root{
  /* colour */
  --ink:#0D1210; --ink2:#141B18; --ink3:#1B2420; --rule:#28322D;
  --bone:#EFE9DC; --bone-dim:#BDBAB0; --muted:#8A948F;
  --brass:#C9963F; --brass-lo:#8A6526; --brass-hi:#E8C888;
  --up:#57BE8E; --down:#D2695F;

  /* fluid type — scales continuously, no jumps between breakpoints */
  --t-xs:  clamp(0.66rem, 0.63rem + 0.15vw, 0.75rem);
  --t-sm:  clamp(0.81rem, 0.78rem + 0.16vw, 0.90rem);
  --t-base:clamp(0.97rem, 0.94rem + 0.18vw, 1.07rem);
  --t-md:  clamp(1.06rem, 1.00rem + 0.30vw, 1.20rem);
  --t-lg:  clamp(1.19rem, 1.10rem + 0.45vw, 1.44rem);
  --t-xl:  clamp(1.50rem, 1.28rem + 1.10vw, 2.37rem);
  --t-2xl: clamp(1.87rem, 1.45rem + 2.10vw, 3.44rem);
  --t-3xl: clamp(2.12rem, 1.50rem + 3.10vw, 4.25rem);

  /* fluid spacing */
  --s-1:clamp(.25rem,.24rem + .06vw,.31rem);
  --s-2:clamp(.5rem,.47rem + .12vw,.62rem);
  --s-3:clamp(.75rem,.71rem + .19vw,.94rem);
  --s-4:clamp(1rem,.94rem + .25vw,1.25rem);
  --s-5:clamp(1.25rem,1.17rem + .31vw,1.56rem);
  --s-6:clamp(1.5rem,1.41rem + .37vw,1.87rem);
  --s-8:clamp(2rem,1.75rem + 1.1vw,3rem);
  --s-12:clamp(3rem,2.4rem + 2.6vw,5.5rem);
  --s-16:clamp(3.5rem,2.6rem + 4vw,7rem);

  /* measure — Bringhurst 45–75 CPL, 66 optimal, WCAG 1.4.8 ceiling 80 */
  --measure:66ch;
  --measure-narrow:56ch;   /* ledes, large type — shorter measure for bigger text */
  --measure-cjk:40ch;      /* WCAG limit for CJK */

  /* vertical rhythm — multiples of body line-height (1.62 × 1rem ≈ 26px) */
  --rhythm:1.62rem;

  /* layout */
  --maxw:1220px;
  --pad:clamp(16px,4.2vw,48px);
  --tap:44px;                 /* WCAG minimum touch target */
  --header-h:60px;

  --f-display:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --f-body:'Instrument Sans','InstrumentSans',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono','PlexMono',ui-monospace,'SFMono-Regular',monospace;
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;      /* stop iOS landscape auto-inflation */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s-4));
}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;                    /* clip beats hidden — no scroll-anchor break */
  min-height:100dvh;                  /* dvh, not vh — mobile browser chrome */
  overflow-wrap:break-word;
  padding-bottom:env(safe-area-inset-bottom);
}
img,video,svg,canvas{display:block;max-width:100%;height:auto}
img{aspect-ratio:attr(width)/attr(height)}   /* CLS guard where dims are set */
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--ink)}

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:max(var(--pad),env(safe-area-inset-left),env(safe-area-inset-right));
}
.section{padding-block:var(--s-16)}
.stack>*+*{margin-top:var(--s-4)}

/* Auto-responsive grid: no breakpoints needed, columns fit themselves */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.grid>*{background:var(--ink);padding:var(--s-6);position:relative;transition:background .2s}
.grid>*::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
@media (hover:hover){.grid>*:hover{background:var(--ink2)}.grid>*:hover::after{transform:scaleX(1)}}

/* Two-column page shell — collapses on its own, no media query */
.shell{
  display:grid;gap:var(--s-8);
  /* single column until there is genuinely room for a sidebar. auto-fit here
     produced two equal columns, which left the reading column too narrow and
     the sidebar far too wide. */
  grid-template-columns:1fr;
  padding-block:var(--s-12);
}
@media (min-width:64rem){
  .shell{grid-template-columns:minmax(0,1fr) 19.5rem}
  .shell__side{position:sticky;top:calc(var(--header-h) + var(--s-4));align-self:start}
}
/* Short viewports (landscape phones): sticky sidebars trap content */
@media (max-height:34rem){.shell__side{position:static}}

/* ---------- 5. TYPE ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg);letter-spacing:-.015em;line-height:1.24}
h4{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em}
p{color:var(--bone-dim);text-wrap:pretty}
.lede{font-size:var(--t-md);max-width:var(--measure-narrow);line-height:1.5}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:var(--rhythm);max-width:var(--measure)}
.prose>*{max-width:var(--measure)}
.prose h2{max-width:var(--measure-narrow)}
/* every text block on the page shares one right edge */
.measure{max-width:var(--measure)}
.measure-narrow{max-width:var(--measure-narrow)}
.prose h2{margin:var(--s-12) 0 var(--s-3)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--s-8) 0 var(--s-2)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";inline-size:1.4em;block-size:1px;background:var(--brass);flex:none}
.eyebrow__n{color:var(--brass-lo);letter-spacing:.1em}
.prose h2{position:relative}
@media (hover:hover) and (min-width:64rem){
  .prose h2::before{
    content:"§";position:absolute;inset-inline-start:-1.2em;color:var(--brass-lo);
    font-family:var(--f-mono);font-size:.55em;opacity:0;transition:opacity .18s;top:.35em;
  }
  .prose h2:hover::before{opacity:1}
}

/* ---------- 6. CONTROLS (touch-safe everywhere) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-block-size:var(--tap);min-inline-size:var(--tap);
  padding:var(--s-3) var(--s-4);
  font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--brass);color:var(--brass);background:transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.btn--solid{background:var(--brass);color:var(--ink)}
.btn--ghost{border-color:var(--rule);color:var(--bone-dim)}
@media (hover:hover) and (pointer:fine){   /* no sticky :hover on touch devices */
  .btn:hover{background:var(--brass);color:var(--ink)}
  .btn--solid:hover{background:var(--brass-hi)}
  .btn--ghost:hover{border-color:var(--bone-dim);color:var(--bone)}
}
.btn:active{transform:translateY(1px)}
input,select,textarea{
  inline-size:100%;min-block-size:var(--tap);
  background:var(--ink);border:1px solid var(--rule);color:var(--bone);
  padding:var(--s-3) var(--s-4);font-family:var(--f-mono);
  font-size:max(1rem,var(--t-sm));       /* ≥16px stops iOS zoom-on-focus */
}
input:focus{border-color:var(--brass);outline:none}

/* ---------- 7. HEADER ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--ink) 90%,transparent);
  border-block-end:1px solid transparent;
  padding-top:env(safe-area-inset-top);
  transition:border-color .25s,background .25s;
}
@supports (backdrop-filter:blur(1px)){.header{backdrop-filter:blur(16px) saturate(1.3)}}
.header.is-stuck{border-block-end-color:var(--rule);background:color-mix(in srgb,var(--ink) 96%,transparent)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-block-size:var(--header-h)}

/* desktop nav */
.nav{display:none}
@media (min-width:64rem){.nav{display:flex;gap:var(--s-2);align-items:center}}
.nav__btn{
  display:inline-flex;align-items:center;gap:.4em;background:none;border:0;cursor:pointer;
  font-size:var(--t-sm);color:var(--bone-dim);padding:.55em .7em;position:relative;
  transition:color .16s;font-family:inherit;
}
.nav__btn::after{
  content:"";position:absolute;inset-inline:.7em;inset-block-end:.15em;block-size:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .24s;
}
@media (hover:hover){.nav__btn:hover{color:var(--bone)}.nav__btn:hover::after{transform:scaleX(1)}}
.nav__btn[aria-expanded="true"]{color:var(--brass-hi)}
.nav__btn[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__caret{
  inline-size:.55em;block-size:.55em;border-inline-end:1px solid currentColor;border-block-end:1px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);transition:transform .24s;opacity:.7;
}
.nav__btn[aria-expanded="true"] .nav__caret{transform:rotate(225deg) translateY(-.12em)}

/* mega panel */
.mega{
  position:absolute;inset-inline:0;inset-block-start:100%;
  background:var(--ink2);border-block:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega__in{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(24px,2.6vw,36px) var(--pad);
  display:grid;gap:clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.mega__col h5{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:var(--s-3);
  padding-block-end:var(--s-3);border-block-end:1px solid var(--rule);
}
.mega__col a{
  display:block;font-size:var(--t-sm);color:var(--bone-dim);
  padding-block:calc(var(--s-2) - 1px);transition:color .16s;
}
.mega__col a small{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px;line-height:1.45}
@media (hover:hover){.mega__col a:hover{color:var(--brass-hi)}}
.mega__feat{
  border:1px solid var(--brass-lo);background:rgba(201,150,63,.06);
  padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);text-decoration:none;
  transition:background .2s;
}
@media (hover:hover){.mega__feat:hover{background:rgba(201,150,63,.12)}.mega__feat:hover i{transform:translateX(4px)}}
.mega__feat b{font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);color:var(--brass-hi);letter-spacing:-.015em}
.mega__feat span{font-size:var(--t-xs);color:var(--bone-dim);line-height:1.55}
.mega__feat em{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);font-style:normal;margin-block-start:auto;display:inline-flex;gap:.4em;align-items:center;
}
.mega__feat i{font-style:normal;transition:transform .22s}

/* mobile */
.menu-btn{display:grid;place-items:center;inline-size:var(--tap);block-size:var(--tap);border:1px solid var(--rule);background:transparent;cursor:pointer;color:inherit}
@media (min-width:64rem){.menu-btn{display:none}}
.drawer{
  display:none;border-block-start:1px solid var(--rule);background:var(--ink2);
  max-block-size:calc(100dvh - var(--header-h));overflow-y:auto;
}
.drawer[open]{display:block}
.drawer__in{padding-block:var(--s-4) var(--s-8)}
.drawer__g + .drawer__g{margin-block-start:var(--s-6)}
.drawer__g h5{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;padding-block-end:var(--s-2);
  border-block-end:1px solid var(--rule);margin-bottom:var(--s-2);
}
.drawer__g a{display:block;font-size:var(--t-md);color:var(--bone-dim);padding-block:var(--s-3);min-block-size:var(--tap)}
.drawer .btn{inline-size:100%;justify-content:center;margin-block-start:var(--s-6)}

/* ---------- 8. RESPONSIVE DATA TABLES ---------- */
/* Wide screens: real table. Narrow: each row becomes a labelled card. */
.dt{border:1px solid var(--rule)}
.dt__row{display:grid;border-bottom:1px solid var(--rule);grid-template-columns:1fr}
.dt__row:last-child{border-bottom:0}
.dt__k{
  padding:var(--s-3) var(--s-4);font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--ink2);
  border-bottom:1px solid var(--rule);
}
.dt__v{padding:var(--s-3) var(--s-4);font-size:var(--t-sm);color:var(--bone-dim)}
@media (min-width:40rem){
  .dt__row{grid-template-columns:minmax(9rem,14rem) 1fr}
  .dt__k{border-bottom:0;border-right:1px solid var(--rule)}
}

/* The Board — 5 cols on desktop, 3 on phones, horizontally scrollable if forced */
.board{border:1px solid var(--rule);background:var(--ink2)}
.board__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.board__row,.board__cols{
  display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4);align-items:center;
  grid-template-columns:minmax(7.5rem,1.5fr) repeat(2,minmax(3rem,.8fr));
}
@media (min-width:48rem){
  .board__row,.board__cols{grid-template-columns:1.5fr repeat(4,.8fr)}
}
.board__cols{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
.board__row{border-bottom:1px solid rgba(40,50,45,.55)}
.board__row:last-child{border-bottom:0}
.board .opt{display:none}
@media (min-width:48rem){.board .opt{display:block}}

/* ---------- 9. CONTAINER QUERIES ---------- */
/* Cards adapt to the column they sit in, not the viewport — so the same
   component works in a 19rem sidebar and a 60rem main column. */
.card{container-type:inline-size;border:1px solid var(--rule);background:var(--ink2);padding:var(--s-6)}
@container (min-width:26rem){
  .card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}
  .card .btn{inline-size:auto}
}
@container (max-width:26rem){
  .card .btn{inline-size:100%}
}

/* ---------- 10. VIEWPORT EDGE CASES ---------- */
/* 280px — Galaxy Fold closed, smallest device we support */
@media (max-width:22.5rem){
  :root{--pad:14px}
  .btn{padding-inline:var(--s-3);font-size:var(--t-xs)}
  h1{letter-spacing:-.02em}
}
/* Landscape phone — vertical space is the scarce resource */
@media (max-height:30rem) and (orientation:landscape){
  :root{--s-16:2.5rem;--s-12:2rem;--header-h:48px}
  .header{position:static}
}
/* Tablet portrait — two columns, not four */
@media (min-width:48rem) and (max-width:63.99rem){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
/* Large desktop — cap the container, let gutters grow */
@media (min-width:90rem){
  :root{--maxw:1320px}
}
/* 4K / ultra-wide — nudge type up, never stretch measure */
@media (min-width:120rem){
  :root{--maxw:1440px}
  html{font-size:18px}
}
/* Foldable / dual-screen — avoid content landing in the hinge */
@media (horizontal-viewport-segments:2){
  .shell{grid-template-columns:1fr;gap:var(--s-12)}
}

/* ---------- 11. INTERNATIONAL ---------- */
[lang^="ja"],[lang^="ko"],[lang^="zh"]{
  --f-display:'Archivo','Archivo Fallback','Hiragino Sans','Noto Sans JP',sans-serif;
  --f-body:'Instrument Sans','InstrumentSans','Hiragino Sans','Noto Sans JP',sans-serif;
  line-height:1.8;                         /* CJK needs more leading */
  letter-spacing:.01em;
}
[lang^="ja"] h1,[lang^="ko"] h1{letter-spacing:0;line-height:1.3}
[lang^="ja"],[lang^="ko"],[lang^="zh"]{--measure:40ch;--measure-narrow:34ch}
[lang^="hi"],[lang^="bn"]{
  --f-body:'Instrument Sans','InstrumentSans','Noto Sans Devanagari',sans-serif;
  line-height:1.75;
}
[lang^="de"],[lang^="fi"]{hyphens:auto}    /* long compounds need breaking */
[dir="rtl"] .eyebrow::before{order:2}
[dir="rtl"] .dt__k{border-right:0;border-left:1px solid var(--rule)}

/* ---------- 12. USER PREFERENCES ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (prefers-contrast:more){
  :root{--bone-dim:#E4DED2;--muted:#B4BCB7;--rule:#4A5750}
}
@media (forced-colors:active){
  .btn{border:1px solid ButtonText}
  .grid,.dt,.board{border:1px solid CanvasText}
}
@media print{
  .header,.drawer,.board,.btn,.menu-btn{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .prose{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- STICKY MOBILE CTA ---------- */
.cta-bar{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:70;
  display:none;gap:var(--s-3);align-items:center;justify-content:space-between;
  padding:var(--s-3) var(--pad) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ink2) 94%,transparent);
  border-block-start:1px solid var(--rule);
  transform:translateY(110%);transition:transform .3s ease;
}
@supports (backdrop-filter:blur(1px)){.cta-bar{backdrop-filter:blur(14px)}}
.cta-bar.show{transform:none}
.cta-bar__t{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.06em}
@media (max-width:60rem){.cta-bar{display:flex}body{padding-bottom:4.5rem}}

/* ---------- SCROLL REVEAL ---------- */
/* scoped to html.js so content is never hidden before or without JS */
/* DISABLED. This rule hid four homepage sections twice — once with no JS,
   once because IntersectionObserver had not fired yet. A fade-in is not worth
   a page that can render 40% blank. Content is never opacity:0 at rest. */
.reveal{opacity:1;transform:none}

/* ---------- LOGO ---------- */
.logo{display:flex;align-items:center;gap:.6rem}
.logo svg{flex:none;display:block}
.logo__bar{transition:transform .35s cubic-bezier(.4,0,.2,1);transform-origin:bottom}
@media (hover:hover){.logo:hover .logo__bar:nth-child(1){transform:scaleY(1.25)}
.logo:hover .logo__bar:nth-child(2){transform:scaleY(1.15)}
.logo:hover .logo__bar:nth-child(3){transform:scaleY(1.3)}}
.logo__w{font-family:var(--f-display);font-weight:800;font-size:var(--t-sm);letter-spacing:-.035em;line-height:1}
.logo__t{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;color:var(--brass);text-transform:uppercase;margin-top:5px;display:block}

/* ---------- PROSE LINKS & OPTICAL DETAIL ---------- */
.prose a:not(.btn){
  color:var(--bone);text-decoration:underline;
  text-decoration-color:var(--brass-lo);text-decoration-thickness:1px;
  text-underline-offset:.22em;transition:text-decoration-color .16s,color .16s;
}
@media (hover:hover){.prose a:not(.btn):hover{color:var(--brass-hi);text-decoration-color:var(--brass)}}
blockquote{text-wrap:pretty;hanging-punctuation:first last}
h3 a{text-decoration:none;background-image:linear-gradient(var(--brass),var(--brass));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .28s}
@media (hover:hover){h3 a:hover{color:var(--brass-hi);background-size:100% 1px}}
/* numeric alignment everywhere figures appear */
.mono,table,.dt__v{font-variant-numeric:tabular-nums lining-nums}
/* stop widows on short headings */
h2,h3,h4,.lede{text-wrap:balance}
.prose p{text-wrap:pretty}

/* ---------- FOUNDER BLOCK ---------- */
.founder{
  display:grid;grid-template-columns:1fr;
  border:1px solid var(--rule);background:var(--ink2);overflow:hidden;
}
@media (min-width:52rem){
  .founder{grid-template-columns:minmax(15rem,36%) 1fr}
}

/* media column — photograph, not thumbnail */
.founder__media{position:relative;background:var(--ink3);isolation:isolate}
.founder__media img{
  display:block;inline-size:100%;block-size:100%;
  object-fit:cover;object-position:50% 20%;
  aspect-ratio:3/4;
  filter:contrast(1.05) saturate(.9);
}
@media (min-width:52rem){
  .founder__media img{aspect-ratio:auto;position:absolute;inset:0}
}
/* palette tie-in: brass wash so the photo belongs to the page */
.founder__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brass);opacity:.14;mix-blend-mode:soft-light;
}
/* scrim so the name plate stays legible */
.founder__media::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:45%;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,18,16,0),rgba(13,18,16,.88));
}
.founder__plate{
  position:absolute;z-index:2;inset-inline-start:var(--s-4);inset-block-end:var(--s-4);
  border-inline-start:2px solid var(--brass);padding-inline-start:var(--s-3);
}
.founder__name{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:var(--t-md);letter-spacing:-.025em;line-height:1.1;color:var(--bone);
}
.founder__role{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-hi);margin-top:6px;
}

/* body column */
.founder__body{
  padding:clamp(24px,4vw,48px);
  display:flex;flex-direction:column;gap:var(--s-4);
  border-block-start:1px solid var(--rule);
}
@media (min-width:52rem){
  .founder__body{border-block-start:0;border-inline-start:1px solid var(--rule)}
}
.founder__body h2{font-size:var(--t-xl);letter-spacing:-.038em;max-width:17ch;text-wrap:balance}
.founder__body p{max-width:56ch;margin:0;line-height:1.62}

/* credential row */
.founder__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-block-start:1px solid var(--rule);margin-top:var(--s-2);
}
.founder__stat{padding:var(--s-5,1.25rem) var(--s-3) 0 0}
.founder__stat + .founder__stat{padding-inline-start:var(--s-4);border-inline-start:1px solid var(--rule)}
.founder__stat b{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);letter-spacing:-.045em;line-height:.95;
  color:var(--bone);font-variant-numeric:tabular-nums lining-nums;
}
.founder__stat span{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px;line-height:1.45;
}
.founder__sig{
  font-family:var(--f-display);font-weight:600;font-size:var(--t-md);
  letter-spacing:-.02em;color:var(--brass-hi);line-height:1.35;
  border-inline-start:2px solid var(--brass-lo);padding-inline-start:var(--s-4);
  margin-block:var(--s-2);text-wrap:pretty;
}
@media (max-width:30rem){
  .founder__stats{grid-template-columns:1fr}
  .founder__stat + .founder__stat{padding-inline-start:0;border-inline-start:0;border-block-start:1px solid var(--rule)}
}

/* ---------- HERO ---------- */
.hero{overflow:hidden;position:relative;padding-block:clamp(40px,6vw,84px) clamp(32px,5vw,64px)}
/* depth: faint grid + brass bloom behind the board */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:64px 64px;opacity:.18;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}
.hero::after{
  content:"";position:absolute;inset-block-start:-10%;inset-inline-end:-5%;
  inline-size:44rem;block-size:34rem;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(201,150,63,.16),transparent 62%);
}
.hero__grid{
  display:grid;gap:clamp(28px,4vw,56px);align-items:stretch;
  grid-template-columns:1fr;
}
@media (min-width:60rem){.hero__grid{grid-template-columns:1.02fr .98fr}}
.hero__copy{display:flex;flex-direction:column;justify-content:center}
.hero h1{
  font-size:clamp(2.1rem,1.1rem + 3.4vw,3.7rem);
  line-height:1.02;letter-spacing:-.042em;max-width:15ch;margin-top:var(--s-4);
}
.hero .lede{margin-top:var(--s-5,1.25rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero__cta .btn{min-block-size:3rem;padding-inline:var(--s-6)}

/* ---------- BOARD ---------- */
.board{
  border:1px solid var(--rule);background:var(--ink2);
  display:flex;flex-direction:column;min-block-size:100%;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9);
}
.board__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-block-end:1px solid var(--rule);background:var(--ink3);
  flex-wrap:wrap;
}
.board__title{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.board__scope{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:.2em .6em}
.board__live{display:flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.board__rows{flex:1;display:flex;flex-direction:column}
.board__cols,.board__row{
  display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4);align-items:center;
  grid-template-columns:minmax(6.5rem,1.45fr) repeat(2,minmax(2.6rem,.62fr));
}
@media (min-width:30rem){.board__cols,.board__row{grid-template-columns:minmax(8rem,1.5fr) repeat(3,minmax(2.8rem,.66fr))}}
@media (min-width:60rem){.board__cols,.board__row{grid-template-columns:minmax(9rem,1.55fr) repeat(4,minmax(2.9rem,.7fr))}}
.board__cols{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-block-end:1px solid var(--rule);
}
.board__row{
  flex:1;border-block-end:1px solid rgba(40,50,45,.55);
  transition:background .45s;text-decoration:none;
}
.board__row:last-child{border-block-end:0}
.board__row.flash{background:rgba(201,150,63,.09)}
.board__brand{font-size:var(--t-sm);font-weight:500;color:var(--bone);letter-spacing:-.012em;display:block}
.board__tag{
  font-family:var(--f-mono);font-size:9.5px;color:var(--muted);display:block;margin-top:3px;
  letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.board__v{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--bone-dim);text-align:right;font-variant-numeric:tabular-nums lining-nums}
.board__mv{font-family:var(--f-mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.board__mv.u{color:var(--up)}.board__mv.d{color:var(--down)}
.board__you{
  background:rgba(201,150,63,.075);border-inline-start:2px solid var(--brass);position:relative;
}
.board__you .board__brand{color:var(--brass-hi)}
.board__you .board__tag{color:var(--brass-lo)}
@media (hover:hover){.board__you:hover{background:rgba(201,150,63,.14)}}
.board__you::after{
  content:"→";position:absolute;inset-inline-end:var(--s-4);inset-block-start:50%;
  transform:translateY(-50%);color:var(--brass);font-family:var(--f-mono);
  opacity:0;transition:opacity .2s,transform .2s;
}
@media (hover:hover) and (min-width:60rem){
  .board__you:hover::after{opacity:1;transform:translateY(-50%) translateX(3px)}
}
.board__foot{
  padding:var(--s-3) var(--s-4);border-block-start:1px solid var(--rule);background:var(--ink3);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;line-height:1.6;
}
.board .opt{display:none}
@media (min-width:30rem){.board .opt-sm{display:block}}
@media (min-width:60rem){.board .opt{display:block}}

/* ---------- STATS STRIP ---------- */
.stats{
  border-block:1px solid var(--rule);background:var(--ink2);
  scroll-margin-block-start:calc(var(--header-h) + 1rem);
}
.stats__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:1px;background:var(--rule);
}
.stat{
  background:var(--ink2);padding:clamp(20px,2.6vw,32px) var(--pad);
  display:flex;flex-direction:column;gap:var(--s-2);position:relative;
}
.stat::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:2rem;block-size:2px;background:var(--brass);opacity:.55;
}
.stat b{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.9rem,1.3rem + 2.1vw,3rem);letter-spacing:-.045em;line-height:.95;
  color:var(--bone);font-variant-numeric:tabular-nums lining-nums;
}
.stat span{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}

/* ---------- EDITORIAL SECTION LAYOUT ---------- */
.sec{padding-block:clamp(48px,7vw,96px);scroll-margin-block-start:calc(var(--header-h) + 1rem)}
.sec--rule{border-block-start:1px solid var(--rule)}
.sec__grid{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr}
@media (min-width:64rem){
  .sec__grid{grid-template-columns:minmax(14rem,22rem) minmax(0,1fr)}
  .sec__aside{position:sticky;top:calc(var(--header-h) + var(--s-6));align-self:start}
}
.sec__h{font-size:var(--t-xl);letter-spacing:-.035em;margin-top:var(--s-3);text-wrap:balance}
.sec__note{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);
  letter-spacing:.06em;line-height:1.7;margin-top:var(--s-4);
  padding-block-start:var(--s-4);border-block-start:1px solid var(--rule);
}

/* ---------- PROSE REFINEMENT ---------- */
.prose .lead{
  font-size:var(--t-md);color:var(--bone);line-height:1.55;
  max-width:var(--measure-narrow);
}
.fig{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums lining-nums;
  color:var(--brass-hi);font-size:.96em;letter-spacing:-.01em;white-space:nowrap;
}

/* ---------- EVIDENCE LIST ---------- */
.ev{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:var(--s-6)}
.ev__item{
  background:var(--ink);padding:clamp(18px,2.4vw,26px);
  display:grid;gap:var(--s-3);align-items:start;grid-template-columns:1fr;
  transition:background .2s;
}
@media (min-width:44rem){
  .ev__item{grid-template-columns:minmax(6rem,9rem) minmax(0,1fr);gap:clamp(16px,2.5vw,32px)}
}
@media (hover:hover){.ev__item:hover{background:var(--ink2)}}
.ev__fig{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);letter-spacing:-.045em;line-height:.95;
  color:var(--brass-hi);font-variant-numeric:tabular-nums lining-nums;
}
.ev__src{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;
}
.ev__txt{color:var(--bone-dim);font-size:var(--t-base);line-height:1.6;margin:0;text-wrap:pretty}
.ev__txt b{color:var(--bone);font-weight:500}

/* ---------- CALLOUT ---------- */
.callout{
  border:1px solid var(--brass-lo);background:rgba(201,150,63,.06);
  padding:clamp(20px,2.6vw,30px);margin-block:var(--s-6);
}
.callout__l{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s-2);
}
.callout p{color:var(--bone);margin:0;max-width:var(--measure)}

/* ---------- PILLAR / SPEC CARDS ---------- */
.pillars{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.pillar{
  background:var(--ink);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:var(--s-3);
  position:relative;text-decoration:none;color:inherit;transition:background .22s;
}
.pillar::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
@media (hover:hover){
  .pillar:hover{background:var(--ink2)}
  .pillar:hover::after{transform:scaleX(1)}
  .pillar:hover .pillar__go{color:var(--brass-hi)}
  .pillar:hover .pillar__go i{transform:translateX(4px)}
}
.pillar__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding-block-end:var(--s-3);border-block-end:1px solid var(--rule);
}
.pillar__n{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.pillar__code{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);letter-spacing:-.04em;line-height:1;
  color:var(--brass);
}
.pillar h3{font-size:var(--t-md);letter-spacing:-.02em;line-height:1.22;text-wrap:balance}
.pillar__p{font-size:var(--t-sm);line-height:1.62;color:var(--bone-dim);margin:0;text-wrap:pretty}

/* spec list pinned to the bottom so all four cards align */
.pillar__spec{
  list-style:none;margin:auto 0 0;padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule);
  display:flex;flex-direction:column;gap:var(--s-2);
}
.pillar__spec li{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);
  padding-inline-start:1.05em;position:relative;line-height:1.55;
}
.pillar__spec li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.52em;
  inline-size:5px;block-size:1px;background:var(--brass-lo);
}
.pillar__go{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.5em;
  margin-block-start:var(--s-3);transition:color .18s;
}
.pillar__go i{font-style:normal;transition:transform .22s}

/* section head shared by card sections */
/* section header: heading left, lede right — fills the row instead of hugging one side */
.sec__top{
  margin-bottom:clamp(28px,4vw,48px);
  display:grid;gap:clamp(16px,3vw,48px);grid-template-columns:1fr;align-items:end;
}
@media (min-width:64rem){
  .sec__top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .sec__top--solo{grid-template-columns:1fr}
}
.sec__top h2{
  font-size:var(--t-2xl);letter-spacing:-.038em;margin-top:var(--s-4);
  max-width:22ch;text-wrap:balance;
}
.sec__top--solo h2{max-width:28ch}
.sec__lede{
  font-size:var(--t-md);color:var(--bone-dim);max-width:var(--measure);
  line-height:1.6;text-wrap:pretty;margin:0;
  padding-block-start:var(--s-2);
}
@media (min-width:64rem){
  .sec__lede{border-inline-start:1px solid var(--rule);padding-inline-start:clamp(20px,2.6vw,36px);padding-block:var(--s-2)}
}

/* ---------- SERVICE DIRECTORY CARDS ---------- */
.svc{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
/* 6 items → exactly 2 rows of 3, so no orphan cells */
@media (min-width:56rem){.svc{grid-template-columns:repeat(3,1fr)}}
.svc__i{
  background:var(--ink);padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:var(--s-3);
  position:relative;text-decoration:none;color:inherit;transition:background .22s;
  min-block-size:12rem;
}
.svc__i::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
@media (hover:hover){
  .svc__i:hover{background:var(--ink2)}
  .svc__i:hover::after{transform:scaleX(1)}
  .svc__i:hover .svc__arrow{opacity:1;transform:translateX(0)}
  .svc__i:hover h3{color:var(--brass-hi)}
}
.svc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.svc__n{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;color:var(--brass-lo);
  font-variant-numeric:tabular-nums;padding-top:.2em;
}
.svc__arrow{
  font-family:var(--f-mono);color:var(--brass);font-style:normal;
  opacity:0;transform:translateX(-4px);transition:opacity .22s,transform .22s;
}
.svc__i h3{font-size:var(--t-md);letter-spacing:-.022em;line-height:1.22;transition:color .18s;text-wrap:balance}
.svc__rule{block-size:1px;background:var(--rule);margin-block:var(--s-1)}
.svc__i p{font-size:var(--t-sm);line-height:1.6;color:var(--bone-dim);margin:0;text-wrap:pretty}
.svc__tag{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-block-start:auto;padding-block-start:var(--s-3);
}
.svc__i--feature{background:var(--ink2)}
.svc__i--feature h3{color:var(--brass-hi)}
.svc__i--feature .svc__n{color:var(--brass)}

/* ---------- PROCESS FLOW CARDS ---------- */
.flow{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
@media (min-width:60rem){.flow{grid-template-columns:repeat(4,1fr)}}
.flow__i{
  background:var(--ink);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:var(--s-3);
  position:relative;transition:background .22s;overflow:hidden;
}
@media (hover:hover){.flow__i:hover{background:var(--ink2)}}

/* sequence bar across the top — fills further with each step */
.flow__bar{
  position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;background:var(--rule);
}
.flow__bar i{
  display:block;block-size:100%;background:var(--brass);
  transform-origin:left;transition:transform .5s ease;
}

/* ghosted numeral as the anchor */
.flow__n{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.6rem,2rem + 2.4vw,4rem);line-height:.85;letter-spacing:-.055em;
  color:var(--brass);opacity:.24;font-variant-numeric:tabular-nums lining-nums;
  transition:opacity .22s;
}
@media (hover:hover){.flow__i:hover .flow__n{opacity:.42}}

.flow__h{font-size:var(--t-md);letter-spacing:-.022em;line-height:1.2;margin-block-start:calc(-1 * var(--s-1))}
.flow__p{font-size:var(--t-sm);line-height:1.62;color:var(--bone-dim);margin:0;text-wrap:pretty}
.flow__meta{
  margin-block-start:auto;padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-lo);line-height:1.55;
}

/* founder: sourced note, so the evidence reads as evidence not prose */
.founder__note{
  border-inline-start:1px solid var(--rule);padding-inline-start:var(--s-4);
  margin-block-start:var(--s-2);
}
.founder__note p{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);
  line-height:1.75;letter-spacing:.02em;max-width:62ch;
}
.founder__note b{color:var(--bone-dim);font-weight:400}
.founder__src{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lo);margin-block-start:var(--s-2);
}

/* ---------- FOOTER ---------- */
.foot{border-block-start:1px solid var(--rule);background:var(--ink2);margin-block-start:clamp(48px,6vw,88px)}

@media (min-width:44rem){.foot__top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.foot__top{grid-template-columns:minmax(15rem,1.5fr) repeat(4,minmax(0,1fr))}}

.foot__brand{display:flex;flex-direction:column;gap:var(--s-4)}
.foot__brand p{font-size:var(--t-sm);color:var(--muted);line-height:1.65;max-width:34ch;margin:0}

.foot__contact b{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}

.foot__mail i{font-style:normal;transition:transform .22s;opacity:0}
@media (hover:hover){.foot__mail:hover{color:var(--brass-hi)}.foot__mail:hover i{opacity:1;transform:translateX(3px)}}

.foot__col h4{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:var(--s-3);
  padding-block-end:var(--s-3);border-block-end:1px solid var(--rule);
}
.foot__col a{
  display:block;font-size:var(--t-sm);color:var(--bone-dim);
  padding-block:calc(var(--s-2) - 1px);min-block-size:1.9rem;transition:color .16s;
  position:relative;padding-inline-start:0;
}
@media (hover:hover){.foot__col a:hover{color:var(--brass-hi)}}

/* trust strip */

.foot__trust .pill{border-color:var(--brass-lo);color:var(--brass)}
.foot__trust em{font-style:normal;color:var(--bone-dim)}

@media (hover:hover){.foot__bar a:hover{color:var(--brass)}}

/* ---------- GLOSSARY ---------- */
.gl__nav{display:flex;flex-direction:column;margin-block-start:var(--s-6);border-block-start:1px solid var(--rule)}
.gl__nav a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  padding-block:var(--s-3);border-block-end:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--bone-dim);transition:color .16s;min-block-size:2.6rem;
}
.gl__nav a span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
@media (hover:hover){.gl__nav a:hover{color:var(--brass-hi)}.gl__nav a:hover span{color:var(--brass)}}

.gl__g{margin-block-end:clamp(36px,5vw,64px);scroll-margin-block-start:calc(var(--header-h) + 1rem)}
.gl__gh{
  font-size:var(--t-lg);letter-spacing:-.03em;
  padding-block-end:var(--s-3);border-block-end:1px solid var(--brass-lo);
}
.gl__gn{font-size:var(--t-sm);color:var(--muted);margin-block-start:var(--s-3);max-width:var(--measure)}
.gl{margin-block-start:var(--s-4)}
.gl__i{
  padding-block:clamp(14px,1.8vw,20px);border-block-end:1px solid var(--rule);
  scroll-margin-block-start:calc(var(--header-h) + 1rem);
}
.gl__i:last-child{border-block-end:0}
.gl__t{
  font-family:var(--f-display);font-weight:600;font-size:var(--t-md);
  letter-spacing:-.018em;color:var(--bone);display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;
}
.gl__abbr{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);font-weight:400;
}
.gl__d{
  margin:var(--s-2) 0 0;font-size:var(--t-sm);line-height:1.65;
  color:var(--bone-dim);max-width:var(--measure);text-wrap:pretty;
}
.gl__d a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--brass-lo);text-underline-offset:.2em}
@media (hover:hover){.gl__d a:hover{color:var(--brass-hi);text-decoration-color:var(--brass)}}

/* ---------- CLOSING CTA ---------- */
.cta{
  border:1px solid var(--rule);background:var(--ink2);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr;
}
@media (min-width:56rem){.cta{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.cta::before{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-10%;
  inline-size:36rem;block-size:26rem;pointer-events:none;
  background:radial-gradient(circle at 40% 50%,rgba(201,150,63,.13),transparent 62%);
}
.cta__copy{padding:clamp(28px,3.6vw,52px);position:relative;display:flex;flex-direction:column;gap:var(--s-4)}
.cta__copy h2{font-size:var(--t-2xl);letter-spacing:-.04em;max-width:15ch;text-wrap:balance;margin-top:var(--s-3)}
.cta__copy p{color:var(--bone-dim);max-width:46ch;margin:0;line-height:1.6}
.cta__form{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-block-start:var(--s-2)}
.cta__form input{flex:1;min-inline-size:12rem}
.cta__form .btn{min-block-size:3rem;padding-inline:var(--s-6)}
.cta__fine{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);
  letter-spacing:.05em;line-height:1.7;margin:0;
}
.cta__panel{
  padding:clamp(28px,3.6vw,52px);position:relative;
  border-block-start:1px solid var(--rule);background:var(--ink);
  display:flex;flex-direction:column;gap:var(--s-4);
}
@media (min-width:56rem){.cta__panel{border-block-start:0;border-inline-start:1px solid var(--rule)}}
.cta__panel b{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);font-weight:400;padding-block-end:var(--s-3);
  border-block-end:1px solid var(--rule);
}
.cta__panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.cta__panel li{
  font-size:var(--t-sm);line-height:1.55;color:var(--bone-dim);
  padding-inline-start:1.3em;position:relative;text-wrap:pretty;
}
.cta__panel li::before{
  content:"\2713";position:absolute;inset-inline-start:0;color:var(--up);
  font-family:var(--f-mono);font-size:.9em;
}
.cta__stamp{
  margin-block-start:auto;padding-block-start:var(--s-4);border-block-start:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
}
.cta__stamp em{font-style:normal;color:var(--brass)}

/* ---------- CONTRAST PANELS ---------- */
.contrast{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:1fr;margin-block:var(--s-6);
}
@media (min-width:40rem){.contrast{grid-template-columns:1fr 1fr}}
.contrast__c{background:var(--ink);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:var(--s-3)}
.contrast__c--yes{background:var(--ink2)}
.contrast__l{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:.5em;padding-block-end:var(--s-3);
  border-block-end:1px solid var(--rule);
}
.contrast__c--no .contrast__l{color:var(--down)}
.contrast__c--yes .contrast__l{color:var(--up)}
.contrast__c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.contrast__c li{
  font-size:var(--t-sm);line-height:1.55;color:var(--bone-dim);
  padding-inline-start:1.3em;position:relative;text-wrap:pretty;
}
.contrast__c--no li::before{content:"\00d7";position:absolute;inset-inline-start:0;color:var(--down);font-family:var(--f-mono)}
.contrast__c--yes li::before{content:"\2713";position:absolute;inset-inline-start:0;color:var(--up);font-family:var(--f-mono);font-size:.9em}

/* ---------- SPEC STRIP ---------- */
.specstrip{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(50%,7rem),1fr));margin-block:var(--s-6);
}
.specstrip div{background:var(--ink2);padding:var(--s-4) var(--s-3)}
.specstrip b{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);letter-spacing:-.04em;line-height:1;
  color:var(--brass);font-variant-numeric:tabular-nums lining-nums;
}
.specstrip span{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:var(--s-2);line-height:1.5;
}

/* ---------- SEGMENT CARDS ---------- */
.seg{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
@media (min-width:56rem){.seg{grid-template-columns:repeat(3,1fr)}}
.seg__i{
  background:var(--ink);padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:var(--s-2);
  position:relative;text-decoration:none;color:inherit;transition:background .22s;
  min-block-size:15rem;
}
.seg__i::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
@media (hover:hover){
  .seg__i:hover{background:var(--ink2)}
  .seg__i:hover::after{transform:scaleX(1)}
  .seg__i:hover h3{color:var(--brass-hi)}
  .seg__i:hover .seg__go{opacity:1;transform:translateX(0)}
  .seg__i:hover .seg__fig{color:var(--brass-hi)}
}
.seg__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.seg__n{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;color:var(--brass-lo);font-variant-numeric:tabular-nums}
.seg__go{
  font-family:var(--f-mono);color:var(--brass);font-style:normal;
  opacity:0;transform:translateX(-4px);transition:opacity .22s,transform .22s;
}
.seg__i h3{font-size:var(--t-md);letter-spacing:-.022em;line-height:1.22;transition:color .18s;text-wrap:balance;margin-block-start:var(--s-1)}
.seg__i p{font-size:var(--t-sm);line-height:1.6;color:var(--bone-dim);margin:0;max-width:34ch;text-wrap:pretty}

/* the signal: one concrete fact per segment */
.seg__sig{
  margin-block-start:auto;padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule);
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
}
.seg__fig{
  font-family:var(--f-display);font-weight:800;font-size:var(--t-lg);
  letter-spacing:-.04em;line-height:1;color:var(--brass);
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;transition:color .18s;
}
.seg__lab{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--muted);line-height:1.5;flex:1;min-inline-size:8rem;
}

/* ---------- MARKETS TABLE ---------- */
.mkt{border:1px solid var(--rule)}
.mkt__r{
  display:grid;gap:var(--s-3);padding:clamp(13px,1.5vw,17px) var(--s-4);
  grid-template-columns:minmax(0,1fr);align-items:center;
  text-decoration:none;color:inherit;transition:background .2s;position:relative;
}
@media (min-width:46rem){
  .mkt__r{grid-template-columns:minmax(6.5rem,.9fr) minmax(4.5rem,.6fr) minmax(3.5rem,.45fr) minmax(10rem,1.9fr) 1.4rem}
}
.mkt__r + .mkt__r{border-block-start:1px solid var(--rule)}
.mkt__h{
  background:var(--ink3);font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-block:var(--s-3);
}
@media (max-width:45.99rem){.mkt__h{display:none}}
.mkt__r:not(.mkt__h)::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:2px;
  background:var(--brass);transform:scaleY(0);transition:transform .22s ease;
}
@media (hover:hover){
  .mkt__r:not(.mkt__h):hover{background:var(--ink2)}
  .mkt__r:not(.mkt__h):hover::before{transform:scaleY(1)}
  .mkt__r:hover .mkt__go{opacity:1;transform:translateX(0)}
  .mkt__r:hover .mkt__name{color:var(--brass-hi)}
}
.mkt__name{font-family:var(--f-display);font-weight:600;font-size:var(--t-sm);letter-spacing:-.018em;color:var(--bone);transition:color .18s}
.mkt__reg{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--brass);letter-spacing:.05em;white-space:nowrap}
.mkt__lang{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.05em;white-space:nowrap}
.mkt__note{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.mkt__go{
  font-family:var(--f-mono);color:var(--brass);font-style:normal;text-align:right;
  opacity:0;transform:translateX(-4px);transition:opacity .22s,transform .22s;
}
@media (max-width:45.99rem){.mkt__go{display:none}}

/* final row doubles as the link to the full list */
.mkt__more{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:clamp(14px,1.7vw,19px) var(--s-4);border-block-start:1px solid var(--rule);
  background:var(--ink3);text-decoration:none;transition:background .2s;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
}
@media (hover:hover){.mkt__more:hover{background:var(--ink2)}.mkt__more:hover i{transform:translateX(4px)}}
.mkt__more i{font-style:normal;transition:transform .22s}
.mkt__more span{color:var(--muted);letter-spacing:.06em}

/* ---------- PRICING TIERS ---------- */
.tiers{border:1px solid var(--rule)}
.tiers__grid{
  display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
@media (min-width:60rem){.tiers__grid{grid-template-columns:repeat(4,1fr)}}
.tier{
  background:var(--ink);padding:clamp(20px,2.3vw,28px);
  display:flex;flex-direction:column;gap:var(--s-3);position:relative;
  text-decoration:none;color:inherit;transition:background .22s;
}
@media (hover:hover){.tier:hover{background:var(--ink2)}.tier:hover .tier__go{color:var(--brass-hi)}}
.tier--feat{background:var(--ink2)}
.tier--feat::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;background:var(--brass);
}
.tier__badge{
  position:absolute;inset-block-start:0;inset-inline-end:0;
  background:var(--brass);color:var(--ink);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:.35em .7em;
}
.tier__n{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.tier__was{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-family:var(--f-mono);font-size:var(--t-xs)}
.tier__was s{color:var(--muted);text-decoration-color:var(--down);text-decoration-thickness:1.5px}
.tier__save{border:1px solid var(--up);color:var(--up);padding:.18em .5em;letter-spacing:.06em}
.tier__p{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem);letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap;
}
.tier__p small{font-size:.42em;font-weight:600;letter-spacing:-.02em;color:var(--bone-dim)}
.tier__p em{font-family:var(--f-mono);font-style:normal;font-size:var(--t-xs);font-weight:400;color:var(--muted);letter-spacing:0}
.tier__for{
  font-size:var(--t-sm);color:var(--bone-dim);line-height:1.55;margin:0;
  padding-block-start:var(--s-3);border-block-start:1px solid var(--rule);
}
.tier__inc{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2);
  padding-block-start:var(--s-4);
}
.tier__inc li{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);line-height:1.55;
  padding-inline-start:1.05em;position:relative;
}
.tier__inc li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.52em;
  inline-size:5px;block-size:1px;background:var(--brass-lo);
}
.tier__go{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.45em;
  /* was opacity:0 with a hover reveal. A price card must always show its next
     step, so the call to action is visible at rest and only brightens on hover.
     margin-block-start:auto pins it to the bottom of the card. */
  margin-block-start:auto;padding-block-start:var(--s-4);
  opacity:1;transform:none;transition:color .22s;
}

.tiers__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  padding:clamp(14px,1.7vw,19px) var(--s-4);border-block-start:1px solid var(--rule);
  background:var(--ink3);text-decoration:none;transition:background .2s;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
}
@media (hover:hover){.tiers__foot:hover{background:var(--ink2)}.tiers__foot:hover i{transform:translateX(4px)}}
.tiers__foot i{font-style:normal;transition:transform .22s}
.tiers__foot span{color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:var(--t-xs)}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--rule)}
.faq details{border-block-end:1px solid var(--rule);transition:background .2s}
.faq details:last-child{border-block-end:0}
.faq details[open]{background:var(--ink2)}
.faq summary{
  padding:clamp(14px,1.7vw,19px) var(--s-4);cursor:pointer;list-style:none;
  display:grid;grid-template-columns:1fr 1.2rem;gap:var(--s-3);align-items:center;
  min-block-size:var(--tap);transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq__q{
  font-family:var(--f-display);font-weight:600;font-size:var(--t-md);
  letter-spacing:-.018em;line-height:1.3;text-wrap:pretty;
}
.faq__tag{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-lo);margin-bottom:6px;
}
.faq summary::after{
  content:"+";font-family:var(--f-mono);color:var(--brass);font-size:var(--t-md);
  justify-self:end;transition:transform .25s;
}
.faq details[open] summary::after{content:"\2212";transform:rotate(180deg)}
@media (hover:hover){.faq summary:hover .faq__q{color:var(--brass-hi)}}
.faq details[open] .faq__q{color:var(--brass-hi)}
.faq details[open] .faq__tag{color:var(--brass)}
.faq__a{
  padding:0 var(--s-4) clamp(16px,2vw,22px);font-size:var(--t-sm);
  color:var(--bone-dim);max-width:var(--measure);line-height:1.68;
}

/* aside helper block */
.aside__ask{
  margin-block-start:var(--s-6);padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule);
}
.aside__ask p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;margin:0 0 var(--s-4);max-width:32ch}

/* ---------- COMPLIANCE PANEL (full-bleed) ---------- */
.comply{
  background:var(--bone);color:var(--ink);
  padding-block:clamp(40px,5.5vw,72px);
  padding-inline:max(var(--pad),env(safe-area-inset-left));
}
.comply__in{max-width:var(--maxw);margin-inline:auto}
.comply__grid{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr}
@media (min-width:56rem){.comply__grid{grid-template-columns:minmax(14rem,21rem) minmax(0,1fr)}}
.comply .eyebrow{color:var(--brass-lo)}
.comply .eyebrow::before{background:var(--brass-lo)}
.comply h2{color:var(--ink);font-size:var(--t-xl);letter-spacing:-.038em;margin-top:var(--s-3);max-width:15ch;text-wrap:balance}
.comply p{color:#3D4642;margin-top:var(--s-4);max-width:34ch;line-height:1.6}
.comply__aside{display:flex;flex-direction:column;gap:var(--s-4)}
.comply__excl{
  margin-block-start:auto;padding-block-start:var(--s-4);
  border-block-start:1px solid rgba(13,18,16,.16);
}
.comply__excl b{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lo);font-weight:400;margin-bottom:var(--s-2);
}
.comply__excl span{
  font-family:var(--f-mono);font-size:var(--t-xs);color:#5A635E;line-height:1.7;letter-spacing:.03em;
}
.comply__list{list-style:none;display:flex;flex-direction:column;border-block-start:1px solid rgba(13,18,16,.16)}
.comply__list li{
  padding-block:clamp(14px,1.8vw,20px);border-block-end:1px solid rgba(13,18,16,.16);
  display:grid;gap:var(--s-3) clamp(14px,2vw,28px);align-items:baseline;
  grid-template-columns:1.9rem 1fr;
}
@media (min-width:44rem){.comply__list li{grid-template-columns:1.9rem minmax(5rem,7rem) 1fr}}
.comply__n{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--brass-lo);
  letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.comply__lab{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:#7A837E;
}
@media (max-width:43.99rem){.comply__lab{grid-column:2}}
.comply__t{font-size:var(--t-sm);color:#202723;line-height:1.6;max-width:52ch;text-wrap:pretty}
.comply__t strong{font-weight:600}
.comply .btn{border-color:var(--brass-lo);color:var(--brass-lo);align-self:flex-start}
@media (hover:hover){.comply .btn:hover{background:var(--brass-lo);color:var(--bone)}}

.faq__a a,.ev__txt a,.flow__p a,.seg__i p a,.contrast__c li a,.comply__t a{
  color:var(--bone);text-decoration:underline;text-decoration-color:var(--brass-lo);
  text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .16s,text-decoration-color .16s;
}
@media (hover:hover){
  .faq__a a:hover,.ev__txt a:hover,.flow__p a:hover,.seg__i p a:hover,.contrast__c li a:hover,.comply__t a:hover{
    color:var(--brass-hi);text-decoration-color:var(--brass);
  }
}

.tbl{border:1px solid var(--rule);margin-block:var(--s-6);overflow-x:auto}
.tbl table{inline-size:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tbl caption{
  text-align:left;padding:var(--s-3) var(--s-4);background:var(--ink3);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);border-block-end:1px solid var(--rule);
}
.tbl th{
  text-align:left;padding:var(--s-3) var(--s-4);font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;
  border-block-end:1px solid var(--rule);white-space:nowrap;
}
.tbl td{padding:var(--s-3) var(--s-4);border-block-end:1px solid var(--rule);color:var(--bone-dim);vertical-align:top}
.tbl tr:last-child td{border-block-end:0}
.tbl td:first-child{color:var(--bone);font-weight:500}
.tbl__src{
  padding:var(--s-3) var(--s-4);border-block-start:1px solid var(--rule);background:var(--ink3);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.05em;
}

.cite{white-space:nowrap}
.cite::after{
  content:"↗";font-family:var(--f-mono);font-size:.72em;color:var(--brass-lo);
  margin-inline-start:.25em;vertical-align:.15em;
}

/* ---------- 13. UTILITIES ---------- */
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-9999px;z-index:99}
.skip:focus{inset-inline-start:var(--pad);top:var(--s-2);padding:var(--s-3) var(--s-4);background:var(--brass);color:var(--ink)}
.pill{display:inline-block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;padding:.25em .6em;border:1px solid var(--rule);color:var(--muted)}
.pill--on{border-color:var(--brass-lo);color:var(--brass)}
.panel>b{display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-block-end:var(--s-3)}
a.mkt__r:hover{background:var(--ink2)}
@media(min-width:900px){.hero__grid{grid-template-columns:1.25fr .85fr;align-items:stretch}
}
@media(min-width:900px){.sec__grid{grid-template-columns:minmax(200px,26%) 1fr;gap:var(--s-8)}
.sec__aside{position:sticky;top:5rem;align-self:start}
}
.pull{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:-.025em;line-height:1.25;color:var(--bone);border-inline-start:2px solid var(--brass);padding-inline-start:var(--s-4);margin-block:var(--s-6);max-inline-size:34ch}
.callout{border:1px solid var(--brass-lo);background:rgba(201,150,63,.06);padding:var(--s-4);margin-block:var(--s-6)}
.callout__l{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.callout p{margin:.4em 0 0;font-size:var(--t-sm)}
@media(min-width:820px){.cta{grid-template-columns:1.3fr .7fr}
}
@media(min-width:1040px){.nav{display:flex;align-items:center}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--brass);color:var(--ink);padding:.7em 1.2em;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.skip:focus{inset-inline-start:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ---------- BOARD (hero data panel) ---------- */
.board__h{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
/* ---------- PILLARS ---------- */
.pillar__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:var(--s-6)}
/* ---------- SEGMENTS ---------- */
.seg__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:var(--s-6)}
/* ---------- FLOW / PROCESS ---------- */
.flow__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:var(--s-6)}
/* ---------- PRICING EXTRAS ---------- */
.tier__off{display:inline-block;margin-inline-start:.6em;padding:.1em .5em;border:1px solid var(--brass-lo);font-size:var(--t-xs);color:var(--brass);letter-spacing:.06em}
/* ---------- NAV SPACING (the --s-5 collapse) ---------- */
.nav{gap:clamp(1rem,1.6vw,2rem)}
/* wrapper for a nav item that opens a mega panel */
.nav__wrap{position:static}
@media (min-width:64rem){.nav__wrap{position:static}
}
/* column headings: styled like the h5 the design system expects, without the
   heading level, so document outline stays h1 > h2 > h3 */
.mega__h,.foot__h{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:var(--s-3);
  padding-block-end:var(--s-3);border-block-end:1px solid var(--rule);
}
/* ---------- HEADER end cluster ---------- */
.header__end{display:flex;align-items:center;gap:var(--s-3)}
@media (max-width:63.99rem){.header__cta{display:none}
}
/* ---------- MEGA panel extras ---------- */
/* ---------- PROSE: the reading experience ---------- */
.prose{--rhythm:1.15em}
.prose p{
  font-size:clamp(1rem,.97rem + .14vw,1.09rem);
  line-height:1.72;color:var(--bone-dim);
  text-wrap:pretty;hanging-punctuation:first last;
}
/* opening paragraph of a section carries more weight */
.prose h2 + p,.prose > p:first-child{
  font-size:clamp(1.06rem,1rem + .3vw,1.22rem);
  line-height:1.62;color:var(--bone);
}
.prose h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.35rem,1.1rem + 1.15vw,2.05rem);
  letter-spacing:-.032em;line-height:1.12;color:var(--bone);
  position:relative;padding-block-start:var(--s-4);
}
/* short brass rule above every h2, so sections read as sections */
.prose h2::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:2.25rem;block-size:2px;background:var(--brass);opacity:.85;
}
.prose h3{
  font-family:var(--f-display);font-weight:600;font-size:var(--t-md);
  letter-spacing:-.02em;color:var(--bone);
}
/* first line of a section opener gets a subtle lead-in */
.prose .speakable{color:var(--bone)}
.prose strong,.prose b{color:var(--bone);font-weight:600}
.prose a{
  color:var(--bone);text-decoration:underline;
  text-decoration-color:var(--brass-lo);text-decoration-thickness:1px;
  text-underline-offset:.22em;transition:color .16s,text-decoration-color .16s;
}
@media (hover:hover){.prose a:hover{color:var(--brass-hi);text-decoration-color:var(--brass)}
}
/* lists inside prose */
.bl{list-style:none;margin-block:var(--s-4) var(--s-6);max-width:var(--measure)}
/* pull quote */
.pull{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.2rem,1rem + 1vw,1.72rem);
  letter-spacing:-.028em;line-height:1.24;color:var(--bone);
  border-inline-start:2px solid var(--brass);padding-inline-start:var(--s-6);
  margin-block:var(--s-8);max-width:32ch;text-wrap:balance;
}
/* page header block */
.phead h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2rem,1.5rem + 2.4vw,3.5rem);
  letter-spacing:-.04em;line-height:1.02;margin-block:var(--s-4) var(--s-4);
  max-width:19ch;text-wrap:balance;
}
/* live indicator dot */
.board__live [data-dot]{
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--brass);
  display:inline-block;box-shadow:0 0 0 0 rgba(201,150,63,.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,150,63,.55)}
70%{box-shadow:0 0 0 7px rgba(201,150,63,0)}
100%{box-shadow:0 0 0 0 rgba(201,150,63,0)}
}
@media (prefers-reduced-motion:reduce){.board__live [data-dot]{animation:none}
}
/* ---------- MEASURE: prose is capped, data is not ----------
   .prose{max-width:66ch}
is right for reading, wrong for tables, evidence
   rows, comparison panels and spec strips, which were being squeezed into a
   text column and looked cramped inside a much wider grid cell. */
.prose{max-width:none}
.prose > p,
.prose > h2,
.prose > h3,
.prose > ul:not([class]),
.prose > ol,
.prose > .bl{max-width:var(--measure)}
.prose > .ev,
.prose > .dt,
.prose > .tbl,
.prose > .contrast,
.prose > .specstrip,
.prose > .grid,
.prose > .callout{max-width:none}
/* wider reading measure on large screens — 66ch at 17px is a short line
   inside a 1440px container */
@media (min-width:90rem){:root{--measure:72ch}
}
/* evidence rows read better with a little more room per cell */
.ev__txt{max-width:62ch}
/* ---------- PRICING TIERS: defensive ----------
   .tiers must stack its grid and its footer bar. Stating display:block makes
   that explicit so no inherited or future rule can turn it into a two-column
   grid, which is exactly how the footer bar once ended up beside the tiers. */
/* .tiers is now the grid itself and holds only tier cards. The footer bar is a
   sibling below it. Both are forced full width so neither can end up beside the
   other, which is what the pricing page was doing. */
.tiers{
  display:grid !important;
  gap:1px;background:var(--rule);width:100%;
  /* The track count comes from the data via --tiers, so a three-tier page gets
     three tracks and a four-tier page gets four. auto-fit is avoided because it
     once produced a collapsed 0px track; a hardcoded four produced a stray
     empty column the moment a page had three. */
  grid-template-columns:1fr !important;
}
@media (min-width:34rem){
  .tiers{grid-template-columns:repeat(min(2,var(--tiers,4)),1fr) !important}
}
@media (min-width:60rem){
  .tiers{grid-template-columns:repeat(var(--tiers,4),1fr) !important}
}
/* a price grid inside a reading column has to break the measure or the cards
   get too narrow to hold a word */
.prose > .tiers,.prose > .tiers__foot{max-inline-size:none;inline-size:100%}
.tiers__foot{display:flex !important;width:100%;border:1px solid var(--rule);border-block-start:0}

/* the badge is absolutely positioned top-right; keep the tier name clear of it */
.tier--feat .tier__n{padding-inline-end:7.5rem;display:block;min-block-size:1.2em}
@media (max-width:59.99rem){.tier--feat .tier__n{padding-inline-end:6.5rem}}


/* equalise the description block so the feature lists start on one line */





/* the tier card needs a little room under its call to action */
.tier{padding-block-end:clamp(22px,2.5vw,30px)}

/* ==========================================================================
   FORMS
   Field counts are set from conversion data, not preference. Three fields
   convert at roughly 25%, five at 20%, seven at 12%. The contact form sits at
   four. The audit form needs more, so it is split into steps: multi-step with
   a progress indicator cuts abandonment sharply against one long form.
   ========================================================================== */

.fm{border:1px solid var(--rule);background:var(--ink2);padding:clamp(22px,3vw,34px)}
.fm__hd{margin-block-end:var(--s-6)}
.fm__hd h3{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);letter-spacing:-.025em;color:var(--bone)}
.fm__hd p{font-size:var(--t-sm);color:var(--muted);margin-block-start:var(--s-2);max-width:52ch}

/* single column: multi-column forms measurably slow completion */
.fm__row{display:flex;flex-direction:column;gap:var(--s-2);margin-block-end:var(--s-5)}
.fm__row--split{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media (min-width:34rem){.fm__row--split{grid-template-columns:1fr 1fr}}

.fm__lb{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-dim);display:flex;gap:.6em;align-items:baseline;
}
.fm__opt{color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:var(--t-xs)}
.fm__hint{font-size:var(--t-xs);color:var(--muted);line-height:1.55;margin-block-start:-.2em}

.fm__in,.fm__ta,.fm__sel{
  inline-size:100%;background:var(--ink);color:var(--bone);
  border:1px solid var(--rule);border-radius:0;
  padding:.85em 1em;font-family:inherit;font-size:var(--t-sm);line-height:1.5;
  transition:border-color .18s,background .18s;min-block-size:var(--tap);
}
.fm__ta{min-block-size:7.5rem;resize:vertical}
.fm__in::placeholder,.fm__ta::placeholder{color:#6B736E}
.fm__in:hover,.fm__ta:hover,.fm__sel:hover{border-color:#3A4640}
.fm__in:focus,.fm__ta:focus,.fm__sel:focus{
  outline:none;border-color:var(--brass);background:var(--ink3);
  box-shadow:0 0 0 3px rgba(201,150,63,.12);
}
.fm__in:user-invalid,.fm__ta:user-invalid{border-color:var(--down)}
.fm__err{font-size:var(--t-xs);color:var(--down);display:none}
.fm__row.is-bad .fm__err{display:block}
.fm__row.is-bad .fm__in,.fm__row.is-bad .fm__ta{border-color:var(--down)}

/* phone with a country code select that does not look bolted on */
.fm__tel{display:grid;grid-template-columns:7.5rem 1fr;gap:-1px}
.fm__tel .fm__sel{border-inline-end:0;font-family:var(--f-mono);font-size:var(--t-xs);
  padding-inline:.7em;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fm__tel .fm__sel:focus{border-inline-end:1px solid var(--brass)}

/* progress: showing the end reduces abandonment on longer forms */
.fm__prog{display:flex;gap:var(--s-2);margin-block-end:var(--s-6)}
.fm__step{flex:1;display:flex;flex-direction:column;gap:.5em}
.fm__bar{block-size:2px;background:var(--rule);position:relative;overflow:hidden}
.fm__bar::after{content:"";position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.fm__step.is-on .fm__bar::after,.fm__step.is-done .fm__bar::after{transform:scaleX(1)}
.fm__stepn{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.fm__step.is-on .fm__stepn{color:var(--brass)}
.fm__step.is-done .fm__stepn{color:var(--bone-dim)}

.fm__pane{display:none}
.fm__pane.is-on{display:block;animation:fmIn .28s ease}
@keyframes fmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fm__pane.is-on{animation:none}}

.fm__nav{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;
  margin-block-start:var(--s-6);padding-block-start:var(--s-5);border-block-start:1px solid var(--rule)}
.fm__back{background:none;border:0;cursor:pointer;font-family:var(--f-mono);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.6em 0}
.fm__back:hover{color:var(--bone)}
.fm__nav .btn{cursor:pointer;font-family:var(--f-mono)}
.fm__spacer{flex:1}

/* what happens next, next to the button where the decision is made */
.fm__trust{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin-block-start:var(--s-5);padding-block-start:var(--s-4);border-block-start:1px solid var(--rule)}
.fm__trust span{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.05em;
  color:var(--muted);display:flex;align-items:center;gap:.5em}
.fm__trust span::before{content:"";inline-size:4px;block-size:4px;background:var(--brass-lo);flex:none}

.fm__note{font-size:var(--t-xs);color:var(--muted);line-height:1.65;margin-block-start:var(--s-4);max-width:56ch}
.fm__note a{color:var(--bone-dim);text-decoration:underline;text-decoration-color:var(--brass-lo)}

.fm__ok,.fm__fail{display:none;padding:var(--s-6) 0}
.fm__ok.is-on,.fm__fail.is-on{display:block}
.fm__ok b{display:block;font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);
  letter-spacing:-.025em;color:var(--brass-hi);margin-block-end:var(--s-3)}
.fm__ok p,.fm__fail p{font-size:var(--t-sm);color:var(--bone-dim);max-width:52ch}
.fm__fail b{display:block;color:var(--down);font-weight:600;margin-block-end:var(--s-2)}

.fm .btn[disabled]{opacity:.5;cursor:wait}

/* ==========================================================================
   MOBILE SAFETY NET
   A single element wider than the viewport makes the whole page scroll
   sideways and shrinks every line of text. These are the usual causes.
   ========================================================================== */

/* nothing may exceed its container, whatever it is */
img,svg,video,iframe,table,pre,canvas{max-inline-size:100%;height:auto}

/* long tokens — a domain, an email, a licence reference — cannot break by
   default and will push the page wide on a 360px screen */
.prose p,.prose li,.fm__hint,.faq__a,.gl__d,.comply__t,.ev__txt,.tbl td,.dt__v{
  overflow-wrap:anywhere;word-break:break-word;
}

/* wide blocks scroll inside themselves rather than dragging the page with them */
.dt,.contrast,.specstrip,.tiers,.mkt,.founder__stats{max-inline-size:100%}
@media (max-width:40rem){
  .specstrip{overflow-x:auto}
  .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* nowrap is right on a wide screen and wrong on a narrow one */
@media (max-width:46rem){
  .mkt__reg,.mkt__lang,.board__tag,.seg__fig{white-space:normal}
}

/* the last line of defence: if something still overflows, contain it here
   rather than letting the whole document scroll */
html,body{max-inline-size:100%;overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* tap targets: anything interactive needs to be reachable with a thumb */
@media (pointer:coarse){
  .nav__btn,.mega__col a,.drawer__g a,.foot__grid a,.foot__col a,
  .faq summary,.mkt__r,.tier__go,.svc__i,.seg__i{min-block-size:44px}
  .faq summary{padding-block:16px}
}

/* Decorative glows are absolutely positioned and wider than a phone. Every
   parent that carries one has to contain it, or the document scrolls sideways.
   .hero was the one that did not, and it affected every page with a hero. */
.hero,.phead,.comply,.stats,.sec{overflow:hidden}
.sec__aside{overflow:visible}

/* form sitting directly under the page header, above the body copy */
.fm__top{padding-block:var(--s-8) 0}
.fm__top .fm{max-inline-size:44rem}

/* grouped fields read as one question, not three */
.fm__set{border:0;padding:0;margin:0 0 var(--s-6)}
.fm__set legend{padding:0;margin-block-end:var(--s-2)}
.fm__set .fm__hint{margin-block-end:var(--s-3)}
.fm__set .fm__row{margin-block-end:var(--s-3)}
.fm__set .fm__row:last-child{margin-block-end:0}

/* the form title is styled like a heading without being one, so the document
   outline stays h1 > h2 when the form sits directly under the page header */
.fm__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);
  letter-spacing:-.025em;color:var(--bone);margin:0}

/* ==========================================================================
   FOOTER
   Five blocks in a five-track grid. The old version had six and the last one
   wrapped, which is what made it look broken.
   ========================================================================== */

.foot{border-block-start:1px solid var(--rule);margin-block-start:var(--s-12)}

/* one obvious next step, so the footer is not just a list to hunt through */
.foot__cta{background:var(--ink3);border-block-end:1px solid var(--rule)}
.foot__cta__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-4) var(--s-8);padding-block:clamp(24px,3vw,36px);
}
.foot__cta__h{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.05rem,.95rem + .6vw,1.4rem);
  letter-spacing:-.025em;color:var(--bone);margin:0;
}
.foot__cta__p{font-size:var(--t-sm);color:var(--muted);margin:.35em 0 0;max-width:52ch}
.foot__cta .btn{flex:none}

.foot__top{
  display:grid;gap:clamp(28px,4vw,48px);
  padding-block:clamp(36px,4.5vw,60px);
  grid-template-columns:1fr;
}
@media (min-width:34rem){.foot__top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60rem){.foot__top{grid-template-columns:minmax(14rem,1.4fr) repeat(4,minmax(0,1fr))}}

.foot__brand{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
@media (min-width:34rem) and (max-width:59.99rem){.foot__brand{grid-column:1/-1}}
.foot__brand > p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:32ch;margin:0}
.foot__brand__note{font-size:var(--t-xs);color:#6F7873;line-height:1.6;max-width:32ch}
.foot__mail{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.5em;
  padding-block:.5em;border-block-end:1px solid transparent;transition:border-color .2s,color .2s;
}
.foot__mail i{font-style:normal;transition:transform .22s}
@media (hover:hover){
  .foot__mail:hover{color:var(--brass-hi);border-block-end-color:var(--brass-lo)}
  .foot__mail:hover i{transform:translateX(3px)}
}

.foot__col{display:flex;flex-direction:column}
.foot__col h4{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 var(--s-3);
  padding-block-end:var(--s-2);border-block-end:1px solid var(--rule);
}
.foot__col a{
  font-size:var(--t-sm);color:var(--bone-dim);padding-block:.42em;
  position:relative;transition:color .16s,padding-inline-start .16s;
}
@media (hover:hover){
  .foot__col a:hover{color:var(--brass-hi);padding-inline-start:.5em}
  .foot__col a::before{
    content:"";position:absolute;inset-inline-start:0;inset-block:.9em auto;
    inline-size:3px;block-size:1px;background:var(--brass);opacity:0;transition:opacity .16s;
  }
  .foot__col a:hover::before{opacity:1}
}

.foot__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-3) clamp(16px,2.4vw,30px);align-items:center;
  padding-block:var(--s-4);border-block-start:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);
}
.foot__trust em{font-style:normal;color:var(--bone-dim)}
.foot__trust .pill{border-color:var(--brass-lo);color:var(--brass)}

.foot__bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-3) var(--s-6);flex-wrap:wrap;
  padding-block:var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom));
  border-block-start:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em;
}
.foot__bar nav{display:flex;gap:var(--s-3) var(--s-5);flex-wrap:wrap}
.foot__bar a{color:var(--muted);transition:color .16s}
@media (hover:hover){.foot__bar a:hover{color:var(--brass)}}
.foot__lang a{
  color:var(--bone-dim);border:1px solid var(--rule);padding:.35em .7em;
  display:inline-block;transition:border-color .18s,color .18s;
}
@media (hover:hover){.foot__lang a:hover{border-color:var(--brass-lo);color:var(--brass)}}

/* thumb-sized targets, and a little more air between rows on a phone */
@media (pointer:coarse){
  .foot__col a,.foot__bar a,.foot__lang a{min-block-size:44px;display:flex;align-items:center}
  .foot__col a{padding-block:.55em}
}

/* ==========================================================================
   CHARTS
   Hand-built SVG using the site's own colour variables, so a chart can never
   drift from the theme. Scales to any width without a second file.
   ========================================================================== */

.cht{
  margin:var(--s-8) 0;border:1px solid var(--rule);background:var(--ink2);
  padding:clamp(16px,2.2vw,26px);max-inline-size:100%;
}
.cht svg{inline-size:100%;block-size:auto;display:block;overflow:visible}

.cht__grid{stroke:var(--rule);stroke-width:1}
.cht__axis{stroke:var(--rule);stroke-width:1}
.cht__ax{fill:var(--muted);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em}
.cht__lb{fill:var(--bone-dim);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.cht__val{fill:var(--bone);font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.cht__seglb{fill:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.05em}

.cht__band{fill:var(--brass);opacity:.14}
.cht__line{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:5 4}
.cht__dot{fill:var(--brass)}
.cht__bar{fill:var(--rule)}
.cht__bar--on{fill:var(--brass)}
.cht__area{fill:var(--brass);opacity:.16}
.cht__mark{stroke:var(--rule);stroke-width:1}
.cht__mark--on{stroke:var(--brass);stroke-width:2}
.cht__cell{fill:var(--rule)}
.cht__cell--on{fill:var(--brass)}
.cht__seg{fill:var(--ink3);stroke:var(--rule);stroke-width:1}
.cht__seg--on{fill:var(--brass);stroke:var(--brass)}

.cht__cap{
  margin-block-start:var(--s-4);padding-block-start:var(--s-3);
  border-block-start:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--bone-dim);line-height:1.6;max-inline-size:64ch;
}
.cht__src{
  display:block;margin-block-start:var(--s-2);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.05em;
}

/* on a phone the mono labels get too small to read at full chart width */
@media (max-width:34rem){
  .cht{padding:var(--s-3);margin-inline:calc(var(--pad) * -0.5)}
  .cht__lb,.cht__ax{font-size:13px}
  .cht__val{font-size:22px}
  .cht__seglb{font-size:12.5px}
}
@media (prefers-reduced-motion:no-preference){
  .cht__bar,.cht__seg{transition:fill .3s}
}

/* ==========================================================================
   ILLUSTRATIONS
   These are not charts. They show what the product is, so somebody who reads
   nothing on the page still understands the problem.
   ========================================================================== */

.art{margin:var(--s-8) 0;max-inline-size:100%}
.art svg{inline-size:100%;block-size:auto;display:block}
.art__cap{
  margin-block-start:var(--s-4);padding-block-start:var(--s-3);
  border-block-start:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--bone-dim);line-height:1.6;max-inline-size:64ch;
}

/* the mock AI answer */
.art__panel{fill:var(--ink2);stroke:var(--rule);stroke-width:1}
.art__bar{fill:var(--ink3)}
.art__dot{fill:var(--brass)}
.art__app{fill:var(--muted);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.art__q{fill:var(--bone);font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.015em}
.art__row{fill:var(--ink3);stroke:var(--rule);stroke-width:1}
.art__row--miss{fill:none;stroke:var(--brass);stroke-width:1;stroke-dasharray:4 4}
.art__brand{fill:var(--bone-dim);font-family:var(--f-body);font-size:14.5px}
.art__brand--miss{fill:var(--brass);font-weight:600}
.art__cite{fill:var(--muted);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em}
.art__miss{fill:var(--brass);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

/* one question, six surfaces */
.art__q_box{fill:var(--ink3);stroke:var(--brass-lo);stroke-width:1}
.art__q2{fill:var(--bone);font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.01em}
.art__wire{stroke:var(--rule);stroke-width:1;fill:none}
.art__surf{fill:var(--ink2);stroke:var(--rule);stroke-width:1}
.art__surf--on{fill:var(--ink3);stroke:var(--brass);stroke-width:1}
.art__sname{fill:var(--bone-dim);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.art__son{fill:var(--brass);font-family:var(--f-body);font-size:13px;font-weight:600}
.art__soff{fill:var(--muted);font-family:var(--f-body);font-size:13px}

/* a numbered sequence */
.art__node{fill:var(--ink2);stroke:var(--brass-lo);stroke-width:1}
.art__num{fill:var(--brass);font-family:var(--f-mono);font-size:12px;letter-spacing:.05em}
.art__spine{stroke:var(--rule);stroke-width:1}
.art__sh{fill:var(--bone);font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:-.015em}
.art__sp{fill:var(--muted);font-family:var(--f-body);font-size:13.5px}
.art__smeta{fill:var(--brass-lo);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

/* two columns compared */
.art__colh{fill:var(--muted);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.art__blk{stroke-width:1}
.art__blk--no{fill:var(--ink2);stroke:var(--rule)}
.art__blk--yes{fill:var(--ink3);stroke:var(--brass-lo)}
.art__blkt{fill:var(--bone-dim);font-family:var(--f-body);font-size:13.5px}

@media (max-width:34rem){
  .art__q{font-size:19px}
  .art__brand,.art__blkt{font-size:16px}
  .art__sname,.art__app,.art__cite,.art__miss{font-size:12.5px}
  .art__sh{font-size:18px}
  .art__sp{font-size:15px}
}

/* ---------- HERO IMAGE ----------
   The headline sits over this, so contrast is enforced by the overlay rather
   than trusted to whatever the image turned out like. The gradient is opaque
   on the left, where the text is, and clears on the right. */
.hero{position:relative;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{inline-size:100%;block-size:100%;object-fit:cover;object-position:75% 50%;opacity:.55}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--ink) 0%,var(--ink) 28%,rgba(13,18,16,.82) 52%,rgba(13,18,16,.45) 100%),
    linear-gradient(180deg,var(--ink) 0%,transparent 22%,transparent 74%,var(--ink) 100%);
}
@media (max-width:48rem){
  /* on a phone the text spans the full width, so the overlay has to as well */
  .hero__bg img{object-position:60% 50%;opacity:.4}
  .hero__bg::after{background:linear-gradient(180deg,rgba(13,18,16,.86) 0%,rgba(13,18,16,.94) 60%,var(--ink) 100%)}
}
@media (prefers-reduced-motion:no-preference){.hero__bg img{transition:opacity .6s}}

/* the four surfaces on each price card, so coverage is visible at the price
   rather than buried in the feature list */
.tier__surf{
  list-style:none;margin:var(--s-4) 0 0;padding:var(--s-3) 0 0;
  border-block-start:1px solid var(--rule);display:flex;flex-direction:column;gap:.35em;
}
.tier__surf li{
  display:grid;grid-template-columns:3.2rem 1fr;gap:.6em;align-items:baseline;
  font-size:var(--t-xs);
}
.tier__surf b{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  color:var(--brass);font-weight:400;
}
.tier__surf span{color:var(--bone-dim);line-height:1.45}
.tier__surf li.off b{color:var(--muted)}
.tier__surf li.off span{color:#6F7873}
.tier__surf li.off span::before{content:"\2014 ";color:var(--muted)}

/* ==========================================================================
   POST LIST
   Category, date and read time on every row, so the list can be scanned
   without opening anything.
   ========================================================================== */

.posts{display:flex;flex-direction:column;margin-block:var(--s-8)}
.post{border-block-start:1px solid var(--rule)}
.post:last-child{border-block-end:1px solid var(--rule)}
.post__link{
  display:block;padding-block:clamp(22px,3vw,32px);
  transition:padding-inline-start .22s,background .22s;
}
@media (hover:hover){
  .post__link:hover{padding-inline-start:var(--s-4);background:var(--ink2)}
  .post__link:hover .post__h{color:var(--brass-hi)}
  .post__link:hover .post__go i{transform:translateX(4px)}
}
.post__meta{
  display:flex;flex-wrap:wrap;gap:.6em var(--s-3);align-items:baseline;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;color:var(--muted);
}
.post__meta b{color:var(--brass);font-weight:400;text-transform:uppercase}
.post__meta time,.post__meta span{text-transform:none;letter-spacing:.04em}
.post__h{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem);letter-spacing:-.025em;
  color:var(--bone);margin:.45em 0 0;max-inline-size:34ch;transition:color .18s;
}
.post__x{font-size:var(--t-sm);color:var(--bone-dim);line-height:1.65;margin:.6em 0 0;max-inline-size:62ch}
.post__go{
  display:inline-flex;align-items:center;gap:.45em;margin-block-start:var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);
}
.post__go i{font-style:normal;transition:transform .22s}

/* a call to action inside the run, not only after it */
.posts__cta{
  border-block-start:1px solid var(--rule);background:var(--ink3);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-6);
}
.posts__cta__k{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block;
}
.posts__cta p{font-size:var(--t-sm);color:var(--bone-dim);margin:.4em 0 0;max-inline-size:44ch}
.posts__cta .btn{flex:none}

@media (pointer:coarse){.post__link{padding-block:24px}}

/* the same three signals on the article itself as on the list row */
.post__meta--head{margin-block-start:var(--s-4);display:flex}

.post__h{display:block}

/* the article index sits inside .prose so it inherits the shell column, but a
   66ch measure is right for paragraphs and wrong for a list of rows */
.prose .posts{max-inline-size:none;margin-inline:0}
.prose .posts__cta{max-inline-size:none}
.post__x{max-inline-size:58ch}

/* ---------- SHELL PROPORTIONS ----------
   The reading column carries the argument, so it gets the room. The sidebar is
   a fixed rail rather than a share of the width, which stops it growing on
   large screens where it has nothing more to say. */
@media (min-width:64rem){
  .shell{grid-template-columns:minmax(0,1fr) 18rem;gap:clamp(32px,4vw,64px)}
}
@media (min-width:90rem){
  .shell{grid-template-columns:minmax(0,1fr) 20rem}
}
/* long-form reading wants a slightly wider measure than a service page */
.prose{max-inline-size:72ch}
.prose > p,.prose > ul,.prose > ol{max-inline-size:68ch}

/* the profile link that makes sameAs reciprocal rather than asserted */
.foot__social{
  display:inline-flex;align-items:center;gap:.45em;margin-block-start:var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-dim);
  border:1px solid var(--rule);padding:.5em .8em;transition:border-color .2s,color .2s;
}
.foot__social i{font-style:normal;transition:transform .22s}
@media (hover:hover){
  .foot__social:hover{border-color:var(--brass-lo);color:var(--brass)}
  .foot__social:hover i{transform:translateX(3px)}
}
@media (pointer:coarse){.foot__social{min-block-size:44px}}