/* HeadcountZero — shared design system for every page that is not the LP.
   The LP (index.html) carries its own inline copy of these tokens because it is a
   single self-contained document; everything else links this file so the legal set
   and the glossary silo cannot drift into looking like different websites, which is
   exactly what happened when the glossary shipped as its own species. */

:root{
  --console:#0A0F1E;
  --console-2:#121A30;
  --console-line:#26314F;
  --ink:#131A26;
  --ink-soft:#4B5568;
  --ink-faint:#98A2B8;
  --ground:#FFFFFF;
  --band:#EEF1F6;
  --line:#D7DCE4;
  --verify:#00B257;
  --verify-ink:#00713A;
  --verify-tint:#E7F8EE;
  --verify-dark:#2FD97C;
  --draft:#FFAD0D;
  --draft-ink:#8F6400;
  --draft-tint:#FFF4DC;
  --refuse:#F23A50;
  --refuse-tint:#FEECEE;
  --buy:#FF7A1A;
  --buy-hi:#FFB224;
  --buy-2:#FF4D24;
  --buy-deep:#D63A12;
  --buy-ink:#B03400;
  --buy-tint:#FFF1E7;
  --night-text:#C7CFDF;
  --night-dim:#8A96B0;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  font-family:var(--sans);background:var(--ground);color:var(--ink);
  font-size:1.0625rem;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--verify);color:#fff}
a{color:var(--verify-ink)}
a:focus-visible{outline:3px solid var(--buy);outline-offset:3px;border-radius:4px}
strong{font-weight:700}
p{margin-bottom:1.05rem}
p:last-child{margin-bottom:0}
img,svg{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- type ---------------- */
h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:800;line-height:1.1;letter-spacing:-.032em;margin-bottom:.8rem}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:800;line-height:1.22;letter-spacing:-.02em;margin:2.6rem 0 .8rem}
h3{font-size:1.05rem;font-weight:800;line-height:1.3;margin:1.6rem 0 .45rem}
.lede{font-size:clamp(1.08rem,1.7vw,1.22rem);font-weight:500;line-height:1.55;color:var(--ink);margin-bottom:1.6rem}
.cap{font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
ul,ol{margin:0 0 1.15rem 1.3rem}
li{margin-bottom:.5rem}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--verify-ink);display:flex;align-items:center;
  gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.4rem;height:2px;background:var(--verify);flex:none}
.updated{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1.8rem;
}
/* the LP's phrase-highlighting device, so a heading here reads the same way */
.hl{color:var(--buy-ink)}
.hl-red{color:var(--refuse)}
.hl-ok{color:var(--verify-ink)}

