/* ============================================================
   Just Transcribe — shared stylesheet
   Design tokens mirror the app (light + dark).
   ------------------------------------------------------------
   appCanvas         background
   appSurface        cards, chips, search bar
   appSurfaceStrong  badges, stronger surfaces
   appBlue           accent: buttons, selection, links
   appCoral          warm accent: record, "read more", tips
   appOnCoral        text on coral surfaces
   appMuted          inactive waveform bars
   ============================================================ */

/* ---------- Light (default) ---------- */
:root{
  --canvas:#F2F0EB;
  --surface:#E7E2D6;
  --surface-strong:#D9D2C2;
  --blue:#3B7DD8;
  --coral:#FF7A5C;
  /* Koraal op cream haalt 2,25:1 en blauw 3,6:1. Voor een bovenschrift van
     13px in kapitalen met veel spatiëring is dat op een telefoon buiten
     onleesbaar. Deze twee zijn dezelfde kleuren, donkerder gezet: 5,9:1 en
     5,3:1 op --canvas, 5,2:1 en 4,6:1 op --surface. In het donker is er niets
     aan de hand, daar wijzen ze terug naar het origineel. */
  --coral-text:#A03A22;
  --blue-text:#2C63AE;
  --on-coral:#3A1A10;
  --muted:#C7BFAD;

  /* derived text + lines (warm) */
  --ink:#2B2620;
  --ink-soft:#6E6555;
  --hairline:rgba(43,38,32,.12);
  --hairline-strong:rgba(43,38,32,.20);
  --shadow:0 1px 2px rgba(43,38,32,.05), 0 14px 40px rgba(43,38,32,.08);
  --nav-bg:rgba(231,226,214,.72);
  --grain-opacity:.03;

  --nav-h:60px;
  --maxw:1040px;
  --prose:760px;
  --r-sm:12px;
  --r:16px;
  --r-lg:26px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sv:0;               /* scrollsnelheid, gezet door app.js */

  color-scheme:light;
}

/* ---------- Dark (auto) ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --coral-text:var(--coral);
    --blue-text:var(--blue);
    --canvas:#1E2433;
    --surface:#262A33;
    --surface-strong:#333845;
    --blue:#5B9BE8;
    --coral:#FF8A6E;
    --on-coral:#3A1A10;
    --muted:#3C434F;

    --ink:#E8EAEF;
    --ink-soft:#9AA1AD;
    --hairline:rgba(255,255,255,.10);
    --hairline-strong:rgba(255,255,255,.16);
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 18px 50px rgba(0,0,0,.45);
    --nav-bg:rgba(38,42,51,.72);
    --grain-opacity:.04;

    color-scheme:dark;
  }
}

/* ---------- Manual overrides (theme toggle) ---------- */
:root[data-theme="light"]{
  --canvas:#F2F0EB; --surface:#E7E2D6; --surface-strong:#D9D2C2;
  --coral-text:#A03A22; --blue-text:#2C63AE;
  --blue:#3B7DD8; --coral:#FF7A5C; --on-coral:#3A1A10; --muted:#C7BFAD;
  --ink:#2B2620; --ink-soft:#6E6555;
  --hairline:rgba(43,38,32,.12); --hairline-strong:rgba(43,38,32,.20);
  --shadow:0 1px 2px rgba(43,38,32,.05), 0 14px 40px rgba(43,38,32,.08);
  --nav-bg:rgba(231,226,214,.72); --grain-opacity:.03;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --canvas:#1E2433; --surface:#262A33; --surface-strong:#333845;
  --coral-text:var(--coral); --blue-text:var(--blue);
  --blue:#5B9BE8; --coral:#FF8A6E; --on-coral:#3A1A10; --muted:#3C434F;
  --ink:#E8EAEF; --ink-soft:#9AA1AD;
  --hairline:rgba(255,255,255,.10); --hairline-strong:rgba(255,255,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 18px 50px rgba(0,0,0,.45);
  --nav-bg:rgba(38,42,51,.72); --grain-opacity:.04;
  color-scheme:dark;
}

/* ---------- Reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Een anker sprong voorheen tot precies onder de plakkende balk, zodat de
     kop die je zocht eronder verdween. */
  scroll-padding-top:calc(var(--nav-h) + 10px);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
::selection{background:color-mix(in srgb,var(--blue) 28%,transparent)}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration:underline}}

/* subtle film grain, ties to the parent brand */
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;z-index:9999;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.prose-wrap{max-width:var(--prose);margin:0 auto;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.section{padding:clamp(52px,7.5vw,100px) 0}
.center{text-align:center}
.tint{background:var(--surface)}

.eyebrow{
  display:inline-block;
  font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-text);
  margin-bottom:18px;
}
.eyebrow.blue{color:var(--blue-text)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.08;color:var(--ink)}
h2{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:700}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:650}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-soft);max-width:62ch}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:18px;
  height:var(--nav-h);
  padding-left:max(22px,env(safe-area-inset-left));
  padding-right:max(22px,env(safe-area-inset-right));
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  /* Was "layout paint". Paint-containment knipt alles af wat buiten de balk
     valt, en dat is precies waar het taalmenu uitklapt: het menu werd
     onzichtbaar en niet aantikbaar. Alleen layout houden. */
  contain:layout;
  border-bottom:1px solid var(--hairline);
}
/* flex:none, want op 320px werd het beeldmerk anders platgedrukt: de balk
   kneep de link samen en de afbeelding ging van 28 naar 23,5 breed mee. */
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:17px;min-height:44px;min-width:44px;flex:none}
.brand:hover{text-decoration:none}
.brand .brand-name{white-space:nowrap;min-width:0}
.brand .pd{color:var(--coral)}
.brand .mark{width:28px;height:28px;flex:none}
.nav-spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  color:var(--ink-soft);font-weight:550;font-size:15px;
  padding:8px 12px;border-radius:10px;transition:color .2s,background .2s;
}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);text-decoration:none}}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a.here{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}

/* taalwissel EN / NL op de sub-pagina's: twee talen, dus een simpele strip
   (blijft ook mobiel zichtbaar: staat buiten .nav-links) */
span.lang-switch{display:inline-flex;align-items:center;gap:3px;font-weight:550;font-size:14px;color:var(--ink-soft)}
span.lang-switch a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);padding:6px 10px;border-radius:9px;text-decoration:none;transition:color .2s,background .2s}
@media (hover:hover) and (pointer:fine){span.lang-switch a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);text-decoration:none}}
span.lang-switch a.is-current{color:var(--ink);font-weight:700}
span.lang-switch .lang-sep{color:var(--hairline-strong)}

/* taalwissel op de indexpagina's: vijftien talen, dus een menu.
   <details> zodat het ook zonder JS opent en sluit. */
details.lang-switch{position:relative;flex:none;font-weight:550;font-size:14px;color:var(--ink-soft)}
details.lang-switch>summary{
  list-style:none;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:11px 10px;border-radius:10px;cursor:pointer;color:var(--ink-soft);
  transition:color .2s,background .2s;
}
details.lang-switch>summary::-webkit-details-marker{display:none}
details.lang-switch>summary::marker{content:""}
details.lang-switch[open]>summary{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
@media (hover:hover) and (pointer:fine){
  details.lang-switch>summary:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
}
details.lang-switch>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
details.lang-switch .lang-cur{letter-spacing:.02em}
details.lang-switch .chev{transition:transform .2s var(--ease)}
details.lang-switch[open] .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:1200;
  min-width:198px;max-height:min(66vh,430px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border:1px solid var(--hairline);border-radius:14px;
  background:var(--canvas);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:1px;
}
.lang-menu a{
  display:flex;align-items:center;min-height:44px;
  padding:10px 12px;border-radius:9px;white-space:nowrap;text-align:left;
  color:var(--ink-soft);font-weight:550;text-decoration:none;
  transition:color .15s,background .15s;
}
@media (hover:hover) and (pointer:fine){.lang-menu a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);text-decoration:none}}
.lang-menu a.is-current{color:var(--ink);font-weight:700}

.icon-btn{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid var(--hairline);border-radius:11px;
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s;
}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{border-color:var(--hairline-strong);transform:translateY(-1px)}}
.icon-btn .sun{display:none}

/* ---------- Menuknop voor smalle schermen ----------
   Door app.js in de balk gezet; boven de 1019px staan de links er gewoon,
   dus daar hoort de knop niet thuis. */
details.nav-menu{position:relative;flex:none}
details.nav-menu>summary{list-style:none;cursor:pointer}
details.nav-menu>summary::-webkit-details-marker{display:none}
details.nav-menu>summary::marker{content:""}
details.nav-menu[open]>summary{border-color:var(--hairline-strong);color:var(--ink)}
.nav-menu-panel{
  position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:1200;
  /* Groeit mee met de langste regel, want "Erweiterte Privatsphäre" brak op
     200px in tweeën. De bovengrens houdt het paneel op een telefoon binnen
     het scherm; wat daar niet op één regel past, breekt gewoon af. */
  width:max-content;min-width:200px;max-width:min(300px,calc(100vw - 28px));
  max-height:min(66vh,430px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border:1px solid var(--hairline);border-radius:14px;
  background:var(--canvas);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:1px;
}
.nav-menu-panel a{
  display:flex;align-items:center;min-height:44px;
  padding:10px 12px;border-radius:9px;text-align:start;
  color:var(--ink);font-weight:550;font-size:15px;text-decoration:none;
}
.nav-menu-panel a[aria-current="page"]{color:var(--blue);font-weight:700}
@media (hover:hover) and (pointer:fine){
  .nav-menu-panel a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);text-decoration:none}
}
/* De thema-knop woont onder de 1020px in het paneel: daar is hij een gewone
   regel met opschrift, geen vierkant knopje. */
.icon-btn .nav-menu-label{display:none}
.nav-menu-panel .icon-btn{
  width:auto;height:auto;min-height:44px;
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:10px 12px;border:0;background:transparent;border-radius:9px;
  font:inherit;font-weight:550;font-size:15px;color:var(--ink);
  margin-top:5px;padding-top:14px;border-top:1px solid var(--hairline);
}
.nav-menu-panel .icon-btn .nav-menu-label{display:inline}
@media (min-width:1020px){details.nav-menu{display:none}}
:root[data-theme="dark"] .icon-btn .sun{display:block}
:root[data-theme="dark"] .icon-btn .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icon-btn .sun{display:block}
  :root:not([data-theme="light"]) .icon-btn .moon{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:15px;line-height:1;
  min-height:44px;padding:13px 20px;border-radius:14px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),filter .2s,box-shadow .2s;
  /* Was nowrap. In het Frans en het Grieks werd de tweede knop daardoor op
     320px een balk van rand tot rand. In de balk bovenaan is nowrap wél nodig,
     daar staat een pil naast andere knoppen. */
  white-space:normal;text-align:center;max-width:100%;
}
.nav .btn{white-space:nowrap}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:hover{text-decoration:none}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--blue) 35%,transparent)}
@media (hover:hover) and (pointer:fine){.btn-blue:hover{filter:brightness(1.05)}}
.btn-coral{background:var(--coral);color:var(--on-coral)}
@media (hover:hover) and (pointer:fine){.btn-coral:hover{filter:brightness(1.03)}}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--hairline)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--hairline-strong)}}

