/* Caddium designsysteem "research paper" v2.
 *
 * Bron: docs/design-v2/caddium-paper.css — integraal overgenomen (opdracht
 * OPDRACHT-claude-code-design-v2.md, regel 11), met de officiële
 * huisstijlwaarden: --green #0F3D2E (Fairway Green, hover #1B5B46),
 * --gold #C8A24B (Champagne Gold); off-white blijft #fffefa. Goud als tekst,
 * focusring of datastreek gebruikt --gold-text #80672E (zelfde naam en waarde
 * als caddium-public.css), omdat #C8A24B op papier 2.38:1 haalt en de
 * opdracht AA-contrast eist.
 *
 * Twee bewuste afwijkingen van de bron, beide om de harde regel "header en
 * footer niet aanraken":
 * - de kale .btn-regels staan achter :where(main,.side,.sheet), zodat de
 *   "Start gratis"-knop in header.site-nav zijn huidige styling houdt;
 *   :where() voegt geen specificiteit toe, dus verder verandert er niets;
 * - het integratieblok hieronder wint de cascade van caddium-public.css en
 *   caddium-reference.css (Sora-koppen, groene links, 10px-knoppen) op
 *   pagina's met body.paper-v2, en staat vóór de v2-regels zodat elke
 *   componentregel een gelijkspel wint.
 *
 * Newsreader wordt self-hosted geladen, niet via fonts.googleapis.com: de
 * Content-Security-Policy in app/middleware.py staat alleen 'self' toe voor
 * stylesheets en fonts, dus de Google-variant valt stil terug op Georgia.
 */

@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-variable.woff2?v=20260906") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-Italic-variable.woff2?v=20260906") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================
   Site-integratie, bewust VOOR het v2-systeem: deze regels verslaan
   caddium-public.css en caddium-reference.css (latere file wint bij gelijke
   specificiteit), terwijl elke v2-componentregel verderop in dit bestand een
   gelijkspel van deze regels wint.
   ========================================================== */
body.paper-v2{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* Koppen: public/reference geven h1-h3 Sora, groen en letter-spacing -.035em.
   In de paperstijl: serif, h1 groen, h2-h4 inkt, erven verder gewoon. */
body.paper-v2 :where(main h1){font-family:var(--serif);color:var(--green);letter-spacing:-.018em}
body.paper-v2 :where(main h2,main h3,main h4){font-family:var(--serif);color:var(--ink);line-height:inherit;letter-spacing:normal;text-wrap:initial}

/* Knoppen in de inhoud: .reference-site .btn zet 10px-hoeken, 44px hoogte en
   .78rem — de v2-pil wint. De headerknop matcht deze selector niet. */
body.paper-v2 main .btn{min-height:auto;padding:.7rem 1.15rem;border-radius:999px;font-size:.95rem;font-weight:500}
body.paper-v2 main .btn:not(.ghost):not(.soon){color:#fff}

/* Focus in de inhoud: .reference-site :focus-visible zet een eigen ring. */
body.paper-v2 main :focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:3px}

/* Juridisch: één tekstkolom op --measure (opdracht regel 5). De .card-blokken
   waarin de tekst nu staat, worden hier gewone tekst met een scheidingslijn —
   een juridische pagina leest als document, niet als dashboard. */
body.legal-v2 main .wrap.legal{max-width:calc(var(--measure) + 5rem)}
body.legal-v2 main .wrap.legal>section.card,body.legal-v2 main .card{border:0;border-top:1px solid var(--rule);border-radius:0;background:transparent;padding:2rem 0 0;margin:0 0 2rem;box-shadow:none}
body.legal-v2 main .card:hover{transform:none;box-shadow:none;border-color:var(--rule)}
body.legal-v2 main .wrap.legal>section.card:first-child{border-top:0;padding-top:.5rem}
body.legal-v2 main h2.t{font-size:1.5rem;font-weight:400;margin:0 0 .8rem}
body.legal-v2 main .limits{list-style:none;padding:0;margin:1rem 0 0}
body.legal-v2 main .limits li{padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:1rem;line-height:1.6}

/* Prijzen: prijzen.js schrijft op het modelblok ook `price-card-model` uit,
   omdat tests/test_pricing_quota_view.py die naam pint als bewijs dat het
   AI-model getoond wordt. caddium-reference.css hangt daar zijn eigen doos
   aan met (0,3,0); deze regel (0,3,1) geeft het blok de v2-vorm terug. */
body.paper-v2 main .model.price-card-model{display:block;min-height:0;gap:0;margin:1rem 0 .4rem;padding:.7rem .9rem;border:1px solid transparent;border-radius:6px;background:var(--green-soft)}
body.paper-v2 main .model.price-card-model.best{background:var(--gold-soft);border-color:#E9D9AE}

/* Links: public kleurt elke link groen en bij hover goudbruin; in de
   paperstijl erven tekstlinks hun kleur en tekent alleen de onderstreping. */
body.paper-v2 main a:not(.btn):hover{color:inherit}
body.paper-v2 main .kicker a:hover,body.paper-v2 main .phero a:hover{color:var(--gold-text)}
body.paper-v2 main .steps a.more:hover,body.paper-v2 main .blk .lead a:hover,body.paper-v2 main section .lead a:hover{color:var(--green)}

/* Caddium designsysteem "research paper" v2 — één bron voor publieke site en app */
:root{
    --desk:#EFEDE6; --paper:#FFFEFA; --paper-2:#F6F4EC; --ink:#17201B; --ink-2:#4B554F; --ink-3:#6A7169; --rule:#E2E0D6;
    --green:#0F3D2E; --green-2:#1B5B46; --green-soft:#E6F0EA; --gold:#C8A24B; --gold-text:#80672E; --gold-soft:#FBF6EA;
    --serif:"Newsreader","Bitstream Charter",Georgia,serif; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --ease:cubic-bezier(.2,.7,.2,1);
  }

  :root{
    --paper:#FFFEFA; --paper-2:#F6F4EC; --ink:#17201B; --ink-2:#4B554F; --ink-3:#6A7169; --rule:#E2E0D6;
    --green:#0F3D2E; --green-2:#1B5B46; --green-soft:#E6F0EA; --gold:#C8A24B; --gold-text:#80672E;
    --serif:"Newsreader","Bitstream Charter",Georgia,serif; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --measure:36rem; --wrap:68rem;
  }
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;font-family:var(--serif);color:var(--ink);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
@media(min-width:52rem){.wrap{padding:0 2.5rem}}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem}
/* Header: bestaande navigatie */
  header.site{border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:.9rem}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{height:26px;display:block}
.brand .word{font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
nav.main ul{list-style:none;margin:0;padding:0;display:none;gap:1.4rem}
@media(min-width:52rem){nav.main ul{display:flex}}
nav.main a{text-decoration:none;color:var(--ink-2)}
nav.main a:hover,nav.main a:focus-visible{color:var(--green)}
:where(main,.side,.sheet) .btn{font-family:var(--sans);font-size:.95rem;font-weight:500;background:var(--green);color:#fff;border:0;padding:.7rem 1.15rem;border-radius:6px;text-decoration:none;display:inline-block;cursor:pointer;line-height:1.2}
:where(main,.side,.sheet) .btn:hover{background:var(--green-2)}
:where(main,.side,.sheet) .btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green)}
:where(main,.side,.sheet) .btn.ghost:hover{background:var(--green-soft)}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
/* Hero als research brief */
  .hero{padding:2.5rem 0 3rem;border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;gap:2.5rem}
@media(min-width:60rem){.hero .wrap{grid-template-columns:1.15fr .85fr;align-items:start;gap:4rem}}
.running{display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.78rem;color:var(--ink-3);border-bottom:1px solid var(--ink);padding-bottom:.55rem;max-width:var(--measure)}
.running strong{color:var(--ink);font-weight:500}
h1{font-weight:400;font-size:clamp(2rem,5vw,3.1rem);line-height:1.08;letter-spacing:-.018em;margin:2rem 0 1rem;max-width:20ch;text-wrap:balance}
.lede{font-size:1.2rem;line-height:1.5;color:var(--ink-2);margin:0;max-width:var(--measure)}
.abstract{margin:1.8rem 0 0;padding:1rem 1.2rem 1.1rem;background:var(--green-soft);max-width:var(--measure);border-left:2px solid var(--green)}
.abstract h2{font-size:.9rem;font-weight:500;color:var(--green);margin:0 0 .35rem;font-style:italic}
.abstract p{margin:0;font-size:1rem;line-height:1.6}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.6rem 0 0}
.cta .note{font-family:var(--sans);font-size:.85rem;color:var(--ink-3);flex-basis:100%}
/* Rechts: de bestaande voorbeeldanalyse als Fig. 1 */
  figure{margin:0}
.fig{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0 1rem}
.fig .frame{position:relative;background:var(--paper-2);aspect-ratio:4/3;overflow:hidden}
.fig .frame img{width:100%;height:100%;object-fit:cover;display:block}
.fig .frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.85rem;color:var(--ink-3)}
.findings{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.75rem}
@media(min-width:40rem){.findings{grid-template-columns:1fr 1fr}}
.findings li{border:1px solid var(--rule);padding:.8rem .95rem;background:#fff}
.findings .k{font-family:var(--sans);font-size:.75rem;color:var(--ink-3);display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}
.findings .k i{font-style:normal;color:var(--gold-text)}
.findings h3{font-size:1.05rem;font-weight:500;margin:0 0 .2rem}
.findings p{margin:0;font-size:.95rem;color:var(--ink-2)}
figcaption{font-size:.9rem;color:var(--ink-2);margin-top:.8rem;line-height:1.5}
figcaption b{font-weight:500;color:var(--ink)}
/* Fig. 2: tempo, interactief */
  .sec{padding:3.5rem 0;border-bottom:1px solid var(--rule)}
.sec .wrap{display:grid;gap:2rem}
@media(min-width:60rem){.sec .wrap{grid-template-columns:.85fr 1.15fr;gap:4rem}}
h2.t{font-size:1.7rem;font-weight:400;letter-spacing:-.01em;margin:0 0 .8rem;line-height:1.15}
.sec p{max-width:var(--measure)}
.fig svg{display:block;width:100%;height:auto}
.ctl{display:flex;align-items:center;gap:.8rem;margin-top:1rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-2)}
.ctl input[type=range]{flex:1;accent-color:var(--green)}
.ctl output{min-width:3.6rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.ref{stroke:var(--green);stroke-width:2;fill:none}
.ply{stroke:var(--gold-text);stroke-width:2;fill:none;stroke-dasharray:5 4}
.ax{stroke:var(--rule);stroke-width:1}
.lbl{font:.72rem var(--sans);fill:var(--ink-3)}
.lbl.g{fill:var(--green)}
.draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.4s ease-out forwards}
.ply.draw{animation-delay:.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.draw{animation:none;stroke-dashoffset:0}}
/* Wat we meten */
  .metrics{list-style:none;margin:1rem 0 0;padding:0;columns:1;gap:2rem}
