/* ---------- fonts ---------- */
/* Self-hosted so no visitor IP reaches a third party before the page
   renders. Archivo is a variable font, so one file covers 400-700;
   IBM Plex Mono is static and needs a file per weight. latin-ext is
   carried because the site prints Croatian diacritics. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/archivo-d5751e0f.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/archivo-342b9406.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/archivo-d5751e0f.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/archivo-342b9406.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/archivo-d5751e0f.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/archivo-342b9406.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/archivo-d5751e0f.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/archivo-342b9406.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/ibmplexmono-01c04f4d.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/ibmplexmono-2532acb5.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/ibmplexmono-5778b1a2.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/ibmplexmono-7300d08c.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/ibmplexmono-11ced52d.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/ibmplexmono-2d8cfbcb.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Light: cool paper. The accent is salmon, matching dark mode -- darkened
     to #b8482d because #ea8471 measures 2.27:1 on this ground and is
     unreadable. Severity stays separate and semantic. */
  --ground:#edeff1; --surface:#ffffff; --raise:#f7f8f9;
  --ink:#12171c; --ink-2:#39434e; --muted:#5a6672; --faint:#8b95a1;
  --rule:#d5dae0; --rule-2:#e4e8ec;
  --brand:#b8482d; --brand-bg:#fbeeea;
  /* Polaroid spectrum: red, orange, yellow, green, blue. Kept in the
     page's own register rather than fully saturated, so it reads as part
     of the design instead of pasted on. */
  --sp1:#CC3429; --sp2:#D9751E; --sp3:#D1A821; --sp4:#37A35B; --sp5:#2B78B2;
  --crit:#b02a1e; --crit-bg:#f7e9e7;
  --warn:#8a5a00; --warn-bg:#f8f0df;
  --ok:#1b6b4a;   --ok-bg:#e6f0eb;
  --info:#2a4f7c;  --info-bg:#e8eef5;
  --focus:#2a4f7c;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1318; --surface:#151B21; --raise:#1C242C;
    --ink:#e9edf0; --ink-2:#c2cad2; --muted:#8e99a4; --faint:#6a747e;
    --rule:#242C34; --rule-2:#1A2127;
    --brand:#ea8471; --brand-bg:#2a1714;
    --sp1:#EB4D42; --sp2:#ED9134; --sp3:#E6CA40; --sp4:#54C776; --sp5:#59A4DE;
    --crit:#ea8471; --crit-bg:#2a1714;
    --warn:#d7a44f; --warn-bg:#271e10;
    --ok:#72c69d;   --ok-bg:#12241c;
    --info:#8db4dd;  --info-bg:#141e29;
    --focus:#8db4dd;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1318; --surface:#151B21; --raise:#1C242C;
  --ink:#e9edf0; --ink-2:#c2cad2; --muted:#8e99a4; --faint:#6a747e;
  --rule:#242C34; --rule-2:#1A2127;
  --brand:#ea8471; --brand-bg:#2a1714;
  --sp1:#EB4D42; --sp2:#ED9134; --sp3:#E6CA40; --sp4:#54C776; --sp5:#59A4DE;
  --crit:#ea8471; --crit-bg:#2a1714;
  --warn:#d7a44f; --warn-bg:#271e10;
  --ok:#72c69d;   --ok-bg:#12241c;
  --info:#8db4dd;  --info-bg:#141e29;
  --focus:#8db4dd;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- layout ---------- */
.shell{max-width:1120px;margin:0 auto;padding-inline:20px}
/* The header is sticky, so an anchor jump would otherwise land underneath it.
   Measured: 59px on one row, 87px once the links wrap to a second, 117px when
   the links themselves wrap at 320px. A little air on top of each. */
html{scroll-padding-top:72px}
@media(max-width:760px){html{scroll-padding-top:100px}}
@media(max-width:340px){html{scroll-padding-top:130px}}
section{border-top:1px solid var(--rule)}
.band{padding-block:72px}
@media(max-width:620px){.band{padding-block:46px}}
.split{display:grid;grid-template-columns:172px minmax(0,1fr);gap:40px;align-items:start}
/* The 172px marginal column leaves roughly 120px of prose on a phone, which
   wraps every two words. Collapse it and lay the marker out horizontally,
   keeping its coloured rule as a short stub so it still reads as a marker. */