/* ---------- Advanced Privacy: een eigen knop, geen menulink ----------
   De kluis is een pagina, geen ankerpunt op de indexpagina. Tussen de vier
   ankers in de balk las hij als "nog een stukje verderop", en onder de
   1180px viel hij als enige weg: wie hem aantikte kwam op een pagina waar
   de balk er ineens anders uitzag. Nu staat hij op elke pagina op dezelfde
   plek, direct naast de links, met een eigen kleur en een slotje.
   Het groen is dat van de kluis zelf (Theme.swift, vaultGreen). In het licht
   is dezelfde kleur donkerder gezet, net als --blue-text en --coral-text:
   5,1:1 op de balk, 5,7:1 op het doek. */
/* Alles hieronder staat op .nav, niet op .btn-vault kaal: die klasse bestond
   al voor de groene knop midden in de kluissectie op de indexpagina
   (.vault .btn-vault, verderop). Die knop hoort massief groen te blijven. */
.nav .btn-vault{
  --vault-accent:#0B6045;
  gap:8px;padding:12px 15px;font-weight:650;
  background:color-mix(in srgb,var(--vault-accent) 10%,transparent);
  color:var(--vault-accent);
  border-color:color-mix(in srgb,var(--vault-accent) 30%,transparent);
}
.nav .btn-vault svg{flex:none}
@media (hover:hover) and (pointer:fine){
  .nav .btn-vault:hover{
    background:color-mix(in srgb,var(--vault-accent) 16%,transparent);
    border-color:color-mix(in srgb,var(--vault-accent) 46%,transparent);
    text-decoration:none;
  }
}
/* Op de kluispagina zelf: dezelfde knop, ingedrukt. */
.nav .btn-vault[aria-current="page"]{
  background:color-mix(in srgb,var(--vault-accent) 18%,transparent);
  border-color:color-mix(in srgb,var(--vault-accent) 52%,transparent);
}
:root[data-theme="dark"] .nav .btn-vault{--vault-accent:#31E08F}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav .btn-vault{--vault-accent:#31E08F}
}

/* In het menupaneel is het geen pil maar een regel: slotje, opschrift, en een
   streep eronder zodat hij niet als vijfde menulink leest. Hij staat er ook in
   de DOM als eerste in, dus tabvolgorde en leesvolgorde lopen gelijk. */
.nav-menu-panel .btn-vault{
  width:100%;justify-content:flex-start;
  min-height:44px;padding:10px 12px;
  font-size:15px;white-space:normal;text-align:start;
  margin-bottom:5px;padding-bottom:14px;
  border:0;border-bottom:1px solid var(--hairline);border-radius:9px 9px 0 0;
}
.nav-menu-panel .btn-vault .vault-label{display:inline}

/* App Store badge button */
.appstore{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;border-radius:14px;
  background:var(--ink);color:var(--canvas);
  transition:transform .18s var(--ease),filter .2s;
}
@media (hover:hover) and (pointer:fine){.appstore:hover{transform:translateY(-1px);filter:brightness(1.08)}}
.appstore:hover{text-decoration:none}
.appstore svg{width:26px;height:26px;flex:none;fill:currentColor}
.appstore .as-top{font-size:13px;opacity:.85;line-height:1.15;letter-spacing:.01em;margin-right:7px}
.appstore .as-big{font-size:18px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .btn-row{justify-content:center}
.note{font-size:13px;color:var(--ink-soft);margin-top:14px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,104px) 0 clamp(40px,7vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:750;letter-spacing:-.035em}
.hero h1 .accent{color:var(--coral)}
.hero .lead{margin-top:22px;font-size:clamp(1.1rem,2.2vw,1.45rem)}
.hero .btn-row{margin-top:32px}
.blob{position:absolute;border-radius:50%;opacity:.55;pointer-events:none;z-index:0}
.blob-a{width:56vw;height:56vw;top:-18vw;left:-16vw;background:radial-gradient(circle at 32% 32%,color-mix(in srgb,var(--coral) 72%,transparent),color-mix(in srgb,var(--coral) 26%,transparent) 34%,transparent 66%)}
.blob-b{width:60vw;height:60vw;bottom:-22vw;right:-18vw;background:radial-gradient(circle at 58% 42%,color-mix(in srgb,var(--blue) 70%,transparent),color-mix(in srgb,var(--blue) 24%,transparent) 34%,transparent 66%)}
.hero .container{position:relative;z-index:1}

/* ---------- Phone mockup (faithful to the app UI) ---------- */
.phone{
  position:relative;width:min(312px,84vw);margin:0 auto;
  aspect-ratio:9/19.3;
  background:var(--surface-strong);
  border-radius:46px;padding:10px;
  box-shadow:var(--shadow), 0 0 0 1px var(--hairline);
}
.phone-screen{
  position:relative;height:100%;width:100%;
  background:var(--canvas);border-radius:36px;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--hairline);
}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30%;height:18px;background:#0e1016;border-radius:0 0 11px 11px;z-index:6}

.app-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:24px 14px 10px}
.app-nav .grp{display:flex;gap:11px;color:var(--ink-soft);flex:1}
.app-nav .grp.end{justify-content:flex-end}
.app-nav .grp svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.app-nav .ttl{text-align:center;line-height:1.15}
.app-nav .ttl b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.app-nav .ttl b i{color:var(--coral);font-style:normal}
.app-nav .ttl span{display:block;font-size:8px;color:var(--ink-soft)}

.app-body{flex:1;overflow:hidden;padding:0 12px;display:flex;flex-direction:column;gap:8px}

.app-set{display:flex;gap:8px}
.mini{flex:1;background:var(--surface);border-radius:12px;padding:8px 10px}
.mini .k{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:600;color:var(--ink-soft)}
.mini .k svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2}
.mini .v{font-size:11.5px;font-weight:650;margin-top:3px}
.mini .v small{display:block;font-size:7.5px;font-weight:500;color:var(--ink-soft);margin-top:1px}

.app-rec{display:flex;gap:8px;justify-content:center;align-items:center}
.app-rec .go{position:relative;flex:1;height:50px;max-width:100%;overflow:hidden;background:var(--blue);color:#fff;border-radius:16px;box-shadow:0 7px 16px color-mix(in srgb,var(--blue) 35%,transparent);transition:max-width .6s cubic-bezier(.4,1.05,.4,1),background-color .45s ease,border-radius .6s ease,box-shadow .45s ease}
.app-rec .go .go-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:650;white-space:nowrap;transition:opacity .3s ease}
.app-rec .go .go-rec{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;opacity:0;transition:opacity .3s ease}
.app-rec .go .go-rec i{width:4px;height:8px;border-radius:2px;background:#fff}
.app-rec .go svg{width:14px;height:14px;fill:currentColor}

/* recording state: button morphs to a coral circle */
.app-rec.recording .go{max-width:50px;background:var(--coral);border-radius:50%;box-shadow:0 8px 20px color-mix(in srgb,var(--coral) 50%,transparent)}
.app-rec.recording .go .go-label{opacity:0}
.app-rec.recording .go .go-rec{opacity:1}

/* folder bar (mirrors the app: stack button + scrollable chips) */
/* De rij is breder dan het schermpje. Hard afknippen gaf een halve pil die
   op een tekenfout lijkt; een uitvloeier leest als "er staat nog meer". */
.app-folders{display:flex;align-items:center;gap:5px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
[dir="rtl"] .app-folders{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent)}
.app-folders .fst{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.app-folders .fst svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.app-folders .fch{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;background:var(--surface);font-size:9px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background .35s ease,color .35s ease}
.app-folders .fch svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
.app-folders .fch b{font-size:7.5px;font-weight:700;padding:1px 5px;border-radius:999px;background:var(--surface-strong);transition:background .35s ease}
.app-folders .fch.cur{background:var(--blue);color:#fff}
.app-folders .fch.cur b{background:rgba(255,255,255,.3)}

/* model value crossfade on switch */
.mini .v .mv{display:inline-block;transition:opacity .3s ease,transform .3s ease}
.mini .v .ms{transition:opacity .3s ease}
.mini.switching .v .mv{opacity:0;transform:translateY(-3px)}
.mini.switching .v .ms{opacity:0}

/* soft highlight on the freshest transcript after recording */
.app-card{transition:box-shadow .5s ease}
.app-card.flash{box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 38%,transparent)}

/* dancing bars inside the recording button */
@media (prefers-reduced-motion:no-preference){
  .app-rec.recording .go-rec i{animation:recbar .9s ease-in-out infinite}
  .app-rec.recording .go-rec i:nth-child(2){animation-duration:.7s;animation-delay:-.2s}
  .app-rec.recording .go-rec i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}
  .app-rec.recording .go-rec i:nth-child(4){animation-duration:.8s;animation-delay:-.1s}
  .app-rec.recording .go-rec i:nth-child(5){animation-duration:1s;animation-delay:-.35s}
  @keyframes recbar{0%,100%{height:7px}50%{height:24px}}
}

.app-card{background:var(--surface);border-radius:16px;padding:11px}
.app-card .row{display:flex;align-items:center;gap:7px}
.app-card .play{flex:none;color:var(--blue);display:flex}
.app-card .play svg{width:19px;height:19px;fill:currentColor}
.app-card .nm{flex:1;font-size:11.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-card .mdl{font-size:8px;font-weight:600;color:var(--ink-soft);background:var(--surface-strong);padding:3px 6px;border-radius:6px;white-space:nowrap}
.app-card .tx{font-size:8px;font-weight:700;color:var(--ink);border:1px solid var(--hairline-strong);padding:3px 7px;border-radius:7px;white-space:nowrap}
.app-card .tx i{font-style:normal;font-size:6.5px;opacity:.65;margin-left:3px}
.wave{display:flex;align-items:center;gap:2px;height:26px;margin-top:9px}
.wave i{display:block;width:3px;border-radius:2px;background:var(--muted);height:30%;
  transform:scaleY(calc(1 + var(--amp,0) * .5));transform-origin:center bottom}
.wave i.on{background:var(--blue)}
.app-snip{margin-top:8px;font-size:9px;line-height:1.5;color:var(--ink-soft)}
.app-snip .more{color:var(--coral);font-weight:700}
.app-snip .sp{color:var(--blue);font-weight:700}
.app-snip .sp.b{color:var(--coral)}

.app-search{
  display:flex;align-items:center;gap:7px;margin:6px 12px 14px;
  padding:9px 12px;border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:10.5px;
}
.app-search svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- Feature cards ---------- */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:26px;
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease),border-color .25s;
}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);border-color:var(--hairline-strong)}}
.card .ic{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:16px;background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);
}
.card .ic.coral{background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral)}
.card .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:15.5px}

