/* ============================================================
   De Poule-Agent · gedeelde stylesheet
   marcelalexander.ai design system v4 (project 0c45e9).
   "Geen woorden maar daden."

   Licht crème canvas · terra als énig signaal · vierkant,
   lijn-gebaseerd · géén gradient/glow/neon. De agent-hoek is
   de star: uitgedrukt via .on-nacht-blokken + JetBrains Mono.
   Tokens & regels: zie DESIGN.md.
   ============================================================ */

:root{
  /* ---- brand palette ---- */
  --creme:#F2EAD8; --nacht:#1A1A1A; --terra:#D97757; --salie:#8B9E7E; --lei:#7A8FA6;
  --creme-shade:#E8DEC6; --creme-deep:#D9CDB1;
  --nacht-soft:#2A2A2A; --nacht-line:#3A3A3A;
  --terra-deep:#B85F40; --terra-tint:#ECC2AD;
  --salie-deep:#6F8262; --lei-deep:#5E7790;

  /* ---- semantic (light) ---- */
  --bg:var(--creme); --bg-elevated:#F8F2E3; --bg-sunken:var(--creme-shade);
  --fg:var(--nacht); --fg-muted:#4A4744; --fg-soft:#6B6864; --fg-inverted:var(--creme);
  --signal:var(--terra); --signal-press:var(--terra-deep);
  --border:#1A1A1A; --border-soft:rgba(26,26,26,.12); --rule:rgba(26,26,26,.08);
  --focus-ring:var(--terra);

  /* ---- spacing / radii / borders ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-1:2px; --radius-2:4px; --radius-3:8px; --radius-pill:999px;
  --bw-hair:1px; --bw-rule:1.5px; --bw-bold:2px; --bw-frame:3px;

  /* ---- shadows (almost none) ---- */
  --shadow-1:0 1px 0 rgba(26,26,26,.08);
  --shadow-modal:0 24px 64px rgba(26,26,26,.22);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;

  /* ---- type ---- */
  --display:"Syne","DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --maxw:1120px;
}

/* on dark surfaces (the agent / terminal / footer) */
.on-nacht{
  --fg:var(--creme); --fg-muted:#BDB6A6; --fg-soft:#8E8978;
  --border:var(--creme); --border-soft:rgba(242,234,216,.14); --rule:rgba(242,234,216,.12);
  --bg:var(--nacht); --bg-elevated:var(--nacht-soft);
  background:var(--nacht); color:var(--creme);
}

/* ---- topbar (gedeelde nav, identiek op elke pagina) ---- */
header.topbar{position:sticky; top:0; z-index:30; background:var(--creme); border-bottom:1px solid var(--rule)}
header.topbar .bar{display:flex; align-items:center; gap:18px; max-width:var(--maxw); margin:0 auto; padding:16px 32px}
header.topbar .logo{display:inline-flex; align-items:center; gap:0; text-decoration:none; flex:none}
header.topbar .logo img{height:20px; display:block; width:auto}
header.topbar .logo .ai{font-family:var(--sans); font-weight:800; font-size:19px; color:var(--fg); letter-spacing:-.02em; line-height:20px}
header.topbar .logo .sub{font-family:var(--display); font-weight:700; font-size:16px; color:var(--fg-soft); margin-left:7px}
header.topbar nav.navlinks{flex:1; min-width:0; display:flex; justify-content:flex-end; gap:10px; flex-wrap:nowrap; border:none; padding:0; margin:0; max-width:none; background:transparent}
header.topbar nav.navlinks a{white-space:nowrap; font-size:14px}
header.topbar .right{flex:none; display:flex; align-items:center; gap:10px}
.langflag{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--fg-muted); background:transparent; border:1px solid var(--border-soft); border-radius:var(--radius-2); padding:5px 9px; cursor:pointer; transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.langflag:hover{color:var(--terra); border-color:var(--terra)}
header.topbar .navtoggle{display:none}
header.topbar nav.navlinks a.navcta{display:none}
header.topbar .hamburger{display:none; flex:none; cursor:pointer; padding:5px; color:var(--fg); line-height:0; border-radius:var(--radius-2)}
header.topbar .hamburger:hover{color:var(--terra)}
/* de horizontale nav heeft met 7 items ~651px nodig; onder deze breedte past dat niet
   naast logo + rechterblok, dus dan de hamburger. Was 880px (6 items). */

