/* AFK AI site styles. External file so the CSP can be style-src 'self'
   (no inline <style> or style="" anywhere, including JS-generated markup).

   Design rule for this file: enclosure is a signal, not a default. Borders and
   cards are reserved for genuinely comparable objects (the three install steps,
   the closing call to action). Ordinary prose gets whitespace and type scale
   instead, so the things that ARE enclosed actually read as prominent. */

/* Self-hosted fonts (OFL licenses). Bricolage Grotesque is the display face;
   IBM Plex Mono covers anything a machine would say. Body uses the system stack.
   No third-party font origin: the CSP sets font-src 'self'. */
@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');font-weight:400 800;font-stretch:100%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---- Design variables -------------------------------------------------- */
:root{
  --bg:#f6f8fc; --band:#eef2f9; --panel:#ffffff; --panel-2:#f3f6fb;
  --text:#0a0c14; --muted:#4d5a70; --faint:#71809a;
  --accent:#1d4ed8; --accent-2:#047857; --warn:#9a5b00;
  --line:#d7e0ee; --line-soft:#e6ecf6;
  --shadow:0 10px 30px -12px rgb(10 20 40 / 0.12);
  --radius:14px; --radius-sm:10px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Bricolage Grotesque',system-ui,'Segoe UI',sans-serif;
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:104px;
  --focus:#0b40c8; --focus-halo:#ffffff;
  --tap:44px;

  /* The "local by default" band stays dark in BOTH themes, the same way the
     old code wells did. Its colours are the night tokens, pinned. */
  --dk-bg:#080b14; --dk-text:#eef2ff; --dk-muted:#a3b1c6; --dk-faint:#8494ad;
  --dk-line:#26324c; --dk-ok:#5eead4; --dk-warn:#fbbf24;
  --dk-focus:#9dc0ff; --dk-focus-halo:#04070f;
}
[data-theme='dark']{
  --bg:#080b14; --band:#0c111e; --panel:#111828; --panel-2:#141d31;
  --text:#eef2ff; --muted:#a3b1c6; --faint:#8494ad;
  --accent:#8ab0ff; --accent-2:#5eead4; --warn:#fbbf24;
  --line:#26324c; --line-soft:#1c2537;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --focus:#9dc0ff; --focus-halo:#04070f;
}

/* ---- Base -------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
img,svg{max-width:100%;height:auto}
/* Grid/flex children default to min-width:auto, which lets wide content push a
   track past the viewport. This is the actual cause of horizontal overflow. */
.wrap > *, .hero-grid > *, .local-grid > *, .steps > *, .proof > *, .claims > *, .closing > *, .foot-grid > *, .foot-links > *{min-width:0}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
h1,h2,h3,.brand{font-family:var(--display);letter-spacing:-.03em}
h1{font-size:clamp(2.3rem,7.5vw,3.9rem);line-height:1.02;margin:0 0 var(--s3);font-weight:700}
h2{font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.1;margin:0 0 var(--s2);font-weight:700;max-width:20ch}
h3{font-size:1.05rem;margin:0 0 6px;font-weight:650;letter-spacing:-.01em}
p{margin:0 0 var(--s3)}
.mono{font-family:var(--mono)}
.small{font-size:.9rem;line-height:1.6}
.muted{color:var(--muted)}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);max-width:58ch;margin:0 0 var(--s4);text-wrap:pretty}
.kicker{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}

.skip{position:absolute;left:-9999px;top:12px;background:var(--panel);padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);z-index:100}
.skip:focus{left:16px}

/* Visible, consistent keyboard focus everywhere. */
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
.section.dark a:focus-visible,.section.dark button:focus-visible{outline-color:var(--dk-focus)}

/* ---- Header ------------------------------------------------------------ */
.header{border-bottom:1px solid var(--line-soft);background:var(--bg);position:relative;z-index:5}
.topbar{display:flex;align-items:center;gap:var(--s3);min-height:64px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:1.1rem}
.brand:hover{text-decoration:none}
.mark{width:28px;height:28px;flex:0 0 auto}
.topnav{display:none;gap:var(--s4);margin-left:var(--s4);font-size:.94rem}
.topnav a{color:var(--muted);min-height:var(--tap);display:inline-flex;align-items:center}
.topnav a:hover{color:var(--text)}
.topacts{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ---- Buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:0 18px;border-radius:9999px;
  border:1px solid var(--line);background:transparent;color:var(--text);
  font-size:.95rem;font-weight:550;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:var(--shadow)}