/* ---------- Privacy band ---------- */
.band{
  background:var(--surface);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.privacy-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.pill{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r);padding:20px;
}
.pill .dot{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral);
}
.pill .dot svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill b{display:block;font-size:15px;margin-bottom:3px}
.pill span{color:var(--ink-soft);font-size:13.5px;line-height:1.5}

/* chips row */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips.center,.center .chips{justify-content:center}
.chip{
  font-size:13.5px;font-weight:550;color:var(--ink);
  background:var(--surface-strong);
  padding:8px 14px;border-radius:999px;
}

/* ---------- FAQ / Support ---------- */
.faq{max-width:var(--prose);margin:32px auto 0}
.qa{border-bottom:1px solid var(--hairline)}
.qa summary{
  cursor:pointer;list-style:none;
  padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:600;font-size:17px;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{flex:none;width:22px;height:22px;position:relative;transition:transform .25s var(--ease)}
.qa summary .plus::before,.qa summary .plus::after{content:"";position:absolute;background:var(--ink-soft);border-radius:2px}
.qa summary .plus::before{top:10px;left:3px;right:3px;height:2px}
.qa summary .plus::after{left:10px;top:3px;bottom:3px;width:2px;transition:opacity .25s}
.qa[open] summary .plus{transform:rotate(180deg)}
.qa[open] summary .plus::after{opacity:0}
.qa .a{padding:0 4px 22px;color:var(--ink-soft);font-size:15.5px}
.qa .a p+p{margin-top:12px}
/* De vragenlijst op de startpagina: app.js zet deze klasse zodra de kaarten
   uitklappers worden. Een rasterafstand hoort daar niet meer bij, de
   haarlijntjes doen het scheiden. */
.grid.qa-list{display:block;gap:0}
.grid.qa-list .qa:first-child{border-top:1px solid var(--hairline)}

.contact-card{
  margin:36px auto 0;max-width:var(--prose);
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:clamp(26px,5vw,40px);text-align:center;box-shadow:var(--shadow);
}
.contact-card .ic{
  width:54px;height:54px;border-radius:15px;margin:0 auto 16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);
}
.contact-card .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contact-card .email{font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:650;margin:8px 0 4px;color:var(--blue);word-break:break-word}
.contact-card .email a{display:inline-block;min-height:44px;padding:11px 18px;border-radius:12px;background:color-mix(in srgb,var(--blue) 12%,transparent);text-decoration:none}

/* ---------- Legal / prose ---------- */
.legal-head{padding:clamp(48px,8vw,84px) 0 0}
/* Stond als inline style op zes pagina's, met een ondergrens van 2rem. Eén woord
   van negentien letters past daar op 320px niet in. */
.legal-head h1{font-size:clamp(1.6rem,7.5vw,3rem);font-weight:750;overflow-wrap:break-word;hyphens:auto}
.legal-head .updated{color:var(--ink-soft);font-size:14.5px;margin-top:14px}
.prose{padding:clamp(28px,5vw,44px) 0 clamp(56px,9vw,96px)}
.prose h2{font-size:clamp(1.3rem,3vw,1.6rem);margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:26px 0 8px}
.prose p{color:var(--ink-soft);margin:0 0 14px;font-size:16.5px}
.prose ul,.prose ol{color:var(--ink-soft);margin:0 0 16px;padding-left:22px;font-size:16.5px}
.prose li{margin:0 0 9px}
.prose strong{color:var(--ink);font-weight:650}
.callout{
  background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--coral);
  border-radius:var(--r-sm);padding:18px 20px;margin:0 0 22px;
}
.callout p{margin:0;color:var(--ink)}
.toc{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r);padding:20px 24px;margin:0 0 36px;
}
.toc b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.toc ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:0;margin:0}
.toc a{display:block;font-size:15px;padding:11px 0}

/* breadcrumb trail above the eyebrow on legal & support headers */
.crumb{
  font-size:13.5px;font-weight:550;color:var(--ink-soft);
  margin-bottom:16px;line-height:1.4;
}
.crumb a{color:var(--ink);text-decoration:none;transition:color .2s}
@media (hover:hover) and (pointer:fine){.crumb a:hover{color:var(--blue);text-decoration:none}}
.crumb a{display:inline-block;padding-block:13px;margin-block:-8px}
/* Een link die in zijn eentje een alinea vult (de privacyverwijzing, "terug
   naar…") was 18 pixels hoog. Het raakvlak groeit, de regelval niet. */
.act-copy p > a:only-child,
.prose p > a:only-child{display:inline-block;padding-block:13px;margin-block:-13px}
.crumb .sep{margin:0 .45em;color:var(--hairline-strong)}
.crumb .cur{color:var(--ink-soft)}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--hairline);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.foot-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot .brand{margin-bottom:14px}
.foot p{color:var(--ink-soft);font-size:14px;max-width:38ch}
.foot-links{display:flex;flex-wrap:wrap;gap:26px}
.foot-col b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.foot-col a{display:block;color:var(--ink);font-size:15px;padding:10px 0}
.foot-col b{margin-bottom:2px}
.foot-col a:last-child{margin-bottom:-10px}
@media (hover:hover) and (pointer:fine){.foot-col a:hover{color:var(--blue)}}
.foot-base{margin-top:44px;padding-top:24px;border-top:1px solid var(--hairline);color:var(--ink-soft);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ---------- Reveal (progressive enhancement) ----------
   --i wordt door app.js gezet op de kinderen van [data-stagger]; data-d is de
   oudere, handmatige variant en blijft gewoon werken. */
.js .reveal{
  --rd:calc(var(--i,0) * .07s);
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .8s var(--ease-out) var(--rd), transform .9s var(--ease-out) var(--rd);
}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{--rd:.07s}
.js .reveal[data-d="2"]{--rd:.14s}
.js .reveal[data-d="3"]{--rd:.21s}
/* Koppen komen ook scherp: een klein beetje onscherpte die wegtrekt. Alleen
   op ruime schermen, want blur is op een telefoon een dure grap. */
@media (min-width:861px){
  .js h2.reveal{filter:blur(7px);transition:opacity .8s var(--ease-out) var(--rd),transform .9s var(--ease-out) var(--rd),filter .8s var(--ease-out) var(--rd)}
  .js h2.reveal.in{filter:none}
}

/* ---------- How-it-works steps (mirrors the app) ---------- */
.steps{display:grid;gap:14px;margin:40px auto 0;max-width:780px;text-align:left}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:18px 20px}
.step .tile{position:relative;width:46px;height:46px;flex:none;border-radius:12px;background:var(--coral);display:grid;place-items:center}
.step .tile svg{width:23px;height:23px;stroke:var(--on-coral);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.step .tile .n{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--canvas)}
.step h3{font-size:1.05rem;margin-bottom:3px}
.step p{color:var(--ink-soft);font-size:15px;margin:0}

/* ---------- Speakers & voices (spotlight card) ---------- */
.voices{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.voices-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.voices-title{flex:1;font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.voices-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent);padding:5px 11px;border-radius:999px}
.voices-pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-line{display:flex;align-items:baseline;gap:9px;padding:8px 11px;border-radius:11px;margin-bottom:6px;flex-wrap:wrap}
.v-line:nth-child(odd){background:color-mix(in srgb,var(--ink) 3%,transparent)}
.v-line .v-name{flex:none;font-size:11px;font-weight:750;color:var(--blue);min-width:58px}
.v-line.b .v-name{color:var(--coral)}
.v-line.c .v-name{color:var(--ink-soft)}
.v-line p{margin:0;flex:1;min-width:150px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.v-save{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--coral);background:color-mix(in srgb,var(--coral) 15%,transparent);padding:4px 9px;border-radius:999px;white-space:nowrap}
.v-save svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.v-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:13px;border-top:1px solid var(--hairline)}
.v-foot .v-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral)}
.v-foot .v-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-who{flex:1;line-height:1.25}
.v-who b{display:block;font-size:13.5px;color:var(--ink)}
.v-who small{display:block;font-size:11px;color:var(--ink-soft)}
.v-ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#3d9a50;background:color-mix(in srgb,#3d9a50 13%,transparent);padding:5px 10px;border-radius:999px;white-space:nowrap}
.v-ok svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Models strip ---------- */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;text-align:left}
.model{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.model .top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.model .top b{font-size:16px;letter-spacing:-.01em}
.model .sz{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-strong);padding:3px 9px;border-radius:999px;white-space:nowrap}
.model p{color:var(--ink-soft);font-size:13.5px;margin:0;line-height:1.5}
.model .spd{margin-top:12px;font-size:12px;font-weight:600;color:var(--blue-text)}

/* quality meter (mirrors the app's redesigned model menu: five bars, Basic -> Best) */
.pw{display:flex;align-items:center;gap:7px;margin:0 0 11px;--pwc:var(--ink-soft)}
.pw .pb{display:inline-flex;align-items:flex-end;gap:3px}
.pw .pb i{width:4px;border-radius:2px;background:var(--muted)}
.pw .pb i:nth-child(1){height:7px}
.pw .pb i:nth-child(2){height:10px}
.pw .pb i:nth-child(3){height:13px}
.pw .pb i:nth-child(4){height:16px}
.pw .pb i:nth-child(5){height:19px}
.pw .pl{font-size:11px;font-weight:700;color:var(--pwc)}
.pw[data-lv="1"] .pb i:nth-child(-n+1){background:var(--pwc)}
.pw[data-lv="2"]{--pwc:var(--blue)}
.pw[data-lv="2"] .pb i:nth-child(-n+2){background:var(--pwc)}
.pw[data-lv="3"]{--pwc:var(--blue)}
.pw[data-lv="3"] .pb i:nth-child(-n+3){background:var(--pwc)}
.pw[data-lv="4"]{--pwc:var(--coral)}
.pw[data-lv="4"] .pb i:nth-child(-n+4){background:var(--pwc)}
.pw[data-lv="5"]{--pwc:var(--coral)}
.pw[data-lv="5"] .pb i:nth-child(-n+5){background:var(--pwc)}