@media(max-width:1180px){
  header.topbar nav.navlinks{display:none}
  header.topbar .hamburger{display:inline-flex; order:2}
  header.topbar .logo .sub{display:none}
  header.topbar .right .btn{display:none}
  header.topbar .right{margin-left:auto; gap:6px}
  header.topbar .right .langflag{order:1}
  header.topbar .navtoggle:checked ~ nav.navlinks{display:flex; flex-direction:column; align-items:stretch; gap:0; flex:none; position:absolute; top:100%; left:0; right:0; background:var(--creme); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:4px 32px 16px; z-index:29; box-shadow:0 10px 18px rgba(26,26,26,.07)}
  header.topbar .navtoggle:checked ~ nav.navlinks a{padding:13px 2px; font-size:17px; border-bottom:1px solid var(--rule)}
  header.topbar .navtoggle:checked ~ nav.navlinks a.navcta{display:block; color:var(--terra); font-weight:700; border-bottom:none; margin-top:4px}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--creme); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
img{display:block; max-width:100%}
a{color:inherit}

/* ---- type primitives ---- */
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance}
h1{font-weight:800; font-size:clamp(40px,5.6vw,72px); line-height:1.04; letter-spacing:-.025em}
h2.sec{font-weight:800; font-size:clamp(30px,4vw,46px); line-height:1.05; letter-spacing:-.025em}
h3{font-weight:800; font-size:24px; line-height:1.15; letter-spacing:-.015em}
h4{font-weight:700; font-size:18px; line-height:1.15}
p{margin:0}

.eyebrow,.tag{
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--signal);
}
.caption{font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-soft)}
.mono{font-family:var(--mono)}
.lede{font-family:var(--sans); font-weight:500; font-size:20px; line-height:1.45; letter-spacing:-.01em; color:var(--fg)}
.accent{color:var(--terra)} .sage{color:var(--salie)} .slate{color:var(--lei)}

/* ============ NAV ============ */
nav{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-6);
  align-items:center; max-width:var(--maxw); margin:0 auto;
  padding:20px 32px; border-bottom:1px solid var(--rule);
  background:var(--creme); position:relative; z-index:20;
}
.brand{
  font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--fg);
}
.brand .sub{color:var(--fg-soft); font-weight:600}
.brand .dot{width:8px; height:8px; border-radius:50%; background:var(--terra)}
.navlinks{display:flex; gap:var(--space-6); justify-content:center}
.navlinks a{
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:-.005em;
  color:var(--fg); text-decoration:none; transition:color var(--dur-fast) var(--ease-out);
}
.navlinks a:hover{color:var(--terra)}
.navlinks a[aria-current="page"]{color:var(--terra)}
@media(max-width:880px){.navlinks{display:none}}

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.005em;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:13px 22px; border-radius:var(--radius-2); border:1.5px solid transparent;
  text-decoration:none; background:var(--terra); color:var(--creme);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.btn:hover{background:var(--terra-deep)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--nacht); color:var(--creme)}
.btn.secondary:hover{background:var(--nacht-soft)}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--border)}
.btn.ghost:hover{background:rgba(26,26,26,.06); color:var(--fg)}
.on-nacht .btn.ghost{border-color:var(--creme); color:var(--creme)}
.on-nacht .btn.ghost:hover{background:rgba(242,234,216,.10)}
.btn.sm{font-size:13px; padding:10px 16px}
:focus-visible{outline:2px solid var(--terra); outline-offset:2px}

/* ============ PAGE HEADER ============ */
.page-head{padding:var(--space-9) 0 var(--space-6)}
.page-head .eyebrow{display:block; margin-bottom:var(--space-4)}
.page-head h1{max-width:18ch}
.page-head p{margin-top:var(--space-5); font-family:var(--sans); font-weight:500; font-size:20px; line-height:1.45; letter-spacing:-.01em; color:var(--fg-muted); max-width:62ch}
.page-head p .accent{color:var(--terra)}