/* ---------------- chrome ---------------- */
.topline{
  background:var(--console);color:var(--night-text);padding:.8rem 1.25rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.topline .wrap,.topline .artwrap{display:flex;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;align-items:center}
.topline a{color:var(--night-text);text-decoration:none}
.topline a:hover{color:#fff}
.topline .brand{color:#fff;font-weight:700}

.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem}
main{padding:3rem 0 4rem}
.sheet{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:2rem 1.4rem;box-shadow:0 14px 32px rgba(19,26,38,.06);
}
@media(min-width:640px){.sheet{padding:2.8rem 3rem}}

/* ---------------- components ---------------- */
.callout{
  border:1px solid var(--line);border-left:5px solid var(--verify);border-radius:0 12px 12px 0;
  background:var(--verify-tint);padding:1.15rem 1.25rem;margin:1.6rem 0;
}
.callout.warn{border-left-color:var(--draft);background:var(--draft-tint)}
.callout.stop{border-left-color:var(--refuse);background:var(--refuse-tint)}
.mailbox{
  display:inline-block;font-family:var(--mono);font-size:1rem;font-weight:700;
  background:#F7F9FC;border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;
  margin:.2rem 0 .6rem;
}
.entity{
  font-size:.9rem;color:var(--ink-soft);border-top:1px solid var(--line);
  margin-top:2.4rem;padding-top:1.2rem;
}

/* definition card — the glossary's core object, in the LP's language rather than
   the man-page species the seed site shipped with */
.def{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 2.2rem}
.def-bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--console);color:var(--night-dim);padding:.7rem 1.2rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.def-bar b{color:var(--verify-dark);font-weight:700}
.def-body{padding:1.4rem 1.25rem}
@media(min-width:640px){.def-body{padding:1.7rem 1.8rem}}
.def-k{
  font-family:var(--mono);font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:1.5rem 0 .5rem;
}
.def-k:first-child{margin-top:0}
.def-v>p+p{margin-top:.9rem}
.term{font-weight:700;color:var(--ink)}
.pos{font-family:var(--mono);font-size:.85em;color:var(--ink-faint)}
.def-lead{font-size:1.08rem}

.seealso{display:flex;flex-wrap:wrap;gap:.5rem}
.seealso a{
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.04em;
  text-decoration:none;color:var(--verify-ink);background:var(--verify-tint);
  border:1px solid #BFE8D2;border-radius:999px;padding:.35rem .75rem;
}
.seealso a:hover{background:#D8F2E4}

/* index list on the glossary hub */
.entries{list-style:none;margin:0;display:grid;gap:.9rem}
.entries li{margin:0}
.entries a{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.2rem;
  transition:border-color .12s ease,background .12s ease;
}
.entries a:hover{border-color:var(--verify);background:var(--verify-tint)}
.entries .t{font-weight:800;letter-spacing:-.01em;display:block;margin-bottom:.2rem}
.entries .d{color:var(--ink-soft);font-size:.95rem}

/* ---------------- the CTA back into the funnel ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  background:linear-gradient(135deg,var(--buy-hi) 0%,var(--buy) 30%,#FF5A14 62%,var(--buy-2) 100%);
  color:#fff;text-decoration:none;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;
  text-shadow:0 1px 2px rgba(120,22,0,.4);padding:1rem 1.9rem;border-radius:13px;
  box-shadow:0 2px 0 var(--buy-deep),0 12px 30px rgba(255,90,30,.38),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.promo{
  background:var(--console);color:var(--night-text);border-radius:16px;
  padding:1.8rem 1.4rem;margin:3rem 0 0;text-align:center;position:relative;overflow:hidden;
}
@media(min-width:640px){.promo{padding:2.4rem 2.6rem}}
.promo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:32px 32px;
}
.promo>*{position:relative}
.promo .eyebrow{color:var(--verify-dark);justify-content:center}
.promo h2{color:#fff;margin:0 0 .7rem;font-size:clamp(1.35rem,2.8vw,1.9rem)}
.promo p{color:var(--night-text);max-width:34rem;margin:0 auto 1.4rem}
.promo .fine{font-size:.85rem;color:var(--night-dim);margin:.9rem auto 0}

/* ---------------- newsletter (glossary hub; mirrors the LP block) ---------------- */
.news{
  background:var(--console);color:var(--night-text);border-radius:16px;
  padding:1.7rem 1.35rem;margin:3rem 0 0;position:relative;overflow:hidden;
}
@media(min-width:640px){.news{padding:2.2rem 2.4rem}}
.news::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:32px 32px;
}
.news>*{position:relative}
.news h2{color:#fff;margin:0 0 .7rem;font-size:clamp(1.3rem,2.6vw,1.7rem)}
.news p{color:var(--night-text)}
.news .muted{color:var(--night-dim)}
.news form{display:grid;gap:.7rem;margin-top:1.2rem}
@media(min-width:620px){.news form{grid-template-columns:1fr auto;align-items:start}}
.news input[type=email]{
  width:100%;padding:.9rem 1rem;font:inherit;color:#fff;background:#0A1120;
  border:1px solid var(--console-line);border-radius:10px;
}
.news input[type=email]::placeholder{color:#5E6B8C}
.news input[type=email]:focus{outline:2px solid var(--verify);outline-offset:1px}
.news button{
  padding:.9rem 1.5rem;font:800 1rem/1.2 var(--sans);color:#03150B;background:var(--verify);
  border:0;border-radius:10px;cursor:pointer;white-space:nowrap;
}
.news button:hover{background:var(--verify-dark)}
.news button[disabled]{opacity:.55;cursor:progress}
.news .msg{margin:.9rem 0 0;font-size:.92rem}
.news .msg.err{color:#FF8494}
.news .fine{font-size:.85rem;color:var(--night-dim);margin:.9rem 0 0}
.news #news-done strong{color:#fff}

/* ---------------- site footer: the link hub ----------------
   Multi-column, so the glossary and use-case clusters are reachable from every page
   rather than only from their own hubs. Authored once in build_seo.py and injected
   between the FOOTER markers, so fourteen pages cannot drift apart. */
.sitefoot{background:var(--console);color:var(--night-dim);font-size:.9rem;margin-top:4rem}
.fwrap{max-width:70rem;margin:0 auto;padding:0 1.25rem}
.sitefoot .fwrap{display:grid;gap:2.4rem;padding-top:3rem;padding-bottom:2.6rem}
@media(min-width:900px){
  .sitefoot .fwrap{grid-template-columns:minmax(15rem,1fr) 2.3fr;gap:3rem}
}
.fbrand .fmark{font:800 1.25rem/1.2 var(--sans);color:#fff;letter-spacing:-.02em;margin:0 0 .6rem}
.fbrand .fline{color:var(--night-dim);margin:0 0 1.2rem;max-width:22rem;line-height:1.55}
.fcta{
  display:inline-block;font-weight:800;font-size:.95rem;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--buy-hi) 0%,var(--buy) 34%,var(--buy-2) 100%);
  padding:.7rem 1.3rem;border-radius:11px;text-shadow:0 1px 2px rgba(120,22,0,.4);
  box-shadow:0 2px 0 var(--buy-deep),0 10px 24px rgba(255,90,30,.3);
}
.fcta:hover{filter:brightness(1.07)}
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
@media(min-width:640px){.fcols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fcol .fh{
  font:700 .72rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin:0 0 .9rem;
}
.fcol ul{list-style:none;margin:0;display:grid;gap:.5rem}
.fcol li{margin:0}
.fcol a{color:var(--night-dim);text-decoration:none;font-size:.92rem;line-height:1.4}
.fcol a:hover{color:#fff}
.fbase{border-top:1px solid var(--console-line)}
.fbase-in{display:grid;gap:.5rem;padding-top:1.4rem;padding-bottom:2.4rem}
@media(min-width:820px){.fbase-in{grid-template-columns:1fr 1fr;gap:2rem;align-items:start}}
.fbase p{margin:0;font-size:.82rem;line-height:1.6;color:#6B7796}

/* ================= ARTICLE LAYOUT =================
   Glossary entries and use-case pages are articles, not documents in a box. They were
   rendered inside the same .sheet card the legal pages use, which is why they read as a
   dump: no header hierarchy, no measure control, no way to navigate a 600-word page.
   This is the blog layout: breadcrumb, article header with meta, hero figure, then a
   two-column body with a sticky contents rail on desktop. */
.artwrap{max-width:74rem;margin:0 auto;padding:0 1.25rem}

.crumbs{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:1.6rem 0 0;
}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--verify-ink)}
.crumbs span{color:var(--ink-faint)}

.arthead{max-width:46rem;padding:1.6rem 0 2rem}
.arthead h1{
  font-size:clamp(2.1rem,4.6vw,3.15rem);font-weight:800;line-height:1.06;
  letter-spacing:-.035em;margin:0 0 1rem;
}
.arthead .stand{
  font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.5;color:var(--ink-soft);
  font-weight:450;margin:0 0 1.4rem;
}
.artmeta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.85rem 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);
}
.artmeta b{color:var(--ink-soft);font-weight:700}

/* ---- the two-column body ---- */
.artgrid{display:grid;gap:2.4rem;padding-bottom:1rem}
@media(min-width:1000px){
  .artgrid{grid-template-columns:minmax(0,1fr) 15rem;gap:3.5rem;align-items:start}
  .arttoc{position:sticky;top:2rem;order:2}
  .artbody{order:1}
}
.artbody{
  max-width:46rem;font-size:1.09rem;line-height:1.75;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 14px 32px rgba(19,26,38,.06);
  padding:1.6rem 1.3rem 2.2rem;
}
@media(min-width:640px){.artbody{padding:2.4rem 2.6rem 3rem}}
/* the first element inside the frame should not carry the body's top gap */
.artbody>*:first-child{margin-top:0}
.artbody>h2:first-child{margin-top:.4rem}
.artbody>p{margin-bottom:1.25rem}
.artbody h2{
  font-size:clamp(1.45rem,2.7vw,1.9rem);font-weight:800;line-height:1.2;
  letter-spacing:-.024em;margin:3rem 0 .9rem;scroll-margin-top:1.5rem;
}
.artbody h2::before{
  content:"";display:block;width:2.4rem;height:3px;border-radius:2px;
  background:var(--verify);margin-bottom:1rem;
}
.artbody h3{font-size:1.12rem;font-weight:800;margin:1.8rem 0 .5rem}
.artbody>ul{margin:0 0 1.25rem 1.3rem}

/* ---- contents rail ---- */
.arttoc .th{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .8rem;
}
.arttoc ul{list-style:none;margin:0;display:grid;gap:.1rem;
  border-left:2px solid var(--line);padding-left:0}
.arttoc li{margin:0}
.arttoc a{
  display:block;text-decoration:none;color:var(--ink-soft);font-size:.9rem;
  line-height:1.4;padding:.4rem 0 .4rem .9rem;margin-left:-2px;
  border-left:2px solid transparent;
}
.arttoc a:hover{color:var(--verify-ink);border-left-color:var(--verify)}
.arttoc a.on{color:var(--ink);font-weight:700;border-left-color:var(--verify)}

/* ---- the key-definition card, promoted out of the body ---- */
.keydef{
  background:var(--band);border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.4rem;margin:0 0 2.2rem;
}
@media(min-width:640px){.keydef{padding:1.7rem 1.9rem}}
.keydef .kk{
  font-family:var(--mono);font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verify-ink);margin:0 0 .6rem;
}
.keydef p{font-size:1.15rem;line-height:1.6;margin:0}
.keydef .term{font-weight:800}
.keydef .pos{font-family:var(--mono);font-size:.8em;color:var(--ink-faint)}

/* ---- figures ---- */
.fig{margin:0 0 2.4rem}
.fig svg{width:100%;height:auto;display:block;border-radius:14px}
.figcap{
  font-size:.85rem;color:var(--ink-faint);margin-top:.7rem;line-height:1.5;
  font-family:var(--mono);letter-spacing:.02em;
}
.artbody .fig{margin:2rem 0 2.4rem}
.artbody>.fig:first-child{margin:0 0 2rem}

/* ---- attributed quote card ----
   No portraits. Photographs of the people quoted are owned by news agencies, and a real
   face beside a buy button implies an endorsement nobody gave. The card carries name,
   role, publication, date and a link to the source, which is what a skeptical reader
   actually needs in order to check us. */
.quote{
  border:1px solid var(--line);border-left:4px solid var(--buy);border-radius:0 14px 14px 0;
  background:var(--band);padding:1.5rem 1.4rem;margin:2.2rem 0;
}
@media(min-width:640px){.quote{padding:1.8rem 2rem}}
.quote blockquote{margin:0 0 1.1rem;font-size:1.16rem;line-height:1.55;font-weight:500;letter-spacing:-.008em}
.quote figcaption{display:flex;flex-wrap:wrap;gap:.15rem 0;flex-direction:column}
.quote .who{font-weight:800;font-size:.98rem}
.quote .role{color:var(--ink-soft);font-size:.9rem}
.quote .src{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-faint);
  margin-top:.35rem;
}
.quote .src a{color:var(--verify-ink)}
.quote.pred{border-left-color:var(--draft)}
.quote.pred .flag{
  display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--draft-ink);
  background:var(--draft-tint);border:1px solid var(--draft);border-radius:4px;
  padding:.2rem .45rem;margin-bottom:.8rem;
}

/* ---- related grid ---- */
.related{border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem}
.related h2{font-size:1.3rem;font-weight:800;margin:0 0 1.2rem}
.relgrid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:700px){.relgrid{grid-template-columns:1fr 1fr}}
.relgrid a{
  display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:12px;padding:1rem 1.15rem;transition:border-color .12s,background .12s;
}
.relgrid a:hover{border-color:var(--verify);background:var(--verify-tint)}
.relgrid .t{display:block;font-weight:800;margin-bottom:.2rem;letter-spacing:-.01em}
.relgrid .d{color:var(--ink-soft);font-size:.92rem;line-height:1.45}