/* ---------- Founder story ---------- */
.story{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);max-width:820px;margin:0 auto;text-align:left;box-shadow:var(--shadow)}
.story .q{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.42}
.story .q .accent{color:var(--coral)}
.story p{color:var(--ink-soft);font-size:16.5px;margin:16px 0 0}
.story .sign{margin-top:24px;font-weight:650;color:var(--ink)}
.story .sign span{color:var(--ink-soft);font-weight:500}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .models{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .btn-row{justify-content:center}
  /* Het nagebouwde toestel stond hier op order:-1, dus bóven de kop. Op een
     telefoon is dat 669 pixels beeldscherm voordat er ook maar één woord
     staat: de kop begon pas op 859 en de downloadknop op 1200, ruim
     anderhalf scherm naar beneden. De tekst gaat weer voorop, het toestel
     komt er als bewijs achteraan. */
  .hero-visual{order:0;margin-top:clamp(30px,7vw,46px)}

  /* Het toestel had een vaste 9/19.3-verhouding. Op 375px is dat 669 pixels
     hoog, meer dan een scherm, en de onderste kwart was leeg: de app-inhoud
     is korter dan de doos. Op een telefoon laten we de doos om de inhoud
     krimpen; de verhouding klopt dan niet meer op de millimeter, maar er
     staat ook geen leegte meer in. Op een ruim scherm blijft alles zoals het was. */
  .phone{aspect-ratio:auto;height:auto}
  .phone-screen{height:auto}
  .app-body{flex:0 0 auto;padding-bottom:4px}
  .grid-3{grid-template-columns:1fr 1fr}
  .privacy-row{grid-template-columns:1fr}
}
/* Liggend op een telefoon is het scherm breed en laag: 932 bij 430. De hero
   stapelde daar op één kolom met een kop van 65 pixels, en dan staat de
   downloadknop op 689 — ruim onder de vouw van 430. Dus liggend weer twee
   kolommen, een kleinere kop en minder lucht. */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:clamp(20px,6svh,44px);padding-bottom:clamp(20px,6svh,44px)}
  /* align-items:start, niet center: het toestel is hoger dan het scherm, en
     gecentreerd duwt het de kop naar 303 — halverwege een scherm van 430. */
  .hero-grid{grid-template-columns:1.1fr .9fr;text-align:start;align-items:start}
  .hero h1{font-size:clamp(1.7rem,4.4vw,2.6rem)}
  .hero .lead{margin-left:0;margin-right:0;margin-top:14px;font-size:1rem}
  .hero .btn-row{justify-content:flex-start;margin-top:22px}
  .hero-visual{order:0;margin-top:0}
  /* Het toestel kreeg anders 312 pixels van de 667 en kneep de tekstkolom
     tot 278 — te smal voor de twee knoppen naast elkaar. */
  .phone{width:min(220px,32vw)}
  .hero .chips{margin-top:clamp(20px,4vw,32px)!important}
}

/* De navigatielinks verdwijnen zodra de balk krap wordt. Dat was 620px, maar
   daar paste zelfs het Engels al niet meer: bij 700px had de balk 762px nodig,
   en het Duits 895px. Zie de grens hieronder: met de kluisknop erbij ligt
   die nu op 1019px. */
/* "Advanced Privacy" is een lang label, en in het Duits ("Erweiterte
   Privatsphäre") nog langer. Boven de 1180px staat het opschrift naast het
   slotje; daaronder blijft de knop staan waar hij stond en houdt hij alleen
   het slotje over. Zijn naam staat dan in title en aria-label, dus hij is
   nog steeds te lezen en aan te wijzen. */
/* Zonder JS is er niets te meten, dan geldt de langste taal: het Duitse
   "Erweiterte Privatsphäre" heeft 1143px nodig, dus onder de 1180 alleen het
   slotje. Met JS wint de meting hieronder, en houdt het Engels zijn opschrift
   tot 1086. */
@media (max-width:1180px){
  :root:not(.js) .nav > .btn-vault .vault-label{display:none}
  :root:not(.js) .nav > .btn-vault{padding-left:13px;padding-right:13px}
}
/* app.js zet .nav-tight zodra de balk geen speling meer heeft. */
.nav.nav-tight > .btn-vault .vault-label{display:none}
.nav.nav-tight > .btn-vault{padding-left:13px;padding-right:13px}
/* Was 900px. Met de kluisknop erbij (het slotje alleen al 43 breed plus 18
   tussenruimte) is de balk in alle vijftien talen nagemeten: het Nederlands
   heeft er 977 voor nodig, het Duits 968, het Engels 930. Tussen 901 en 977
   werd de downloadknop dus platgedrukt. Vanaf 1020px past de langste taal met
   veertig pixels speling, daaronder gaat alles het menupaneel in. */
@media (max-width:1019px){
  .nav-links{display:none}
  /* Daar verhuist app.js de knop naartoe, net als de thema-knop. Staat hij in
     het paneel, dan is hij geen direct kind meer van de balk en geldt deze
     regel niet. */
  .nav > .btn-vault{display:none}
}
@media (max-width:620px){
  /* Op telefoonbreedte paste de balk niet: de downloadknop viel buiten beeld,
     ook in het Engels. Het woordmerk wijkt, het beeldmerk blijft. De naam staat
     twee tellen later toch in de hero en onderaan in de voettekst. */
  .nav{gap:10px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .nav .brand .brand-name{display:none}

  /* Het taalmenu hing onder de taalknop en is 198px breed. Op 320px begon het
     daardoor op x=-43: de eerste letters van elke taal vielen buiten beeld.
     Door de <details> even niet-gepositioneerd te maken hangt het menu aan de
     balk zelf, netjes tegen de rechterrand. */
  details.lang-switch,details.nav-menu{position:static}
  .lang-menu,.nav-menu-panel{
    top:calc(var(--nav-h) + 6px);
    inset-inline-end:max(14px,env(safe-area-inset-right));
    max-width:calc(100vw - max(28px,env(safe-area-inset-left) + env(safe-area-inset-right)));
    max-height:min(62svh,420px);
  }
  .nav .btn-blue{padding-left:14px;padding-right:14px}
  .grid-3,.grid-2{grid-template-columns:1fr}

  .models{grid-template-columns:1fr}
  .step{padding:16px}
  /* Een vaste laag over het hele scherm, op 3% dekking. Bij deze pixeldichtheid
     ziet niemand hem, en hij wordt wel elk frame meegemengd. */
  body::after{display:none}
  .toc{padding:14px 16px;margin:0 0 24px}
  .toc ul{grid-template-columns:1fr}
  .foot-grid{flex-direction:column}

  /* De modelkaarten staan op een telefoon breder dan ze op een bureaublad
     ooit zijn, en toch stond de tekst erin op 13,5 / 12 / 11,5 px. */
  .model p{font-size:15px;line-height:1.55}
  .model .spd{font-size:13.5px}
  .model .sz{font-size:12.5px}
  .pw .pl{font-size:12px}

  /* De App Store-knop zette "Télécharger dans l'" en "App Store" naast
     elkaar; dat is in het Frans breder dan het scherm. Boven elkaar is
     bovendien precies hoe Apple's eigen badge eruitziet. */
  .appstore .as-top{display:block;margin-inline:0;margin-bottom:1px}

  /* De voettekst brak in 2 + 1: twee kolommen naast elkaar en eentje
     eronder, op een andere kantlijn. */
  .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;width:100%}
  .foot-links .foot-col:last-child{grid-column:1 / -1}

  /* De trapsgewijze vertraging van het binnenkomen is bedoeld voor rijen
     naast elkaar. In één kolom loopt de laatste kaart een halve seconde
     achter, en dan scrol je er al voorbij terwijl hij nog leeg is. */
  .js .reveal{--rd:0s;transition-duration:.45s,.5s}
}

/* Allersmalste toestellen (iPhone SE, 320px). De wereldbol in de taalknop mag
   weg, het taalkortje zegt genoeg, en de downloadknop wordt een maat kleiner. */
@media (max-width:380px){
  .nav{gap:8px}
  details.lang-switch>summary{gap:4px;padding:11px 6px}
  details.lang-switch>summary>svg:first-child{display:none}
  .nav .btn-blue{font-size:14px;padding:12px}

  /* Naast een tegel van 46px hield stap 1 op 320px een kolom van 180px over:
     elf regels van vier woorden. De tegel gaat erboven staan. De verbindings-
     lijn moet dan weg, want die loopt op de hoogte van het tegelmidden en zou
     dwars door de tekst tekenen. */
  .step{flex-direction:column;gap:12px;padding:16px}
  .step .tile{width:40px;height:40px}
  .steps::before,.steps::after{display:none}
}

/* Alleen op een echte 320px-telefoon is de balk zó krap dat het beeldmerk zijn
   raakvlak van 44 breed moet inleveren; op 360 en 375 is er ruimte zat. Het
   staat tegen de schermrand, waar iOS ruimhartig mikt, en 44 hoog blijft. */
@media (max-width:344px){
  .nav .brand{min-width:0}
}

/* ---------- Spotlight (two-up: copy + visual) ---------- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px);align-items:center}
.showcase-copy .lead{max-width:52ch}
.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.ticks li b{color:var(--ink);font-weight:650}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:color-mix(in srgb,var(--blue) 16%,transparent)}
.ticks li::after{content:"";position:absolute;left:7px;top:6px;width:7px;height:4px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

/* transcript follow-along card */
.transcript{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.transcript .t-head{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.transcript .t-title{flex:1;font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.t-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent);padding:5px 11px;border-radius:999px}
.t-pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* find & replace bar */
.fr-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
/* flex-wrap, want een lang woord (het Griekse "Παρασκευή" bijvoorbeeld) duwde
   het veld anders buiten de kaart op smalle schermen */
.fr-field{flex:1;min-width:130px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hairline);border-radius:11px;padding:9px 12px;font-size:12.5px;color:var(--ink-soft)}
.fr-field svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fr-field b{color:var(--ink);font-weight:650}
.fr-field .new{color:var(--blue);font-weight:700}

/* transcript lines */
.t-lines{display:grid;gap:7px}
.t-line{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft);padding:8px 11px;border-radius:11px;transition:background .4s ease,color .4s ease}
.t-line.read{color:var(--ink)}
.t-line.active{background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--ink)}
.t-line .mark{background:color-mix(in srgb,var(--coral) 32%,transparent);border-radius:5px;padding:0 3px;color:var(--ink)}