/* ============ SECTIONS ============ */
section{padding:var(--space-8) 0; position:relative}
.sec-head{max-width:64ch; margin-bottom:var(--space-7)}
.sec-head .eyebrow{display:block; margin-bottom:var(--space-3)}
.sec-head p{margin-top:var(--space-4); font-size:18px; color:var(--fg-muted)}
.divider{height:1px; background:var(--rule); max-width:var(--maxw); margin:0 auto}

/* reveal — fade-up 8px, the only entry animation */
.rv{opacity:0; transform:translateY(8px); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ============ CARDS ============ */
.cards{display:grid; gap:var(--space-4)}
.cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cols-3,.cols-2{grid-template-columns:1fr}}
.card{
  border:1px solid var(--border); border-radius:0; padding:var(--space-6);
  background:var(--bg-elevated); text-decoration:none; color:inherit; display:block;
  transition:border-color var(--dur-fast) var(--ease-out);
}
a.card:hover{border-color:var(--terra)}
.card .ic{
  width:44px; height:44px; border-radius:var(--radius-2); display:grid; place-items:center;
  border:1.5px solid var(--border); color:var(--terra); margin-bottom:var(--space-4);
}
.card h3{margin-bottom:var(--space-2)}
.card p{font-size:14px; line-height:1.6; color:var(--fg-muted)}
.card .more{margin-top:var(--space-4); font-family:var(--display); font-weight:700; font-size:13px; color:var(--terra); letter-spacing:-.005em}

/* ============ PANELS / ROWS (poule-ranking, fixtures) ============ */
.panel{border:1px solid var(--border); background:var(--bg-elevated); overflow:hidden}
.panel .ph{padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:12px}
.row{display:flex; align-items:center; gap:14px; padding:13px var(--space-5); border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:none}
.row .pos{font-family:var(--mono); font-size:13px; color:var(--fg-soft); width:22px}
.row .nm{flex:1; font-weight:500}
.row .pts{font-family:var(--mono); color:var(--fg-muted)}
.row.me{border-left:3px solid var(--terra); background:rgba(217,119,87,.06); padding-left:21px}
.row.me .nm{color:var(--terra); font-weight:700}
.row.me .pos{color:var(--terra)}

/* ============ GROUPS (12 groepstabellen) ============ */
.groups{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4)}
@media(max-width:980px){.groups{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.groups{grid-template-columns:1fr}}
.grp{border:1px solid var(--border); background:var(--bg-elevated); overflow:hidden}
.grp .gh{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px var(--space-4); border-bottom:1px solid var(--rule)}
.grp .gh .gl{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.01em}
.grp .gh .gs{font-family:var(--mono); font-size:10.5px; color:var(--fg-soft); letter-spacing:.02em; text-align:right}
.grp table{width:100%; border-collapse:collapse; font-size:13px}
.grp td{padding:8px var(--space-4); border-bottom:1px solid var(--rule)}
.grp tr:last-child td{border-bottom:none}
.grp .p{width:14px; color:var(--fg-soft); font-family:var(--mono); font-size:11px}
.grp .t{font-weight:500; position:relative}
.grp .pt{text-align:right; font-family:var(--mono); color:var(--fg-muted); width:30px}
/* state marks: kleur in de tekst + 2px linker-tik, geen rij-vlak */
.grp tr.q .t{color:var(--salie-deep); font-weight:700; box-shadow:inset 2px 0 0 var(--salie)}
.grp tr.q .p{color:var(--salie-deep)}
.grp tr.lead .t{color:var(--terra); font-weight:700; box-shadow:inset 2px 0 0 var(--terra)}
.grp tr.lead .p{color:var(--terra)}
.grp tr.out .t{color:var(--fg-soft); text-decoration:line-through; text-decoration-thickness:1px}
.grp tr.out .p{color:var(--fg-soft)}

/* ============ FIXTURES ============ */
.fixtures{display:flex; flex-direction:column}
.fx{display:flex; align-items:center; gap:12px; padding:12px var(--space-5); border-bottom:1px solid var(--rule); font-size:14px}
.fx:last-child{border-bottom:none}
.fx .tm{font-family:var(--mono); font-size:12.5px; color:var(--terra); width:92px; flex:none}
.fx .mt{flex:1} .fx .mt .note{color:var(--fg-soft)}
.fx .nlt{font-family:var(--mono); font-size:11px; color:var(--fg-soft)}

/* stamp + placeholder + screenshot */
.stamp{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--fg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-pill); padding:6px 13px; margin-bottom:var(--space-5)}
.stamp .pulse{width:7px; height:7px; border-radius:50%; background:var(--salie)}
.placeholder{display:flex; align-items:center; gap:12px; padding:20px; margin:var(--space-4); border:1px dashed var(--border-soft); color:var(--fg-soft); font-size:14px}
.shot{display:block; width:calc(100% - 32px); margin:var(--space-4); border:1px solid var(--border)}