@media(max-width:860px){
  .split{grid-template-columns:minmax(0,1fr);gap:18px}
  .marginal{min-width:0;display:block;padding-top:12px}
  .marginal::before{right:auto;width:64px}
}
.marginal::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:var(--mark, var(--sp1));
}
.marginal{
  min-width:132px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  padding-top:9px;display:inline-block;position:relative;
}
h2{font-size:clamp(25px,3.1vw,34px);line-height:1.15;letter-spacing:-.022em;
   margin:0 0 14px;font-weight:600;text-wrap:balance}
h3{font-size:17px;letter-spacing:-.012em;margin:0 0 6px;font-weight:600}
.lede{color:var(--muted);font-size:17px;max-width:62ch;margin:0 0 30px}
p{margin:0 0 16px;max-width:66ch}

/* ---------- header ---------- */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;gap:26px;height:58px}
.wordmark{font-family:"IBM Plex Mono",Menlo,monospace;font-weight:600;
  font-size:15px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--brand)}
.nav nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav nav a{font-size:14px;color:var(--muted);text-decoration:none}
.nav nav a:hover{color:var(--ink)}
.nav nav a[aria-current]{color:var(--ink)}
.ghost{
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:12.5px;
  border:1px solid var(--ink);padding:6px 13px;text-decoration:none;
  white-space:nowrap;
}
.ghost:hover{background:var(--ink);color:var(--ground)}
/* Six links plus a button do not fit one phone line, and hiding pages is
   worse than a taller bar. The GitHub button is a sibling of <nav> rather
   than inside it, so it can sit up beside the wordmark and the links get a
   full row of their own: two rows instead of three. */
@media(max-width:760px){
  .nav{flex-wrap:wrap;height:auto;padding-block:10px;gap:10px 16px}
  .nav > .ghost{order:2;margin-left:auto}
  .nav nav{order:3;width:100%;margin-left:0;flex-wrap:wrap;gap:10px 18px}
  .nav nav a{font-size:14px}
}
@media(max-width:400px){
  .nav nav{gap:9px 14px}
  .nav nav a{font-size:13.5px}
}

/* ---------- hero ---------- */
.hero{padding-block:76px 64px;border-top:0}
.eyebrow{
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 20px;
}
h1{font-size:clamp(38px,6.2vw,66px);line-height:1.03;letter-spacing:-.04em;
   font-weight:700;margin:0 0 22px;max-width:16ch;text-wrap:balance}
.hero .lede{font-size:19px;max-width:56ch}
.cmdrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.cmd{
  display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--rule);padding:12px 14px;
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:13.5px;
  overflow-x:auto;max-width:100%;
}
.cmd .dollar{color:var(--faint);user-select:none}
.copy{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 6px;margin-left:auto;white-space:nowrap;
}
.copy:hover{color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:52px;align-items:end}
@media(max-width:940px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}}

/* ---------- terminal ---------- */
.term{
  background:var(--surface);border:1px solid var(--rule);
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:12.5px;line-height:1.65;
}
.term-bar{
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  border-bottom:1px solid var(--rule-2);color:var(--faint);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;
}
.term-body{padding:16px 14px;overflow-x:auto}
.term-body pre{margin:0;white-space:pre;font:inherit}
.c-crit{color:var(--crit)} .c-warn{color:var(--warn)} .c-ok{color:var(--ok)}
.c-mut{color:var(--faint)} .c-b{font-weight:600}

/* ---------- generic pieces ---------- */
.rows{border-top:1px solid var(--rule-2)}
.row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;
  padding:16px 0;border-bottom:1px solid var(--rule-2);align-items:baseline}
.row .k{font-family:"IBM Plex Mono",Menlo,monospace;font-size:12.5px;color:var(--muted)}
.row .v{color:var(--ink-2);font-size:14.5px}
.row .v strong{color:var(--ink);font-weight:600}
@media(max-width:620px){.row{grid-template-columns:minmax(0,1fr);gap:4px}}

