/* ============================================================================
   mentrel article system: the one stylesheet every long-form guide under site/
   links, so a design fix lands once instead of per page. Add a component here
   when an article needs one. The GA4 consent block, banner and gate script stay
   inline in each page on purpose: the consent default must run before gtag.js.

   Identity from CLAUDE.md: accent green #7edf75, ink #0E1014, off-white #ECEEF1,
   muted #9298A3. Display Space Grotesk, mono JetBrains Mono. Body is Newsreader
   (serif) so a long read stays comfortable; mono carries the real artifacts
   (user-agent strings, log lines, GA4 dimension paths). No em dashes anywhere.
   ============================================================================ */

:root {
  /* light palette (also the un-stamped default) */
  --bg:        #F4F6F2;   /* page ground, faint green-neutral bias */
  --surface:   #FFFFFF;   /* raised cards, callouts */
  --surface-2: #EEF1EB;   /* inset tint */
  --text:      #171A1F;
  --text-soft: #4C525C;
  --muted:     #6B7280;
  --line:      rgba(14,16,20,.13);
  --line-soft: rgba(14,16,20,.07);
  --accent:    #7edf75;   /* brand green, used as fill / rule / highlight */
  --accent-ink:#0E1014;   /* text on the accent */
  --link:      #1C7A45;   /* deep green, accessible link text on light */
  --term-bg:   #0E1014;   /* terminal / log blocks stay dark on light paper */
  --term-text: #E7EBE6;
  --term-dim:  #7f8a86;
  --code-bg:   #EAEEE6;
  --code-text: #22321f;
  --shadow:    0 1px 2px rgba(14,16,20,.05), 0 8px 30px rgba(14,16,20,.06);
  --measure:   39rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0E1014;
    --surface:   #161A20;
    --surface-2: #1B2027;
    --text:      #ECEEF1;
    --text-soft: #BAC0CA;
    --muted:     #9298A3;
    --line:      rgba(255,255,255,.13);
    --line-soft: rgba(255,255,255,.07);
    --accent:    #7edf75;
    --accent-ink:#0E1014;
    --link:      #8fe486;
    --term-bg:   #05070A;
    --term-text: #E7EBE6;
    --term-dim:  #6f7a76;
    --code-bg:   #1D232B;
    --code-text: #cfe9cb;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"] {
  --bg:        #0E1014;
  --surface:   #161A20;
  --surface-2: #1B2027;
  --text:      #ECEEF1;
  --text-soft: #BAC0CA;
  --muted:     #9298A3;
  --line:      rgba(255,255,255,.13);
  --line-soft: rgba(255,255,255,.07);
  --accent:    #7edf75;
  --accent-ink:#0E1014;
  --link:      #8fe486;
  --term-bg:   #05070A;
  --term-text: #E7EBE6;
  --term-dim:  #6f7a76;
  --code-bg:   #1D232B;
  --code-text: #cfe9cb;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 1.19rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(126,223,117,.35); }

.mono {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.disp {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* ---- top brand bar --------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2.2rem);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); }
.brand .word { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 1.06rem; }
.brand .tag { color: var(--muted); font-size: .74rem; letter-spacing: .01em; }
@media (max-width: 620px) { .brand .tag { display: none; } }
.topbar-actions { display: inline-flex; align-items: center; gap: .8rem; }
.toplink {
  font-family: "Space Grotesk", sans-serif; font-size: .82rem; font-weight: 600;
  text-decoration: none; color: var(--text-soft);
  padding: .34rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.toplink:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.themebtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--text-soft); cursor: pointer; transition: color .15s, border-color .15s;
}
.themebtn:hover { color: var(--text); border-color: var(--line); }
.themebtn svg { width: 17px; height: 17px; }

/* ---- hero (always dark, on brand) ----------------------------------------- */
.hero {
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(126,223,117,.16), transparent 55%),
    radial-gradient(90% 120% at 0% 0%, rgba(126,223,117,.06), transparent 50%),
    #0E1014;
  color: #ECEEF1;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-inner {
  max-width: 60rem; margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 4.8rem) clamp(1.1rem, 4vw, 2.2rem) clamp(2.4rem, 6vw, 3.6rem);
}
.eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
.hero h1 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(2.15rem, 6.2vw, 3.7rem); line-height: 1.03; letter-spacing: -.025em;
  text-wrap: balance; margin: 1.1rem 0 0; color: #F4F6F3;
}
.hero .dek {
  max-width: 41rem; margin: 1.3rem 0 0;
  font-size: clamp(1.12rem, 2.4vw, 1.35rem); line-height: 1.6; color: #C7CDD3;
}
.hero .dek b { color: #ECEEF1; font-weight: 600; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; align-items: center;
  margin-top: 1.9rem; font-family: "JetBrains Mono", monospace;
  font-size: .78rem; letter-spacing: .02em; color: #8b929c;
}
.hero-meta .dot { color: rgba(126,223,117,.7); }