/* playback scrubber */
.scrub{display:flex;align-items:center;gap:11px;margin-top:16px}
.scrub .play-dot{width:32px;height:32px;flex:none;border-radius:50%;background:var(--coral);display:grid;place-items:center}
.scrub .play-dot svg{width:14px;height:14px;fill:var(--on-coral)}
.scrub .bar{flex:1;height:5px;border-radius:999px;background:var(--surface-strong);position:relative;overflow:hidden}
.scrub .bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;width:46%;background:var(--blue);border-radius:999px}
.scrub .t-time{font-size:11px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* No-JS fallback: a gentle loop. When JS scroll-control is on (html.sx) it is handed over below. */
@media (prefers-reduced-motion:no-preference){
  html:not(.sx) .scrub .bar i{animation:scrubMove 6s ease-in-out infinite alternate}
  @keyframes scrubMove{from{width:34%}to{width:64%}}
  html:not(.sx) .t-line.active{animation:linePulse 6s ease-in-out infinite}
  @keyframes linePulse{0%,100%{background:color-mix(in srgb,var(--blue) 9%,transparent)}50%{background:color-mix(in srgb,var(--blue) 16%,transparent)}}
}

/* Scroll-driven: the transcript "plays" as you scroll (JS sets --play 0..1 on .transcript). */
.sx .scrub .bar i{width:calc(6% + var(--play,0) * 86%)}

/* How-it-works: the step tiles light up coral one by one as you scroll (JS toggles .lit). */
.sx .steps .tile{background:var(--surface-strong);box-shadow:none;transition:background .45s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.sx .steps .tile svg{stroke:var(--ink-soft);transition:stroke .45s var(--ease)}
.sx .step.lit .tile{background:var(--coral);transform:scale(1.05);box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 18%,transparent)}
.sx .step.lit .tile svg{stroke:var(--on-coral)}

/* ---------- On-device AI summary card (spotlight) ---------- */
.summ{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.summ-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.summ-title{flex:1;font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.summ-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent);padding:5px 11px;border-radius:999px}
.summ-pill svg{width:13px;height:13px;fill:currentColor}
.summ-block{margin-bottom:13px}
.summ-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.summ-block p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.summ-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.summ-list li{position:relative;padding-left:17px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.summ-list li::before{content:"";position:absolute;left:1px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.summ-actions{display:grid;gap:8px;margin-top:15px;padding-top:14px;border-top:1px solid var(--hairline)}
.summ-do{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink)}
.summ-do i{width:15px;height:15px;flex:none;border-radius:5px;background:var(--coral);position:relative}
.summ-do i::after{content:"";position:absolute;left:5px;top:2.5px;width:4px;height:7px;border-right:2px solid var(--on-coral);border-bottom:2px solid var(--on-coral);transform:rotate(40deg)}

/* ---------- Apple Watch band ---------- */
.watch-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,72px);align-items:center}
.watch-visual{display:flex;justify-content:center}
.awatch{position:relative;width:min(206px,62vw);aspect-ratio:42/52;background:linear-gradient(160deg,#2b303b,#15181f);border-radius:54px;padding:13px;box-shadow:var(--shadow),0 0 0 1px var(--hairline)}
.awatch::before,.awatch::after{content:"";position:absolute;right:-5px;width:8px;background:#3a4150;border-radius:4px}
.awatch::before{top:34%;height:30px}
.awatch::after{top:56%;height:16px}
.awatch .face{height:100%;background:#0c0e13;border-radius:42px;padding:15px 14px 13px;display:flex;flex-direction:column;color:#E8EAEF;overflow:hidden}
.w-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:650;color:#cfd3db}
.w-top .w-dot{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.w-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}
.w-rec{width:54px;height:54px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 0 0 6px color-mix(in srgb,var(--coral) 20%,transparent)}
.w-rec i{width:17px;height:17px;border-radius:5px;background:var(--on-coral)}
.w-wave{display:flex;align-items:flex-end;gap:3px;height:22px}
.w-wave i{width:3px;border-radius:2px;background:#5B9BE8;height:100%;transform:scaleY(.40);transform-origin:bottom}
.w-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:-.01em;color:#fff}
.w-label i{color:var(--coral);font-style:normal}
@media (prefers-reduced-motion:no-preference){
  .w-wave i{animation:wbar 1s ease-in-out infinite}
  .w-wave i:nth-child(2){animation-duration:.74s;animation-delay:-.2s}
  .w-wave i:nth-child(3){animation-duration:1.15s;animation-delay:-.5s}
  .w-wave i:nth-child(4){animation-duration:.86s;animation-delay:-.1s}
  .w-wave i:nth-child(5){animation-duration:1.05s;animation-delay:-.35s}
  .w-wave i:nth-child(6){animation-duration:.8s;animation-delay:-.15s}
  /* Was height:30% -> 95%. Elke stap daarvan is een layout; met transform
     blijft het bij de compositor en raakt de hoofddraad het niet. */
  @keyframes wbar{0%,100%{transform:scaleY(.30)}50%{transform:scaleY(.95)}}
}
.watch-points{display:grid;gap:15px;margin-top:28px}
.wp{display:flex;gap:13px;align-items:flex-start}
.wp .wi{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral)}
.wp .wi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wp-t b{display:block;font-size:15px;margin-bottom:2px;color:var(--ink)}
.wp-t span{display:block;color:var(--ink-soft);font-size:14px;line-height:1.5}

@media (max-width:860px){
  .showcase,.watch-grid{grid-template-columns:1fr;gap:clamp(28px,7vw,44px)}
}

/* ---------- Aanraken ----------
   Lang drukken op een nagebouwd schermpje riep de selectiegrepen en het
   Kopieer/Bewaar-menu van iOS op, over iets wat een plaatje moet lijken.
   De echte tekst op de pagina blijft gewoon selecteerbaar. */
.phone,.act-stage,.awatch,.lock-stage,.brand{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

/* ---------- Zichtbare focus ----------
   Voor wie met een toetsenbord of Schakelbediening werkt: waar sta ik nu. */
.btn:focus-visible,
.appstore:focus-visible,
.brand:focus-visible,
.nav-links a:focus-visible,
.foot-col a:focus-visible,
.toc a:focus-visible,
.crumb a:focus-visible,
.lang-menu a:focus-visible,
.icon-btn:focus-visible,
.act-copy p > a:focus-visible,
.prose p > a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Rechts naar links (Arabisch) ----------
   Alleen de plekken die echt een kant kiezen. De vinkjes en het pijltje in
   .ticks / .summ-do verhuizen wel mee, maar behouden hun vorm: een vinkje
   hoort niet gespiegeld te worden. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:normal}
[dir="rtl"] .brand{letter-spacing:normal}
[dir="rtl"] .steps,[dir="rtl"] .models,[dir="rtl"] .story{text-align:right}
[dir="rtl"] .appstore .as-top{margin-right:0;margin-left:7px}
[dir="rtl"] .app-card .tx i{margin-left:0;margin-right:3px}
[dir="rtl"] .app-nav .ttl{text-align:center}
/* "Just Transcribe." is Latijn in een rtl-alinea: de punt landde vooraan.
   Isoleren zet hem weer waar hij hoort. */
[dir="rtl"] .app-nav .ttl b,
[dir="rtl"] .brand .brand-name{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .prose ul,[dir="rtl"] .prose ol{padding-left:0;padding-right:22px}
[dir="rtl"] .callout{border-left:1px solid var(--hairline);border-right:3px solid var(--coral)}
[dir="rtl"] .step .tile .n{left:auto;right:-7px}
[dir="rtl"] .ticks li{padding-left:0;padding-right:32px}
[dir="rtl"] .ticks li::before{left:auto;right:0}
[dir="rtl"] .ticks li::after{left:auto;right:7px}
[dir="rtl"] .summ-list li{padding-left:0;padding-right:17px}
[dir="rtl"] .summ-list li::before{left:auto;right:1px}
[dir="rtl"] .summ-do i::after{left:auto;right:5px}
[dir="rtl"] .lang-menu a{text-align:right}
/* De tijdweergave en de modelgrootte zijn kale getallen (01:12, ± 75 MB): die
   horen links naar rechts. .spd hoort daar NIET bij, dat is een hele zin
   ("≈ 1,5 seconde per minuut audio") en die moet gewoon de paginarichting volgen. */
[dir="rtl"] .t-time,[dir="rtl"] .model .sz{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .model .spd{direction:rtl;text-align:right}


/* ============================================================
   BEWEGING
   ------------------------------------------------------------
   Alles hieronder is toegevoegd voor de scrollende versie van de
   pagina. Twee dingen om te onthouden:

   - De custom properties (--p, --send, --mx …) worden door app.js
     gezet. Staat JS uit, dan blijven de fallbacks staan en ziet
     alles er gewoon rustig uit.
   - Er staat bewust geen enkele letter tekst in een vastgezet
     podium. Duits en Grieks zijn zo'n 16% langer dan Engels; als
     die tekst in een blok van vaste hoogte zou zitten, liep hij
     eruit. Nu groeit de kolom ernaast gewoon mee.
   ============================================================ */

/* ---------- Voortgang in de navigatiebalk ---------- */
.nav{position:sticky;transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.nav.stuck{box-shadow:0 6px 24px color-mix(in srgb,var(--ink) 7%,transparent)}
.nav-prog{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--coral),var(--blue));
  transform:scaleX(var(--p,0));transform-origin:left center;
  will-change:transform;pointer-events:none;
}
[dir="rtl"] .nav-prog{transform-origin:right center}

/* ---------- Hero: diepte ----------
   De vlekken en de telefoon reageren op de muis (--mx/--my) en op hoe ver
   de hero al weggescrold is (--p). */
.hero{--mx:0;--my:0;--p:0}
.blob{transition:transform .5s cubic-bezier(.2,.8,.3,1);will-change:transform}
.blob-a{transform:translate3d(calc(var(--mx) * 44px),calc(var(--my) * 32px + var(--p) * -70px),0)}
.blob-b{transform:translate3d(calc(var(--mx) * -54px),calc(var(--my) * -40px + var(--p) * 96px),0)}
.hero-visual{perspective:1100px}
.phone{
  transform:
    translate3d(0,calc(var(--p,0) * -34px),0)
    rotateY(calc(var(--mx,0) * 7deg))
    rotateX(calc(var(--my,0) * -5deg));
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}
.hero-visual .phone{--mx:0;--my:0}
.hero:hover .phone{--mx:inherit}

/* ---------- Hero: de kop bouwt zichzelf op ----------
   Woord voor woord omhoog en scherp. Bewust ZONDER overflow:hidden om de
   letters heen: dat knipt in het Grieks de accenten en in het Arabisch de
   punten eraf, en het levert per taal een andere regelhoogte op. Een woord
   dat opkomt en aanzet doet hetzelfde werk en kan niets kapotmaken. */
.hero h1.split .w{display:inline-block}
.hero h1.split .wi{
  display:inline-block;
  transform:translate3d(0,.3em,0);
  transition:transform .85s var(--ease-out) calc(var(--i,0) * .035s);
}
.hero h1.split.in .wi{transform:none}

/* ---------- Magnetische knoppen ----------
   Alleen aan met een echte aanwijzer; app.js zet de klasse er zelf op. */
.mag{transition:transform .25s var(--ease),filter .2s,box-shadow .2s}
.mag:hover{transform:translate3d(calc(var(--mx,0) * 9px),calc(var(--my,0) * 6px - 2px),0)}

/* ============================================================
   DE AKTE
   ------------------------------------------------------------
   Een lange sectie met een podium dat een schermhoogte lang blijft
   staan. Beide kolommen wisselen: links de tekst, rechts het
   toestel. De sectie is zo hoog als het aantal beats maal --hold,
   plus één scherm om in te klikken — allemaal in svh, dus volstrekt
   onafhankelijk van hoe lang de vertaling is.

   Waarom de beats over elkaar heen liggen in één grid-cel: dan
   bepaalt de LANGSTE beat de hoogte van het vak, per taal opnieuw.
   Duits en Grieks zijn zo'n 16% langer dan Engels; met een vaste
   hoogte was dat een gok geweest, zo is het een meting.
   ============================================================ */
.act{--beats:4;--hold:60svh;position:relative;padding:0}
.act{min-height:calc(var(--beats) * var(--hold) + 100svh)}

/* Overslaan. Een vastgezette sectie is voor wie met het toetsenbord werkt
   een lange gang zonder deuren; deze link staat er als eerste in en springt
   naar de sectie erna. Onzichtbaar tot hij focus krijgt. */
.act-skip{
  position:absolute;z-index:20;top:10px;inset-inline-start:10px;
  padding:10px 16px;border-radius:12px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:600;
  clip-path:inset(50%);
}
.act-skip:focus-visible{clip-path:none;text-decoration:none;outline:2px solid var(--ink);outline-offset:2px}
#work{--beats:4}
#privacy{--beats:3}

.act-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:grid;align-content:center;
  padding-top:var(--nav-h);
  /* Was overflow:hidden. Dat bestond om de tekening binnen de lijnen te
     houden, maar knipte op een kort scherm ook de tekst weg — zonder dat
     scrollen hem terughaalde. Alleen horizontaal afknippen. */
  overflow:clip visible;
}
.act-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,64px);align-items:center;
}
.act-copy{order:1;min-width:0;display:grid}
.act-stage{order:2;min-width:0;display:grid;place-items:center}

/* Beats en podiumkaarten liggen alle drie of vier in dezelfde cel en
   kruisvervagen. Het vak is zo hoog als de langste van het stel. */
.beat,.stage-card{grid-area:1/1;align-self:center}
.beat{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .5s var(--ease-out),transform .75s var(--ease-out);
  pointer-events:none;
}
.beat.on{opacity:1;transform:none;pointer-events:auto}
.beat > .eyebrow{margin-bottom:14px}

.stage-inner{display:grid;width:100%;max-width:436px;margin:0 auto}
.stage-card{
  opacity:0;transform:translate3d(0,30px,0) scale(.965);
  transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);
  pointer-events:none;
}
.stage-card.on{opacity:1;transform:none;pointer-events:auto}

/* Het streepje ernaast: hoeveelste beat van hoeveel. Wordt door app.js
   in de DOM gezet, want vijftien bestanden. */
.act-rail{
  position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  display:grid;gap:7px;
}
.act-rail i{
  display:block;width:2px;height:26px;border-radius:2px;
  background:var(--hairline-strong);
  transition:background .45s var(--ease),height .45s var(--ease);
}
.act-rail i.on{background:linear-gradient(180deg,var(--coral),var(--blue));height:40px}
.act-copy{position:relative;padding-inline-start:26px}

/* De privacy-akte hergebruikt dezelfde structuur, maar de inhoud komt
   uit een gecentreerde sectie. Hier lezen we gewoon links. */
.act-copy .center{text-align:start}
.act-copy .privacy-row{grid-template-columns:1fr;margin-top:0;gap:14px}
.act-copy .story{max-width:none;margin:0;padding:clamp(22px,3vw,34px)}
.act-copy .story .q{font-size:clamp(1.05rem,1.9vw,1.35rem)}
.act-copy .lead{max-width:46ch}
.act .container{width:100%}

/* ============================================================
   DE PRIVACY-SCENE
   Alleen vormen. Er gaat een pakketje weg, het botst tegen de rand
   van het toestel, en het valt terug. --send/--block/--settle komen
   uit app.js; zonder JS staat de scene stil op nul.
   ============================================================ */
.lock-stage{
  --send:0;--block:0;--settle:0;
  position:relative;width:min(330px,78vw);aspect-ratio:1;
  display:grid;place-items:center;
}
.lk-ring{
  position:absolute;inset:4%;border-radius:50%;
  border:2px dashed color-mix(in srgb,var(--blue) 42%,transparent);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.lock.hit .lk-ring{
  border-color:color-mix(in srgb,var(--coral) 78%,transparent);
  transform:scale(1.035);
}
.lk-phone{
  position:relative;z-index:2;
  width:34%;aspect-ratio:9/17.5;border-radius:20px;
  background:var(--canvas);border:1px solid var(--hairline-strong);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
}
.lk-wave{display:flex;align-items:center;gap:2.5px;height:26px}
.lk-wave i{width:3px;border-radius:2px;background:var(--blue);height:36%}
.lk-wave i:nth-child(2){height:74%}
.lk-wave i:nth-child(3){height:52%}
.lk-wave i:nth-child(4){height:92%}
.lk-wave i:nth-child(5){height:44%}
.lk-wave i:nth-child(6){height:68%}
.lk-wave i:nth-child(7){height:30%}
.lk-lines{display:grid;gap:4px;width:52%}
.lk-lines i{height:3px;border-radius:2px;background:var(--hairline-strong)}
.lk-lines i:nth-child(2){width:78%}
.lk-lines i:nth-child(3){width:56%}

/* De pakketjes. Ze draaien naar hun eigen hoek, schuiven naar buiten en
   worden bij de rand platgedrukt. De tegendraai houdt het vierkantje recht. */
.lk-pack{
  position:absolute;z-index:3;
  width:13px;height:13px;border-radius:4px;
  background:var(--coral);
  transform:
    rotate(var(--a,0deg))
    translateX(calc((var(--send) - var(--settle)) * 118px))
    rotate(calc(-1 * var(--a,0deg)))
    scale(calc(1 - var(--block) * .4));
  opacity:calc(.1 + var(--send) * .9 - var(--settle) * .85);
}
.lk-pack.p1{--a:-58deg}
.lk-pack.p2{--a:14deg}
.lk-pack.p3{--a:96deg}

.lk-cloud{
  position:absolute;top:2%;inset-inline-end:2%;
  width:56px;color:var(--ink-soft);opacity:.24;
}
.lk-cloud svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.lock.done .lk-cloud{opacity:.14}

/* ============================================================
   STAPPEN: de lijn tekent zichzelf mee
   ============================================================ */
.steps{position:relative}
.steps::before,.steps::after{
  content:"";position:absolute;
  inset-inline-start:43px;top:34px;bottom:34px;width:2px;border-radius:2px;
}
.steps::before{background:var(--hairline)}
.steps::after{
  background:linear-gradient(180deg,var(--coral),var(--blue));
  transform:scaleY(var(--draw,0));transform-origin:top center;
}
.step{position:relative;z-index:1}
@media (max-width:620px){
  .steps::before,.steps::after{inset-inline-start:39px}
}

/* ============================================================
   PROBEER HET: de modelkeuze met een levende demo
   app.js maakt van de kaarten knoppen en zet het paneel eronder.
   Zonder JS blijven het gewoon drie kaarten.
   ============================================================ */
.model.mdl-opt{
  cursor:pointer;text-align:start;font:inherit;color:inherit;
  appearance:none;-webkit-appearance:none;width:100%;
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s,background .28s;
}
@media (hover:hover) and (pointer:fine){.model.mdl-opt:hover{transform:translateY(-3px);border-color:var(--hairline-strong)}}
.model.mdl-opt:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.model.mdl-opt.on{
  border-color:color-mix(in srgb,var(--blue) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent),var(--shadow);
  background:var(--canvas);
}
.model.mdl-opt .spd{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px}

.demo{
  margin-top:16px;
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r);padding:clamp(16px,2.4vw,22px);
  box-shadow:var(--shadow);
}
.demo-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.demo-meter{
  flex:1;height:5px;border-radius:999px;background:var(--surface-strong);
  position:relative;overflow:hidden;
}
.demo-meter i{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:calc(var(--fill,0) * 100%);border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--coral));
  transition:width .5s var(--ease-out);
}
.demo-time{
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;min-width:4ch;text-align:end;
  direction:ltr;unicode-bidi:isolate;
}
.demo-out{
  margin:0;font-size:clamp(15px,1.9vw,17.5px);line-height:1.62;color:var(--ink);
  min-height:3.3em;
}
@media (max-width:620px){.demo-out{min-height:5em}}
/* De woorden staan er meteen allemaal in, maar onzichtbaar. Zo verspringt
   er niets terwijl de zin binnendruppelt. */