/* ============ BRACKET ============ */
.legend-bar{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--fg-soft); margin-bottom:var(--space-5)}
.legend-bar i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle}
.legend-bar i.win{background:var(--terra)} .legend-bar i.nl{background:var(--lei)} .legend-bar i.adv{background:var(--border-soft)}
.round{margin:var(--space-7) 0}
.round-h{display:flex; align-items:baseline; gap:14px; margin-bottom:var(--space-4); flex-wrap:wrap; padding-bottom:var(--space-3); border-bottom:1.5px solid var(--border)}
.round-h h3{font-size:22px}
.round-h .when{font-family:var(--mono); font-size:12px; color:var(--terra); letter-spacing:.04em}
.round-h .meta{font-size:13px; color:var(--fg-soft)}
.ties{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.ties{grid-template-columns:1fr}}
.tie{border:1px solid var(--border); background:var(--bg-elevated); padding:6px; position:relative}
.tie .mno{position:absolute; top:8px; right:10px; font-family:var(--mono); font-size:10px; color:var(--fg-soft)}
.team{display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:default; transition:background var(--dur-fast) var(--ease-out)}
.team:hover{background:rgba(26,26,26,.04)}
.team .seedlbl{font-family:var(--mono); font-size:10px; color:var(--fg-soft); width:30px; flex:none}
.team .tn{flex:1; font-weight:500; font-size:15px}
.team.win .tn{color:var(--terra); font-weight:700}
.team.win .tn::after{content:"✓"; margin-left:7px; font-size:11px; color:var(--salie)}
.team.win.nl .tn{color:var(--lei)}
.team.win.nl .tn::after{color:var(--lei)}
.team.adv .tn{color:var(--fg-soft)}
.team .prob{font-family:var(--mono); font-size:12.5px; color:var(--fg-soft); flex:none; width:44px; text-align:right}
.team.win .prob{color:var(--terra); font-weight:700}
.team.win.nl .prob{color:var(--lei)}
/* tooltip = small on-nacht card */
.team[data-tip]{position:relative; cursor:help}
.team[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; left:12px; right:12px; bottom:calc(100% + 6px); z-index:9;
  background:var(--nacht); color:var(--creme); border:1px solid var(--nacht-line); border-radius:var(--radius-2);
  padding:11px 13px; font-family:var(--sans); font-weight:400; font-size:12.5px; line-height:1.5;
  box-shadow:var(--shadow-modal); white-space:normal;
}
/* gloss = inline jargon-term tooltip, reuses the same tooltip look, for use anywhere in running text.
   :focus laat de uitleg ook op mobiel (tap) en via toetsenbord zien, niet alleen bij hover. */