/* ---- layout ---------------------------------------------------------------- */
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.2rem); }
main { padding: clamp(2.4rem, 6vw, 4rem) 0 1rem; }

/* running prose is capped narrower than structural blocks for readability */
main > .wrap > p,
main > .wrap > ul,
main > .wrap > ol,
section > p,
section > ul,
section > ol,
section > h3 { max-width: var(--measure); }

p { margin: 0 0 1.15rem; }
a { color: var(--link); text-decoration: none; }
main p a, .faq a { border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); padding-bottom: 1px; }
main p a:hover, .faq a:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
strong { font-weight: 600; color: var(--text); }
em { font-style: italic; }

/* section headers */
section { margin: 0 0 2.8rem; }
.sec-head { margin: 3rem 0 1.4rem; }
.sec-num {
  font-family: "JetBrains Mono", monospace; font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: .55rem;
}
.sec-num::before { content: ""; width: 1.7rem; height: 1px; background: var(--accent); opacity: .6; }
h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.15rem); line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance; margin: .5rem 0 0; color: var(--text);
  scroll-margin-top: 5rem;
}
h3 {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 1.28rem; line-height: 1.25; letter-spacing: -.01em;
  margin: 2rem 0 .5rem; color: var(--text);
}

ul, ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
li { margin: 0 0 .55rem; padding-left: .2rem; }
li::marker { color: var(--muted); }
ul.check { list-style: none; padding-left: 0; }
ul.check li { position: relative; padding-left: 2rem; }
ul.check li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1.2rem; height: 1.2rem; border-radius: .34rem;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1014' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")
    center / .8rem no-repeat;
  box-shadow: inset 0 0 0 1px rgba(14,16,20,.12);
}

/* ---- TL;DR panel ----------------------------------------------------------- */
.tldr {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
  padding: clamp(1.3rem, 3vw, 1.9rem); margin: 0 0 2.6rem;
}
.tldr .lbl {
  font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
}
.tldr .lbl-mark { width: .62rem; height: .62rem; border-radius: 2px; background: var(--accent); }
.tldr ul { margin: 0; padding-left: 0; list-style: none; }
.tldr li { position: relative; padding-left: 1.5rem; margin-bottom: .7rem; font-size: 1.06rem; line-height: 1.55; }
.tldr li:last-child { margin-bottom: 0; }
.tldr li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  border: 1.5px solid var(--accent);
}

/* ---- table of contents ----------------------------------------------------- */
.toc {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.3rem 0; margin: 0 0 2.8rem;
}
.toc .lbl {
  font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .9rem;
}
.toc ol { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.6rem; counter-reset: toc; }
@media (max-width: 640px) { .toc ol { grid-template-columns: 1fr; } }
.toc li { counter-increment: toc; margin: 0; padding: 0; }
.toc a {
  font-family: "Space Grotesk", sans-serif; font-size: .98rem; color: var(--text-soft);
  text-decoration: none; display: flex; gap: .7rem; align-items: baseline;
  padding: .25rem 0; border: none;
}
.toc a:hover { color: var(--text); }
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--accent);
  flex: none; padding-top: .1rem;
}

