/* Doorgronden — de landingspagina.

   ## Waarom hij eruitziet als de applicatie

   Hier stond een pagina op het gegenereerde palet uit `variables.css`: blauw,
   cyaan, altijd donker, drie kaartjes naast elkaar. Netjes, en van niets. Wie
   zich aanmeldde stapte een indigo werkruimte in met een heel andere typografie
   en niets aan het scherm zei dat dat dezelfde applicatie was.

   Deze pagina draait daarom op `tokens.css` — hetzelfde palet als de werkruimte —
   en is opgebouwd uit de primitieven van het product zelf: de traceerketen, de
   stapbalk die wachttijd van behandeltijd scheidt, de kengetallentabel met de
   formule ernaast, de versievergelijking. Geen illustratie van wat het product
   doet, maar het product, stilstaand.

   Dat is ook het antwoord op "waarom niet gewoon drie mooie kaartjes": een
   bezoeker die dit ziet en daarna inlogt, herkent het scherm. Een bezoeker die
   drie kaartjes zag, moet opnieuw beginnen.

   ## De typografische wet geldt hier ook

     sans (Archivo)        → productchroom
     serif (Source Serif)  → kwalitatief bewijs: een citaat, een vaststelling
     mono (IBM Plex Mono)  → kwantitatief bewijs: metingen, formules, ID's

   En: gemeten en geraamd verschillen typografisch, nooit in kleur. Ook op een
   verkooppagina, want juist daar is de verleiding het grootst om een raming
   eruit te laten zien als een meting.

   ## Wat hier niet staat

   Geen kleurverloop, geen glazen kaarten, geen ronde icoontjes, geen logo's van
   klanten die er niet zijn, geen cijfer dat niet uit dit product komt. De
   getallen in de voorbeelden zijn verzonnen — het is een demo-organisatie — maar
   ze zijn intern consistent en ze zijn in nl-NL genoteerd, want een product dat
   `6,2 d` schrijft en op zijn voorpagina `6.2 days` is twee producten. */

body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* De maat van de pagina. Eén kolom, links uitgelijnd, en niet gecentreerd:
   gecentreerde tekst leest als een affiche en dit is een instrument. */
.wrap{max-width:74rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.serif{font-family:var(--serif)}
.muted{color:var(--text-2)} .dim{color:var(--text-3)}

/* Het etiket boven een sectie. Kleinkapitalen en een lijntje in plaats van een
   icoon in een cirkel — een icoon zou hier moeten uitleggen wat het betekent en
   een woord hoeft dat niet. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:600;
  color:var(--text-3);margin-bottom:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--border)}

/* ── kop ──────────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:10;background:var(--bg);
  border-bottom:1px solid var(--border);
}
/* Niets in deze balk mag krimpen behalve de naam. Zonder `min-width:0` krimpt
   een flexitem niet onder zijn inhoud maar loopt hij eroverheen: op een telefoon
   lag de gele knop boven op het woord "Doorgronden". */
.mast .wrap{display:flex;align-items:center;gap:14px;height:56px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;flex:none}
/* De laatste redding, en gemeten: tot 352px past alles naast elkaar en pas
   daaronder niet meer — op 320px stak de knop er zesentwintig pixels uit. Daar
   mag de naam krimpen en met een beletselteken afbreken. Dat is lelijker dan
   een hele naam en veel minder lelijk dan een knop die van het scherm loopt. */
.brand .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:22rem){ .brand{flex:1 1 auto} }
.brand .mark{
  width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);font-size:13px;
}
.brand .nm{font-weight:600;letter-spacing:-.01em}
/* De ondertitel is het eerste wat wegvalt, en op één regel of niet. Hij mocht
   afbreken en deed dat rond de 760px: twee regels ondertitel maakten de balk
   anderhalf keer zo hoog en duwden de naam in een beletselteken, terwijl er
   rechts nog ruimte over was. */
.brand .sub{
  font-size:.72rem;color:var(--text-3);border-left:1px solid var(--border);
  padding-left:12px;margin-left:4px;white-space:nowrap;
}
@media (max-width:62rem){.brand .sub{display:none}}
.mast .spacer{flex:1;min-width:8px}
.mast .su{flex:none}
/* Op een telefoon past het volledige opschrift er niet naast de naam. Wat
   wegvalt is "met Starting Up" en niet het merkteken: de chevron blijft staan,
   en twee duim lager staat de knop nog een keer met de hele zin erop. */
@media (max-width:34rem){ .mast .su .lang{display:none} }
.iconbtn{
  display:inline-grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--text-2);
}
.iconbtn:hover{background:var(--surface-3);color:var(--text)}