.gloss[data-tip]{position:relative; cursor:help; border-bottom:1px dotted var(--fg-soft); white-space:nowrap}
.gloss[data-tip]:focus{outline:none}
.gloss[data-tip]:focus-visible{outline:2px solid var(--terra); outline-offset:2px; border-radius:2px}
.gloss[data-tip]:hover::after, .gloss[data-tip]:focus::after{
  content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 6px); z-index:9;
  background:var(--nacht); color:var(--creme); border:1px solid var(--nacht-line); border-radius:var(--radius-2);
  padding:9px 12px; font-family:var(--sans); font-weight:400; font-size:12.5px; line-height:1.5;
  box-shadow:var(--shadow-modal); white-space:normal; width:max-content; max-width:260px;
}
@media(max-width:520px){.gloss[data-tip]:hover::after, .gloss[data-tip]:focus::after{left:auto; right:0; max-width:220px}}
.finalbox{border:3px solid var(--border); background:var(--bg-elevated); padding:var(--space-7); text-align:center}
.finalbox .versus{font-size:18px; color:var(--fg-muted); margin-top:var(--space-2)}
.finalbox .champ{font-family:var(--display); font-weight:800; font-size:clamp(26px,4vw,40px); color:var(--terra); margin-top:var(--space-3); letter-spacing:-.02em}
.note{font-size:13px; color:var(--fg-soft); margin-top:var(--space-3)}

/* ============ NIVEAUS / STEPS (.on-nacht — de agent-signature) ============ */
.niveaus{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--creme)}
.niveaus.five{grid-template-columns:repeat(5,1fr)}
.niveau{padding:var(--space-5) var(--space-4) var(--space-4); border-right:1px solid rgba(242,234,216,.2); min-height:188px; display:flex; flex-direction:column}
.niveau:last-child{border-right:0}
.niveau--active{background:var(--terra); color:var(--creme)}
.niveau .n{font-family:var(--mono); font-size:13px; color:var(--terra); margin-bottom:var(--space-3)}
.niveau--active .n{color:var(--creme)}
.niveau-num{font-family:var(--display); font-weight:800; font-size:56px; line-height:1; letter-spacing:-.04em; margin-bottom:var(--space-3)}
.niveau h3{font-size:16px; margin-bottom:6px}
.niveau p{font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--fg-muted)}
.niveau--active p{color:rgba(242,234,216,.92)}
@media(max-width:760px){.niveaus,.niveaus.five{grid-template-columns:1fr 1fr}.niveau{border-right:0; border-top:1px solid rgba(242,234,216,.2)}.niveau:nth-child(-n+2){border-top:0}}
@media(max-width:460px){.niveaus,.niveaus.five{grid-template-columns:1fr}.niveau:nth-child(2){border-top:1px solid rgba(242,234,216,.2)}}

/* ============ DATA BARS ============ */
.bars{border:1px solid var(--border); background:var(--bg-elevated); padding:var(--space-6)}
.barrow{margin:0 0 var(--space-4)} .barrow:last-child{margin-bottom:0}
.barrow .lbl{display:flex; justify-content:space-between; font-size:14px; margin-bottom:7px}
.barrow .lbl .who{font-weight:600}
.barrow .lbl .who.pick{color:var(--terra)} .barrow .lbl .who.nl{color:var(--lei)}
.barrow .lbl .pctn{color:var(--fg-soft); font-family:var(--mono); font-size:12px}
.track{height:9px; border-radius:var(--radius-1); background:var(--bg-sunken); position:relative; overflow:hidden}
.fill{position:absolute; top:0; left:0; height:100%; border-radius:var(--radius-1)}
.fill.opta{background:var(--lei)} .fill.markt{background:var(--terra)}
.fill.nl{background:var(--lei)}
.two{display:grid; gap:5px}
.legend{display:flex; gap:18px; font-size:12px; color:var(--fg-soft); font-family:var(--mono)}
.legend i{display:inline-block; width:11px; height:8px; border-radius:var(--radius-1); margin-right:6px; vertical-align:middle}
.legend i.o{background:var(--lei)} .legend i.m{background:var(--terra)}
table.src{width:100%; border-collapse:collapse; font-size:14px}
table.src th,table.src td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
table.src th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); font-weight:400}
table.src td .mut{color:var(--fg-soft); font-size:12.5px}