.chip{
  display:inline-block;font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;font-weight:500;
}
.chip.crit{background:var(--crit-bg);color:var(--crit)}
.chip.high{background:var(--warn-bg);color:var(--warn)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.info{background:var(--info-bg);color:var(--info)}
/* One solid colour per section, stepping down the page: red, orange,
   yellow, green, blue. A page with fewer sections simply stops early. */
.mark-1{--mark:var(--sp1)}
.mark-2{--mark:var(--sp2)}
.mark-3{--mark:var(--sp3)}
.mark-4{--mark:var(--sp4)}
.mark-5{--mark:var(--sp5)}
.mark-1 .marginal,.mark-2 .marginal,.mark-3 .marginal,
.mark-4 .marginal,.mark-5 .marginal{
  color:color-mix(in srgb,var(--mark) 55%,var(--faint));
}
.cell p a,.prose a{color:var(--brand);text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);text-underline-offset:2px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2)}
.cell{background:var(--surface);padding:22px}
.cell p{font-size:14px;color:var(--muted);margin:0}
@media(max-width:820px){.grid3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.grid2{grid-template-columns:minmax(0,1fr)}}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:500;
  padding:0 14px 10px 0;border-bottom:1px solid var(--rule)}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule-2);
  vertical-align:top;color:var(--ink-2)}
td code,.icode{font-family:"IBM Plex Mono",Menlo,monospace;font-size:12.5px;
  color:var(--ink);background:var(--raise);padding:1px 5px}
p .icode{overflow-wrap:anywhere}
.scroll{overflow-x:auto}

.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2)}
.score{background:var(--surface);padding:20px}
.score .lab{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.score .n{font-size:38px;font-weight:600;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.1;margin-top:6px}
.score .n small{font-size:14px;color:var(--faint);font-weight:400;letter-spacing:0}
.track{height:4px;background:var(--rule);margin-top:12px}
.fill{height:100%}
@media(max-width:620px){.scores{grid-template-columns:minmax(0,1fr)}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);background:var(--surface)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-block:52px 34px}
.fgrid h4{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  margin:0 0 14px;font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fgrid a{font-size:14px;color:var(--muted);text-decoration:none}
.fgrid a:hover{color:var(--ink)}
.fnote{font-size:13.5px;color:var(--muted);max-width:40ch;margin:12px 0 0}
.byline{font-family:"IBM Plex Mono",Menlo,monospace;font-size:12px;
  color:var(--faint);margin:16px 0 0;letter-spacing:.01em}
.byline span{color:var(--ink);font-weight:500}
.fbase{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  padding-block:18px;border-top:1px solid var(--rule-2);
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:11.5px;color:var(--faint)}
@media(max-width:780px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media(max-width:460px){.fgrid{grid-template-columns:minmax(0,1fr)}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- page header (about / pricing) ---------- */
.pagehead{padding-block:64px 44px;border-top:0}
.pagehead h1{font-size:clamp(34px,5vw,54px);max-width:20ch}
.pagehead .lede{font-size:18px;max-width:58ch;margin-bottom:0}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2)}
.plan{background:var(--surface);padding:28px 24px;display:flex;flex-direction:column}
.plan.feature{background:var(--raise)}
.plan .tier{font-family:"IBM Plex Mono",Menlo,monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.plan .price{font-size:34px;font-weight:600;letter-spacing:-.035em;
  margin:14px 0 2px;font-variant-numeric:tabular-nums;line-height:1.1}
.plan .price small{font-size:14px;font-weight:400;color:var(--muted);
  letter-spacing:0}
.plan .who{font-size:14px;color:var(--muted);margin:10px 0 22px;min-height:44px}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:flex;
  flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2);flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.plan li::before{content:"—";color:var(--faint);flex:none;
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:12px;line-height:1.7}
.plan .act,.form .act{font-family:"IBM Plex Mono",Menlo,monospace;font-size:12.5px;
  border:1px solid var(--ink);padding:10px 14px;text-align:center;
  text-decoration:none;display:block;color:var(--ink);background:transparent}
.plan .act:hover,.form .act:hover{background:var(--ink);color:var(--ground)}
.plan .act.quiet{border-color:var(--rule);color:var(--muted)}
.plan .act.quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
@media(max-width:860px){.plans{grid-template-columns:minmax(0,1fr)}.plan .who{min-height:0}}

.note{border:1px solid var(--rule);background:var(--surface);padding:22px 24px}
.note h3{margin-bottom:8px}
.note p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- about ---------- */
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2)}
.principle{background:var(--surface);padding:24px}
.principle .num{font-family:"IBM Plex Mono",Menlo,monospace;font-size:11px;
  letter-spacing:.1em;color:var(--faint)}