.btn.primary:hover{border-color:var(--accent)}
.btn.compact{min-height:var(--tap);padding:0 16px;font-size:.9rem}
.btn.big{min-height:56px;padding:0 26px;font-size:1.02rem;font-weight:600}
.ico{width:18px;height:18px;flex:0 0 auto}
.ico.ok{color:var(--accent-2)}
.ico.warn{color:var(--warn)}
.icon-only{padding:0;width:var(--tap)}
.icon-only .btn-label{position:absolute;left:-9999px}

/* ---- Hero -------------------------------------------------------------- */
.hero{padding:var(--s6) 0 var(--s5);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1100px;height:620px;pointer-events:none;
  background:radial-gradient(closest-side,rgb(29 78 216 / .10),rgb(29 78 216 / 0))}
[data-theme='dark'] .hero::before{background:radial-gradient(closest-side,rgb(138 176 255 / .10),rgb(138 176 255 / 0))}
.hero-grid{position:relative;display:grid;gap:var(--s6);align-items:center}
.hero-copy h1{max-width:14ch}

.cta-row{display:flex;flex-direction:column;gap:var(--s2);align-items:stretch;margin:0 0 var(--s3)}
.cta-row .btn.big{width:100%}

/* Friend Beta is a STATE, so it carries the warn token. Colour is never
   decoration on this page. */
.status-chip{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:0 16px;margin:0;border-radius:9999px;
  border:1px solid rgb(154 91 0 / .34);background:rgb(154 91 0 / .08)}
.status-chip .dot{width:7px;height:7px;border-radius:9999px;background:var(--warn);flex:0 0 auto}
.status-name{font-size:.93rem;font-weight:600;color:var(--warn)}
.status-ver{font-size:.88rem;color:var(--warn)}
[data-theme='dark'] .status-chip{border-color:rgb(251 191 36 / .34);background:rgb(251 191 36 / .10)}
.status-chip.bare{border:0;background:none;justify-content:flex-start;padding:0;min-height:0}

.req{font-size:.86rem;color:var(--muted);margin:0 0 6px}
.hero-note{margin:0;max-width:52ch}

.hero-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s4)}
.portlist{margin:0;display:grid;gap:var(--s2)}
.portrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line-soft)}
.portrow:last-child{padding-bottom:0;border-bottom:0}
.portrow dt{font-weight:600}
.portrow dd{margin:0;font-size:.87rem;color:var(--muted)}
.panel-foot{display:flex;gap:10px;align-items:flex-start;margin:var(--s4) 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line-soft);font-size:.92rem;color:var(--muted)}
.panel-foot .mono{color:var(--text);font-size:.86rem}

/* ---- Sections ---------------------------------------------------------- */
.section{padding:var(--s6) 0}
.section.band{background:var(--band);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* ---- Steps ------------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.step{display:flex;flex-direction:column}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:var(--s4)}
.step-head{display:flex;align-items:center;gap:13px;margin:0 0 var(--s2)}
.num{width:34px;height:34px;flex:0 0 auto;border-radius:9999px;display:inline-flex;
  align-items:center;justify-content:center;font-size:.9rem;font-weight:500;
  color:var(--accent);background:rgb(29 78 216 / .12);border:1px solid rgb(29 78 216 / .30)}
[data-theme='dark'] .num{background:rgb(138 176 255 / .14);border-color:rgb(138 176 255 / .32)}
.step-title{font-family:var(--display);font-size:1.1rem;font-weight:650;letter-spacing:-.02em}
.step p{color:var(--muted);margin:0 0 var(--s3)}
.step-foot{font-size:.85rem;color:var(--muted);margin:auto 0 0;padding-top:var(--s3);border-top:1px solid var(--line-soft)}