@media(min-width:40rem){.metrics{columns:2}}
.metrics li{break-inside:avoid;display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:1rem}
.metrics li span{color:var(--gold-text);font-family:var(--sans);font-size:.8rem;min-width:1.4rem;padding-top:.2rem;font-variant-numeric:tabular-nums}
/* Bestaande blokken */
  .facts{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media(min-width:40rem){.facts{grid-template-columns:repeat(4,1fr)}}
.facts b{display:block;font-weight:500}
.facts li{font-size:.95rem;color:var(--ink-2)}
.discover{display:grid;gap:1rem;margin-top:1.2rem}
@media(min-width:40rem){.discover{grid-template-columns:repeat(3,1fr)}}
.discover a{text-decoration:none;border:1px solid var(--rule);padding:1.1rem 1.2rem;background:#fff;display:block}
.discover a:hover{border-color:var(--green)}
.discover small{font-family:var(--sans);font-size:.75rem;color:var(--gold-text)}
.discover h3{font-size:1.15rem;font-weight:500;margin:.3rem 0 .3rem}
.discover p{margin:0 0 .6rem;font-size:.95rem;color:var(--ink-2)}
.discover span{font-family:var(--sans);font-size:.85rem;color:var(--green)}
.final{text-align:left;padding:4rem 0}
.final h2{font-size:1.9rem;font-weight:400;margin:0 0 .4rem;letter-spacing:-.01em}
.final p{margin:0 0 1.2rem;color:var(--ink-2)}
footer.site{border-top:1px solid var(--ink);padding:2.5rem 0 3rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-2)}
footer.site .cols{display:grid;gap:1.5rem}
@media(min-width:40rem){footer.site .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
footer.site h4{font-family:var(--serif);font-size:1rem;font-weight:500;margin:0 0 .5rem}
footer.site a{display:block;text-decoration:none;color:var(--ink-2);margin-bottom:.3rem}
footer.site a:hover{color:var(--green)}
footer.site .fine{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule);color:var(--ink-3);font-size:.8rem}
/* Hero v2 */
  .hero{padding:2.5rem 0 0;border-bottom:1px solid var(--rule)}
.hero .wrap+.wrap{margin-top:3rem;display:block}
.kicker{font-family:var(--sans);font-size:.85rem;color:var(--ink-2);margin:0 0 1rem}
.kicker a{color:var(--gold-text)}
h1{font-weight:400;font-size:clamp(2.2rem,5.4vw,3.3rem);line-height:1.08;letter-spacing:-.018em;margin:0 0 1.1rem;max-width:14ch;color:var(--green);text-wrap:balance}
h1 .tips{color:var(--ink-3);font-style:italic;font-weight:300}
.lede{font-family:var(--sans);font-size:1.15rem;line-height:1.55;color:var(--ink-2);max-width:32rem}
.lede sup{color:var(--gold-text);font-size:.62em}
.hero .fine{font-family:var(--sans);font-size:.85rem;line-height:1.55;color:var(--ink-2);max-width:34rem;margin:1.4rem 0 0}
.hero .fine b{color:var(--ink);font-weight:600}
.paper{background:var(--paper-2);padding:1.6rem 1.9rem 1.5rem;border:1px solid var(--rule);box-shadow:0 1px 2px rgba(23,32,27,.06),0 12px 28px -12px rgba(23,32,27,.25);max-width:26rem;justify-self:center}
@media(min-width:60rem){.paper{justify-self:end;margin-top:1.4rem}}
.paper small{font-family:var(--sans);font-size:.72rem;color:var(--gold-text);font-weight:500}
.paper h2{font-size:1.25rem;font-weight:500;line-height:1.3;margin:.5rem 0 .4rem;letter-spacing:-.01em}
.paper .auth{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);margin:0 0 .9rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.paper .res{font-size:.95rem;line-height:1.55;color:var(--green);margin:0}
.paper .res b{font-weight:500;color:var(--ink)}
.paper .refs{font-family:var(--sans);font-size:.7rem;line-height:1.5;color:var(--ink-3);margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule)}
.paper .refs span{color:var(--gold-text)}
.paper .pfoot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;font-family:var(--sans);font-size:.85rem}
.paper .pfoot a{color:var(--ink);font-weight:600;text-decoration:none}
.paper .pfoot span{font-size:.68rem;color:var(--ink-3)}
.stats{list-style:none;margin:0;padding:1.5rem 0 1.8rem;border-top:1px solid var(--rule);display:grid;gap:1.2rem}
@media(min-width:40rem){.stats{grid-template-columns:repeat(3,1fr);gap:0}
    .stats li{padding:0 1.5rem}.stats li:first-child{padding-left:0}.stats li+li{border-left:1px solid var(--rule)}}
.stats b{display:block;font-size:2rem;font-weight:400;line-height:1;margin-bottom:.4rem;color:var(--green)}
.stats span{font-family:var(--sans);font-size:.9rem;color:var(--ink-2);line-height:1.5}
.stats strong{color:var(--ink);font-weight:600}
.phero{padding:2.5rem 0 2.2rem;border-bottom:1px solid var(--rule)}
.phero h1{max-width:18ch;color:var(--ink);font-size:clamp(2rem,4.6vw,2.8rem)}
.phero .lede{margin-top:0}
.toggle{display:inline-flex;border:1px solid var(--ink);border-radius:6px;overflow:hidden;font-family:var(--sans);font-size:.9rem;margin-bottom:1.6rem}
.toggle button{font:inherit;background:transparent;border:0;padding:.55rem 1rem;cursor:pointer;color:var(--ink-2)}
.toggle button[aria-pressed=true]{background:var(--green);color:#fff}
.toggle small{font-size:.8em;opacity:.8}
.plans{padding:3rem 0;border-bottom:1px solid var(--rule)}
.plans .wrap{display:block}
table.tab{border-collapse:collapse;width:100%;margin-top:1rem;font-size:.98rem}
table.tab caption{caption-side:top;text-align:left;font-size:.9rem;color:var(--ink-2);margin-bottom:.7rem}
table.tab caption b{font-weight:500;color:var(--ink)}
table.tab th,table.tab td{text-align:left;vertical-align:top;padding:.8rem .8rem .8rem 0;border-bottom:1px solid var(--rule)}
table.tab thead th{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-weight:500;font-family:var(--serif);font-size:1.15rem;padding-top:1rem;padding-bottom:.8rem}
table.tab thead th.hl{color:var(--green)}
table.tab tbody th{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--ink-2);width:26%}
table.tab td.price{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--green)}
table.tab td.price small{display:block;font-family:var(--sans);font-size:.75rem;color:var(--ink-3);margin-top:.35rem;line-height:1.4}
table.tab td.hl{background:var(--green-soft)}
table.tab tfoot td{border-bottom:0;padding-top:1rem}
table.tab .todo{font-family:var(--sans);font-size:.75rem;color:var(--gold-text)}
/* Kolomlabels binnen een cel: alleen zichtbaar als de tabel gestapeld staat. */
.collabel{display:none}
@media(max-width:48rem){
    .card{border:1px solid var(--rule);padding:1.1rem 1.2rem}.card.hl{border-color:var(--green);background:var(--green-soft)}
    .card h3{font-weight:500;font-size:1.25rem;margin:0}.card .price{font-size:1.7rem;color:var(--green);margin:.4rem 0 .2rem}
    .card dl{margin:.6rem 0 1rem;font-size:.92rem}.card dt{font-family:var(--sans);font-size:.75rem;color:var(--ink-3);margin-top:.5rem}.card dd{margin:0}
  }
