/* ============================================================
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
--blue-btn dezelfde blauwtint, donker genoeg voor wit erop
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;
/* Wit op --blue haalt 4,11:1 in het licht en 2,88:1 in het donker, en het
opschrift van een knop is 15px: dat vraagt 4,5:1. Dit is precies dezelfde
tint en verzadiging, alleen donkerder gezet tot wit erop 4,53:1 haalt.
Alleen voor vlakken waar wit overheen ligt; --blue blijft wat hij was. */
--blue-btn:#2F75D6;
--on-coral:#3A1A10;
--muted:#C7BFAD;
/* derived text + lines (warm) */
--ink:#2B2620;
/* Was #6E6555: 4,44:1 op --surface en 3,82:1 op --surface-strong, allebei
onder de 4,5:1 voor gewone tekst. Dezelfde warme grijstint, donkerder:
5,97:1 op --canvas, 5,26:1 op --surface, 4,52:1 op --surface-strong. */
--ink-soft:#625A4C;
--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;
/* Zelfde tint en verzadiging als --blue hierboven, donkerder gezet:
wit erop gaat van 2,88:1 naar 4,52:1. */
--blue-btn:#1F75DD;
--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-btn:#2F75D6;
--blue:#3B7DD8; --coral:#FF7A5C; --on-coral:#3A1A10; --muted:#C7BFAD;
--ink:#2B2620; --ink-soft:#625A4C;
--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-btn:#1F75DD;
--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%}
/* Was var(--blue): 3,61:1 op --canvas en 3,18:1 op --surface, onder de 4,5:1
die lopende tekst vraagt. --blue-text is dezelfde kleur, donkerder gezet
(5,26:1 op --canvas, 4,64:1 op --surface); in het donker wijst hij terug
naar --blue, dus daar verandert er niets. */
a{color:var(--blue-text);text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration:underline}}
/* Kleur alleen wijst een link nooit aan. Alles wat in een alinea of een
opsomming staat is lopende tekst en krijgt dus een streep. Niet de knoppen,
en niet de inhoudsopgave: die zijn aan hun vorm en plek te herkennen.
De laatste drie zijn de beroepsnamen in de wie-lijstjes (Facts, Compare,
de ranglijst) die naar hun pagina onder /for/ linken. Die staan in een ,
een of een , niet direct in de alinea, en kregen anders geen streep. */
p > a,li > a,.yn li b > a,.spec tbody th > a,.rank-facts dd > a{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:.08em}
.toc li > a,p > a.btn,li > a.btn{text-decoration:none}
/* 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}}
/* "page" op de pagina zelf, "true" op een pagina eronder: op /for/lawyers
licht "Who it's for" op, want daar hoort die pagina bij. */
.nav-links a[aria-current]{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.
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-text);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. Een balk met vijf links (.nav-long)
houdt de knop tot en met 1099px, zie verderop bij de 1019px-grens. */
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;
}
/* --blue-text, niet --blue: 15px vet op het paneel (--canvas) kwam op 3,61:1. */
.nav-menu-panel a[aria-current]{color:var(--blue-text);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}
/* --blue-btn in plaats van --blue: wit op de knop ging van 4,11:1 (licht) en
2,88:1 (donker) naar 4,53:1 en 4,52:1. Zelfde tint, alleen donkerder. */
.btn-blue{background:var(--blue-btn);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--blue-btn) 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)}
/* Eén kolom: kop, tekst, knoppen, de toestellenrij, de steekwoorden.
Alles gecentreerd, want de rij eronder is zelf ook symmetrisch. */
.hero-grid{display:grid;gap:clamp(26px,3vw,44px);text-align:center}
.hero .lead{max-width:64ch;margin-inline:auto}
.hero .btn-row{justify-content:center}
.hero-visual{margin-top:clamp(30px,5vw,50px)}
.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}
/* ============================================================
DE TOESTELLENRIJ — de officiële frames van Apple, app erin
============================================================
De PNG's van Apple hebben een doorzichtig scherm. De app staat
er dus onder (z-index 1) en het frame ligt eroverheen (z-index 2):
de ronde hoeken, de Dynamic Island en de rand van het toestel
knippen het beeld vanzelf netjes af.
Het schermvenster is per frame opgemeten (de doorzichtige vlek in de
PNG, van het midden naar buiten toe afgetast) en staat als percentage
van het beeld in --st/--sr/--sb/--sl. Die percentages horen bij het
frame, niet bij de maat: schaalt de rij, dan klopt het nog. Vervang je
een frame, dan moet je die vier getallen opnieuw meten.
De originele frames staan in _fotos/ (die map wordt niet gepubliceerd),
met in de README ernaast hoe je ze opmeet en omzet; in frames/ staat per
toestel een webp op tweemaal de toonmaat plus een png als terugval.
De rij staat op een bodemlijn, van groot naar klein, met de maten
van het voorbeeld: de iPad net iets hoger dan de iMac, de telefoon
op driekwart daarvan, de Watch op ruim veertig procent. */
.lineup{
--row-w:996px;--row-h:337px;--row-gap:23px;--row-k:1;
position:relative;
width:calc(var(--row-w) * var(--row-k));
height:calc(var(--row-h) * var(--row-k));
/* Op een breed scherm is de rij breder dan de kolom eromheen. Met
margin:auto blijft zo'n doos links plakken en valt de Watch rechts
buiten beeld; met deze marge staat hij altijd in het midden, ook als
hij aan weerskanten een stukje buiten de kolom steekt. */
margin-inline:calc((100% - var(--row-w) * var(--row-k)) / 2);
}
.lineup-inner{
position:absolute;inset-inline-start:0;top:0;
width:var(--row-w);height:var(--row-h);
transform:scale(var(--row-k));transform-origin:top left;
display:flex;align-items:flex-end;justify-content:center;gap:var(--row-gap);
}
[dir="rtl"] .lineup-inner{transform-origin:top right}
.dev{position:relative;flex:none;width:var(--dw)}
.dev img{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none}
.dev-scr{position:absolute;z-index:1;overflow:hidden;display:flex;
background:var(--canvas);
inset:var(--st) var(--sr) var(--sb) var(--sl)}
.dev-scr>*{flex:1;min-width:0}
.dev-macbook{--dw:470px;--st:10.83%;--sr:9.56%; --sb:10.83%;--sl:9.56%}
.dev-ipad {--dw:240px;--st:4.22%; --sr:5.62%; --sb:4.22%; --sl:5.62%}
.dev-iphone {--dw:124px;--st:2.33%; --sr:5.22%; --sb:2.22%; --sl:5.22%}
.dev-watch {--dw:92px; --st:23.33%;--sr:14.92%;--sb:23.22%;--sl:14.92%}
/* De mockups raken hun eigen behuizing kwijt: het frame ís de behuizing. */
.dev-scr .mac,.dev-scr .phone,.dev-scr .uwatch{
position:static;width:100%;height:100%;margin:0;padding:0;aspect-ratio:auto;
background:none;box-shadow:none;border-radius:0;transform:none}
.dev-scr .mac-lid{height:100%;padding:0;border-radius:0;background:none;box-shadow:none}
.dev-scr .mac-screen{height:100%;border-radius:0;box-shadow:none}
.dev-scr .mac-cam,.dev-scr .mac-base{display:none}
.dev-scr .phone-screen{height:100%;border:0;border-radius:0}
.dev-scr .phone-notch{display:none}
.dev-scr .uw-crown,.dev-scr .uw-side,.dev-scr .uw-action{display:none}
.dev-scr .uw-face{height:100%;border:0;border-radius:0;padding:5px 5px 4px}
/* ---- MacBook: de Mac-app op ware grootte, zijbalk eindelijk in beeld ---- */
.dev-macbook .mac{--mac-side:150px}
/* ---- iPad: hetzelfde transcriptievenster als de Mac, staand ---- */
.ipad{display:flex;flex-direction:column;height:100%;background:var(--canvas)}
.ip-status{flex:none;display:flex;align-items:center;justify-content:space-between;
padding:5px 12px 2px;font-size:7px;font-weight:700;color:var(--ink-soft)}
.ip-status i{display:block;width:5px;height:5px;border-radius:50%;background:var(--muted);font-style:normal;
transition:background .3s ease,box-shadow .3s ease}
.ipad.recording .ip-status i{background:var(--coral);box-shadow:0 0 0 2px color-mix(in srgb,var(--coral) 28%,transparent)}
.ipad .mac-main{flex:1;min-height:0}
/* ---- iPhone: op 116 pixels past de hele app niet ----
Wat blijft staan: de kop, de opnameknop en één opname — genoeg om te
zien wat er gebeurt, en groot genoeg om te lezen. De rest blijft in de
HTML (de demo in app.js zoekt die elementen op) maar gaat hier uit. */
.dev-iphone .app-nav .grp,.dev-iphone .app-set,.dev-iphone .app-snip,
.dev-iphone .app-card .mdl,.dev-iphone .app-card .tx{display:none}
/* De twee icoongroepjes naast de titel staan hier uit; met space-between
schuift de titel dan naar de rand, dus centreren we hem zelf. */
.dev-iphone .app-nav{padding:13px 8px 5px;justify-content:center}
.dev-iphone .app-nav .ttl b{font-size:9.5px}
.dev-iphone .app-nav .ttl span{font-size:6px}
.dev-iphone .app-body{padding:0 8px;gap:7px}
/* De rij houdt zijn hoogte, zodat de kaarten eronder niet opspringen als
de knop krimpt tot een stipje. */
.dev-iphone .app-rec{height:30px}
.dev-iphone .app-rec .go{height:30px;border-radius:10px;
transition:max-width .6s cubic-bezier(.4,1.05,.4,1),height .6s cubic-bezier(.4,1.05,.4,1),
background-color .45s ease,border-radius .6s ease,box-shadow .45s ease}
.dev-iphone .app-rec .go .go-label{font-size:7.5px;gap:3px}
.dev-iphone .app-rec .go svg{width:9px;height:9px}
.dev-iphone .app-rec .go .go-rec i{width:2.5px;height:5px}
/* Opnemen: een rond stipje, en op deze maat kleiner dan de knop zelf. */
.dev-iphone .app-rec.recording .go{max-width:24px;height:24px;border-radius:50%}
/* De staafjes in de knop groeien van zichzelf naar 24px; in een stipje van
24 is dat de volle hoogte, dus hier een kleinere sprong. */
@media (prefers-reduced-motion:no-preference){
.dev-iphone .app-rec.recording .go-rec i{animation-name:recbar-klein}
@keyframes recbar-klein{0%,100%{height:4px}50%{height:12px}}
}
.dev-iphone .app-card{padding:7px;border-radius:9px}
.dev-iphone .app-card .row{gap:5px}
.dev-iphone .app-card .nm{font-size:7.5px}
.dev-iphone .app-card .play svg{width:11px;height:11px}
.dev-iphone .wave{height:15px;margin-top:6px;gap:1.5px}
.dev-iphone .wave i{width:2px}
.dev-iphone .app-folders{gap:3px;
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent)}
.dev-iphone .app-folders .fst{width:15px;height:15px}
.dev-iphone .app-folders .fst svg{width:7px;height:7px}
.dev-iphone .app-folders .fch{padding:3px 5px;font-size:6px;gap:2px}
.dev-iphone .app-folders .fch svg{width:6px;height:6px}
.dev-iphone .app-folders .fch b{font-size:5px;padding:0 3px}
.dev-iphone .app-search{margin:4px 8px 8px;padding:5px 7px;font-size:6px;gap:4px}
.dev-iphone .app-search svg{width:7px;height:7px}
/* ---- MacBook: iets krappere marges, zodat er twee sprekers in beeld staan ---- */
.dev-macbook .mac-main{gap:7px;padding:9px}
.dev-macbook .mm-head{gap:6px}
.dev-macbook .mm-ic{width:19px;height:19px}
/* ---- Watch: alleen de knop en de golf; het woordmerk wordt mush ---- */
.dev-watch .uw-label{display:none}
.dev-watch .uw-top{font-size:4.5px}
.dev-watch .uw-top i{width:3px;height:3px}
.dev-watch .uw-mid{gap:4px}
.dev-watch .uw-rec{width:21px;height:21px;box-shadow:0 0 0 2px color-mix(in srgb,var(--coral) 20%,transparent)}
.dev-watch .uw-rec i{width:7px;height:7px}
.dev-watch .uwatch.recording .uw-rec{box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 32%,transparent)}
/* Het stopvierkantje is van zichzelf 10px; in een knop van 21 is dat bijna
de helft. Acht houdt dezelfde verhouding als op het grote toestel. */
.dev-watch .uwatch.recording .uw-rec i{width:8px;height:8px}
.dev-watch .uw-wave{height:8px;gap:1.5px}
.dev-watch .uw-wave i{width:1.5px}
/* De zoekbalk is op deze breedte net te smal voor de zin: laat hem
uitvloeien in plaats van op twee regels breken. */
.dev-iphone .app-search{white-space:nowrap;overflow:hidden;
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 10px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 10px),transparent)}
/* ---------- Meeschalen ----------
De rij heeft een vaste maat en schaalt als geheel, net als het oude
toneel. Maar kleiner dan ongeveer 80 procent wordt de telefoon onleesbaar,
en dan is een toestel minder tonen beter dan alles onleesbaar tonen:
eerst valt de iMac weg, daarna de iPad. Wat overblijft staat op ware
grootte of groter, zodat je op een telefoon juist méér ziet dan minder. */
@media (min-width:1240px){.lineup{--row-k:1.12}}
@media (max-width:1039px){.lineup{--row-k:.96}}
@media (max-width:1000px){.lineup{--row-k:.92}}
@media (max-width:960px){.lineup{--row-k:.88}}
@media (max-width:920px){.lineup{--row-k:.84}}
@media (max-width:880px){.lineup{--row-k:.80}}
@media (max-width:839px){
.dev-macbook{display:none}
.lineup{--row-w:502px;--row-k:1}
}
@media (max-width:620px){
.dev-ipad{display:none}
.lineup{--row-w:239px;--row-h:253px;--row-k:1.25}
}
@media (max-width:359px){.lineup{--row-k:1.1}}
@media (max-width:334px){.lineup{--row-k:.98}}
/* Het frame plaatst de Mac; hier staat alleen nog hoe hij eruitziet. */
.mac svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Het deksel: aluminium randje, scherm erin. 422 bij 264 is 16:10. */
.mac-lid{
position:relative;
background:linear-gradient(180deg,var(--surface-strong),color-mix(in srgb,var(--surface-strong) 78%,var(--ink)));
border-radius:13px;padding:9px 9px 11px;
box-shadow:var(--shadow),0 26px 60px -18px color-mix(in srgb,var(--ink) 45%,transparent),0 0 0 1px var(--hairline);
}
.mac-screen{
position:relative;height:238px;overflow:hidden;
background:var(--canvas);border-radius:5px;
display:flex;flex-direction:column;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent);
}
.mac-cam{position:absolute;top:3.5px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;
background:color-mix(in srgb,var(--ink) 55%,transparent);z-index:6}
/* De voet: iets breder dan het deksel, met het inkepinkje vooraan. */
.mac-base{
position:relative;height:9px;width:calc(100% + 12px);margin-inline-start:-6px;
background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong) 92%,var(--ink)),var(--surface-strong));
border-radius:0 0 9px 9px;
box-shadow:0 16px 26px -16px color-mix(in srgb,var(--ink) 55%,transparent);
}
.mac-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:64px;height:3.5px;border-radius:0 0 5px 5px;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.mac-base::before{content:"";position:absolute;top:0;inset-inline:6px;height:1px;
background:color-mix(in srgb,var(--ink) 30%,transparent)}
/* Titelbalk van het venster */
.mac-bar{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:24px;
padding:0 9px;
background:var(--surface);border-bottom:1px solid var(--hairline)}
.mac-dots{display:flex;gap:5px}
.mac-dots i{width:7px;height:7px;border-radius:50%;background:#FF5F57}
.mac-dots i:nth-child(2){background:#FEBC2E}
.mac-dots i:nth-child(3){background:#28C840}
.mac-ttl{position:absolute;inset-inline:var(--mac-side,240px) 0;text-align:center;font-size:9.5px;font-weight:700;letter-spacing:-.01em;pointer-events:none}
.mac-ttl i{color:var(--coral);font-style:normal}
.mac-gear{margin-inline-start:auto;display:flex;color:var(--coral)}
.mac-gear svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
.mac-win{flex:1;display:flex;min-height:0}
/* ---- zijbalk ---- */
.mac-side{flex:none;width:var(--mac-side,240px);
display:flex;flex-direction:column;min-height:0;
background:var(--surface);border-inline-end:1px solid var(--hairline)}
.ms-head{display:flex;align-items:center;gap:6px;padding:9px 9px 6px}
.ms-ic{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.ms-ic svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ms-nm{flex:1;min-width:0;line-height:1.15}
.ms-nm b{display:block;font-size:9px;font-weight:700;letter-spacing:-.01em}
.ms-nm b i{color:var(--coral);font-style:normal}
.ms-nm small{display:block;font-size:6.5px;color:var(--ink-soft);margin-top:1px}
.ms-add{flex:none;width:16px;height:16px;border-radius:5px;display:grid;place-items:center;background:var(--blue)}
.ms-add svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round}
.ms-find{display:flex;align-items:center;gap:5px;margin:0 9px;padding:4px 7px;border-radius:7px;
background:var(--canvas);border:1px solid var(--hairline);font-size:7px;color:var(--ink-soft);
white-space:nowrap;overflow:hidden}
.ms-find svg{flex:none;width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2}
.ms-folders{display:flex;gap:4px;margin:7px 9px 0;overflow:hidden}
.ms-folders .msf{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:999px;
background:var(--canvas);border:1px solid var(--hairline);font-size:6.5px;font-weight:650;
color:var(--ink-soft);white-space:nowrap;transition:background .35s ease,color .35s ease,border-color .35s ease}
.ms-folders .msf svg{width:8px;height:8px;stroke-width:2.2}
.ms-folders .msf b{font-size:6px;font-weight:700;opacity:.7}
.ms-folders .msf.cur{background:var(--blue);border-color:transparent;color:#fff}
.ms-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;padding:7px 9px 0;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);
mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}
.ms-row{display:flex;gap:6px;padding:6px 7px;border-radius:9px;background:var(--canvas);
border:1px solid var(--hairline);transition:background .3s ease,border-color .3s ease,box-shadow .5s ease}
.ms-row .msr-ic{flex:none;display:flex;color:var(--blue)}
.ms-row .msr-ic svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-row .msr-ic.todo{color:var(--coral)}
.ms-row .msr-t{flex:1;min-width:0;line-height:1.2}
.ms-row .msr-t b{display:block;font-size:8px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-row .msr-t small{display:block;font-size:6.5px;color:var(--ink-soft);margin-top:2px}
.ms-row .msr-t em{display:block;font-size:6.5px;font-style:normal;color:var(--ink-soft);opacity:.8;margin-top:3px;
line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.ms-row.sel{background:var(--blue);border-color:transparent}
.ms-row.sel .msr-ic,.ms-row.sel .msr-t b{color:#fff}
.ms-row.sel .msr-t small,.ms-row.sel .msr-t em{color:rgba(255,255,255,.82)}
/* De wachtrijbalk vouwt open zodra er gewerkt wordt. */
.ms-queue{flex:none;height:0;overflow:hidden;transition:height .35s var(--ease)}
.mac.working .ms-queue{height:28px}
.ms-queue .msq{display:flex;align-items:center;gap:6px;margin:6px 9px 0;padding:4px 6px;border-radius:7px;
background:color-mix(in srgb,var(--blue) 12%,transparent)}
.ms-queue .msq-sp{flex:none;width:9px;height:9px;border-radius:50%;border:1.6px solid color-mix(in srgb,var(--blue) 35%,transparent);
border-top-color:var(--blue)}
.ms-queue .msq-t{flex:1;min-width:0;font-size:6.5px;font-weight:650;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-queue .msq-bar{flex:none;width:26px;height:2.5px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--blue) 25%,transparent)}
.ms-queue .msq-bar i{display:block;height:100%;width:38%;border-radius:2px;background:var(--blue)}
/* Opnemen, onder de lijst, precies als in de app */
.ms-rec{flex:none;display:flex;gap:5px;padding:8px 9px}
.ms-rec .msr-go{position:relative;flex:1;height:22px;border-radius:999px;overflow:hidden;background:var(--coral);
box-shadow:0 5px 12px color-mix(in srgb,var(--coral) 38%,transparent);transition:background .4s ease}
.ms-rec .msr-go .go-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;
font-size:7.5px;font-weight:700;color:#fff;white-space:nowrap;transition:opacity .3s ease}
.ms-rec .msr-go .go-label svg{width:9px;height:9px;fill:currentColor}
.ms-rec .msr-go .go-rec{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2.5px;opacity:0;transition:opacity .3s ease}
.ms-rec .msr-go .go-rec i{width:2.5px;height:5px;border-radius:2px;background:#fff}
.ms-rec .msr-in{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
background:var(--canvas);border:1px solid var(--hairline);color:var(--ink-soft)}
.ms-rec .msr-in svg{width:8px;height:8px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mac.recording .ms-rec .msr-go .go-label{opacity:0}
.mac.recording .ms-rec .msr-go .go-rec{opacity:1}
/* ---- rechterhelft: de memo zelf ---- */
.mac-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;padding:11px;background:var(--canvas);overflow:hidden}
.mm-head{display:flex;align-items:flex-start;gap:7px}
.mm-ic{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.mm-ic svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mm-t{flex:1;min-width:0}
.mm-t b{display:block;font-size:12px;font-weight:680;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Datum, map en de labels staan op één rij links onder de titel, en wat er
niet bij past wordt afgekapt in plaats van dat het een regel bijmaakt. */
.mm-t small{display:flex;align-items:center;gap:5px;font-size:7px;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden}
.mm-t small .mmb{flex:none;font-style:normal;font-size:6.5px;font-weight:650;color:var(--ink-soft);
background:var(--surface-strong);padding:2px 6px;border-radius:999px}
.mm-t small .mmb .mmv{display:inline-block;transition:opacity .3s ease,transform .3s ease}
:is(.mac,.ipad).switching .mm-t small .mmb .mmv{opacity:0;transform:translateY(-2px)}
.mm-card{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;padding:8px}
.mm-wave{display:flex;align-items:center;gap:2px;height:17px}
.mm-wave i{display:block;flex:1;border-radius:2px;background:var(--muted)}
.mm-wave i.on{background:var(--blue)}
.mm-ctl{display:flex;align-items:center;gap:7px;margin-top:7px}
.mm-ctl .dot{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--blue)}
.mm-ctl .dot svg{width:8px;height:8px;fill:#fff;stroke:none}
.mm-ctl .bar{flex:1;height:2.5px;border-radius:2px;background:var(--surface-strong);overflow:hidden}
.mm-ctl .bar i{display:block;height:100%;width:34%;border-radius:2px;background:var(--blue)}
.mm-ctl .tm{flex:none;font-size:6.5px;font-weight:650;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mm-tx{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.mm-tx-head{display:flex;align-items:center;gap:6px}
.mm-tx-head .ttl{flex:1;display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700}
.mm-tx-head .ttl svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
.mm-tx-head .bt{width:15px;height:15px;border-radius:5px;display:grid;place-items:center;
background:var(--canvas);border:1px solid var(--hairline);color:var(--ink-soft)}
.mm-tx-head .bt svg{width:8px;height:8px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linejoin:round}
.mm-rule{height:1px;background:var(--hairline);margin:7px 0 0}
/* Vijftien talen, vijftien lengtes: wat er niet meer bij past vloeit uit
in plaats van halverwege een regel af te breken. */
.mm-lines{min-height:0;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 12px),transparent);
mask-image:linear-gradient(to bottom,#000 calc(100% - 12px),transparent)}
.mm-lines p{margin:4px 0 0;font-size:7px;line-height:1.45;color:var(--ink-soft);transition:opacity .4s ease}
.mm-lines p .sp{color:var(--blue);font-weight:700;margin-inline-end:4px}
.mm-lines p .sp.b{color:var(--coral)}
.mm-lines p .mark{background:color-mix(in srgb,var(--blue) 22%,transparent);border-radius:3px;padding:0 2px}
:is(.mac,.ipad).working .mm-lines p{opacity:.28}
/* ---- het demootje: dezelfde beats als de telefoon ---- */
@media (prefers-reduced-motion:no-preference){
.mac.working .ms-queue .msq-sp{animation:macspin .9s linear infinite}
.mac.working .ms-queue .msq-bar i{animation:macfill 1.9s ease-in-out infinite}
.mac.recording .ms-rec .go-rec i{animation:macbar .9s ease-in-out infinite}
.mac.recording .ms-rec .go-rec i:nth-child(2){animation-duration:.7s;animation-delay:-.2s}
.mac.recording .ms-rec .go-rec i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}
.mac.recording .ms-rec .go-rec i:nth-child(4){animation-duration:.8s;animation-delay:-.1s}
.mac.recording .ms-rec .go-rec i:nth-child(5){animation-duration:1s;animation-delay:-.35s}
:is(.mac,.ipad).fresh .mm-lines p{animation:macline .55s var(--ease-out) both}
:is(.mac,.ipad).fresh .mm-lines p:nth-child(2){animation-delay:.11s}
:is(.mac,.ipad).fresh .mm-lines p:nth-child(3){animation-delay:.22s}
@keyframes macspin{to{transform:rotate(360deg)}}
@keyframes macfill{0%{width:14%}50%{width:82%}100%{width:14%}}
@keyframes macline{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes macbar{0%,100%{height:5px}50%{height:15px}}
}
/* De opnameknop van de Mac krijgt bij het opnemen dezelfde beat als die van de
telefoon: koraal blijft koraal, alleen de golfjes nemen het over. */
.mac.recording .ms-rec .msr-go{box-shadow:0 6px 16px color-mix(in srgb,var(--coral) 52%,transparent)}
/* De verse memo licht op, net als de kaart op de telefoon. */
.ms-row.sel.flash{box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 45%,transparent)}
/* ---------- Apple Watch Ultra, vooraan rechts ----------
Hij staat voor de voet van de Mac, met zijn onderkant vlak bij die van de
telefoon: samen vormen ze de voorste rij. Zelfde behuizing en zelfde
scherm als de telefoon en de Mac: dezelfde
--surface-strong voor de kast, dezelfde --canvas voor het scherm. Alleen
de vorm verschilt (vlakke voorkant, kroonbeschermer rechts, actieknop
links). Hij draait hetzelfde demootje mee: zodra de telefoon opneemt,
doet de knop op de Watch dat ook. */
.uwatch{position:relative;aspect-ratio:44/52;border-radius:24px;padding:7px;
background:var(--surface-strong);
box-shadow:var(--shadow),0 14px 28px -14px color-mix(in srgb,var(--ink) 38%,transparent),0 0 0 1px var(--hairline);
}
/* kroonbeschermer met kroon, de zijknop eronder, de actieknop links */
.uwatch .uw-crown,.uwatch .uw-side,.uwatch .uw-action{position:absolute;border-radius:3px;
background:color-mix(in srgb,var(--surface-strong) 72%,var(--ink))}
.uwatch .uw-crown{inset-inline-end:-4px;top:30%;width:6px;height:17px}
.uwatch .uw-side{inset-inline-end:-3px;top:54%;width:4px;height:13px}
.uwatch .uw-action{inset-inline-start:-4px;top:38%;width:5px;height:15px;background:var(--coral)}
.uw-face{height:100%;background:var(--canvas);border:1px solid var(--hairline);border-radius:18px;
padding:8px 7px 7px;display:flex;flex-direction:column;color:var(--ink);overflow:hidden}
.uw-top{display:flex;align-items:center;justify-content:space-between;font-size:5.5px;font-weight:700;color:var(--ink-soft)}
.uw-top i{width:4px;height:4px;border-radius:50%;background:var(--coral)}
.uw-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.uw-rec{width:27px;height:27px;border-radius:50%;background:var(--coral);display:grid;place-items:center;
box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 20%,transparent);
transition:border-radius .35s var(--ease),box-shadow .35s ease}
.uw-rec i{width:9px;height:9px;border-radius:50%;background:var(--on-coral);
transition:border-radius .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.uw-wave{display:flex;align-items:flex-end;gap:2px;height:11px}
.uw-wave i{width:2px;border-radius:1px;background:var(--blue);height:100%;transform:scaleY(.35);transform-origin:bottom}
.uw-label{text-align:center;font-size:5.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.uw-label i{color:var(--coral);font-style:normal}
/* opnemen: de ronde stip wordt een stopvierkant, net als op het toestel zelf */
.uwatch.recording .uw-rec{box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 32%,transparent)}
.uwatch.recording .uw-rec i{border-radius:2px;width:10px;height:10px}
@media (prefers-reduced-motion:no-preference){
.uw-wave i{animation:uwbar 1s ease-in-out infinite}
.uw-wave i:nth-child(2){animation-duration:.74s;animation-delay:-.2s}
.uw-wave i:nth-child(3){animation-duration:1.15s;animation-delay:-.5s}
.uw-wave i:nth-child(4){animation-duration:.86s;animation-delay:-.1s}
.uw-wave i:nth-child(5){animation-duration:1.05s;animation-delay:-.35s}
.uwatch.recording .uw-wave i{animation-duration:.5s}
.uwatch.recording .uw-wave i:nth-child(2){animation-duration:.38s}
.uwatch.recording .uw-wave i:nth-child(3){animation-duration:.58s}
.uwatch.recording .uw-wave i:nth-child(4){animation-duration:.43s}
.uwatch.recording .uw-wave i:nth-child(5){animation-duration:.52s}
@keyframes uwbar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(.92)}}
}
/* ---------- 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;
}
/* Eén rustige regel onder de chips in de hero: de ingang naar /for/ op het
eerste scherm. Een tekstlink, geen knop en geen kaart: de knoppen erboven
zijn de hoofdactie. Alleen op de homepage van een taal waarin /for/
bestaat (Engels, Nederlands, Duits, Frans, Spaans, Italiaans, Portugees, Braziliaans, Deens, Zweeds, Noors, Fins, Pools, Grieks en Arabisch). De link is een inline-block, zodat hij op een
telefoon als geheel onder de vraag springt in plaats van na "Lawyers,"
af te breken. Op 320px past hij zelf ook niet op één regel; balance
voorkomt dat "more" daar in zijn eentje op de laatste regel valt. */
.hero-for{margin-top:18px;font-size:15px;line-height:1.55;color:var(--ink-soft);text-align:center}
.hero-for a{display:inline-block;text-wrap:balance}
/* ---------- 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}
/* Idem: 650 telt niet als vet, dus dit is gewone tekst en moet 4,5:1 halen.
Met --blue bleef het op 3,18:1 staan zodra de clamp onder 24px zakte. */
.contact-card .email{font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:650;margin:8px 0 4px;color:var(--blue-text);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)}}
/* ---------- Bluesky, boven in de voet ----------
Eén blok boven de kolommen en het enige in de voet met een vlak eromheen:
genoeg om op te vallen zonder te schreeuwen. De hele regel is de link,
de handle eronder ook. */
/* Drie profielen naast elkaar, op de plek waar eerst alleen Bluesky stond.
Zelfde vlak en radius als die ene kaart had, nu als rij van drie. De naam
van het platform en de handle eronder; allebei taalneutraal, dus deze rij
hoeft niet door de vertaalpijplijn. Onder 760px onder elkaar, want drie
handles naast elkaar worden op een telefoon onleesbaar smal. */
.foot-social{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:38px}
.foot-social a{display:flex;align-items:center;gap:12px;min-width:0;
padding:13px 15px;border:1px solid var(--hairline);border-radius:var(--r-lg);
background:var(--surface);color:var(--ink);text-decoration:none;
transition:border-color .25s ease,background .25s ease}
.foot-social .fs-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue)}
.foot-social .fs-ic svg{width:18px;height:18px;fill:currentColor}
.foot-social .fs-tx{min-width:0}
.foot-social .fs-tx b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.foot-social .fs-tx small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-soft);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
.foot-social a:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--hairline));
background:color-mix(in srgb,var(--blue) 7%,var(--surface))}
}
@media (max-width:760px){
.foot-social{grid-template-columns:1fr;gap:10px;margin-bottom:30px}
}
.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}
/* ---------- Beta-melding, onder de kolommen ----------
Eén smalle regel, geen kaart. Eerst stond hier een gevuld vlak met een
blauwe knop met gloed, 81 pixels hoog: het luidste ding in de voet. Nu een
hairline als rand, de vraag vet met de uitleg er als gewone zin achteraan,
en rechts het adres als link met een pijl.
Past dat niet op één regel (Duits, Fins, telefoon), dan loopt de zin door
in twee gelijke regels (balance, anders bleef "kaputtgeht." alleen staan)
en zakt de link eronder. max-width houdt de langste link (Fins) binnen een
scherm van 320px; breekt hij daar, dan blijft de pijl aan het laatste
woord hangen dankzij de harde spatie ervoor. Daarom is de pijl gewone
inline tekst en schuift hij bij hover met een relatieve offset, niet met
transform, want dat werkt niet op inline.
Het raakvlak is 45 pixels hoog via ::before, niet via padding zoals bij de
broodkruimel: dan stak de focusring boven en onder uit de strook. */
.foot-beta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:10px 28px;padding:12px 18px;
border:1px solid var(--hairline);border-radius:var(--r-lg)}
.foot-beta .fb-tx{flex:1 1 32ch;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);
text-wrap:balance}
.foot-beta .fb-tx b{font-weight:600;color:var(--ink)}
.foot-beta .fb-tx small{font-size:inherit}
.fb-cta{flex:none;position:relative;max-width:100%;border-radius:8px;
font-size:13.5px;line-height:1.5;font-weight:600;color:var(--blue-text)}
.fb-cta::before{content:"";position:absolute;inset:-12px -6px}
.fb-cta::after{content:"\00a0\2192";position:relative;inset-inline-start:0;
transition:inset-inline-start .2s var(--ease)}
[dir="rtl"] .fb-cta::after{content:"\00a0\2190"}
@media (hover:hover) and (pointer:fine){
.fb-cta:hover{text-decoration:none}
.fb-cta:hover::after{inset-inline-start:3px}
}
@media (max-width:560px){
.foot-beta{padding:12px 16px}
}
/* ---------- 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}
/* Een blok dat nog niet is binnengekomen staat op opacity:0, en daar kun je
wél naartoe tabben. De focusring stond dan op iets onzichtbaars. Krijgt er
iets in dit blok focus, dan is het blok binnen — punt. */
.js .reveal:focus-within{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}
/* Ook hier wit op blauw, en ook hier 4,11:1 / 2,88:1: zelfde --blue-btn. */
.step .tile .n{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;background:var(--blue-btn);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}
.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 kop,
de tekst en de knoppen moeten samen boven de vouw blijven, dus minder lucht
en een kleinere kop. De rij krimpt tot de twee toestellen die je hier in je
hand hebt; de iMac en de iPad wachten tot er hoogte is. */
@media (max-height:520px) and (orientation:landscape){
.hero{padding-top:clamp(20px,6svh,44px);padding-bottom:clamp(20px,6svh,44px)}
.hero h1{font-size:clamp(1.7rem,4.4vw,2.6rem)}
.hero .lead{margin-top:14px;font-size:1rem}
.hero .btn-row{margin-top:22px}
.hero-visual{margin-top:clamp(18px,3vh,30px)}
.dev-macbook,.dev-ipad{display:none}
.lineup{--row-w:239px;--row-h:253px;--row-k:1}
.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. */
/* Allebei achter .js: het menupaneel waar deze links naartoe gaan wordt door
app.js gemaakt. Zonder JavaScript is er dus geen paneel, en verdween onder
de 1020px de hele navigatie — er stond dan alleen nog een beeldmerk. Nu
blijven de links in dat geval gewoon in de balk staan en breken ze af. */
@media (max-width:1019px){
.js .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. */
.js .nav > .btn-vault{display:none}
/* Zonder JS blijven ze staan, en dan moeten ze ook ergens passen: de balk
mag dan hoger worden in plaats van de links buiten beeld te duwen. */
/* En dan mag hij niet meer plakken: op 375px wordt die balk 205px hoog, en
dat blijft anders de hele pagina lang voor het scherm hangen. */
:root:not(.js) .nav{
position:static;height:auto;min-height:var(--nav-h);
flex-wrap:wrap;padding-top:7px;padding-bottom:7px;
}
:root:not(.js) .nav-links{flex-wrap:wrap}
:root:not(.js){scroll-padding-top:10px}
}
/* Vijf links: de balk in de talen met /for/. Sinds 4 oktober 2026 staat
"Who it's for" als vijfde link in de balk van de Engelse pagina's, en sinds
dezelfde dag "Voor wie", "Für wen", "Pour qui", "Para quién", "Per chi" en
"Para quem" in die van de Nederlandse, Duitse, Franse, Spaanse, Italiaanse,
Portugese en Braziliaanse, en sinds 5 oktober 2026 "Til hvem" in die van
de Deense en "För vem" in die van de Zweedse, sinds 6 oktober "For hvem" in
die van de Noorse, "Kenelle" in die van de Finse en "Dla kogo" in die van
de Poolse, en sinds 7 oktober "Για ποιους" in die van de Griekse en
"لمن يصلح" in die van de Arabische. Nagemeten op de homepage,
met
alleen het slotje: in het Engels hebben vier links 949px balk nodig en vijf
1060, in het Nederlands vijf 1086, in het Duits vier (er is geen Duitse
feitenpagina) al 1073, in het Frans vier 1044, in het Spaans vier 1075 (de
knop heet daar "Descárgala gratis"), in het Italiaans vier 1004. Dat laatste
past net onder de 1020, maar met een klassieke scrollbalk nog maar met één
pixel speling, dus ook daar .nav-long; in het Portugees vier 1045, in het
Braziliaans vier 1050. In het Deens vier 1007 (de keuzehulp 1011, met de
knop "Hent appen"): ook dat past onder de 1020, maar niet met een klassieke
scrollbalk, dus .nav-long. Zweeds idem: vier 1004, de keuzehulp 1008. Noors:
vier 1047, de keuzehulp 1050, dus .nav-long. Fins: vier 1002, de keuzehulp
991; past onder de 1020, maar met een klassieke scrollbalk nog maar met één
tot drie pixels speling, dus ook .nav-long. Pools: vier 1045, de keuzehulp
1041, dus .nav-long. Grieks: vier 1060, de kluis 1077; de keuzehulp had met
de knop "Κατέβασε την εφαρμογή" 1139 nodig en kreeg daarom de korte knop van
de homepage ("Δωρεάν λήψη", 1060). Arabisch: vier 948, de keuzehulp 992,
de kluis 930. Dat past onder de 1020 met 11px speling bij een klassieke
scrollbalk, maar gemeten met de Arabische systeemletter van macOS; Windows
en Android tekenen Arabisch met een andere letter, en op 11px reken je dan
niet. Dus ook .nav-long, en daarmee hebben alle vijftien talen hem. Een
balk met .nav-long gaat al onder de 1100 het menupaneel in. app.js leest dezelfde klasse, op twee plekken:
bij het menupaneel en bij de link die meelicht. */
@media (min-width:1020px) and (max-width:1099px){
.js .nav-long .nav-links{display:none}
.js .nav-long > .btn-vault{display:none}
.nav-long details.nav-menu{display:block}
:root:not(.js) .nav-long{height:auto;min-height:var(--nav-h);flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
:root:not(.js) .nav-long .nav-links{flex-wrap:wrap}
}
/* Met een klassieke scrollbalk (15 tot 17px) houdt de balk bij een venster van
precies 1100 nog 1083 tot 1085px over. De Nederlandse homepage heeft 1086
nodig: dan braken "Hoe het werkt" en "Voor wie" over twee regels en stak het
linkblok (64px) onder de balk van 60 uit. Op één regel houden kost hooguit
2px van de rechtermarge van 22, zonder horizontale scroll. Nagemeten op
5 oktober 2026 in het Nederlands, Duits, Braziliaans, Engels, Deens en Zweeds. Zonder JS
mogen de links als geheel nog steeds naar een tweede regel. */
.nav-long .nav-links a{white-space:nowrap}
@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 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,.mac,.uwatch,.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.
Onderaan eerst de bodem: alles wat focus kan krijgen krijgt een ring, ook
wat in de lijst hieronder niet met name staat. Nergens in dit bestand
staat outline:none, dus er is niets dat deze regel weer uitzet.
--blue-text haalt in het licht 5,26:1 op --canvas, 4,64:1 op --surface en
3,98:1 op --surface-strong, en in het donker 5,39 / 4,99 / 4,07 — overal
boven de 3:1 die een focusring vraagt. Was --blue: dat bleef in het licht
op --surface-strong op 2,73:1 steken. */
:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px}
.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-text);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)}
/* De rij schuift zachtjes mee omhoog terwijl de hero wegscrolt. Kantelen
doet hij niet: vier toestellen die met de muis meedraaien is onrust. */
.lineup{transform:translate3d(0,calc(var(--p,0) * -22px),0);
transition:transform .45s cubic-bezier(.2,.8,.3,1);will-change:transform}
/* ---------- 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{
/* vast t.o.v. het scherm en boven .nav (z-index:1000), anders verdwijnt de
link bij focus achter de plakkende balk. */
position:fixed;z-index:1100;top:10px;inset-inline-start:10px;
padding:10px 16px;border-radius:12px;
background:var(--blue-btn);color:#fff;font-size:14px;font-weight:600;
clip-path:inset(50%);
}
.act-skip:focus,.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}
/* Achter .js: zonder JavaScript wordt er nooit een .on gezet, en dan stonden
hier vijf van de zeven tekstblokken op opacity:0 — onzichtbaar, maar wel
gewoon te lezen door een zoekmachine en wel gewoon aan te tabben. Met JS
ziet het er precies zo uit als eerst; zonder JS staat alles er.
visibility erbij (net als bij .stage-card hieronder), want een link op
opacity:0 blijft anders focus vangen: je tabt dan naar iets wat niemand
ziet staan. De 0s-overgang met .52s vertraging haalt hem er pas uit als
het vervagen klaar is. */
.js .beat{
opacity:0;transform:translate3d(0,26px,0);visibility:hidden;
transition:opacity .5s var(--ease-out),transform .75s var(--ease-out),visibility 0s linear .52s;
pointer-events:none;
}
.beat.on{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s,0s,0s}
.beat > .eyebrow{margin-bottom:14px}
.stage-inner{display:grid;width:100%;max-width:436px;margin:0 auto}
/* Ook achter .js, om dezelfde reden als .beat hierboven. */
.js .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-text);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,.mac,.uwatch,.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}
.js .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. De opmaak geldt
altijd; het terugzetten van de verberg-eigenschappen hoort achter .js,
anders wint de hogere soortelijkheid van ".js .beat" hierboven. */
.beat{
grid-area:auto;
padding:34px 0 38px;
}
.js .beat{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.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,.mac,.uwatch,.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. */
.js .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}
.js .stage-card{visibility:visible}
.js .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)}
}
/* De vijfde foto staat alleen op zijn rij en krijgt de volle breedte, in
16:10 — de verhouding waarin hij geschoten is, dus zonder bijsnijden. */
.shots-row.solo,.shots-row + .shots-row.solo{grid-template-columns:1fr}
.shot-book img{aspect-ratio:16/10}
@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)}
/* :not(.btn), want deze regel is soortelijk sterker dan .btn-blue: de knop
"Get the app" middenin het verhaal kreeg blauwe letters op een blauw vlak
(1:1 in het donker, 1,46:1 in het licht — onleesbaar). Knoppen houden hun
eigen kleur, gewone links in de tekst blijven --blue-text. */
.fact-intro a:not(.btn){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:not(.btn){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}
}
|