.note{display:flex;gap:11px;align-items:flex-start;margin:var(--s4) 0 0;
  font-size:.97rem;color:var(--muted);max-width:92ch}

/* ---- Proof / claims lists ---------------------------------------------- */
.proof,.claims{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.proof li,.claims li{display:flex;gap:13px;align-items:flex-start}
.proof li p,.claims li p{color:var(--muted);margin:0}
.proof li svg,.claims li svg{margin-top:3px}

/* ---- Always-dark band -------------------------------------------------- */
.section.dark{background:var(--dk-bg);color:var(--dk-text);position:relative;overflow:hidden}
.section.dark::before{content:"";position:absolute;top:-300px;left:50%;transform:translateX(-50%);
  width:1000px;height:560px;pointer-events:none;
  background:radial-gradient(closest-side,rgb(94 234 212 / .09),rgb(94 234 212 / 0))}
.section.dark .wrap{position:relative}
.section.dark .kicker,.section.dark .lede,.section.dark .claims li p{color:var(--dk-muted)}
.section.dark .ico.ok{color:var(--dk-ok)}
.section.dark .ico.warn{color:var(--dk-warn)}
.section.dark .mono{color:var(--dk-text)}
.local-grid{display:grid;gap:var(--s5)}
.pill-note{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 16px;
  border-radius:9999px;border:1px solid rgb(94 234 212 / .28);background:rgb(94 234 212 / .08)}
.pill-note .dot{width:8px;height:8px;border-radius:9999px;background:var(--dk-ok);flex:0 0 auto}
.pill-note .mono{font-size:.88rem;color:var(--dk-ok)}
.claims li{padding-bottom:var(--s4);border-bottom:1px solid var(--dk-line)}
.claims li:last-child{padding-bottom:0;border-bottom:0}

/* ---- Closing ----------------------------------------------------------- */
.closing{display:grid;gap:var(--s4);padding:var(--s5) var(--s4)}
.closing h2{margin-bottom:var(--s2)}
.closing .lede{margin:0}
.closing-acts{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.closing-acts .btn.big{width:100%}
.closing-acts .req{margin:0}

/* ---- Footer ------------------------------------------------------------ */
.foot{border-top:1px solid var(--line-soft);padding:var(--s5) 0 var(--s6);background:var(--bg)}
.foot-grid{display:grid;gap:var(--s5)}
.foot-brand{display:flex;flex-direction:column;gap:var(--s2)}
.foot-brand p{margin:0}
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.foot-links > div{display:flex;flex-direction:column;gap:2px}
.foot-links a{color:var(--muted);font-size:.93rem;min-height:var(--tap);display:inline-flex;align-items:center}
.foot-links a:hover{color:var(--text)}
.foot-links .kicker{margin:0 0 2px}
.foot-legal{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-soft)}
.foot-legal p{margin:0 0 var(--s2)}
.foot-legal p:last-child{margin:0}

/* ---- Toast ------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:9999px;
  font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Responsive -------------------------------------------------------- */
@media (min-width:600px){
  .cta-row{flex-direction:row;align-items:center;flex-wrap:wrap}
  .cta-row .btn.big{width:auto}
  .closing-acts .btn.big{width:auto}
  .foot-links{grid-template-columns:repeat(3,minmax(0,auto));gap:var(--s6)}
}
@media (min-width:900px){
  .topnav{display:flex}
  /* Three across only once each card can hold a heading without wrapping it to
     three lines. Below this the cards stack full width, which reads better on
     a tablet than a row of 180px slivers. */
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{padding:var(--s7) 0 var(--s6)}
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .section{padding:var(--s7) 0}
  .proof,.claims{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
  .local-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
  .local-grid .claims{grid-template-columns:minmax(0,1fr)}
  .closing{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;padding:var(--s6)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:start}
}

/* Respect a reduced-motion preference: no transitions, no smooth scroll. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .btn:hover,.btn:active{transform:none}
}

/* -----------------------------------------------------------------------
   AFK AI / B2 Instrument System

   The Adaptive Media page above continues to use the established shared
   primitives. Everything below is scoped to the AFK homepage so the design
   convergence cannot turn the sibling product route into a portfolio skin.
   ----------------------------------------------------------------------- */
.afk-page{
  --bg:#f3f0e8;--band:#ebe7dc;--panel:#faf8f2;--panel-2:#e9e5da;
  --text:#171a18;--muted:#555d58;--faint:#505852;--accent:#1745c7;
  --accent-2:#17633a;--warn:#8b4c08;--line:#aeb5ae;--line-soft:#cfd3cd;
  --instrument:#252b27;--paper:#f8f5ed;--shipping-bg:#dfece3;
  --shipping-ink:#163d29;--beta-bg:#f2e4cc;--beta-ink:#623b0b;
  --direction-bg:#e1e7f0;--direction-ink:#243e65;
  background:var(--bg);color:var(--text);font-size:16px;
}
[data-theme='dark'] .afk-page{
  --bg:#10130f;--band:#171b16;--panel:#181c17;--panel-2:#20251f;
  --text:#f0f0e8;--muted:#b6bdb6;--faint:#929b93;--accent:#9bb4ff;
  --accent-2:#79d79e;--warn:#f2bd72;--line:#525b53;--line-soft:#343b34;
  --instrument:#edf0e9;--paper:#151914;--shipping-bg:#172b20;
  --shipping-ink:#9be1b5;--beta-bg:#312719;--beta-ink:#f3ca8b;
  --direction-bg:#1c2635;--direction-ink:#b9cdf3;
}
.afk-page .wrap{max-width:1280px;padding-inline:32px}
.afk-page h1,.afk-page h2,.afk-page h3,.afk-page .brand{font-family:var(--display)}
.afk-page h1{max-width:11ch;margin:0;font-size:clamp(3.5rem,7.4vw,6.65rem);font-weight:650;line-height:.87;letter-spacing:-.068em;text-wrap:balance}
.afk-page h2{max-width:15ch;margin:0;font-size:clamp(2.25rem,4.2vw,3.8rem);font-weight:600;line-height:.96;letter-spacing:-.052em;text-wrap:balance}
.afk-page h3{letter-spacing:-.018em}
.afk-page p{margin-top:0}
.afk-page .skip{border-radius:0;background:var(--text);color:var(--bg);font-family:var(--mono);font-size:.82rem}
.afk-page .btn{min-height:44px;border-radius:2px;border-color:var(--line);box-shadow:none;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.035em;text-transform:uppercase}
.afk-page .btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.afk-page .btn.primary:hover{background:var(--accent);color:#fff;border-color:var(--accent);filter:none}
.afk-page .btn.ghost{background:transparent}
.afk-page .btn.big{min-height:54px;padding-inline:22px}
.afk-page .btn .ico{width:18px;height:18px}
.afk-page .text-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid currentColor;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.afk-page .text-link:hover{color:var(--accent)}
.afk-page :focus-visible{outline:3px solid var(--accent);outline-offset:4px;box-shadow:0 0 0 2px var(--bg)}

.instrument-header{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:2px solid var(--text);backdrop-filter:blur(12px)}
.registration{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:62px;border-bottom:1px solid var(--line)}
.afk-brand{gap:11px;min-height:44px;padding:0;font-size:1rem;letter-spacing:-.025em}
.keymark{display:grid;place-items:center;width:42px;height:30px;background:var(--text);color:var(--bg);font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.05em}
.registration-note{display:flex;gap:24px;margin:0;color:var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
.registration-note span+span:before{content:'//';margin-right:24px;color:var(--faint)}
.instrument-nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:54px}
.afk-page .topnav{display:flex;align-items:center;gap:4px;min-width:0}
.afk-page .topnav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;color:var(--muted);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.055em}
.afk-page .topnav a:first-child{padding-left:0}
.afk-page .topnav a:hover{color:var(--text)}
.afk-page .topacts{display:flex;align-items:center;gap:8px}

.instrument-hero{padding:70px 0 88px;border-bottom:1px solid var(--text)}
.hero-register{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);gap:34px 72px}
.hero-register>.reference-label{grid-column:1/-1}
.reference-label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;color:var(--faint);font-family:var(--mono);font-size:.67rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.reference-label:after{content:'';flex:1;order:-1;max-width:64px;border-top:1px solid currentColor}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.maturity{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 9px;border:1px solid currentColor;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.maturity:before{content:'';width:7px;height:7px;background:currentColor}
.maturity-shipping{color:var(--shipping-ink)}
.maturity-beta{color:var(--beta-ink)}
.maturity-direction{color:var(--direction-ink)}
.hero-lede{max-width:57ch;margin:30px 0 0;color:var(--muted);font-size:1.08rem;line-height:1.68}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:32px}
.requirements{display:flex;flex-wrap:wrap;gap:0;margin:25px 0 0;color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.025em;text-transform:uppercase}
.requirements span{padding:6px 10px;border:1px solid var(--line);border-right:0}
.requirements span:last-child{border-right:1px solid var(--line)}

.setup-figure{align-self:end;margin:0;background:var(--paper);border:1px solid var(--text)}
.figure-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}
.figure-head .reference-label{flex:1}
.figure-state{margin:0;color:var(--muted);font-family:var(--mono);font-size:.67rem;text-transform:uppercase;letter-spacing:.06em}
.setup-diagram{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;padding:24px 18px}
.setup-node{display:flex;flex-direction:column;min-width:0;min-height:132px;padding:12px 8px;border-top:2px solid var(--text)}
.setup-node strong{margin-top:auto;font-family:var(--display);font-size:1.05rem}
.setup-node small{margin-top:3px;color:var(--muted);font-size:.72rem;line-height:1.35}
.node-index{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
.setup-join{display:grid;place-items:center;padding-inline:4px;color:var(--faint);font-family:var(--mono)}
.setup-figure figcaption{padding:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;line-height:1.55}

.truth-section{padding:88px 0;border-bottom:1px solid var(--text)}
.truth-shipping{background:var(--shipping-bg)}
.truth-beta{background:var(--beta-bg)}
.truth-direction{background:var(--direction-bg)}
.truth-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:72px}
.truth-heading{display:flex;flex-direction:column;align-items:flex-start}
.truth-heading .reference-label{width:100%;margin-bottom:36px}
.truth-heading h2{color:var(--text)}
.evidence-list{margin:0;border-top:2px solid var(--text)}
.evidence-list>div{display:grid;grid-template-columns:118px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 32%,transparent)}
.evidence-list dt{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.evidence-list dd{margin:0;font-size:1.02rem;line-height:1.55}
.limit-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--text)}
.limit-list li{display:grid;grid-template-columns:58px 1fr;gap:22px;padding:21px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 32%,transparent)}
.hanging-number{font-family:var(--mono);font-size:.7rem;color:var(--beta-ink)}
.limit-list h3{margin:0 0 5px;font-size:1.08rem}
.limit-list p{margin:0;color:var(--muted);line-height:1.55}
.direction-list{list-style:none;counter-reset:direction;margin:0;padding:0;border-top:2px solid var(--text)}
.direction-list li{counter-increment:direction;display:grid;grid-template-columns:minmax(180px,.8fr) 1.2fr;gap:24px;padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 32%,transparent)}
.direction-list li span{font-family:var(--display);font-size:1.07rem;font-weight:600}
.direction-list li span:before{content:'0' counter(direction) ' / ';font-family:var(--mono);font-size:.67rem;color:var(--direction-ink)}
.direction-list p{margin:0;color:var(--muted);line-height:1.55}