.note{max-width:var(--measure);margin-top:1.6rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-2);line-height:1.55}
.note b{color:var(--ink);font-weight:600}
.faq{padding:3rem 0;border-bottom:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);max-width:var(--measure)}
.faq summary{cursor:pointer;padding:.9rem 0;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--gold-text);font-family:var(--sans)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 1rem;color:var(--ink-2);font-size:.98rem}
.capline{font-size:.9rem;color:var(--ink-2);margin:1.6rem 0 .7rem}
.capline b{font-weight:500;color:var(--ink)}
.plans3{display:grid;gap:1.25rem;border-top:1px solid var(--ink);padding-top:1.5rem}
@media(min-width:52rem){.plans3{grid-template-columns:repeat(3,1fr)}}
.plan{border:1px solid var(--rule);background:#fff;padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.35rem}
.plan.rec{border-color:var(--gold-text);border-top-width:3px}
.plan .tag{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--green);margin:0 0 .2rem}
.plan h3{font-size:1.35rem;font-weight:500;margin:0 0 .6rem;color:var(--green)}
.plan .price{display:flex;align-items:flex-end;gap:.6rem;margin:0;line-height:1}
.plan .price>span{font-size:2.6rem;color:var(--green);letter-spacing:-.02em}
.plan .per{font-family:var(--sans);font-size:.75rem;color:var(--ink-2);line-height:1.25;padding-bottom:.3rem}
.plan .sub{font-family:var(--sans);font-size:.9rem;color:var(--ink-2);margin:.25rem 0 0}
.plan .sub.yr{font-size:.8rem;color:var(--ink-3)}
.plan .model{margin:1rem 0 .4rem;padding:.7rem .9rem;background:var(--green-soft);border:1px solid transparent}
.plan .model.best{background:#FBF6EA;border-color:#E9D9AE}
.plan .model small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--ink-2)}
.plan .model b{font-family:var(--sans);font-weight:600;font-size:.95rem}
.plan .incl{list-style:none;margin:.6rem 0 1.2rem;padding:.8rem 0 0;border-top:1px solid var(--rule);flex:1}
.plan .incl li{font-family:var(--sans);font-size:.88rem;color:var(--ink-2);padding:.2rem 0 .2rem 1.3rem;position:relative}
.plan .incl li::before{content:"✓";position:absolute;left:0;color:var(--green)}
.plan .btn{text-align:center}
.plan .btn.soon{background:var(--green-soft);color:var(--ink-3);cursor:default;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}
.plan .btn.soon:hover{background:var(--green-soft)}
.phero{padding:2.5rem 0 2.4rem;border-bottom:1px solid var(--rule)}
.phero .wrap{display:block}
.phero h1{max-width:20ch;color:var(--ink);font-size:clamp(2rem,4.6vw,2.8rem)}
.sec .wrap.one{display:block}
.fig .frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.8rem;color:var(--ink-3);padding:1rem;text-align:center}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps>li{display:grid;gap:1.5rem;padding:2.4rem 0;border-bottom:1px solid var(--rule)}
.steps>li:first-child{padding-top:1rem}
@media(min-width:60rem){.steps>li{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.steps .n{font-family:var(--sans);font-size:.8rem;color:var(--gold-text);margin:0 0 .5rem}
/* De stapkoppen staan op h2 omdat ze de hoofdsecties van Hoe het werkt
   zijn; als h3 sprong de kopstructuur van h1 naar h3 en leest een
   schermlezer een ontbrekend niveau. De vorm blijft dezelfde. */
.steps h3,.steps h2.stapkop{font-size:1.5rem;font-weight:400;margin:0 0 .6rem;letter-spacing:-.01em}
.steps ul{margin:.6rem 0 .8rem;padding-left:1.2rem;font-family:var(--sans);font-size:.92rem;color:var(--ink-2)}
.steps li li{margin:.15rem 0}
.steps a.more{font-family:var(--sans);font-size:.9rem;color:var(--green)}
.findings{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media(min-width:40rem){.findings{grid-template-columns:repeat(3,1fr)}}
.findings .k{font-family:var(--sans);font-size:.72rem;color:var(--ink-3);display:flex;gap:.4rem;margin-bottom:.3rem}
.findings h3,.findings h4{font-size:1.02rem;font-weight:500;margin:0 0 .2rem}
.findings p{margin:0;font-size:.9rem;color:var(--ink-2)}
.duo2{display:grid;gap:1.5rem}
@media(min-width:40rem){.duo2{grid-template-columns:1fr 1fr}}
.todo{font-family:var(--sans);font-size:.75rem;color:var(--gold-text)}
.points{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.points li{display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--rule)}
.points .n{font-family:var(--sans);font-size:.8rem;color:var(--gold-text);padding-top:.35rem}
.points h3{font-size:1.2rem;font-weight:500;margin:0 0 .3rem}
.points p{margin:0;color:var(--ink-2);font-size:.98rem}
.box{border:1px solid var(--ink);padding:1.4rem 1.5rem;background:#fff;max-width:26rem}
.box small{font-family:var(--sans);font-size:.75rem;color:var(--gold-text);font-weight:600}
/* `.boxkop` is dezelfde vorm zonder kop te zijn: de box is een
   illustratie, geen sectie van het document. */
.box h3,.box .boxkop{font-size:1.25rem;font-weight:500;margin:.4rem 0 .4rem}
.box p{font-size:.95rem;color:var(--ink-2);margin:0 0 1rem}
.rows{border-top:1px solid var(--ink);margin-top:.8rem}
.rows div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:.85rem}
.rows div span:first-child{color:var(--ink-3)}
form.paper{max-width:32rem;font-family:var(--sans)}
form.paper label{display:block;font-size:.8rem;color:var(--ink-2);margin:1rem 0 .3rem}
form.paper input,form.paper textarea{width:100%;font:inherit;font-size:1rem;padding:.65rem .75rem;border:1px solid var(--rule);background:#fff;border-radius:4px}
form.paper input:focus,form.paper textarea:focus{border-color:var(--green);outline:2px solid var(--green-soft)}
form.paper textarea{min-height:9rem;resize:vertical}
form.paper .btn{margin-top:1.2rem}
.quote{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;margin:0;max-width:var(--measure);font-size:1.25rem;line-height:1.4}
.quote small{display:block;font-family:var(--sans);font-size:.8rem;color:var(--ink-3);margin-top:.5rem}
.tri{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media(min-width:40rem){.tri{grid-template-columns:repeat(3,1fr)}}
.tri li{border-top:1px solid var(--ink);padding-top:.9rem}
.tri b{display:block;font-weight:500;font-size:1.05rem;margin-bottom:.3rem}
.tri span{font-family:var(--sans);font-size:.92rem;color:var(--ink-2)}
@media(min-width:60rem){.phero .wrap{grid-template-columns:1.15fr .85fr;align-items:start}.box{justify-self:end;margin-top:1.4rem}}
@media(min-width:60rem){.phero .wrap{grid-template-columns:1.15fr .85fr;align-items:start}}
/* App-schil */
  body{background:var(--paper)}
.app{display:grid;min-height:100vh}
@media(min-width:60rem){.app{grid-template-columns:15.5rem 1fr}}
.side{border-right:1px solid var(--rule);padding:1.4rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem;font-family:var(--sans);font-size:.9rem;background:var(--paper)}
.side .brand{font-family:var(--serif);font-size:1.3rem;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.side .brand img{height:24px}
.side nav{border-top:1px solid var(--ink);padding-top:.6rem}
.side nav a{display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem;padding:.55rem 0;text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.side nav a span:first-child{color:var(--gold-text);font-size:.75rem;padding-top:.15rem}
.side nav a[aria-current]{color:var(--ink);font-weight:600}
.side nav a:hover{color:var(--green)}
.side .primary{margin-top:.4rem}
.side .primary .btn{width:100%;text-align:center}
.side .foot{margin-top:auto;font-size:.82rem;color:var(--ink-3);display:grid;gap:.4rem}
.side .foot a{text-decoration:none;color:var(--ink-2)}
.side .badge{display:inline-block;font-size:.7rem;color:var(--green);border:1px solid var(--green);padding:.1rem .45rem;border-radius:3px;margin-left:.3rem}
.content{padding:2rem 1.25rem 4rem}
@media(min-width:60rem){.content{padding:2.6rem 3.5rem 5rem}}
.inner{max-width:60rem}
.running{display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.78rem;color:var(--ink-3);border-bottom:1px solid var(--ink);padding-bottom:.55rem}
h1.pg{font-weight:400;font-size:clamp(1.8rem,3.6vw,2.4rem);letter-spacing:-.015em;margin:1.6rem 0 .3rem;line-height:1.1}
.sub{font-family:var(--sans);color:var(--ink-2);margin:0 0 2rem;font-size:.95rem}
.blk{border-top:1px solid var(--rule);padding:1.6rem 0 1.8rem;display:grid;gap:1.2rem}
@media(min-width:52rem){.blk{grid-template-columns:.7fr 1.3fr;gap:3rem}}
.blk h2{font-size:1.35rem;font-weight:400;margin:0 0 .4rem;letter-spacing:-.01em;display:flex;gap:.8rem}
.blk h2 span{color:var(--gold-text);font-family:var(--sans);font-size:.8rem;padding-top:.45rem}
.blk .lead{font-family:var(--sans);font-size:.9rem;color:var(--ink-2);margin:0}
.blk .lead a{color:var(--green)}
.card{border:1px solid var(--rule);background:#fff;padding:1rem 1.1rem}
.card .k{font-family:var(--sans);font-size:.72rem;color:var(--ink-3);display:flex;gap:.4rem;margin-bottom:.3rem}
.card .k i{font-style:normal;color:var(--gold-text)}
/* h2 as well as h3: the cards on the product and how-it-works pages are
   the top-level sections of those pages, so their heading is an h2 (finding
   13). Their size is a property of the card, not of the outline. */
.card h2,.card h3{font-size:1.1rem;font-weight:500;margin:0 0 .25rem}
.card p{margin:0;font-size:.92rem;color:var(--ink-2);font-family:var(--sans)}
.card.soft{background:var(--paper-2);border-color:transparent}
.two{display:grid;gap:.9rem}
@media(min-width:40rem){.two{grid-template-columns:1fr 1fr}}
.route{border:1px solid var(--ink);padding:1.4rem 1.5rem;display:grid;gap:1rem;background:#fff}
@media(min-width:52rem){.route{grid-template-columns:1.4fr .6fr}}
.route h2{font-size:1.6rem;font-weight:400;margin:0 0 .5rem;letter-spacing:-.01em}
.route p{font-family:var(--sans);font-size:.92rem;color:var(--ink-2);margin:0 0 1rem}
.stepsline{display:flex;gap:1.2rem;font-family:var(--sans);font-size:.8rem;color:var(--ink-3);margin-bottom:1.2rem}
.stepsline b{color:var(--ink);font-weight:600}
.stepsline span::before{content:attr(data-n)" ";color:var(--gold-text)}
.stat{border-left:1px solid var(--rule);padding-left:1.4rem}
.stat b{display:block;font-size:2.6rem;font-weight:400;line-height:1;color:var(--green)}
.stat small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-2);margin-top:.4rem;line-height:1.45}
.awards{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
@media(min-width:40rem){.awards{grid-template-columns:repeat(3,1fr)}}
.awards li{border-top:1px solid var(--rule);padding-top:.6rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-2)}
.awards b{display:block;color:var(--ink);font-weight:600}
.awards small{color:var(--ink-3)}
.drop{border:1.5px dashed var(--ink-3);padding:2.6rem 1.5rem;text-align:center;font-family:var(--sans);background:#fff}
.drop b{display:block;font-size:1rem;margin-bottom:.3rem}
.drop small{color:var(--ink-3);font-size:.8rem}
.drop .btn{margin-top:1rem}
.tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--ink);font-family:var(--sans);font-size:.9rem;margin:1.2rem 0 1.6rem}
.tabs a{text-decoration:none;color:var(--ink-2);padding:.5rem 0}
.tabs a[aria-current]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--green);margin-bottom:-1px}
.empty{border:1px solid var(--rule);padding:2.4rem 1.5rem;text-align:center;font-family:var(--sans);background:#fff}
.empty b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.3rem}
.empty p{color:var(--ink-2);font-size:.9rem;margin:0 0 1rem}
.frame{position:relative;background:var(--paper-2);aspect-ratio:16/10;overflow:hidden}
.frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.8rem;color:var(--ink-3)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame .tag{position:absolute;top:.6rem;left:.6rem;font-family:var(--sans);font-size:.7rem;background:#fff;border:1px solid var(--rule);padding:.15rem .45rem}
figcaption{font-size:.88rem;color:var(--ink-2);margin-top:.6rem}
.chain{list-style:none;margin:0;padding:0}
.chain li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.chain li span{font-family:var(--sans);font-size:.78rem;color:var(--gold-text);padding-top:.2rem}
.chain li p{margin:0}
.notice{font-family:var(--sans);font-size:.85rem;color:var(--ink-2);border:1px solid var(--rule);padding:.7rem 1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1.4rem;background:#fff}
.form label{display:block;font-family:var(--sans);font-size:.8rem;color:var(--ink-2);margin:.9rem 0 .3rem}
.form input,.form select{width:100%;max-width:26rem;font:inherit;font-family:var(--sans);font-size:.95rem;padding:.6rem .7rem;border:1px solid var(--rule);background:#fff;border-radius:4px}
.form small{display:block;font-family:var(--sans);font-size:.75rem;color:var(--ink-3);margin-top:.3rem}

/* ==========================================================
   V2-LAAG: modern gedrag bovenop de paperstijl. Latere regels winnen.
   ========================================================== */
html{background:var(--paper)}
body.in-app{background:var(--desk)}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:3px}

/* Knoppen: pil, pijl schuift mee */
:where(main,.side,.sheet) .btn{border-radius:999px;display:inline-flex;align-items:center;gap:.5rem;transition:background .2s,transform .2s var(--ease)}
:where(main,.side,.sheet) .btn:hover{background:var(--green-2);transform:translateY(-1px)}
:where(main,.side,.sheet) .btn i{font-style:normal;transition:transform .25s var(--ease)}
:where(main,.side,.sheet) .btn:hover i{transform:translateX(3px)}
:where(main,.side,.sheet) .btn.ghost:hover{background:var(--green-soft);transform:none}
.plan .btn{justify-content:center}
.plan .btn.soon{border-radius:999px}

/* Tekstlinks: onderstreping die intekent */
main a:not(.btn):not(.card):not(.brand){text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .25s var(--ease);padding-bottom:1px}
main a:not(.btn):not(.card):not(.brand):hover{background-size:100% 1px}
.kicker a,.running .gold,.phero a{color:var(--gold-text)}
.link,.more,.steps a.more,.blk .lead a,section .lead a,.discover span{color:var(--green)}

/* Kaarten: zachte hoeken, liften bij hover */
.card,.plan,.findings li,.discover a,.box,.paper,.empty,.notice,.cue{border-radius:6px}
.card,.plan,.findings li,.discover a{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover,.plan:hover,.findings li:hover,.discover a:hover{transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(23,32,27,.35);border-color:#CFCDC4}
.plan.rec:hover{border-color:var(--gold-text)}
.tri li,.points li{transition:background .2s}
.cue,.soft{border-radius:6px}

/* Figuren: één keer intekenen bij laden */
.draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.4s var(--ease) .3s forwards}
.line{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.4s var(--ease) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Eén georkestreerde lading per pagina */
main{animation:settle .7s var(--ease) both}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* App-schil v2: zijbalk op bureau, inhoud als vel papier */
body.in-app .app{background:var(--desk)}
body.in-app .side{border-right:0;background:transparent;position:sticky;top:0;height:100vh}
body.in-app .side nav a{padding:.55rem .4rem;margin:0 -.4rem;border-bottom:0;border-radius:4px;transition:background .2s var(--ease),color .2s}
body.in-app .side nav a:hover{background:rgba(23,32,27,.05);color:var(--ink)}
body.in-app .side nav a[aria-current],body.in-app .side nav a.on{background:var(--paper);color:var(--ink);font-weight:600}
body.in-app .side .primary .btn,body.in-app .side>.btn{width:100%;justify-content:center}
body.in-app .sheet,body.in-app main.content{background:var(--paper);margin:1.25rem 1.25rem 1.25rem 0;border-radius:6px;box-shadow:0 1px 0 rgba(23,32,27,.05),0 24px 48px -32px rgba(23,32,27,.35);padding:2.4rem 3.5rem 4rem}
@media(max-width:60rem){body.in-app .sheet,body.in-app main.content{margin:0;border-radius:0;padding:1.6rem 1.25rem 3rem}}
body.in-app .inner{max-width:96rem}
body.in-app .route{border-radius:6px;background:#fff}
body.in-app .blk{scroll-margin-top:1rem}
@media(min-width:52rem){body.in-app .blk{grid-template-columns:minmax(16rem,.55fr) 1.45fr;gap:3.5rem}}
.ring .fg,.bar i{transition:stroke-dashoffset 1.2s var(--ease) .3s,width 1s var(--ease) .5s}

@media(prefers-reduced-motion:reduce){main,.draw,.line,.ring .fg,.bar i{animation:none;transition:none;stroke-dashoffset:0}}
/* Figuren niet hoger dan een scherm-helft op brede schermen */
body.in-app .frame{aspect-ratio:16/9;max-height:520px}

/* Logo linksboven: beeldmerk + woordmerk uit de huisstijl */
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;background:none!important;padding:0}
.brand .mark{height:30px;width:30px;display:block}
.brand .word{height:20px;width:auto;display:block}
.brand .wordtxt{font-family:var(--serif);font-size:1.35rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
body.in-app .side .brand{padding:.2rem 0 .4rem}
body.in-app .side .brand .mark{height:34px;width:34px}
body.in-app .side .brand .word{height:22px}
header.site .brand .mark{height:28px;width:28px}

/* ==========================================================
   TIJDELIJK: v1-regels voor de zes pagina's die in stap 3 langs hun
   v2-referentie herbouwd worden (prijzen, hoe-het-werkt, voor-golfclubs,
   over-ons, veelgestelde-vragen, contact). Dit blok verdwijnt per pagina
   zodra die herbouwd is.
   ========================================================== */
/* ==========================================================================
 * De gedeelde paperstijl uit docs/design/*-reference.html.
 *
 * Alle zeven referentiebestanden dragen exact dezelfde CSS; dit is die
 * stylesheet, één keer, gescoped onder `body.paper-page`. Gegenereerd uit het
 * referentiebestand en niet overgetypt, zodat er geen verschillen in kunnen
 * sluipen.
 *
 * Wat bewust NIET is overgenomen: `header.site`, `footer.site`, `nav.main` en
 * `.brand`. De navigatie en de footer van de site blijven 100% origineel.
 * ========================================================================== */

body.paper-page { --paper:#FFFEFA; --paper-2:#F6F4EC; --ink:#17201B; --ink-2:#4B554F; --ink-3:#6A7169; --rule:#E2E0D6;
    --green:#0F4D3A; --green-2:#1B6B52; --green-soft:#E6F0EA; --gold:#B8963E;
    --serif:"Newsreader","Bitstream Charter",Georgia,serif; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --measure:36rem; --wrap:68rem; }
body.paper-page * { box-sizing:border-box }
body.paper-page { background:var(--paper) }
body.paper-page { margin:0;font-family:var(--serif);color:var(--ink);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased }
body.paper-page a { color:inherit }
body.paper-page .wrap { max-width:var(--wrap);margin:0 auto;padding:0 1.25rem }
@media(min-width:52rem){
body.paper-page .wrap { padding:0 2.5rem }
}
@media(min-width:52rem){
}
body.paper-page .btn { font-family:var(--sans);font-size:.95rem;font-weight:500;background:var(--green);color:#fff;border:0;padding:.7rem 1.15rem;border-radius:6px;text-decoration:none;display:inline-block;cursor:pointer;line-height:1.2 }
body.paper-page .btn:hover { background:var(--green-2) }
body.paper-page .btn.ghost { background:transparent;color:var(--green);border:1px solid var(--green) }
body.paper-page .btn.ghost:hover { background:var(--green-soft) }
body.paper-page :focus-visible { outline:2px solid var(--gold);outline-offset:3px }
body.paper-page .hero { padding:2.5rem 0 3rem;border-bottom:1px solid var(--rule) }
body.paper-page .hero .wrap { display:grid;gap:2.5rem }
@media(min-width:60rem){
body.paper-page .hero .wrap { grid-template-columns:1.15fr .85fr;align-items:start;gap:4rem }
}
body.paper-page .running { display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.78rem;color:var(--ink-3);border-bottom:1px solid var(--ink);padding-bottom:.55rem;max-width:var(--measure) }
body.paper-page .running strong { color:var(--ink);font-weight:500 }
body.paper-page h1 { font-weight:400;font-size:clamp(2rem,5vw,3.1rem);line-height:1.08;letter-spacing:-.018em;margin:2rem 0 1rem;max-width:20ch;text-wrap:balance }
body.paper-page .lede { font-size:1.2rem;line-height:1.5;color:var(--ink-2);margin:0;max-width:var(--measure) }
body.paper-page .abstract { margin:1.8rem 0 0;padding:1rem 1.2rem 1.1rem;background:var(--green-soft);max-width:var(--measure);border-left:2px solid var(--green) }
body.paper-page .abstract h2 { font-size:.9rem;font-weight:500;color:var(--green);margin:0 0 .35rem;font-style:italic }
body.paper-page .abstract p { margin:0;font-size:1rem;line-height:1.6 }
body.paper-page .cta { display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.6rem 0 0 }
body.paper-page .cta .note { font-family:var(--sans);font-size:.85rem;color:var(--ink-3);flex-basis:100% }
body.paper-page figure { margin:0 }
body.paper-page .fig { border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0 1rem }
body.paper-page .fig .frame { position:relative;background:var(--paper-2);aspect-ratio:4/3;overflow:hidden }
body.paper-page .fig .frame img { width:100%;height:100%;object-fit:cover;display:block }
body.paper-page .fig .frame .ph { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.85rem;color:var(--ink-3) }
body.paper-page .findings { list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.75rem }
@media(min-width:40rem){
body.paper-page .findings { grid-template-columns:1fr 1fr }
}
body.paper-page .findings li { border:1px solid var(--rule);padding:.8rem .95rem;background:#fff }
body.paper-page .findings .k { font-family:var(--sans);font-size:.75rem;color:var(--ink-3);display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem }
body.paper-page .findings .k i { font-style:normal;color:var(--gold) }
body.paper-page .findings h3 { font-size:1.05rem;font-weight:500;margin:0 0 .2rem }
body.paper-page .findings p { margin:0;font-size:.95rem;color:var(--ink-2) }
body.paper-page figcaption { font-size:.9rem;color:var(--ink-2);margin-top:.8rem;line-height:1.5 }
body.paper-page figcaption b { font-weight:500;color:var(--ink) }
body.paper-page .sec { padding:3.5rem 0;border-bottom:1px solid var(--rule) }
body.paper-page .sec .wrap { display:grid;gap:2rem }
@media(min-width:60rem){
body.paper-page .sec .wrap { grid-template-columns:.85fr 1.15fr;gap:4rem }
}
body.paper-page h2.t { font-size:1.7rem;font-weight:400;letter-spacing:-.01em;margin:0 0 .8rem;line-height:1.15 }
body.paper-page .sec p { max-width:var(--measure) }
body.paper-page .fig svg { display:block;width:100%;height:auto }
body.paper-page .ctl { display:flex;align-items:center;gap:.8rem;margin-top:1rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-2) }
body.paper-page .ctl input[type=range] { flex:1;accent-color:var(--green) }
body.paper-page .ctl output { min-width:3.6rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink) }
body.paper-page .ref { stroke:var(--green);stroke-width:2;fill:none }
body.paper-page .ply { stroke:var(--gold);stroke-width:2;fill:none;stroke-dasharray:5 4 }
body.paper-page .ax { stroke:var(--rule);stroke-width:1 }
body.paper-page .lbl { font:.72rem var(--sans);fill:var(--ink-3) }
body.paper-page .lbl.g { fill:var(--green) }
body.paper-page .draw { stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.4s ease-out forwards }
body.paper-page .ply.draw { animation-delay:.6s }
body.paper-page to { stroke-dashoffset:0 }
@media(prefers-reduced-motion:reduce){
body.paper-page .draw { animation:none;stroke-dashoffset:0 }
}
body.paper-page .metrics { list-style:none;margin:1rem 0 0;padding:0;columns:1;gap:2rem }
@media(min-width:40rem){
body.paper-page .metrics { columns:2 }
}
body.paper-page .metrics li { break-inside:avoid;display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:1rem }
body.paper-page .metrics li span { color:var(--gold);font-family:var(--sans);font-size:.8rem;min-width:1.4rem;padding-top:.2rem;font-variant-numeric:tabular-nums }
body.paper-page .facts { list-style:none;margin:0;padding:0;display:grid;gap:1rem }
@media(min-width:40rem){
body.paper-page .facts { grid-template-columns:repeat(4,1fr) }
}
body.paper-page .facts b { display:block;font-weight:500 }
body.paper-page .facts li { font-size:.95rem;color:var(--ink-2) }
body.paper-page .discover { display:grid;gap:1rem;margin-top:1.2rem }
@media(min-width:40rem){
body.paper-page .discover { grid-template-columns:repeat(3,1fr) }
}
body.paper-page .discover a { text-decoration:none;border:1px solid var(--rule);padding:1.1rem 1.2rem;background:#fff;display:block }
body.paper-page .discover a:hover { border-color:var(--green) }
body.paper-page .discover small { font-family:var(--sans);font-size:.75rem;color:var(--gold) }
body.paper-page .discover h3 { font-size:1.15rem;font-weight:500;margin:.3rem 0 .3rem }
body.paper-page .discover p { margin:0 0 .6rem;font-size:.95rem;color:var(--ink-2) }
body.paper-page .discover span { font-family:var(--sans);font-size:.85rem;color:var(--green) }
body.paper-page .final { text-align:left;padding:4rem 0 }
body.paper-page .final h2 { font-size:1.9rem;font-weight:400;margin:0 0 .4rem;letter-spacing:-.01em }
body.paper-page .final p { margin:0 0 1.2rem;color:var(--ink-2) }
@media(min-width:40rem){
}
body.paper-page .hero { padding:2.5rem 0 0;border-bottom:1px solid var(--rule) }
body.paper-page .hero .wrap+.wrap { margin-top:3rem;display:block }
body.paper-page .kicker { font-family:var(--sans);font-size:.85rem;color:var(--ink-2);margin:0 0 1rem }
body.paper-page .kicker a { color:var(--gold) }
body.paper-page h1 { font-weight:400;font-size:clamp(2.2rem,5.4vw,3.3rem);line-height:1.08;letter-spacing:-.018em;margin:0 0 1.1rem;max-width:14ch;color:var(--green);text-wrap:balance }
body.paper-page h1 .tips { color:var(--ink-3);font-style:italic;font-weight:300 }
body.paper-page .lede { font-family:var(--sans);font-size:1.15rem;line-height:1.55;color:var(--ink-2);max-width:32rem }
body.paper-page .lede sup { color:var(--gold);font-size:.62em }
body.paper-page .hero .fine { font-family:var(--sans);font-size:.85rem;line-height:1.55;color:var(--ink-2);max-width:34rem;margin:1.4rem 0 0 }
body.paper-page .hero .fine b { color:var(--ink);font-weight:600 }
body.paper-page .paper { background:var(--paper-2);padding:1.6rem 1.9rem 1.5rem;border:1px solid var(--rule);box-shadow:0 1px 2px rgba(23,32,27,.06),0 12px 28px -12px rgba(23,32,27,.25);max-width:26rem;justify-self:center }
@media(min-width:60rem){
body.paper-page .paper { justify-self:end;margin-top:1.4rem }
}
body.paper-page .paper small { font-family:var(--sans);font-size:.72rem;color:var(--gold);font-weight:500 }
body.paper-page .paper h2 { font-size:1.25rem;font-weight:500;line-height:1.3;margin:.5rem 0 .4rem;letter-spacing:-.01em }
body.paper-page .paper .auth { font-family:var(--sans);font-size:.78rem;color:var(--ink-3);margin:0 0 .9rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule) }
body.paper-page .paper .res { font-size:.95rem;line-height:1.55;color:var(--green);margin:0 }
body.paper-page .paper .res b { font-weight:500;color:var(--ink) }
body.paper-page .paper .refs { font-family:var(--sans);font-size:.7rem;line-height:1.5;color:var(--ink-3);margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule) }
body.paper-page .paper .refs span { color:var(--gold) }
body.paper-page .paper .pfoot { display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;font-family:var(--sans);font-size:.85rem }
body.paper-page .paper .pfoot a { color:var(--ink);font-weight:600;text-decoration:none }
body.paper-page .paper .pfoot span { font-size:.68rem;color:var(--ink-3) }
body.paper-page .stats { list-style:none;margin:0;padding:1.5rem 0 1.8rem;border-top:1px solid var(--rule);display:grid;gap:1.2rem }
@media(min-width:40rem){
body.paper-page .stats { grid-template-columns:repeat(3,1fr);gap:0 }
body.paper-page .stats li { padding:0 1.5rem }
body.paper-page .stats li:first-child { padding-left:0 }
body.paper-page .stats li+li { border-left:1px solid var(--rule) }
}
body.paper-page .stats b { display:block;font-size:2rem;font-weight:400;line-height:1;margin-bottom:.4rem;color:var(--green) }
body.paper-page .stats span { font-family:var(--sans);font-size:.9rem;color:var(--ink-2);line-height:1.5 }
body.paper-page .stats strong { color:var(--ink);font-weight:600 }
body.paper-page .phero { padding:2.5rem 0 2.4rem;border-bottom:1px solid var(--rule) }
body.paper-page .phero .wrap { display:block }
body.paper-page .phero h1 { max-width:20ch;color:var(--ink);font-size:clamp(2rem,4.6vw,2.8rem) }
body.paper-page .phero .lede { margin-top:0 }
body.paper-page .sec p { max-width:var(--measure) }
body.paper-page .sec .wrap.one { display:block }
body.paper-page .fig { border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0 1rem }
body.paper-page .fig .frame { position:relative;background:var(--paper-2);aspect-ratio:4/3;overflow:hidden }
body.paper-page .fig .frame img { width:100%;height:100%;object-fit:cover;display:block }
body.paper-page .fig .frame .ph { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.8rem;color:var(--ink-3);padding:1rem;text-align:center }
body.paper-page .steps { list-style:none;margin:0;padding:0;counter-reset:s }
body.paper-page .steps>li { display:grid;gap:1.5rem;padding:2.4rem 0;border-bottom:1px solid var(--rule) }
body.paper-page .steps>li:first-child { padding-top:1rem }
@media(min-width:60rem){
body.paper-page .steps>li { grid-template-columns:.9fr 1.1fr;gap:4rem }
}
body.paper-page .steps .n { font-family:var(--sans);font-size:.8rem;color:var(--gold);margin:0 0 .5rem }
body.paper-page .steps h3 { font-size:1.5rem;font-weight:400;margin:0 0 .6rem;letter-spacing:-.01em }
body.paper-page .steps ul { margin:.6rem 0 .8rem;padding-left:1.2rem;font-family:var(--sans);font-size:.92rem;color:var(--ink-2) }
body.paper-page .steps li li { margin:.15rem 0 }
body.paper-page .steps a.more { font-family:var(--sans);font-size:.9rem;color:var(--green) }
body.paper-page .findings { list-style:none;margin:0;padding:0;display:grid;gap:.75rem }
@media(min-width:40rem){
body.paper-page .findings { grid-template-columns:repeat(3,1fr) }
}
body.paper-page .findings li { border:1px solid var(--rule);padding:.8rem .95rem;background:#fff }
body.paper-page .findings .k { font-family:var(--sans);font-size:.72rem;color:var(--ink-3);display:flex;gap:.4rem;margin-bottom:.3rem }
body.paper-page .findings .k i { font-style:normal;color:var(--gold) }
body.paper-page .findings h4 { font-size:1.02rem;font-weight:500;margin:0 0 .2rem }
body.paper-page .findings p { margin:0;font-size:.9rem;color:var(--ink-2) }
body.paper-page .duo2 { display:grid;gap:1.5rem }
@media(min-width:40rem){
body.paper-page .duo2 { grid-template-columns:1fr 1fr }
}
body.paper-page .faq details { border-bottom:1px solid var(--rule);max-width:var(--measure) }
body.paper-page .faq summary { cursor:pointer;padding:.9rem 0;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem }
body.paper-page .faq summary::after { content:"+";color:var(--gold);font-family:var(--sans) }
body.paper-page .faq details[open] summary::after { content:"−" }
body.paper-page .faq details p { margin:0 0 1rem;color:var(--ink-2);font-size:.98rem }
body.paper-page .todo { font-family:var(--sans);font-size:.75rem;color:var(--gold) }
body.paper-page .points { list-style:none;margin:0;padding:0;border-top:1px solid var(--ink) }
body.paper-page .points li { display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--rule) }
body.paper-page .points .n { font-family:var(--sans);font-size:.8rem;color:var(--gold);padding-top:.35rem }
body.paper-page .points h3 { font-size:1.2rem;font-weight:500;margin:0 0 .3rem }
body.paper-page .points p { margin:0;color:var(--ink-2);font-size:.98rem }
body.paper-page .box { border:1px solid var(--ink);padding:1.4rem 1.5rem;background:#fff;max-width:26rem }
body.paper-page .box small { font-family:var(--sans);font-size:.75rem;color:var(--gold);font-weight:600 }
body.paper-page .box h3 { font-size:1.25rem;font-weight:500;margin:.4rem 0 .4rem }
body.paper-page .box p { font-size:.95rem;color:var(--ink-2);margin:0 0 1rem }
body.paper-page .rows { border-top:1px solid var(--ink);margin-top:.8rem }
body.paper-page .rows div { display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:.85rem }
body.paper-page .rows div span:first-child { color:var(--ink-3) }
body.paper-page form.paper { max-width:32rem;font-family:var(--sans) }
body.paper-page form.paper label { display:block;font-size:.8rem;color:var(--ink-2);margin:1rem 0 .3rem }
body.paper-page form.paper input,
body.paper-page form.paper textarea { width:100%;font:inherit;font-size:1rem;padding:.65rem .75rem;border:1px solid var(--rule);background:#fff;border-radius:4px }
body.paper-page form.paper input:focus,
body.paper-page form.paper textarea:focus { border-color:var(--green);outline:2px solid var(--green-soft) }
body.paper-page form.paper textarea { min-height:9rem;resize:vertical }
body.paper-page form.paper .btn { margin-top:1.2rem }
body.paper-page .quote { border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;margin:0;max-width:var(--measure);font-size:1.25rem;line-height:1.4 }
body.paper-page .quote small { display:block;font-family:var(--sans);font-size:.8rem;color:var(--ink-3);margin-top:.5rem }
body.paper-page .tri { list-style:none;margin:0;padding:0;display:grid;gap:1rem }
@media(min-width:40rem){
body.paper-page .tri { grid-template-columns:repeat(3,1fr) }
}
body.paper-page .tri li { border-top:1px solid var(--ink);padding-top:.9rem }
body.paper-page .tri b { display:block;font-weight:500;font-size:1.05rem;margin-bottom:.3rem }
body.paper-page .tri span { font-family:var(--sans);font-size:.92rem;color:var(--ink-2) }

/* caddium-public.css zet `h1, h2, h3, h4 { font-family: var(--font-head) }`.
 * Een element dat zelf een font-family krijgt erft niets meer van zijn
 * container, dus de serif moet hier expliciet terug -- anders staat de hele
 * paperstijl in Sora. */
body.paper-page h1,
body.paper-page h2,
body.paper-page h3,
body.paper-page h4 { font-family: var(--serif); }

body.paper-page .kicker,
body.paper-page .lede,
body.paper-page .steps .n,
body.paper-page .steps ul,
body.paper-page .steps a.more,
body.paper-page .points .n,
body.paper-page .box small,
body.paper-page .tri span,
body.paper-page .rows div,
body.paper-page form.paper,
body.paper-page .todo,
body.paper-page .quote small { font-family: var(--sans); }

/* -- de bestaande FAQ-accordeon in paperstijl -------------------------------
 * De referentie gebruikt <details>, maar de site heeft een accordeon met eigen
 * i18n-sleutels en toetsenbedieningen. Die blijft; alleen het uiterlijk volgt
 * de referentie. Anders sneuvelen de sleutels en het gedrag voor een randje.
 */

body.paper-page .faq-container { display: block; }

body.paper-page .faq-item {
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.paper-page .faq-item h3 { margin: 0; }

body.paper-page .faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  cursor: pointer;
  padding: .9rem 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  background: none;
  border: 0;
  text-align: left;
}

/* Het bestaande icoon tekent zijn plus- en minteken met twee balkjes; die
 * krijgen alleen de accentkleur. Er een teken bovenop zetten gaf een dubbele
 * glyph. */
body.paper-page .faq-icon::before,
body.paper-page .faq-icon::after { background: var(--gold); }

body.paper-page .faq-container {
  max-width: var(--measure);
  margin: 0;
  gap: 0;
}

body.paper-page .faq-answer p {
  margin: 0 0 1rem;
  color: var(--ink-2);
  font-size: .98rem;
  font-family: var(--serif);
}

/* .faq-section draagt in caddium-public.css nog zijn eigen bovenmarge; op een
 * paperpagina zorgt de sectie zelf al voor de ruimte. */
body.paper-page .faq-section { padding-top: 0; padding-bottom: 0; }

/* Het echte contactformulier draagt zijn eigen klassen en logica; alleen het
 * uiterlijk volgt de referentie (form.paper). */
body.paper-page #contact-form {
  max-width: 32rem;
  font-family: var(--sans);
  display: block;
}

body.paper-page #contact-form label {
  display: block;
  font-size: .8rem;
  color: var(--ink-2);
  margin: 1rem 0 .3rem;
}

body.paper-page #contact-form input,
body.paper-page #contact-form textarea,
body.paper-page #contact-form select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .65rem .75rem;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 4px;
}

body.paper-page #contact-form input:focus,
body.paper-page #contact-form textarea:focus,
body.paper-page #contact-form select:focus {
  border-color: var(--green);
  outline: 2px solid var(--green-soft);
}

body.paper-page #contact-form textarea { min-height: 9rem; resize: vertical; }
body.paper-page #contact-form button { margin-top: 1.2rem; }

/* ==========================================================
   Onderzoekspagina (ronde 2, B1). De v2-referenties hebben geen
   onderzoekspagina; deze regels bouwen hem uit de bestaande componenten —
   `table.tab` voor de twee tabellen, `.points` en `.tri` voor de lijsten —
   met twee toevoegingen die er nog niet waren: een genummerde marge voor
   metingen en bronnen, en de bronnenlijst zelf.
   ========================================================== */
/* Ook de FAQ nummert zijn groepen met §-markers, en die pagina draagt
   `research-page` niet; op `paper-v2` gelden ze op beide. */
body.paper-v2 main .secno{
  color:var(--gold-text);
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:500;
  margin-right:.7rem;
  vertical-align:.35em;
  font-variant-numeric:tabular-nums;
}
body.research-page main .mn{
  display:inline-block;
  min-width:1.8rem;
  color:var(--gold-text);
  font-family:var(--sans);
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
}
body.research-page main table.tab tbody th{width:30%;color:var(--ink);font-weight:500}
body.research-page main table.tab td.src{white-space:nowrap;font-family:var(--sans);font-size:.85rem}
body.research-page main table.tab a{color:var(--gold-text)}
/* Aangeklikt bronnummer: het doel moet niet achter de rand van het vel vallen. */
body.research-page main [id^="bron-"],
body.research-page main [id^="meting-"],
body.research-page main [id^="bevinding-"]{scroll-margin-top:5rem}

body.research-page main .sources{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  border-top:1px solid var(--ink);
}
body.research-page main .sources li{
  display:grid;
  grid-template-columns:2.4rem 1fr;
  gap:.6rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.95rem;
  line-height:1.5;
}
body.research-page main .sources li:target{background:var(--gold-soft)}

body.research-page main .abstract{
  margin:1.6rem 0 0;
  padding:1rem 1.2rem 1.1rem;
  background:var(--green-soft);
  border-left:2px solid var(--green);
  max-width:var(--measure);
}
body.research-page main .abstract h3{
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:500;
  color:var(--green);
  margin:0 0 .4rem;
  letter-spacing:.02em;
}
body.research-page main .abstract p{margin:0;font-size:1rem;line-height:1.6}

/* ==========================================================
   Elf metingen in beeld (§3 van de onderzoekspagina). De figuren worden
   door onderzoek-figuren.js getekend in dezelfde SVG-taal als Fig. 2 op
   de voorpagina, maar met eigen kleuren: de gewone `.ax` gebruikt --rule,
   en die haalt op het papier geen 3:1. Assen en labels staan hier in
   --ink-3 (gemeten 4,9:1), de meetlijn in --green, de tweede lijn in
   --gold-text (5,6:1). Fasemarkeringen zijn stippellijnen in --ink-3.
   ========================================================== */
body.research-page main .figh{
  font-size:1.25rem;
  font-weight:400;
  margin:2.4rem 0 .6rem;
  scroll-margin-top:5rem;
}
body.research-page main .figintro-data{
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--ink-3);
  margin:0 0 1.2rem;
}
body.research-page main .figgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.4rem 2.4rem;
}
@media(min-width:56rem){
  body.research-page main .figgrid{grid-template-columns:1fr 1fr}
}
body.research-page main .mfig{margin:0;min-width:0;scroll-margin-top:5rem}
body.research-page main .mfig svg{display:block;width:100%;height:auto;max-width:100%}
body.research-page main .mfig svg[hidden]{display:none}
body.research-page main .mfig figcaption{font-size:.88rem;line-height:1.5;color:var(--ink-2);margin-top:.6rem;overflow-wrap:anywhere}
body.research-page main .mfig figcaption b{font-weight:500;color:var(--ink)}
body.research-page main .mfig figcaption b a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
body.research-page main .mfig figcaption b a:hover{color:var(--gold-text);border-color:var(--gold-text)}
body.research-page main .mfig figcaption .figtext{color:var(--ink-2)}
.fignote{display:flex;align-items:center;min-height:8rem}
.fignote p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.fignote a{color:var(--green)}
body.research-page main .mfig .ax{stroke:var(--ink-3);stroke-width:1}
body.research-page main .mfig .tick{stroke:var(--ink-3);stroke-width:1}
body.research-page main .mfig .zero{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
body.research-page main .mfig .phase{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
body.research-page main .mfig .band{fill:var(--gold-soft);stroke:var(--gold-text);stroke-width:.5}
body.research-page main .mfig .lbl{font:.72rem var(--sans);fill:var(--ink-3)}
body.research-page main .mfig .lbl.big{font-size:1rem;fill:var(--ink)}
body.research-page main .mfig .lbl.gold{fill:var(--gold-text)}
body.research-page main .mfig .ref{stroke:var(--green);stroke-width:2;fill:none;stroke-linejoin:round}
body.research-page main .mfig .dot{fill:var(--green)}
body.research-page main .mfig .dot.gold{fill:var(--gold-text)}
body.research-page main .mfig .mean{stroke:var(--green);stroke-width:2}
body.research-page main .mfig .lead{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
body.research-page main .mfig .bar.green{fill:var(--green)}
body.research-page main .mfig .bar.gold{fill:var(--gold-text)}
body.research-page main .mfig .bone{stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round}
body.research-page main .mfig .joint{fill:var(--ink-3)}
body.research-page main .mfig .forearm{stroke:var(--green);stroke-width:3.5;stroke-linecap:round}
body.research-page main .mfig .shaft{stroke:var(--gold-text);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 4}
@media print{
  body.research-page main .figgrid{grid-template-columns:1fr 1fr;gap:1rem 1.6rem}
  body.research-page main .mfig{break-inside:avoid}
}

/* ==========================================================
   Footer (ronde 2, B4.7). `caddium-reference.css:152` zet de vier kolommen
   op display:none en laat alleen de eenregelige variant staan. Dat gold vóór
   ronde 1 voor negen pagina's; sinds `reference-site` op zestien pagina's
   extra staat, zag bijna de hele site de korte footer. Op v2-pagina's komen
   de kolommen terug — met Contact en Onderzoek erin — en verdwijnt de
   eenregelige variant, zodat er niet twee footers onder elkaar staan.
   ========================================================== */
body.paper-v2 footer.site-footer>.footer-grid{display:grid}
body.paper-v2 footer.site-footer>.footer-bottom{display:flex}
body.paper-v2 footer.site-footer>.reference-footer-simple{display:none}
body.paper-v2 footer.site-footer{
  border-top:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink-2);
  padding:2.5rem 0 3rem;
  font-family:var(--sans);
  font-size:.85rem;
}
body.paper-v2 footer.site-footer h3{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  margin:0 0 .5rem;
  letter-spacing:normal;
  text-transform:none;
}
body.paper-v2 footer.site-footer a{color:var(--ink-2)}
body.paper-v2 footer.site-footer a:hover{color:var(--green)}
body.paper-v2 footer.site-footer .footer-bottom{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid var(--rule);
  color:var(--ink-3);
  font-size:.8rem;
}
body.paper-v2 footer.site-footer .footer-brand p{color:var(--ink-2);max-width:26rem}

/* De voorbeeldanalyse: Fig. 1 op de homepage (B4.1) en Fig. 3 bij stap 3 van
   Hoe het werkt (B3). Het is dezelfde analyse, dus dezelfde vorm. `.cue` staat
   in de v2-laag alleen met een radius; hier krijgt hij de vorm uit de
   app-referentie — een zacht vlak onder de twee bevindingen.
   Twee bevindingen in een raster van drie kolommen lieten een kolom leeg. */
body.paper-v2 main #voorbeeld .findings,
body.paper-v2 main .steps .findings{grid-template-columns:1fr 1fr;gap:.75rem}
body.paper-v2 main #voorbeeld .cue,
body.paper-v2 main .steps .cue{
  margin-top:.75rem;
  padding:.9rem 1.1rem;
  background:var(--green-soft);
  border:1px solid transparent;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}
body.paper-v2 main #voorbeeld .cue h3,
body.paper-v2 main .steps .cue h3,
body.paper-v2 main .steps .cue h4{
  font-size:.95rem;
  font-weight:500;
  margin:0 0 .2rem;
  font-family:var(--sans);
  color:var(--ink);
}
body.paper-v2 main #voorbeeld .cue p,
body.paper-v2 main .steps .cue p{margin:0;font-size:.92rem;color:var(--ink-2)}
/* Een verwijzing in lopende tekst moet er als verwijzing uitzien. Zonder deze
   regel kreeg een link in een alinea de inktkleur en geen onderstreping --
   op de homepage was "Bekijk de volledige voorbeeldanalyse" niet van de
   omringende zin te onderscheiden. Knoppen en `.more` hebben hun eigen vorm. */
body.paper-v2 main p a:not(.btn):not(.more),
body.paper-v2 main li a:not(.btn):not(.more){
  color:var(--green);
  /* Groen alleen is hier geen onderscheid: #0F3D2E en de inktkleur liggen te
     dicht bij elkaar om op helderheid uit elkaar te houden, en kleur als enige
     aanwijzing valt weg voor wie die niet ziet. Daarom een streep. */
  text-decoration:underline;
  text-underline-offset:.15em;
  text-decoration-thickness:from-font;
}
/* Een verwijzing in een onderschrift moet er als verwijzing uitzien. */
body.paper-v2 main figcaption a{color:var(--green)}
/* Twee vervolglinks onder elkaar, niet achter elkaar op een regel. */
body.paper-v2 main .steps a.more{display:block;margin-top:.5rem}
/* De voorbeeldafbeelding bevat zelf de fasebalk onder de still; met een vaste
   beeldverhouding en object-fit:cover sneed die eraf. De afbeelding bepaalt
   hier dus zijn eigen hoogte. */
body.paper-v2 main #voorbeeld .frame,
body.paper-v2 main .steps .frame:has(img[src*="example-swing"]){aspect-ratio:auto}
body.paper-v2 main #voorbeeld .frame img{height:auto;object-fit:contain}

/* De paperkaart is nu als geheel een link (B4.6); hij moet nog wel als kaart
   lezen en niet als tekstlink, en dezelfde lift krijgen als de andere. */
body.paper-v2 main a.paper{
  display:block;
  text-decoration:none;
  color:inherit;
  background-image:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
body.paper-v2 main a.paper:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(23,32,27,.06),0 18px 34px -14px rgba(23,32,27,.3);
}
body.paper-v2 main a.paper .pfoot span:first-child{color:var(--ink);font-weight:600}

/* Prijzen (ronde 2): de drie kaarten staan nu direct onder de hero en de
   maand/jaar-schakelaar eronder, op verzoek van Lars. Twee gevolgen:
   .phero en .plans hadden beide een scheidingslijn, en de schakelaar had
   zijn marge naar boven staan omdat hij in de hero hoorde. */
body.paper-v2.pricing-page main .phero{border-bottom:0;padding-bottom:1.4rem}
body.paper-v2.pricing-page main .plans-first{padding-top:1rem}
body.paper-v2.pricing-page main .plans-first .toggle{margin:1.6rem 0 0}

/* Prijskaarten met vaste rijen (ronde 2, B2.2). `.rows` bestaat al in het v2-
   systeem; `.planrows` voegt alleen toe wat een <dl> in een kaart nodig heeft
   en zet de kaarten op gelijke hoogte, zodat de rijen naast elkaar uitlijnen. */
body.paper-v2.pricing-page main .plans3{align-items:stretch}
body.paper-v2.pricing-page main .plan{height:100%}
body.paper-v2.pricing-page main .planrows{margin:1rem 0 1.2rem;flex:1}
body.paper-v2.pricing-page main .planrows div{
  display:grid;
  grid-template-columns:8rem 1fr;
  gap:.6rem;
  padding:.55rem 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
body.paper-v2.pricing-page main .planrows dt{
  color:var(--ink-3);
  font-family:var(--sans);
  font-size:.78rem;
  margin:0;
}
body.paper-v2.pricing-page main .planrows dd{
  margin:0;
  font-family:var(--sans);
  font-size:.88rem;
  color:var(--ink-2);
}
body.paper-v2.pricing-page main .planrows dd.none{color:var(--ink-3)}
/* De lege plek boven een niet-aanbevolen kaart en onder een prijs zonder
   jaartotaal houdt dezelfde hoogte, anders schuiven de rijen uiteen. */
body.paper-v2.pricing-page main .plan .tag{min-height:1.2em}
body.paper-v2.pricing-page main .plan .sub.yr{min-height:1.2em}

/* Ankerdoel zonder inhoud. `#analysetypes` was een eigen sectie tot B2.3 die
   schrapte; de navigatie en twee tests wijzen er nog heen, dus het anker blijft
   staan op de kaartensectie. Het toont niets, maar het moet wel een doel zijn
   waar de browser naartoe kan springen zonder onder de header te vallen. */
.anchor-alias{
  display:block;
  height:0;
  scroll-margin-top:5rem;
}

/* FAQ in drie blokken (ronde 2, B6). De antwoorden krijgen leesbreedte en
   ruimere regelafstand: een dichtgezet antwoord in een uitklapper leest als
   iets dat je moet wegklikken, niet als iets dat je moet lezen. */
/* Het rapport van één analyse (B7): /app/analyses/<id>. De pagina leent de
   vorm van `app-analyse-reference.html` -- §-blokken, figuren met onderschrift
   en een keten -- maar staat in de echte app-shell, niet in die van de
   referentie. Ze hangen daarom aan de eigen `report-page`-klasse van die
   pagina en niet aan `main.content` uit de referentie -- en ook niet aan de
   shellklassen zelf: publieke stylesheets horen niet in de app te grijpen. */
body.report-page .running{
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--sans);font-size:.78rem;color:var(--ink-3);
  border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin:0 0 1.4rem;
}
body.report-page a.back{font-family:var(--sans);font-size:.85rem;color:var(--green);text-decoration:none}
body.report-page a.back:hover{text-decoration:underline}
/* `.blk h2 span` is de §-marker: klein, schreefloos, goud. De kop zelf staat
   ook in een span (hij draagt de vertaalsleutel) en moet dat juist niet
   overnemen. Geldt op elk app-scherm dat §-blokken gebruikt. */
body.in-app .blk h2 .ttl{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;padding-top:0}
body.report-page .summary{max-width:var(--measure);margin:1.2rem 0}
body.report-page .blk .fig video{width:100%;display:block;background:#000}
body.report-page .blk .two{display:grid;gap:1rem}
@media(min-width:40rem){body.report-page .blk .two{grid-template-columns:1fr 1fr}}
body.report-page .blk .card .k{font-family:var(--sans);font-size:.75rem;color:var(--ink-2);display:flex;gap:.4rem;align-items:center;margin-bottom:.4rem}
body.report-page .blk .card .k i{font-style:normal;color:var(--gold-text)}
body.report-page .blk .card h3{font-size:1.05rem;font-weight:400;margin:0 0 .3rem}
body.report-page .blk .card p{margin:0;font-size:.92rem;color:var(--ink-2)}
body.report-page .blk .card .verdict{font-family:var(--sans);font-size:.75rem;color:var(--ink-3);margin-top:.5rem}
/* Tot elf momenten uit de swing: compact naast elkaar, want elf figuren op
   halve paginabreedte leest als een stortplaats in plaats van als bewijs. */
/* Een lege plek hoeft niet de hoogte van een video te houden: dan domineert
   het bericht "hier staat niets" de hele §1. */
body.report-page .frame.empty{aspect-ratio:auto;min-height:7rem;display:flex;align-items:center;justify-content:center}
body.report-page .frames{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
body.report-page .frames figcaption{font-size:.78rem;margin-top:.4rem}
body.report-page .frames .frame{aspect-ratio:4/5}
body.report-page .expired{font-family:var(--sans);font-size:.85rem;color:var(--ink-3);border-left:2px solid var(--rule);padding-left:.9rem;margin:0 0 1.2rem}
/* Ook hier moet een verwijzing eruitzien als een verwijzing; zie de
   gelijknamige regel voor de publieke pagina's. */
body.report-page p a:not(.btn){color:var(--green);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:from-font}
body.report-page .report-remove{margin:2.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--rule)}

/* Hoe het werkt: de route in een oogopslag (B3). Vijf stappen op een lijn,
   met de duur eronder waar die bekend is. De nummers zijn hier geen sieraad:
   de volgorde is de inhoud. */
body.paper-v2 main .stepsline{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;counter-reset:stap;
  border-top:1px solid var(--rule);
}
@media(min-width:46rem){body.paper-v2 main .stepsline{grid-template-columns:repeat(5,1fr)}}
@media(min-width:46rem){body.paper-v2 main .stepsline--compact{grid-template-columns:repeat(3,1fr)}}
body.paper-v2 main .stepsline li{
  counter-increment:stap;
  padding:1rem 1.2rem 1.1rem 0;
  border-bottom:1px solid var(--rule);
}
@media(min-width:46rem){
  body.paper-v2 main .stepsline li{border-bottom:0;border-right:1px solid var(--rule);padding-left:1.2rem}
  body.paper-v2 main .stepsline li:first-child{padding-left:0}
  body.paper-v2 main .stepsline li:last-child{border-right:0}
}
body.paper-v2 main .stepsline li::before{
  content:counter(stap);
  display:block;font-family:var(--sans);font-size:.72rem;
  color:var(--gold-text);margin-bottom:.35rem;font-variant-numeric:tabular-nums;
}
body.paper-v2 main .stepsline b{display:block;font-weight:400;font-size:1.05rem;line-height:1.25}
body.paper-v2 main .stepsline small{
  display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-2);margin-top:.2rem;
}

/* "Wat je hier al ziet": een regel per stap, gescheiden van de uitleg erboven
   omdat hij een andere vraag beantwoordt -- niet wat er gebeurt, maar wat jij
   op dat moment terugziet. */
body.paper-v2 main .seen{
  font-family:var(--sans);font-size:.85rem;line-height:1.55;color:var(--ink-2);
  border-left:2px solid var(--rule);padding-left:.9rem;margin:1rem 0;
}
body.paper-v2 main .seen b{display:block;color:var(--gold-text);font-weight:500;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.15rem}

/* De twee onderzoekstabellen op een telefoon (ronde 2).
   Ze stonden hier op `display:none`, een regel die uit de prijzenreferentie
   kwam: daar verving een kaartenlijst de tabel. Die kaartenlijst bestaat niet
   meer en `table.tab` is inmiddels alleen nog de onderzoekspagina, dus het
   effect was dat Tabel 1 en 2 -- de elf metingen en de tien kernbevindingen,
   waar de hele pagina over gaat -- op een telefoon onzichtbaar waren, met hun
   bijschrift er nog boven. De homepage linkt bovendien naar `#meting-N`, dus
   die links wezen naar niets.

   Vier kolommen passen niet op 390 pixels, dus de rij wordt een blokje: de
   naam van de meting bovenaan, daaronder elke cel met het label van zijn
   kolom. Die labels dragen dezelfde sleutels als de kolomkoppen, dus er komt
   geen vertaling bij. */
@media(max-width:48rem){
  body.research-page main table.tab,
  body.research-page main table.tab tbody,
  body.research-page main table.tab tr,
  body.research-page main table.tab th,
  body.research-page main table.tab td{display:block;width:auto}
  body.research-page main table.tab thead{display:none}
  body.research-page main table.tab tr{
    border-bottom:1px solid var(--rule);padding:1.1rem 0;
  }
  body.research-page main table.tab tr:first-child{border-top:1px solid var(--ink)}
  /* Nummer en naam op één regel; als blok brak de naam midden in een woord
     omdat het nummer als los inline-element vooraan meeliep. */
  body.research-page main table.tab tbody th{
    /* 26% is de kolombreedte van de tabelweergave; gestapeld moet de kop de
       volle regel krijgen, anders breekt de naam na één woord af. */
    width:100%;font-family:var(--serif);font-size:1.1rem;color:var(--ink);
    border-bottom:0;padding:0 0 .6rem;
    display:flex;gap:.5rem;align-items:baseline;
  }
  body.research-page main table.tab tbody th .mn{min-width:1.2rem}
  body.research-page main table.tab td{border-bottom:0;padding:0 0 .6rem}
  body.research-page main table.tab tr td:last-child{padding-bottom:0}
  body.research-page main table.tab .collabel{
    display:block;font-family:var(--sans);font-size:.7rem;font-weight:500;
    letter-spacing:.04em;text-transform:uppercase;color:var(--gold-text);
    margin-bottom:.15rem;
  }
}

/* Knoppen en schakelaars op een telefoon, over alle vier de talen gemeten.
   Een `.btn` in de paperstijl komt op 41 px uit, de maand/jaar-schakelaar op
   40 en "Meer over de coach" op 19. En de inlogtabs haalden 44 in het
   Nederlands alleen doordat "Account aanmaken" over twee regels brak: in het
   Duits past "Konto erstellen" op één regel en is dezelfde knop 33 px hoog.
   Dat is toeval, geen ontwerp, en het is precies wat je in één taal niet ziet.

   Meer verticale padding in plaats van een minimumhoogte, zodat `.btn`
   `inline-block` kan blijven en er niets verspringt. */
@media (max-width: 48rem) {
  body.paper-v2 main .btn,
  body.paper-v2 main .toggle button,
  body.paper-v2 main .seg button {
    padding-block: .8rem;
  }
  /* De inlogtabs en de coachlink halen het niet met padding alleen; hun
     regelhoogte is te klein. Een minimumhoogte werkt daar los van. */
  body.paper-v2 main .auth-tab,
  body.paper-v2 main p.note a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* Inloggen op een telefoon. Gemeten op 390 px: de invoervelden 42 px hoog,
   de knop "Inloggen" 41, de wachtwoord-schakelaar "Tonen" 61x25 en
   "Wachtwoord vergeten?" 147x21. Allemaal net of ruim onder de 44 die een
   duim nodig heeft, op het formulier waar een misser het meest kost.

   De navigatie en de footer blijven hier bewust buiten: die moeten origineel
   blijven, en hun tikdoelen aanpassen verandert hun hoogte. Dat staat als
   losse bevinding in RAPPORT.md. */
@media (max-width: 48rem) {
  body.auth-page main input[type="email"],
  body.auth-page main input[type="password"],
  body.auth-page main input[type="text"],
  body.auth-page main .btn {
    min-height: 44px;
  }
  body.auth-page main .password-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Deze twee staan op hun eigen regel en mogen dus groeien. */
  body.auth-page main .field-hint .link-btn,
  body.auth-page main .auth-switch .link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Probeer: de lege Fig. 1 (B5). De zone is zelf de knop, dus hij krijgt een
   eigen focusring; `dragging` en `is-busy` stonden alleen in styles.css, en
   die laadt deze pagina niet. */
body.paper-v2 main .figdrop{margin:0;border:0;padding:0}
/* `.blk h2 span` is de §-marker: klein, schreefloos, goud. De kop zelf staat
   hier ook in een span (hij draagt de vertaalsleutel) en moet dat juist niet
   overnemen. */
body.paper-v2 main .blk h2 .ttl{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;padding-top:0}
/* De hero sluit al met een streep af; de eigen streep van het blok erna maakt
   er twee op een centimeter. */
body.paper-v2 main .phero + .blk{border-top:0}
body.paper-v2 main .drop{cursor:pointer;transition:border-color .15s,background .15s}
body.paper-v2 main .drop:hover{border-color:var(--green)}
body.paper-v2 main .drop:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
body.paper-v2 main .drop small{display:block;margin-bottom:.2rem}
body.paper-v2 main .drop .btn{margin-top:1rem}
body.paper-v2 main .drop.dragging{border-color:var(--green);border-style:solid;background:var(--paper-2)}
body.paper-v2 main .drop.is-busy{pointer-events:none;opacity:.72}

body.paper-v2 main .faq h2.t{margin:2.4rem 0 .4rem}
body.paper-v2 main .faq h2.t:first-child{margin-top:0}
body.paper-v2 main .faq details p{
  max-width:var(--measure);
  line-height:1.6;
  margin:0 0 1.1rem;
}
body.paper-v2 main .faq summary{padding:.9rem 0}


/* De lijst met alternatieven op de 404-pagina. Geen opsommingstekens: het zijn
   vijf wegen terug, geen opsomming van eigenschappen. Ruim uit elkaar zodat ze
   op een telefoon ook los van elkaar te raken zijn. */
body.paper-v2 main ul.notfound-links{list-style:none;padding:0;margin:1.2rem 0 0}
body.paper-v2 main ul.notfound-links li{margin:0 0 .1rem}
body.paper-v2 main ul.notfound-links a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 0;font-size:1.05rem}

/* /status is de enige pagina die nog `.content-page` draagt. Die klasse regelt
   alleen verticale ruimte; de horizontale marge kwam van een buitenste
   container die paper-v2 niet meer heeft. Gevolg: kop en tekst stonden op
   x=0, tegen de vensterrand aan, en het meldingsvak liep van rand tot rand.
   Gemeten op 1280 px; de vijf andere inhoudspagina's hebben het niet omdat
   die wel een .wrap gebruiken. */
body.paper-v2 main.content-page{max-width:var(--wrap);margin:0 auto;padding-inline:1.25rem}
@media(min-width:52rem){body.paper-v2 main.content-page{padding-inline:2.5rem}}

/* De slotoproep onder elke oefening staat op fairwaygroen, en `caddium-public.css`
   zet die kop dus terecht op de lichte grond. Maar de paperregel hierboven
   (`body.paper-v2 :where(main h2,...)`) weegt even zwaar en laadt later, dus won
   die -- met bijna-zwarte inkt op donkergroen als gevolg: 1,37:1 waar 3 nodig is,
   op alle dertig oefeningpagina's. Gemeten, niet vermoed.

   Deze regel is zwaarder dan allebei en raakt alleen deze ene sectie. */
body.paper-v2 main .closing-cta h2{color:var(--ground)}

/* Precies dezelfde botsing, een tweede keer: `.ref-closing` uit
   `caddium-reference.css` staat op datzelfde donkere groen en zet zijn kop
   terecht op wit, maar verliest van de paperregel hierboven. Gemeten op
   /golfcoach: 1,43:1 waar 3 nodig is, met de alinea eronder gewoon op 7,29:1 --
   dus alleen de kop viel weg. Bij de vorige ronde bleef deze staan omdat de
   test die er toen bij kwam alleen `.closing-cta` op de oefeningpagina's
   bekeek; die kijkt nu naar elke kop op een donkere ondergrond. */
body.paper-v2 main .ref-closing h2{color:#fff}