.principle h3{margin:10px 0 7px}
.principle p{font-size:14px;color:var(--muted);margin:0}
@media(max-width:700px){.principles{grid-template-columns:minmax(0,1fr)}}
.prose p{font-size:16.5px;color:var(--ink-2);max-width:64ch}
.prose strong{color:var(--ink);font-weight:600}



/* ---------- faq ---------- */
.faqs{display:grid;gap:1px;background:var(--rule-2);
  border:1px solid var(--rule-2);margin-top:20px}
.faq{background:var(--surface);padding:22px 24px}
.faq h3{margin:0 0 8px;font-size:16px;letter-spacing:-.011em}
.faq p{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}


/* A trailing link inside the paragraph wrapped as loose words. On its own
   block it breaks as a unit, and never splits across two lines. */
.cell p.more{margin:12px 0 0}
.cell p.more a{white-space:nowrap}

/* A disclosure for the registered details. Worth being clear with anyone
   reading this file: it is tidiness, not protection. The text ships in the
   HTML either way, so a scraper reading the source sees all of it. */
.reveal{margin-top:10px}
.reveal summary{
  display:inline-block;cursor:pointer;list-style:none;
  font-family:"IBM Plex Mono",Menlo,monospace;font-size:11.5px;
  letter-spacing:.06em;color:var(--muted);
  border-bottom:1px dotted var(--rule-2);padding-bottom:1px;
}
.reveal summary::-webkit-details-marker{display:none}
.reveal summary::after{content:" +";color:var(--faint)}
.reveal[open] summary::after{content:" \2212"}
.reveal summary:hover{color:var(--ink)}
.reveal-body{margin-top:10px;padding-left:12px;border-left:1px solid var(--rule-2)}
.reveal-body p{margin:0 0 4px;font-size:13.5px;color:var(--muted);max-width:44ch}

/* ---------- contact form ---------- */
.form{margin-top:26px;max-width:560px;display:flex;flex-direction:column;gap:6px}
.form label{font-family:"IBM Plex Mono",Menlo,monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.form label .opt{text-transform:none;letter-spacing:0;font-size:11.5px;opacity:.75}
.form input,.form select,.form textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);padding:11px 13px;width:100%;
  border-radius:0;appearance:none;
}
.form textarea{resize:vertical;min-height:130px;line-height:1.5}
.form select{
  /* appearance:none removes the native arrow, so draw one back in. */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--mark,var(--brand));outline-offset:-1px;border-color:transparent}
.form .act{margin-top:22px;align-self:flex-start;cursor:pointer}
.form .fnote{margin-top:14px;max-width:46ch}
@media(max-width:560px){.form .act{align-self:stretch;text-align:center}}

/* ---------- follow ---------- */
ul.follow{list-style:none;margin:20px 0 0;padding:0;display:flex;
  flex-direction:column;gap:1px;background:var(--rule-2);
  border:1px solid var(--rule-2)}
ul.follow a{display:flex;align-items:baseline;gap:12px;background:var(--surface);
  padding:13px 16px;text-decoration:none;color:var(--ink);font-size:14.5px;
  font-weight:500}
ul.follow a:hover{background:var(--raise);color:var(--mark,var(--brand))}
ul.follow a span{color:var(--muted);font-size:13px;font-weight:400;
  margin-left:auto;text-align:right}
/* Label and description share a line on desktop; on a phone the right-aligned
   description is squeezed to two words a line, so stack them instead. */
@media(max-width:560px){
  ul.follow a{flex-direction:column;align-items:flex-start;gap:4px}
  ul.follow a span{margin-left:0;text-align:left}
}