.proof-section{padding:96px 0;background:#151916;color:#eef0e9}
.proof-section .reference-label{color:#9da69e}
.proof-figure{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);margin:30px 0 0;border-top:1px solid #7d867e;border-bottom:1px solid #7d867e}
.proof-title-block{display:flex;flex-direction:column;align-items:flex-start;padding:42px 40px 46px 0;border-right:1px solid #7d867e}
.proof-title-block .maturity{color:#9be1b5}
.proof-title-block h2{color:#fff}
.proof-title-block>p:last-child{margin:28px 0 0;color:#bbc2bb;line-height:1.6}
.proof-field{display:grid;grid-template-columns:92px 1fr;min-width:0;padding:42px 0 46px 40px}
.proof-axis{display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #5a635b;color:#9da69e;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.proof-axis span{padding-right:18px}
.proof-readouts{margin:0;padding-left:34px}
.proof-readouts>div{display:grid;grid-template-columns:minmax(140px,.8fr) 1.2fr;gap:20px;padding:16px 0;border-top:1px solid #525b53}
.proof-readouts>div:first-child{border-top:2px solid #eef0e9}
.proof-readouts dt{font-family:var(--display);font-size:1.08rem;font-weight:600}
.proof-readouts dd{margin:0;color:#bbc2bb;font-size:.88rem;line-height:1.5}
.proof-figure figcaption{grid-column:1/-1;padding:14px 0;color:#9da69e;font-family:var(--mono);font-size:.67rem;letter-spacing:.025em}

.boundary-section{padding:96px 0;background:var(--paper);border-bottom:1px solid var(--text)}
.boundary-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:72px;align-items:start}
.boundary-grid h2{margin-top:34px}
.section-lede{max-width:54ch;margin:25px 0 0;color:var(--muted);font-size:1.03rem;line-height:1.65}
.boundary-map{border:1px solid var(--text)}
.boundary-local,.boundary-external{padding:24px}
.boundary-external{border-top:1px dashed var(--text);background:var(--band)}
.map-label{margin:0 0 20px;color:var(--faint);font-family:var(--mono);font-size:.67rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.map-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}
.map-row span{padding:14px 8px;border-top:2px solid var(--text);font-family:var(--display);font-weight:600;text-align:center}
.map-row span[aria-hidden='true']{border:0;color:var(--faint);font-family:var(--mono)}
.map-note{margin:22px 0 0;color:var(--muted);font-size:.78rem;line-height:1.55}
.boundary-external p:last-child{margin:0;font-family:var(--mono);font-size:.76rem;line-height:1.6}

.demo-section{padding:76px 0;background:var(--bg);border-bottom:1px solid var(--text)}
.demo-seam{display:grid;grid-template-columns:minmax(240px,.65fr) 1.35fr;gap:54px;align-items:center;padding:24px;border:1px dashed var(--line)}
.demo-marker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:220px;padding:28px;border:1px solid var(--line);background:var(--paper)}
.demo-marker span{border-left:1px solid var(--line);border-right:1px solid var(--line)}
.demo-marker span:nth-child(2){border-color:var(--text)}
.demo-seam h2{max-width:18ch;margin-top:28px;font-size:clamp(2rem,3.7vw,3.5rem)}
.demo-seam p:last-child{max-width:58ch;margin:20px 0 0;color:var(--muted);line-height:1.6}

.final-section{padding:88px 0;background:var(--text);color:var(--bg)}
.final-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:end}
.final-section .reference-label{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.final-section h2{max-width:15ch;margin-top:34px;color:var(--bg)}
.final-action>p:first-child{max-width:48ch;margin:0 0 24px;color:color-mix(in srgb,var(--bg) 76%,transparent);line-height:1.6}
.final-section .btn.primary{background:var(--bg);color:var(--text);border-color:var(--bg)}
.final-section .btn.primary:hover{background:#fff;color:#111;border-color:#fff}
.final-section .requirements{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.final-section .requirements span{border-color:color-mix(in srgb,var(--bg) 38%,transparent)}

.instrument-foot{padding:0;background:var(--bg);border-top:0}
.footer-register{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:46px;border-bottom:1px solid var(--line)}
.footer-register .small{margin:13px 0 0}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
.maker-line{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;color:var(--muted);font-family:var(--mono);font-size:.67rem;text-transform:uppercase;letter-spacing:.05em}
.maker-line p{margin:0}
.maker-line a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:980px){
  .hero-register{grid-template-columns:1fr;gap:40px}
  .setup-figure{width:100%}
  .truth-grid,.boundary-grid{grid-template-columns:1fr;gap:44px}
  .proof-figure{grid-template-columns:1fr}
  .proof-title-block{padding-right:0;border-right:0;border-bottom:1px solid #7d867e}
  .proof-field{padding-left:0}
  .final-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:760px){
  .afk-page .wrap{padding-inline:20px}
  .instrument-header{position:relative}
  .registration{min-height:56px}
  .registration-note span:first-child{display:none}
  .registration-note span+span:before{display:none}
  .instrument-nav-row{flex-wrap:wrap;padding-block:8px}
  .afk-page .topnav{order:2;width:100%;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .afk-page .topnav::-webkit-scrollbar{display:none}
  .afk-page .topnav a{white-space:nowrap}
  .afk-page .topacts{margin-left:auto}
  .instrument-hero{padding:48px 0 64px}
  .hero-register{gap:30px}
  .afk-page h1{font-size:clamp(3.2rem,14.5vw,5.6rem)}
  .setup-diagram{grid-template-columns:1fr;gap:0}
  .setup-node{min-height:84px;padding:12px 4px}
  .setup-join{justify-content:start;transform:rotate(90deg);padding:2px 8px}
  .truth-section,.proof-section,.boundary-section,.final-section{padding:66px 0}
  .truth-heading .reference-label{margin-bottom:28px}
  .evidence-list>div{grid-template-columns:90px 1fr;gap:16px}
  .proof-field{grid-template-columns:52px 1fr;padding-top:30px}
  .proof-readouts{padding-left:20px}
  .proof-readouts>div{grid-template-columns:1fr;gap:5px}
  .proof-axis span{padding-right:10px}
  .map-row{grid-template-columns:1fr}
  .map-row span[aria-hidden='true']{transform:rotate(90deg);padding:0}
  .demo-seam{grid-template-columns:1fr;gap:30px}
  .demo-marker{min-height:150px}
  .footer-register,.maker-line{align-items:flex-start;flex-direction:column}
  .footer-links{justify-content:flex-start}
}
@media (max-width:480px){
  .afk-page .wrap{padding-inline:16px}
  .afk-page h1{font-size:3.42rem}
  .afk-page .topnav{margin-inline:-16px;padding-inline:16px}
  .hero-lede{font-size:1rem}
  .hero-actions{align-items:stretch;width:100%}
  .hero-actions .btn,.hero-actions .text-link{width:100%;justify-content:center}
  .requirements span{width:50%;border-right:1px solid var(--line);border-bottom:0}
  .requirements span:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .evidence-list>div{grid-template-columns:1fr;gap:6px}
  .limit-list li{grid-template-columns:36px 1fr;gap:12px}
  .direction-list li{grid-template-columns:1fr;gap:6px}
  .figure-head{align-items:flex-start;flex-direction:column}
  .demo-seam{padding:16px}
  .final-section .btn{width:100%}
}
@media (max-width:240px){
  .instrument-nav-row{gap:8px}
  .afk-page h1{font-size:2.35rem}
  .afk-page .topnav{max-width:100%;margin-inline:0;padding-inline:0}
  .afk-page .topacts{display:grid;grid-template-columns:44px minmax(0,1fr);width:100%;margin-left:0}
  .afk-page .topacts .btn{min-width:0;padding-inline:8px}
  .afk-page .topacts .btn.ghost{width:44px;padding:0}
  .afk-page .topacts .btn.ghost span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .afk-page .maturity{max-width:100%;gap:6px;padding-inline:6px;font-size:.58rem;letter-spacing:.04em}
  .requirements span{width:100%;border-right:1px solid var(--line);border-bottom:0}
  .requirements span:last-child{border-bottom:1px solid var(--line)}
  .proof-field{grid-template-columns:64px minmax(0,1fr)}
  .proof-axis{font-size:.54rem;letter-spacing:.04em}
  .proof-axis span{padding-right:4px}
  .proof-readouts{padding-left:12px}
  .proof-readouts dt{font-size:.98rem;overflow-wrap:anywhere}
  .demo-seam .reference-label{align-items:flex-start;flex-direction:column;gap:6px}
  .demo-seam .reference-label:after{display:none}
}
@media (forced-colors:active){
  .afk-page .maturity,.afk-page .keymark,.afk-page .btn,.afk-page .setup-figure,.afk-page .boundary-map{forced-color-adjust:auto}
  .maturity:before{border:1px solid currentColor}
}