/* ---- the split diagram ----------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); margin: 1.4rem 0 1rem;
}
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.split-col { padding: clamp(1.1rem, 2.6vw, 1.6rem); }
.split-col.people { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); }
.split-divider {
  display: grid; place-items: center; padding: .8rem .3rem;
  background: var(--surface-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
@media (max-width: 720px) {
  .split-divider { border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
.split-divider span {
  font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg);
  text-align: center; line-height: 1.4;
}
@media (max-width: 720px) { .split-divider span { writing-mode: horizontal-tb; transform: none; } }
.split-col h4 {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.02rem; margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.split-col .where {
  font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.split-col.people .where { color: color-mix(in srgb, var(--link) 90%, var(--text)); }
.actor { padding: .7rem 0; border-top: 1px dashed var(--line-soft); }
.actor:first-of-type { border-top: none; }
.actor .ua { font-family: "JetBrains Mono", monospace; font-size: .82rem; color: var(--text); font-weight: 500; }
.actor .desc { font-size: .95rem; line-height: 1.45; color: var(--text-soft); margin-top: .15rem; }
.split-col.people .big { font-size: 1.02rem; line-height: 1.5; color: var(--text); }
.split-col.people .big b { font-weight: 600; }

/* ---- two-category flow lines ---------------------------------------------- */
.flows { display: grid; gap: .6rem; margin: 1.4rem 0 .5rem; max-width: var(--measure); }
.flow { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.flow-tag { flex: none; font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 600; padding: .26rem .55rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.flow-tag.people { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--link); border-color: transparent; }
.flow-line { font-size: .88rem; color: var(--text); line-height: 1.5; }

/* ---- the three-stage funnel (the article's spine, promoted to a thesis) ---- */
.thesis { margin: 0 0 2.8rem; padding: 0; border: none; }
.thesis-head { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.1rem; }
.thesis-eyebrow { font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.thesis-line { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  line-height: 1.12; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.funnel { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: .45rem; margin: 0; }
@media (max-width: 720px) { .funnel { grid-template-columns: 1fr; } }
.stage { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.2rem 1.2rem 1.3rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .4rem; }
.stage-n { font-family: "JetBrains Mono", monospace; font-size: .63rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.stage h4 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.24rem; margin: 0; letter-spacing: -.015em; }
.stage-q { font-size: 1rem; line-height: 1.42; color: var(--text); margin: 0; }
.stage-tool { margin-top: auto; font-family: "JetBrains Mono", monospace; font-size: .68rem; line-height: 1.45; letter-spacing: .01em; color: var(--muted); padding-top: .7rem; }
/* the highlighted stage: .blind in the AI-traffic guide (the stage nothing measures),
   .focus where a guide is about that stage. Same look, named for what each page means. */
.stage.blind, .stage.focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, var(--surface)), var(--surface));
  box-shadow: 0 2px 4px rgba(126,223,117,.12), 0 12px 34px rgba(14,16,20,.09); }
.stage.blind .stage-n, .stage.focus .stage-n { color: var(--link); }
.stage.blind .stage-tool, .stage.focus .stage-tool { color: color-mix(in srgb, var(--link) 85%, var(--text)); }
.stage-arrow { display: grid; place-items: center; font-family: "JetBrains Mono", monospace; color: var(--muted); font-size: 1.2rem; }
@media (max-width: 720px) { .stage-arrow { transform: rotate(90deg); padding: .2rem 0; } }