.demo-word{transition:opacity .18s linear,transform .3s var(--ease-out)}
.js .demo-word{opacity:0;transform:translateY(4px)}
.js .demo-word.said{opacity:1;transform:none}
/* Wat het model ernaast zat, krijgt een golfje. Dat leest in elk schrift
   als "hier klopt iets niet", zonder dat er een woord bij hoeft. */
.demo-word.bad{
  text-decoration:underline wavy color-mix(in srgb,var(--coral) 85%,transparent);
  text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.demo-caret{
  display:inline-block;width:2px;height:1.05em;vertical-align:-.16em;
  margin-inline-start:2px;background:var(--coral);border-radius:1px;
}
.tryit:not(.running) .demo-caret{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .tryit.running .demo-caret{animation:jtcaret .9s steps(2) infinite}
  @keyframes jtcaret{0%,100%{opacity:1}50%{opacity:0}}
}

/* ---------- De sectie #get stond na de privacyband, allebei op --surface.
   Zonder verschil in achtergrond liepen ze in elkaar over. ---------- */
#get{background:var(--canvas)}

/* ============================================================
   SMALLE SCHERMEN
   ------------------------------------------------------------
   Op een telefoon past er geen twee kolommen naast elkaar, en een
   vastgezette tekstkolom is er gevaarlijk: als een vertaling langer
   is dan het scherm valt hij eruit. Dus daar draaien we het om — het
   toestel plakt bovenin, de tekst schuift er gewoon onderdoor. Die
   kan dus niet overlopen, hij wordt hooguit langer.
   ============================================================ */
@media (max-width:860px), (max-height:600px){
  /* --p verandert elk scrollframe. Met een overgang van .45s erop wordt die
     elk frame opnieuw gericht: puur werk, geen zichtbaar verschil. En zonder
     muis gebeurt er met --mx/--my sowieso niets. Staat hier en niet bij de
     andere telefoonregels, omdat .phone zijn transition pas verderop krijgt. */
  .phone,.blob{transition:none;will-change:auto}

  .act{min-height:0}
  .act-sticky{position:static;height:auto;padding-top:0;overflow:visible}
  .act-grid{grid-template-columns:1fr;gap:0}
  .act-copy{order:2;display:block;padding-inline-start:20px}
  .act-stage{
    order:1;position:sticky;top:calc(var(--nav-h) - 1px);z-index:3;
    height:auto;padding:12px 0 16px;
    background:var(--surface);
    box-shadow:0 14px 18px -14px color-mix(in srgb,var(--ink) 30%,transparent);
  }
  /* Was min(300px,74vw). Een smalle kaart wordt hoog (de tekst breekt vaker),
     en hoe hoger de kaart, hoe harder app.js hem terugschaalt: op een iPhone SE
     kwam het transcript op ruim acht pixels uit. Breder is hier dus kleiner. */
  .stage-inner{max-width:min(360px,92vw)}
  .stage-card{grid-area:1/1}
  .act:not(.act-inline) .stage-card:not(.on){display:none}

  /* ---------- Elk kaartje bij zijn eigen tekst ----------
     Het podium plakte onder de balk en de tekst schoof eronderdoor. Van het
     kaartje bleef een afgeknipte strook over en van de uitleg drie regels.
     Op een telefoon zet app.js elk kaartje daarom in het tekstblok zelf, en
     is het podium leeg. */
  .act.act-inline .act-stage{display:none}
  .act.act-inline .stage-card{
    position:static;grid-area:auto;
    opacity:1;transform:none;visibility:visible;pointer-events:auto;
    margin:0 0 22px;
  }
  .act.act-inline .beat{padding:0 0 46px}
  .act.act-inline .beat:first-child{padding-top:10px}
  .act.act-inline .beat:last-child{padding-bottom:8px}

  /* De privacyband heeft geen losse kaartjes maar één tekening. Die hoeft
     evenmin te plakken: hij staat gewoon boven het verhaal. */
  .lock .act-stage{position:static;background:transparent;box-shadow:none;padding-bottom:26px}
  .lock .lock-stage{width:min(300px,70vw)}

  /* De beats worden weer gewone, op elkaar volgende blokken. */
  .beat{
    grid-area:auto;opacity:1;transform:none;pointer-events:auto;
    padding:34px 0 38px;
  }
  .beat:first-child{padding-top:26px}
  .act-rail{display:none}
}

/* Liggend op een telefoon is er geen hoogte om iets vast te zetten: een
   podium van driehonderd pixels laat van een scherm van 390 niets over,
   en scrollen haalde het er niet vandaan. Daar schuift alles gewoon mee. */
@media (max-height:520px){
  .act-stage{position:static;background:transparent;box-shadow:none}
  .beat{padding:22px 0 26px}
}
@media (max-width:620px){
  .act-copy{padding-inline-start:0}
}

/* ============================================================
   MINDER BEWEGING
   De killswitch verderop zet alle transitions en animaties al uit.
   Wat hier nog moet: geen scherptediepte, geen verschoven woorden,
   en de scene in een nette eindstand in plaats van op nul.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .js h2.reveal{filter:none}
  .hero h1.split .wi{transform:none;opacity:1}
  .hero h1.split .w{overflow:visible}
  .blob,.phone,.mag:hover{transform:none}
  .js .demo-word{opacity:1;transform:none}
  .demo-caret{display:none}
  .lk-pack{opacity:.55;transform:rotate(var(--a,0deg)) translateX(58px) rotate(calc(-1 * var(--a,0deg)))}
  .lk-ring{border-color:color-mix(in srgb,var(--coral) 70%,transparent)}
  .steps::after{transform:scaleY(1)}
}

/* ============================================================
   RECHTS NAAR LINKS, aanvullingen
   ============================================================ */
/* Arabisch is een verbonden schrift: letter-spacing breekt de verbindingen
   en dan valt een woord uit elkaar in losse letters. De oude RTL-blok deed
   dit al voor de koppen; dit zijn de plekken die nog over waren. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .foot-col b,
[dir="rtl"] .summ-tag,
[dir="rtl"] .toc b,
[dir="rtl"] .lang-cur,
[dir="rtl"] .appstore .as-top,
[dir="rtl"] .appstore .as-big,
[dir="rtl"] .app-nav .ttl b,
[dir="rtl"] .app-card .nm,
[dir="rtl"] .voices-title,
[dir="rtl"] .transcript .t-title,
[dir="rtl"] .summ-title,
[dir="rtl"] .model .top b,
[dir="rtl"] .story .q,
[dir="rtl"] .w-label,
[dir="rtl"] .chip,
[dir="rtl"] .brand .brand-name{letter-spacing:normal}

/* De vlekken achter de hero hoorden mee te kantelen met de leesrichting. */
[dir="rtl"] .blob-a{left:auto;right:-10vw}
[dir="rtl"] .blob-b{right:auto;left:-12vw}

/* ---------- Kruisvervaging onder druk ----------
   Een uitgaande kaart die een halve seconde staat te vervagen blijft al
   die tijd meedraaien in de compositie. visibility haalt hem er ná de
   overgang uit, en bij een harde veeg gaat alles gewoon sneller. */
.stage-card{visibility:hidden;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),visibility 0s linear .52s}
.stage-card.on{visibility:visible;transition-delay:0s,0s,0s}
.act.fast .stage-card,.act.fast .beat{transition-duration:.16s,.2s,0s}
.act.live .stage-card.on{will-change:transform,opacity}