/* ============ CASE + VERDENKINGSMETER (baat) ============ */
.case{border:1px solid var(--border); background:var(--bg-elevated); padding:var(--space-6); display:grid; grid-template-columns:1fr auto; gap:var(--space-5); align-items:start}
@media(max-width:620px){.case{grid-template-columns:1fr}}
.case+.case{margin-top:var(--space-4)}
.case .when{font-family:var(--mono); font-size:12px; color:var(--terra); letter-spacing:.04em}
.case h3{font-size:21px; margin:var(--space-2) 0 var(--space-3)}
.case .meta{display:grid; gap:10px; font-size:14.5px; line-height:1.5}
.case .meta .k{display:block; color:var(--fg-soft); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px}
.case .meta .counter .k{color:var(--salie-deep)}
.meter-wrap{text-align:right; min-width:124px}
.meter-wrap .ml{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:8px}
.meter{display:inline-flex; gap:5px}
.pip{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--border-soft); background:transparent}
.pip.on{background:var(--terra); border-color:var(--terra)}
.thread{border-left:3px solid var(--terra); padding:4px 0 0 var(--space-5); margin-top:var(--space-7)}
.thread p{color:var(--fg-muted); font-size:16px; line-height:1.6; max-width:72ch}

/* ============ CUI-BONO INSTRUMENT (baat.html, .on-nacht) ============ */
.ci-intro{font-size:17px; line-height:1.62; color:rgba(242,234,216,.9); max-width:66ch; margin-top:var(--space-3)}
.ci-block{margin-top:var(--space-7)}
.ci-block > h3, .ci-honest > h3{font-size:19px; color:var(--creme); margin-bottom:8px}
.ci-block > p, .ci-honest > p{font-size:15px; line-height:1.6; color:rgba(242,234,216,.82); max-width:70ch}
.ci-honest{margin-top:var(--space-7); border-left:3px solid var(--terra); padding-left:var(--space-5)}
.ci-honest strong, .ci-block strong{color:var(--creme)}
.prereg-card{border:1px solid rgba(242,234,216,.32); padding:var(--space-5); margin-top:var(--space-4); display:grid; grid-template-columns:1fr auto; gap:var(--space-5); align-items:start}
.prereg-card .pwhen{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--terra)}
.prereg-card h4{font-size:18px; color:var(--creme); margin:6px 0 9px}
.prereg-card .prat{font-size:14px; line-height:1.55; color:rgba(242,234,216,.8); max-width:62ch}
.prereg-lean{text-align:right; min-width:158px; font-family:var(--mono)}
.prereg-lean .lt{font-size:15px; color:var(--creme); font-weight:700}
.prereg-lean .lc{font-size:12px; color:rgba(242,234,216,.6); margin-top:5px}
.prereg-lean .lstatus{display:inline-block; margin-top:11px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding:3px 9px; border:1px solid rgba(242,234,216,.35); border-radius:999px; color:rgba(242,234,216,.68)}
.prereg-lean .lstatus.open{border-color:var(--terra); color:var(--terra)}
@media(max-width:620px){.prereg-card{grid-template-columns:1fr} .prereg-lean{text-align:left}}

/* ============ FOOTER (.on-nacht) ============ */
footer{margin-top:var(--space-8); padding:var(--space-8) 0 var(--space-6)}
.foot{display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-7)}
@media(max-width:760px){.foot{grid-template-columns:1fr; gap:var(--space-5)}}
footer .brand{color:var(--creme)}
footer .eyebrow{display:block; margin-bottom:var(--space-3)}
footer .tag-line{font-family:var(--display); font-weight:700; font-size:15px; line-height:1.35; letter-spacing:-.01em; color:var(--creme); max-width:42ch; margin-top:var(--space-3)}
footer p{font-size:14px; color:var(--fg-muted); max-width:60ch}
footer a{color:var(--creme); text-decoration:none; opacity:.82}
footer a:hover{color:var(--terra); opacity:1}
.disc{margin-top:var(--space-3); font-size:12px; color:var(--fg-soft); max-width:80ch; line-height:1.55}
.foot-foot{max-width:var(--maxw); margin:var(--space-7) auto 0; padding:var(--space-5) 32px 0; border-top:1px solid var(--border-soft); font-family:var(--mono); font-size:12px; color:var(--fg-soft)}