/* ---- terminal / log block -------------------------------------------------- */
.term {
  background: var(--term-bg); border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  margin: 1.3rem 0; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.term-bar .d { width: .62rem; height: .62rem; border-radius: 50%; background: rgba(255,255,255,.18); }
.term-bar .ttl { margin-left: .4rem; font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .1em; color: var(--term-dim); text-transform: uppercase; }
.term pre {
  margin: 0; padding: 1rem 1.1rem; overflow-x: auto;
  font-family: "JetBrains Mono", monospace; font-size: .82rem; line-height: 1.75;
  color: var(--term-text);
}
.term .g { color: var(--accent); }
.term .dim { color: var(--term-dim); }
.term .w { color: #f4d47c; }

/* inline code */
code {
  font-family: "JetBrains Mono", monospace; font-size: .86em;
  background: var(--code-bg); color: var(--code-text);
  padding: .1em .4em; border-radius: .35em; white-space: nowrap;
}
/* nowrap keeps short tokens (a user-agent, a GA4 dimension) in one piece, but a long path is wider
   than a phone column and pushed the whole page sideways; on narrow screens let it break instead */
@media (max-width: 640px) { code { white-space: normal; overflow-wrap: anywhere; } }

/* ---- tables ---------------------------------------------------------------- */
.scroll { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 34rem; }
thead th {
  text-align: left; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .8rem;
  letter-spacing: .02em; color: var(--text-soft); background: var(--surface-2);
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
}
tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.45; }
tbody tr:last-child td { border-bottom: none; }
td .ua { font-family: "JetBrains Mono", monospace; font-size: .85rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.pill {
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .04em; padding: .16rem .5rem; border-radius: 999px; white-space: nowrap;
}
.pill.logs { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.pill.yes { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--link); }
.pill.no  { background: rgba(180,90,80,.16); color: #b4564e; }
.pill.off { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
/* the lighter red is for dark grounds only; unguarded, :not([data-theme="light"]) also matched
   a light-OS visitor with no stored theme and put pale pink on the pale pill */
:root[data-theme="dark"] .pill.no { color: #e79b93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.no { color: #e79b93; } }

/* a wrapped row of pills, for enumerations (labels, categories) too long for a sentence */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 1.4rem; padding: 0; list-style: none; max-width: var(--measure); }
.chips li { margin: 0; padding: 0; }
.chips .pill { font-size: .74rem; padding: .28rem .65rem; }

/* ---- callout --------------------------------------------------------------- */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 1.15rem 1.3rem; margin: 1.6rem 0;
  box-shadow: var(--shadow);
}
.callout .ic { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); width: 1.7rem; height: 1.7rem; border-radius: 8px;
  display: grid; place-items: center; font-size: 1rem; }
.callout p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.callout .t { font-family: "Space Grotesk", sans-serif; font-weight: 600; display: block; margin-bottom: .25rem; }

/* ---- steps ----------------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; padding-left: 0; max-width: var(--measure); }
.steps > li { position: relative; padding-left: 2.6rem; margin-bottom: 1rem; counter-increment: step; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -.05em;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace; font-size: .82rem; color: var(--text);
  display: grid; place-items: center;
}

/* ---- CTA / service block --------------------------------------------------- */
.cta {
  background:
    radial-gradient(120% 160% at 90% 0%, rgba(126,223,117,.14), transparent 60%),
    #0E1014;
  color: #ECEEF1; border-radius: 18px; padding: clamp(1.8rem, 4vw, 2.8rem);
  margin: 2.4rem 0 1rem; border: 1px solid rgba(255,255,255,.08);
}
.cta .eyebrow { color: var(--accent); }
.cta h3 { color: #F4F6F3; margin: .7rem 0 0; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.cta p { color: #C7CDD3; max-width: 40rem; margin: .8rem 0 0; }
.cta a.btn {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem;
  background: var(--accent); color: #0E1014; text-decoration: none; border: none;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem;
  padding: .8rem 1.4rem; border-radius: 999px; transition: transform .12s ease, box-shadow .15s ease;
}
.cta a.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(126,223,117,.28); }
.cta a.btn svg { width: 1rem; height: 1rem; }

/* ---- FAQ ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); margin-top: 1rem; }
.faq details {
  border-bottom: 1px solid var(--line); padding: .3rem 0;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.12rem;
  color: var(--text); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace; font-size: 1.3rem; color: var(--accent); font-weight: 400;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .a { padding: 0 0 1.2rem; max-width: var(--measure); }
.faq .a p { margin: 0; }

/* ---- footer / colophon ----------------------------------------------------- */
footer {
  margin-top: 3rem; border-top: 1px solid var(--line);
  background: var(--surface);
}
.foot-inner { max-width: 46rem; margin: 0 auto; padding: 2.4rem clamp(1.1rem, 4vw, 2.2rem) 3rem; }
.foot-lockup { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); }
.foot-lockup .word { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 1.1rem; }
.foot-tag { color: var(--muted); font-size: .92rem; margin: .7rem 0 0; }
.foot-row { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: 1.4rem;
  font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--muted); }
.foot-row a { color: var(--text-soft); text-decoration: none; }
.foot-row a:hover { color: var(--text); }
.sources { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.sources .lbl { font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.sources ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.sources li { margin-bottom: .35rem; }
.sources a { color: var(--link); }

.mark { display: block; flex: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* ---- consent banner + footer withdrawal (added for the hosted page) -------- */
.consent { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 60; max-width: 33rem;
  margin-left: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.35rem; box-shadow: var(--shadow);
  font-family: "Space Grotesk", system-ui, sans-serif; }
.consent[hidden] { display: none; }
.consent h2 { font-family: "Space Grotesk", sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 .55rem; color: var(--text); }
.consent p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.consent a { color: var(--link); }
.consent-actions { display: flex; gap: .65rem; margin-top: 1.15rem; flex-wrap: wrap; }
.consent-actions button { flex: 1 1 9rem; font-family: "Space Grotesk", sans-serif; font-size: .9rem;
  font-weight: 700; padding: .6rem 1.15rem; border-radius: .5rem; cursor: pointer;
  border: 1px solid transparent; }
.consent-actions .c-accept { background: var(--accent); color: var(--accent-ink); }
.consent-actions .c-accept:hover { filter: brightness(1.08); }
.consent-actions .c-reject { background: transparent; color: var(--text); border-color: var(--muted); }
.consent-actions .c-reject:hover { border-color: var(--accent); }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-soft);
  font-family: "JetBrains Mono", monospace; font-size: .76rem; }
.linkish:hover { color: var(--text); }