/* ---------- Wat er ín een kaart gebeurt terwijl je erdoorheen scrollt ----------
   --bp is de voortgang binnen de beat die nu aan de beurt is. Valt hij weg
   (telefoon, of geen JS), dan is de fallback 1 en staat gewoon alles er. */
.stage-card .v-line,
.stage-card .summ-list li,
.stage-card .summ-do,
.stage-card .v-foot{
  --t:0;
  --k:clamp(0,calc((var(--bp,1) - var(--t)) * 7),1);
  opacity:var(--k);
  transform:translateY(calc((1 - var(--k)) * 10px));
}
/* De drempels beginnen negatief. Een beat start op --bp 0, en met een
   drempel van 0 zou het eerste regeltje op dat moment nog onzichtbaar
   zijn: dan schuift er een lege kaart in beeld. Zo staat het bovenste
   er meteen en cascadeert de rest er vlot achteraan.
   Let op: .voices-head is óók een div, dus nth-of-type telt verkeerd.
   Daarom op klasse. */
.stage-card .v-line{--t:-.15}
.stage-card .v-line.b{--t:-.02}
.stage-card .v-line.c{--t:.10}
.stage-card .v-foot{--t:.22}
.stage-card .summ-list li{--t:-.15}
.stage-card .summ-list li:nth-child(2){--t:-.02}
.stage-card .summ-list li:nth-child(3){--t:.10}
.stage-card .summ-do:first-child{--t:.20}
.stage-card .summ-do:nth-child(2){--t:.30}

/* Het woord dat vervangen wordt, knippert even als je erop klikt. */
.t-line .mark{transition:background .2s var(--ease),color .2s}
.t-line .mark.flip{background:color-mix(in srgb,var(--coral) 68%,transparent);color:var(--on-coral)}
.fr-field .new{border-radius:6px;padding:1px 4px;margin:-1px -4px}
@media (hover:hover) and (pointer:fine){
  .fr-field .new:hover{background:color-mix(in srgb,var(--blue) 18%,transparent)}
}

@media (prefers-reduced-motion:reduce){
  .stage-card .v-line,.stage-card .summ-list li,.stage-card .summ-do,.stage-card .v-foot{opacity:1;transform:none}
  .stage-card{visibility:visible}
  .act:not(.act-inline) .stage-card:not(.on){display:none}
}

/* ============================================================
   FOTO'S, de enige echte opnames op de pagina
   Alles hierboven is met CSS nagebouwd, dus dit is meteen het enige
   blok dat zich aan de verhouding van een echt bestand moet houden.
   Twee rijen van een liggende (3:2) naast een staande (4:5) foto, de
   tweede rij gespiegeld. De kolommen staan op 1.5fr en .8fr, en dat
   zijn precies die twee verhoudingen: beide foto's in een rij worden
   daardoor vanzelf even hoog, zonder dat er ergens een vaste hoogte
   in staat. Onder de 760 gaan ze onder elkaar, want een staande foto
   van 190 pixels breed laat van een telefoonscherm niets over.
   De aspect-ratio staat op de img en niet op een omhulsel: de plek is
   dan al gereserveerd voordat het bestand binnen is, dus het
   onderschrift verspringt niet als de foto laat inlaadt.
   ============================================================ */
.shots{display:grid;gap:clamp(26px,3.4vw,40px)}
.shots-row{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:1.5fr .8fr}
/* De tweede rij spiegelt, zodat het niet twee keer hetzelfde ritme is. */
.shots-row + .shots-row{grid-template-columns:.8fr 1.5fr}

.shot{margin:0}
/* picture is van zichzelf inline; dat gaf een regelafstand onder elke foto. */
.shot picture{display:block}
.shot img{
  width:100%;height:auto;object-fit:cover;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow), 0 0 0 1px var(--hairline);
}
.shot-wide img{aspect-ratio:3/2}
.shot-tall img{aspect-ratio:4/5}
.shot figcaption{
  margin-top:13px;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}

@media (hover:hover) and (pointer:fine){
  .shot img{transition:transform .3s var(--ease)}
  .shot:hover img{transform:translateY(-3px)}
}

@media (max-width:760px){
  .shots-row,.shots-row + .shots-row{grid-template-columns:1fr}
}

/* ============================================================
   Feitenpagina (/facts, /nl/feiten)
   Dichte, citeerbare tabellen. Bewust saai en leesbaar: deze
   pagina is er net zo goed voor machines als voor mensen.
   ============================================================ */

.fact-intro{
  border:1px solid var(--hairline);background:var(--surface);
  border-radius:var(--r);padding:18px 20px;margin:26px 0 0;
  font-size:15px;color:var(--ink-soft);line-height:1.65;
}
.fact-intro b{color:var(--ink)}
.fact-intro a{color:var(--blue-text)}

.fact-toc{
  display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;
}
.fact-toc a{
  display:inline-block;font-size:13.5px;line-height:1;text-decoration:none;
  padding:9px 13px;border-radius:999px;border:1px solid var(--hairline-strong);
  color:var(--ink-soft);background:var(--canvas);transition:color .2s,border-color .2s,background .2s;
}
@media (hover:hover) and (pointer:fine){
  .fact-toc a:hover{color:var(--ink);border-color:var(--ink-soft);background:var(--surface)}
}