/* ── de knop naar Starting Up ─────────────────────────────────────────────
   Geel is een vlak en nooit een tekstkleur — de regel staat in `brand.css` van
   Starting Up en klopt: puur geel op wit is ongeveer 1,4:1 en wit op geel 1,9:1.
   Bijna-zwart op dit geel is ongeveer 10:1. Dus: geel vult, inkt staat erop.

   En hij is geel en niet indigo omdat hij naar iemand anders wijst. Het accent
   van dit product betekent "dit is van ons"; deze knop betekent het tegendeel. */
.su{
  --su-yellow:#ffc700; --su-yellow-hi:#ffd233; --su-yellow-lo:#eab600; --su-ink:#14110b;
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:var(--r-sm);
  background:var(--su-yellow);border:1px solid var(--su-yellow-lo);color:var(--su-ink);
  font-size:.86rem;font-weight:600;white-space:nowrap;text-decoration:none;
  transition:background .12s;
}
.su:hover{background:var(--su-yellow-hi);text-decoration:none}
.su:focus-visible{outline:2px solid var(--su-ink);outline-offset:2px}
.su svg{width:17px;height:17px;flex:none;stroke:var(--su-ink);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.su.big{padding:11px 20px;font-size:.95rem}
/* Eén flexitem voor het hele opschrift. Stonden "Inloggen" en de span los in de
   container, dan waren het twee items en zette `gap` er negen pixels tussen —
   op het scherm een dubbele spatie midden in een zin. */
.su .txt{display:inline}

.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-size:.86rem;font-weight:500;white-space:nowrap;text-decoration:none;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-3);border-color:var(--text-3);text-decoration:none}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{padding:clamp(3rem,8vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem)}
/* Twee kolommen, want de rechterhelft stond leeg — en een halve lege
   viewport op de openingspagina leest als een pagina die nog niet af is.
   Wat erin staat is de zijbalk van de applicatie zelf: dat zegt in één blik
   wat er binnen te vinden is, en het is geen illustratie maar het scherm. */
.hero .wrap{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (min-width:64rem){
  .hero .wrap{grid-template-columns:minmax(0,1fr) 258px}
}
.hero .kick{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--accent);margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2rem,5.2vw,3.15rem);line-height:1.06;letter-spacing:-.035em;
  font-weight:640;max-width:19ch;text-wrap:balance;
}
.hero .lede{
  margin-top:1.5rem;max-width:60ch;font-size:1.06rem;color:var(--text-2);
}
.hero .lede b{color:var(--text);font-weight:600}
.hero .cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hero .cta .fine{font-size:.8rem;color:var(--text-3);max-width:42ch}

/* Waarom een aanmelding niet lukte. Dit is de terugweg uit een mislukte
   aanmelding, dus staat hij bovenaan en niet ergens onderin. */
.notice{
  margin-top:2rem;max-width:58ch;padding:11px 14px;font-size:.88rem;
  border:1px solid var(--warn-line);border-left-width:3px;border-radius:var(--r-sm);
  background:var(--warn-bg);color:var(--text);
}

/* ── sectie ───────────────────────────────────────────────────────────── */
.sect{padding:clamp(2.75rem,6vw,4.25rem) 0;border-top:1px solid var(--border)}
.sect h2{font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.15;letter-spacing:-.025em;
  font-weight:620;max-width:26ch;text-wrap:balance}
.sect .say{margin-top:.9rem;max-width:62ch;color:var(--text-2)}
.split{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:start}
@media (min-width:60rem){
  .split{grid-template-columns:minmax(0,20rem) minmax(0,1fr)}
  .split.wide-left{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}
}

.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.panel > .hd{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--border);background:var(--surface-2);
  font-size:.78rem;font-weight:600;color:var(--text-2);
}
.panel > .hd .right{margin-left:auto;font-weight:400;color:var(--text-3);font-size:.72rem}
.panel > .bd{padding:16px}
.panel > .ft{
  padding:9px 14px;border-top:1px solid var(--border);background:var(--surface-2);
  font-size:.74rem;color:var(--text-3);
}

.pill{
  display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:0;
  font-size:.71rem;font-weight:550;line-height:1.65;white-space:nowrap;
  background:var(--idle-bg);color:var(--idle);border:1px solid var(--idle-line);
}
.pill.acc{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.pill.crit{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-line)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}

/* Gemeten of geraamd — zie de kop. Geen kleurverschil, want een rapport wordt
   afgedrukt en dan valt kleur als eerste weg. */
.gemeten{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:500}
.geraamd{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-style:italic;border-bottom:1px dotted var(--border-strong)}
.geraamd::after{content:"~";font-style:normal;color:var(--text-3);margin-left:2px;font-size:.85em}

/* ── de traceerketen ──────────────────────────────────────────────────── */
.keten{display:grid;gap:0}
.schakel{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;
  padding:11px 0;position:relative;
}
.schakel + .schakel{border-top:1px solid var(--border)}
.schakel .gut{display:flex;flex-direction:column;align-items:center;position:relative}
.schakel .dot{
  width:22px;height:22px;flex:none;border-radius:0;display:grid;place-items:center;
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);
  font-family:var(--mono);font-size:.66rem;font-weight:600;z-index:1;
}
/* De verbindingslijn loopt achter de bolletjes door, van het eerste naar het
   laatste. Hij stond op `top:0;bottom:0` en dat is de *content*box van de rij —
   dus viel hij weg over de 11px opvulling boven en onder, en bleef er per
   schakel een streepje van negen pixels over dat op het scherm nergens op leek.
   De negatieve waarden lopen de opvulling in, zodat hij doorloopt. Boven en
   onder stopt hij op het midden van het eerste en laatste bolletje: de lijn
   verbindt schakels en steekt er niet uit. */
.schakel .gut::before{
  content:"";position:absolute;left:50%;top:-11px;bottom:-11px;width:1px;
  background:var(--accent-line);transform:translateX(-.5px);
}
.schakel:first-child .gut::before{top:11px}
.schakel:last-child .gut::before{bottom:auto;height:22px}
/* Naam en toelichting lopen in één regel door — de vetgedrukte schakelnaam,
   het kenmerk, en dan de zin. Twee regels per schakel maakt de kaart anderhalf
   keer zo hoog voor niets. */
.schakel .nm{font-size:.83rem;font-weight:600;margin-right:7px}
.schakel .ex{font-size:.79rem;color:var(--text-2)}
.schakel .ref{
  font-family:var(--mono);font-size:.68rem;color:var(--text-3);
  border:1px solid var(--border);border-radius:0;padding:0 5px;margin-right:7px;
}
/* Een gat in de keten. Dit is het enige wat rood mag zijn op deze pagina: het
   is precies wat het product laat zien en waar het over gaat. */
.schakel.gat .dot{border-color:var(--crit-line);background:var(--crit-bg);color:var(--crit)}
.schakel.gat .gut::before{background:repeating-linear-gradient(
  to bottom,var(--crit-line) 0 4px,transparent 4px 8px)}
.schakel.gat .nm{color:var(--crit)}

/* ── stapbalk: behandeltijd tegenover wachttijd ───────────────────────── */
.stap{padding:12px 0}
.stap + .stap{border-top:1px solid var(--border)}
.stap .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stap .t{font-size:.85rem;font-weight:600}
.stap .rol{font-size:.75rem;color:var(--text-3)}
.stap .tot{margin-left:auto;font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.bar{display:flex;height:9px;border-radius:0;overflow:hidden;background:var(--surface-3);margin-top:8px}
.bar .beh{background:var(--accent)}
/* Wachttijd is gestreept en niet een tweede kleur: het verschil moet ook
   overleven op een zwart-witte afdruk en bij kleurenblindheid. */
.bar .wac{background:repeating-linear-gradient(
  135deg,var(--accent-line) 0 5px,var(--surface-3) 5px 10px)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.74rem;color:var(--text-2)}
.legend i{display:inline-block;width:22px;height:8px;border-radius:0;margin-right:7px;
  vertical-align:middle;font-style:normal}
.legend .beh i{background:var(--accent)}
.legend .wac i{background:repeating-linear-gradient(
  135deg,var(--accent-line) 0 5px,var(--surface-3) 5px 10px)}

/* ── tabel ────────────────────────────────────────────────────────────── */
.tblwrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.83rem}
.tbl th{
  text-align:left;font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);padding:8px 14px;border-bottom:1px solid var(--border);white-space:nowrap;
  background:var(--surface-2);
}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;white-space:nowrap}
.tbl th.num{text-align:right}
.tbl .form{font-family:var(--mono);font-size:.72rem;color:var(--text-3)}