.fact-sec{margin-top:clamp(40px,6vw,64px);scroll-margin-top:calc(var(--nav-h) + 20px)}
.fact-sec > h2{font-size:clamp(1.25rem,3.6vw,1.7rem);font-weight:750;letter-spacing:-.01em}
.fact-sec > p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.fact-sec > p + p{margin-top:12px}
.fact-sec a{color:var(--blue-text)}

/* Tabel. Op smalle schermen scrollt hij binnen zijn eigen kader. */
.spec{
  margin-top:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface);
}
.spec table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.spec caption{
  text-align:left;padding:14px 18px 0;font-size:13px;color:var(--ink-soft);
  caption-side:top;
}
.spec th,.spec td{
  text-align:left;padding:11px 18px;vertical-align:top;
  border-bottom:1px solid var(--hairline);line-height:1.55;
}
.spec thead th{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);font-weight:650;white-space:nowrap;
  border-bottom:1px solid var(--hairline-strong);
}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec tbody th{font-weight:650;color:var(--ink);white-space:nowrap;width:1%}
.spec td{color:var(--ink-soft)}
.spec td strong{color:var(--ink);font-weight:650}
.spec .num{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Tweekoloms feitenlijst voor korte sleutel/waarde-paren. */
.spec.kv table{min-width:0}
.spec.kv tbody th{width:34%;white-space:normal}

/* Gratis/Pro-labels. */
.tag{
  display:inline-block;font-size:11.5px;line-height:1;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:5px 8px;border-radius:999px;
  border:1px solid var(--hairline-strong);color:var(--ink-soft);background:var(--canvas);
  white-space:nowrap;
}
.tag.free{color:var(--blue-text);border-color:color-mix(in srgb,var(--blue) 40%,transparent)}
.tag.pro{color:var(--coral-text);border-color:color-mix(in srgb,var(--coral) 45%,transparent)}

/* Lijst met vinkjes / kruisjes: wat de app wel en niet doet. */
.yn{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.yn li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:15.5px;color:var(--ink-soft);line-height:1.6;
}
.yn li b{color:var(--ink);font-weight:650}
.yn .mk{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1;
}
.yn .mk.y{background:color-mix(in srgb,var(--blue) 20%,transparent);color:var(--blue-text)}
.yn .mk.n{background:color-mix(in srgb,var(--coral) 20%,transparent);color:var(--coral-text)}

/* Losse "citeer dit"-blokjes: één zin die klopt en overgenomen mag worden. */
.pullfact{
  margin-top:22px;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--hairline-strong);background:var(--canvas);
  font-size:16.5px;line-height:1.6;color:var(--ink);
}
.pullfact span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-soft)}

.fact-updated{
  margin-top:clamp(40px,6vw,64px);padding-top:22px;border-top:1px solid var(--hairline);
  font-size:14px;color:var(--ink-soft);line-height:1.7;
}

@media (max-width:640px){
  .spec th,.spec td{padding:10px 14px}
  .spec caption{padding:12px 14px 0}
}

/* ============================================================
   ADVANCED PRIVACY, de kluis
   Dezelfde palette als het scherm in de app (Theme.swift): zwart met
   signaalgroen. De kleuren staan als variabelen op de band zelf, zodat
   alles wat erin valt (.eyebrow, h2, .lead, .btn) ze meteen erft, in
   het licht én in het donker. Dit blok is bewust niet themagevoelig:
   de modus is in de app ook altijd donker, en dat is precies de
   herkenning waar het hier om gaat.
   ============================================================ */
.vault{
  --canvas:#04070A; --surface:#0C1317; --surface-strong:#14201F;
  --ink:#E4F1EA; --ink-soft:#7B968B;
  --blue:#31E08F; --blue-text:#31E08F; --coral:#F2B33D; --coral-text:#F2B33D;
  --hairline:rgba(49,224,143,.16); --hairline-strong:rgba(49,224,143,.34);
  background:#04070A;color:#E4F1EA;
  position:relative;overflow:hidden;
}
.vault::before{
  content:"";position:absolute;left:50%;top:-45%;width:min(1100px,150vw);height:130%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(49,224,143,.14),rgba(49,224,143,.04) 45%,transparent 72%);
}
.vault > *{position:relative}
.vault h2,.vault h3{color:#E4F1EA}
.vault .lead{color:#7B968B;margin-top:16px}
.vault .eyebrow{color:#31E08F}

.vault-grid{display:grid;gap:clamp(30px,4.5vw,52px);align-items:start}
@media (min-width:900px){.vault-grid{grid-template-columns:1.02fr .98fr;gap:clamp(38px,5vw,64px)}}

.vault-list{list-style:none;padding:0;margin:26px 0 0;max-width:58ch}
.vault-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid rgba(49,224,143,.14);color:#7B968B;font-size:15.5px;line-height:1.55}
.vault-list li:first-child{border-top:0;padding-top:0}
.vault-list b{color:#E4F1EA;font-weight:600}
.vault-list .tick{
  flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:rgba(49,224,143,.12);color:#31E08F;font-size:12px;font-weight:700;margin-top:1px;
}
.vault .btn-vault{background:#31E08F;color:#04070A;box-shadow:0 8px 26px rgba(49,224,143,.22)}
@media (hover:hover) and (pointer:fine){.vault .btn-vault:hover{filter:brightness(1.06)}}
.vault .btn-ghost{background:#0C1317;color:#E4F1EA;border-color:rgba(49,224,143,.28)}
@media (hover:hover) and (pointer:fine){.vault .btn-ghost:hover{border-color:rgba(49,224,143,.5)}}
.vault-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* De keten, zoals het werkscherm in de app hem toont. */
.vault-run{border:1px solid rgba(49,224,143,.18);border-radius:var(--r-lg);background:#0C1317;overflow:hidden}
.vault-run-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid rgba(49,224,143,.14);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#7B968B;
}
.vault-run-head .live{display:inline-flex;align-items:center;gap:8px;color:#31E08F}
.vault-run-head .live i{width:7px;height:7px;border-radius:50%;background:#31E08F;box-shadow:0 0 0 4px rgba(49,224,143,.16)}
.vault-run ol{list-style:none;margin:0;padding:6px 0}
.vault-run li{display:flex;gap:14px;padding:14px 18px;align-items:flex-start}
.vault-run li + li{border-top:1px solid rgba(49,224,143,.08)}
.vault-run .n{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  background:#14201F;color:#31E08F;border:1px solid rgba(49,224,143,.2);
}
.vault-run li.burn .n{color:#FF5F4A;border-color:rgba(255,95,74,.34);background:rgba(255,95,74,.08)}
.vault-run b{display:block;font-size:16px;font-weight:600;color:#E4F1EA;letter-spacing:-.01em}
.vault-run li.burn b{color:#FF5F4A}
.vault-run span{display:block;margin-top:4px;font-size:14.5px;color:#7B968B;line-height:1.5}
.vault-run-foot{padding:14px 18px;border-top:1px solid rgba(49,224,143,.14);background:rgba(49,224,143,.04);font-size:14.5px;color:#7B968B;line-height:1.55}
.vault-run-foot b{color:#E4F1EA}
@media (max-width:560px){
  .vault-run li{gap:12px;padding:13px 14px}
  .vault-run-head,.vault-run-foot{padding:13px 14px}
}

/* ============================================================
   RANGLIJST — de pagina waar de apps op volgorde staan.
   Per app een nummer, een oordeel in één zin, en drie regels:
   de prijs, de beperking die telt, en wie hem juist wél moet
   nemen. Nummer één krijgt een eigen rand; de rest blijft
   rustig, anders leest het als een advertentie in plaats van
   als een vergelijking.
   ============================================================ */
.rank{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.rank > li{
  border:1px solid var(--hairline);border-radius:var(--r);
  background:var(--surface);padding:20px 22px;
}
.rank > li.win{
  border-color:color-mix(in srgb,var(--blue) 45%,transparent);
  background:color-mix(in srgb,var(--blue) 7%,var(--surface));
  box-shadow:var(--shadow);
}
.rank-head{display:flex;gap:14px;align-items:flex-start}
.rank .no{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums;
  background:var(--canvas);color:var(--ink-soft);border:1px solid var(--hairline-strong);
}
.rank > li.win .no{
  background:color-mix(in srgb,var(--blue) 18%,transparent);
  color:var(--blue-text);border-color:color-mix(in srgb,var(--blue) 42%,transparent);
}
.rank-head h3{font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
.rank-head .sub{display:block;margin-top:2px;font-size:13px;color:var(--ink-soft)}
.rank-verdict{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.rank-verdict b{color:var(--ink);font-weight:650}

/* De drie vaste regels onder elk oordeel. Als dl, want het zijn
   letterlijk term-en-omschrijving. */
.rank-facts{margin:16px 0 0;display:grid;gap:0}
.rank-facts > div{
  display:grid;grid-template-columns:132px 1fr;gap:14px;
  padding:10px 0;border-top:1px solid var(--hairline);
}
.rank-facts dt{
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--ink-soft);padding-top:2px;
}
.rank-facts dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.rank-facts dd b{color:var(--ink);font-weight:650}
.rank-facts .lim dd{color:var(--coral-text)}
@media (max-width:560px){
  .rank > li{padding:17px 16px}
  .rank-facts > div{grid-template-columns:1fr;gap:3px}
  .rank-facts dt{padding-top:0}
}

/* ============================================================
   VERGELIJKINGSTABEL — breed, dus hij schuift binnen zijn kader.
   De app-kolom blijft staan tijdens het schuiven, anders weet je
   op een telefoon na twee kolommen niet meer welke rij je leest.
   ============================================================ */
.spec.cmp table{min-width:940px;font-size:14px}
.spec.cmp th,.spec.cmp td{padding:11px 15px;white-space:nowrap}
.spec.cmp thead th{background:var(--surface)}
.spec.cmp tbody th{
  width:auto;position:sticky;left:0;z-index:1;
  background:var(--surface);box-shadow:1px 0 0 var(--hairline);
}
.spec.cmp thead th:first-child{position:sticky;left:0;z-index:2}
.spec.cmp tbody tr.us th,.spec.cmp tbody tr.us td{
  background:color-mix(in srgb,var(--blue) 9%,var(--surface));
}
.spec.cmp tbody tr.us th{color:var(--blue-text)}
/* Ja/nee in de cellen. Kleur alleen is niet genoeg, dus het woord
   blijft er gewoon staan. */
.spec .yes{color:var(--blue-text);font-weight:650}
.spec .nope{color:var(--coral-text)}
.spec .meh{color:var(--ink-soft)}
@media (max-width:640px){
  .spec.cmp th,.spec.cmp td{padding:10px 12px}
}