/* ── versievergelijking ───────────────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr);align-items:center}
.cmp > *{padding:9px 14px}
.cmp .mid{
  display:flex;justify-content:center;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  align-self:stretch;align-items:center;
}
.cmp + .cmp{border-top:1px solid var(--border)}
.cmp .stapnaam{font-size:.82rem}
.cmp .weg{color:var(--text-3);text-decoration:line-through}
.cmp .leeg{color:var(--text-3);font-size:.78rem;font-style:italic}
.cmphd{background:var(--surface-2);font-size:.75rem;font-weight:600;color:var(--text-2)}
.cmphd .mid{text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:var(--text-3)}
@media (max-width:44rem){
  .cmp{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr)}
  .cmp > *{padding:8px 9px}
}

/* ── bewijs ───────────────────────────────────────────────────────────── */
.bewijs{display:grid;gap:0}
.bw{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:11px 0;align-items:start}
.bw + .bw{border-top:1px solid var(--border)}
.bw .soort{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
  font-weight:600;padding-top:2px}
/* Serif: dit is kwalitatief bewijs, en de wet uit workspace.css geldt hier ook. */
.bw .cite{font-family:var(--serif);font-size:.95rem;line-height:1.5}
.bw .bron{font-size:.73rem;color:var(--text-3);margin-top:3px}

/* ── de grens ─────────────────────────────────────────────────────────── */
.grens{display:grid;gap:0;border-top:1px solid var(--border)}
@media (min-width:56rem){.grens{grid-template-columns:repeat(3,1fr)}}
.gr{padding:20px 0}
@media (min-width:56rem){
  .gr{padding:20px 24px}
  .gr:first-child{padding-left:0}
  .gr:last-child{padding-right:0}
  .gr + .gr{border-left:1px solid var(--border)}
}
@media (max-width:56rem){.gr + .gr{border-top:1px solid var(--border)}}
.gr h3{font-size:.88rem;font-weight:620;margin-bottom:7px}
.gr p{font-size:.85rem;color:var(--text-2)}
.gr .waar{
  display:block;margin-top:10px;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);
}
.gr.hier h3{color:var(--accent)}

/* ── afsluiting ───────────────────────────────────────────────────────── */
.slot{padding:clamp(3rem,7vw,4.5rem) 0;border-top:1px solid var(--border)}
.slot h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.03em;font-weight:620;
  max-width:22ch;text-wrap:balance}
.slot .cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:16px}

.foot{border-top:1px solid var(--border);background:var(--surface-2)}
.foot .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-top:20px;padding-bottom:20px;font-size:.78rem;color:var(--text-3);
}
.foot .spacer{flex:1}

/* ── de zijbalk van de applicatie, als kaart ──────────────────────────────
   Overgenomen uit `workspace.css` en niet nagetekend: dezelfde maten, dezelfde
   tokens, dezelfde regels. Verandert de rail daar van vorm, dan hoort dit mee
   te veranderen — en dat het opvalt wanneer dat níét gebeurt, is precies de
   bedoeling. Een landingspagina die een verzonnen zijbalk laat zien, liegt
   over het product zolang niemand het merkt. */
/* Afgesneden en niet ingekort. De rail heeft eenentwintig onderdelen en die
   passen niet naast een kop; twee ervan weglaten zou een korter product laten
   zien dan er is. Dus loopt hij door en vervaagt hij onderaan, zoals een lijst
   die verder scrolt — wat hij in de applicatie ook doet. */
.railcard{
  position:relative;
  background:var(--rail);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden;font-size:13.5px;
  max-height:min(31rem,72vh);
}
.railcard::after{
  content:"";position:absolute;left:1px;right:1px;bottom:0;height:76px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--rail) 78%);
  border-radius:0;
}
.railcard .top{padding:9px 10px 8px;border-bottom:1px solid var(--border)}
.railcard .bnd{display:flex;align-items:center;gap:8px;padding:3px 5px 8px}
.railcard .bnd .mk{
  width:22px;height:22px;flex:none;border-radius:0;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;
}
.railcard .bnd .nm{font-weight:600;letter-spacing:-.015em}
.railcard .ws{
  display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface-3);
  border:1px solid var(--border);border-radius:var(--r-sm);
}
.railcard .ws .mk{
  width:22px;height:22px;flex:none;border-radius:0;display:grid;place-items:center;
  background:var(--seq-3);color:var(--seq-7);font-size:.68rem;font-weight:700;
}
.railcard .ws .n{font-weight:550;font-size:.82rem;line-height:1.25;display:block}
.railcard .ws .s{font-size:.68rem;color:var(--text-3);line-height:1.3;display:block}
.railcard .nav{padding:7px 8px 12px}
.railcard .lbl{
  padding:13px 8px 4px;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}
.railcard .it{
  display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:.83rem;font-weight:450;
}
.railcard .it.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.railcard .it .c{
  margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--text-3);letter-spacing:-.02em;
}
.railcard .it.on .c{color:var(--accent)}
.railcard .it .c.hot{color:var(--crit);font-weight:600}