/* Weighted-site 2.3: één stylesheet voor alle pagina's (homepage plus subpagina's; site.css is weg).
   Homepage en oude subpaginas wisselen zwart (#0e0e0e) en wit af; features (2.4) is één doorlopende grond
   met tegels en één gouden vlak. Verder is goud alleen accent: tekst, pil, streep.
   Telefoons zijn frontaal en plat (HTML plus een echt screenshot), geen WebGL: sneller en scherper. */

:root {
  --black: #0e0e0e;
  --white: #f7f7f5;
  --gold: #e3b23c;
  --gold-ink: #edc35c;
  --display: 'Big Shoulders Display', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --pad: max(clamp(20px, 4vw, 48px), (100vw - 1280px) / 2);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: #f0eee8;
  font: 400 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, figure { margin: 0; }
h1, h2 { text-wrap: balance; }
em { font-style: normal; }
/* Het hidden-attribuut wint altijd, ook van img { display: block } hierboven. */
[hidden] { display: none !important; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--black); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Kleur per sectie: elk vlak zet zijn eigen inkt, de componenten lezen alleen deze variabelen. */
.sec--dark, .hero, .foot { --ink: #f0eee8; --mute: #9a978f; --line: rgba(240, 238, 232, .12); background: var(--black); color: var(--ink); }
.sec--light, .close { --ink: #0e0e0e; --mute: #5c5a55; --line: rgba(14, 14, 14, .12); background: var(--white); color: var(--ink); color-scheme: light; }

/* ---------- Nav: groot merk links, caps in het midden, grote pil rechts (Ladder-maat) ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  transition: background-color .35s;
}
/* 8% doorzicht: de sectie eronder kleurt de balk net, maar je leest er niets doorheen. */
.nav.is-scrolled { background: rgba(14, 14, 14, .92); }
.nav__inner { display: flex; align-items: center; gap: 40px; height: 84px; padding: 0 var(--pad); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #f0eee8; }
.brand__mark { height: 26px; width: auto; }
.brand__word { font: 800 32px/1 var(--display); letter-spacing: .03em; }
.nav__links { display: flex; gap: 36px; margin-left: auto; }
.nav__links a {
  font: 700 19px/1 var(--cond); letter-spacing: .02em; text-transform: uppercase;
  color: #f0eee8; text-decoration: none; transition: opacity .2s;
}
.nav__links a:hover { opacity: .7; }
.nav__links b { color: var(--gold); font-weight: 700; }
/* 44px tikvlak zonder dat de balk verschuift: padding erbij, dezelfde marge eraf. */
.nav__links a, .foot__nav a { padding: 12.5px 0; margin: -12.5px 0; }
.pill {
  display: inline-flex; align-items: center; height: 46px; padding: 0 28px; border-radius: 999px;
  background: var(--gold); color: var(--black);
  font: 700 18px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s;
}
.pill:hover { background: var(--gold-ink); }

.badge { display: inline-block; border-radius: 12px; transition: opacity .2s; }
.badge:hover { opacity: .85; }
.badge img { height: 54px; width: auto; }
.fine { font-size: 14px; color: var(--mute); }

/* ---------- Hero: kop over de rig (videoslot) ---------- */

.hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
/* Boven- en onderrand lopen over in het zwart: bij overscroll aan de top geen harde fotorand. */
.hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--black) 0, rgba(14, 14, 14, .55) 110px, rgba(14, 14, 14, 0) 240px);
}
html { background: var(--black); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__body {
  position: relative; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px var(--pad) 64px;
}
.hero__h1 {
  font: 800 clamp(58px, 10.4vw, 156px)/.84 var(--display);
  text-transform: uppercase; letter-spacing: -.01em;
}
.hero__h1 em { display: block; color: var(--gold); }
.hero__foot { display: flex; align-items: flex-end; gap: 48px; margin-top: 40px; }
.hero__sub { font-size: 20px; line-height: 1.4; max-width: 25ch; }
.hero__cta { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Secties: tekst naast twee frontale telefoons die aan de onderrand worden afgesneden ---------- */

.sec {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: 0 var(--pad);
}
.sec__text { grid-column: 1 / 6; align-self: center; padding: 96px 0; }
.duo { grid-column: 7 / 13; }
.sec--flip .sec__text { grid-column: 8 / 13; grid-row: 1; }
.sec--flip .duo { grid-column: 1 / 7; grid-row: 1; }

.idx {
  display: flex; gap: 12px; align-items: baseline;
  font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 24px;
}
.idx b { color: var(--gold); font-variant-numeric: tabular-nums; }
.sec--light .idx b { color: var(--ink); box-shadow: 0 3px 0 var(--gold); }
.sec__h { font: 800 clamp(44px, 5.4vw, 80px)/.92 var(--display); text-transform: uppercase; max-width: 11ch; }
.sec__p { margin-top: 22px; font-size: 20px; line-height: 1.45; color: var(--mute); max-width: 28ch; }

/* 75 + 30 = 105: cijfers rechts uitgelijnd onder elkaar, gouden streep boven het totaal. */
.sec--sum .sec__text { grid-column: 1 / 7; }
.sec--sum .sec__h { max-width: none; }
.sec--sum .sec__h span { display: block; }
.eq { margin-top: 40px; display: grid; grid-auto-flow: column; gap: 22px; justify-content: start; align-items: end; }
.eq div { display: grid; gap: 10px; }
.eq b {
  font: 800 clamp(72px, 8vw, 120px)/.8 var(--display);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.eq i { font-style: normal; color: var(--mute); font-weight: 600; margin-right: .06em; }
.eq span { font: 700 13px/1.2 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.eq__total b { box-shadow: 0 -5px 0 var(--gold); padding-top: 12px; }
.eq__total i { color: var(--gold); }

/* Duo: achterste telefoon links en hoger, voorste rechts eroverheen en lager; beide lopen onder de
   sectierand door. --p komt uit het script (-1 tot 1); de voorste beweegt meer, dat geeft diepte. */
.duo {
  --w: clamp(280px, 27vw, 350px);
  position: relative; align-self: end; justify-self: center;
  width: calc(var(--w) * 1.6);
  height: calc(var(--w) * 1.72 + 20px);
  margin-top: 72px;
}
.duo .ph { position: absolute; }
.ph--back { left: 0; top: 0; transform: translate3d(0, calc(var(--p, 0) * 20px), 0); }
.ph--front { left: calc(var(--w) * .6); top: calc(var(--w) * .32); transform: translate3d(0, calc(var(--p, 0) * 64px), 0); }
.duo--solo { --w: clamp(300px, 30vw, 380px); width: var(--w); height: calc(var(--w) * 1.5); }
.duo--solo .ph--front { left: 0; top: 0; transform: translate3d(0, calc(var(--p, 0) * 40px), 0); }

/* Het toestel: zwarte rand met een dunne titaniumlijn, het scherm, en het eiland erbovenop.
   Maten zijn verhoudingen van --w, dus één variabele schaalt alles. */
.ph {
  --edge: inset 0 0 0 calc(var(--w) * .006) #4a4844, inset 0 0 0 calc(var(--w) * .012) #111;
  width: var(--w);
  padding: calc(var(--w) * .034);
  border-radius: calc(var(--w) * .168);
  background: #050505;
  /* Licht van linksboven: een korte contactschaduw en een lange zachte slagschaduw naar rechtsonder. */
  box-shadow: var(--edge),
    0 2px 6px rgba(0, 0, 0, .18),
    18px 30px 50px -12px rgba(0, 0, 0, .26),
    48px 70px 120px -30px rgba(0, 0, 0, .22);
  will-change: transform;
}
.ph img { width: 100%; border-radius: calc(var(--w) * .134); }
.ph::after {
  content: ''; position: absolute; left: 50%; top: calc(var(--w) * .062);
  width: calc(var(--w) * .29); height: calc(var(--w) * .085);
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
.sec--dark .ph {
  --edge: inset 0 0 0 calc(var(--w) * .006) #5a5853, inset 0 0 0 calc(var(--w) * .012) #111;
  box-shadow: var(--edge), 18px 30px 60px -10px rgba(0, 0, 0, .7);
}

/* ---------- Toestel: een vooraf gerenderde iPhone 15 Pro (tools/phone-studio), volledig in beeld ----------
   Het beeld heeft een transparante rand met de schaduw erin; het toestel zelf is ~76% van de breedte. */
.dev { width: 100%; height: auto; }
.shot { grid-column: 8 / 13; align-self: center; justify-self: center; width: min(100%, 440px); padding: 72px 0; }
.sec--flip .shot { grid-column: 1 / 6; grid-row: 1; }

/* ---------- De app: drie rechte toestellen op een rij, elk met een kop en één zin. Ze staan op de
   onderrand en lopen uit in de grond, dezelfde behandeling als de subpaginakop. ---------- */
.shelf { padding: 120px var(--pad) 40px; overflow: hidden; }
.shelf__head { max-width: 640px; }
.shelf__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-top: 72px; }
.item { display: flex; flex-direction: column; }
.item__h { margin: 0; font: 800 clamp(28px, 2.6vw, 40px)/.95 var(--display); text-transform: uppercase; max-width: 12ch; }
.item__p { margin-top: 14px; font-size: 17px; line-height: 1.45; color: var(--mute); max-width: 30ch; }
.item__dev {
  --w: clamp(240px, 22vw, 320px); position: relative; isolation: isolate; align-self: center;
  margin-top: auto; padding-top: 48px; height: calc(var(--w) * 1.35 + 48px); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.item__dev .ph { position: relative; }
/* Zwart toestel op zwarte grond: een zachte, neutrale gloed erachter tekent de omtrek (geen goud, geen vlak). */
.phead__dev::before, .item__dev::before {
  content: ''; position: absolute; inset: 6% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 238, 232, .09), rgba(240, 238, 232, .03) 55%, transparent);
}

/* ---------- Afsluiter (wit, met telefoon) en voet (zwart, naar Ladder) ---------- */

.close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 0 var(--pad); overflow: hidden; }
.close__text { grid-column: 1 / 8; align-self: center; padding: 96px 0; }
.close .duo { grid-column: 8 / 13; }
.close__h {
  font: 800 clamp(56px, 7.4vw, 116px)/.86 var(--display);
  text-transform: uppercase; max-width: 12ch;
}
.close__row { display: flex; align-items: center; gap: 24px; margin-top: 44px; }
.close__row .badge img { height: 58px; }
.close__row .fine { max-width: 26ch; }

.foot { padding: 0 var(--pad) 40px; }
.foot__top { display: flex; align-items: center; gap: 40px; height: 116px; border-bottom: 1px solid var(--line); }
.foot__nav { display: flex; gap: 36px; margin-left: auto; }
.foot__nav a { font: 700 19px/1 var(--cond); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.foot__nav a:hover { opacity: .7; }
.foot__grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 40px; padding: 56px 0 72px; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot__col h3 { margin: 0 0 8px; font: 700 22px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.foot__col a { color: var(--mute); text-decoration: none; font-size: 17px; transition: color .2s; }
.foot__col a:hover { color: var(--ink); }
.foot__legal { font-size: 14px; color: var(--mute); padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Subpagina's: zelfde nav, voet, secties en telefoons; hieronder alleen wat de homepage niet heeft ---------- */

.nav__links a[aria-current='page'] { text-decoration: underline 2px var(--gold); text-underline-offset: 8px; }

/* Paginakop: zwart, de kop in dezelfde display-caps als de hero, geen foto. */
.phead { padding: 184px var(--pad) 96px; }
.phead__h1 {
  font: 800 clamp(56px, 8.4vw, 128px)/.86 var(--display);
  text-transform: uppercase; letter-spacing: -.01em; max-width: 13ch;
}
.phead__h1 em { display: block; color: var(--gold); }
.phead__sub { margin-top: 32px; font-size: 20px; line-height: 1.45; color: var(--mute); max-width: 36ch; }
.phead__sub a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.phead__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.phead--404 { min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; }
/* Kop met toestel (features, pricing, support): tekst links, een volledig toestel rechts. */
.phead--dev, .phead--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
/* Toestel recht en frontaal, net als de afsluiter: het staat op de onderrand van de kop en de sectie snijdt
   het af. Op zwart is die snijlijn onzichtbaar, dus de onderkant loopt uit in de grond. */
.phead--dev { align-items: end; padding-top: 112px; padding-bottom: 40px; overflow: hidden; }
.phead--dev .phead__text { grid-column: 1 / 8; align-self: center; padding-bottom: 72px; }
.phead__dev { grid-column: 8 / 13; justify-self: center; position: relative; isolation: isolate; }
.phead__dev .duo { margin-top: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
/* Kop zonder beeld (contact, privacy, terms): titel links, intro en actie rechts op de onderlijn,
   zodat de kop de breedte vult zonder dat er een verzonnen beeld naast hoeft. */
.phead--split { align-items: end; padding-bottom: 64px; }
.phead--split .phead__text { grid-column: 1 / 8; }
.phead--split .phead__aside { grid-column: 8 / 13; padding-bottom: 10px; }
.phead--split .phead__sub { margin-top: 0; }

/* Tekstblok zonder telefoon: kop links, inhoud rechts. --stack zet de inhoud eronder over de volle breedte. */
.blk {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: 112px var(--pad);
}
.blk__head { grid-column: 1 / 5; }
.blk__body { grid-column: 6 / 13; }
.blk--stack .blk__head { grid-column: 1 / 9; }
.blk--stack .blk__body { grid-column: 1 / 13; margin-top: 56px; }
.blk .sec__p { max-width: 30ch; }

/* Knoppen naast de gouden pil: omlijnd, zelfde maat. */
.btn {
  display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: 999px;
  border: 1.5px solid currentColor; color: var(--ink);
  font: 700 18px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: opacity .2s;
}
.btn:hover { opacity: .7; }
.blk .btn, .close .btn { margin-top: 36px; }

/* Sleutel-waarde-rijen (specificatie, verwerkers, abonnement). */
.rows { border-top: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.row__k { font: 700 15px/1.5 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.row__v { font-size: 18px; line-height: 1.45; }
.row__v a { text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* Vraag en antwoord: dicht tot je tikt, zodat de pagina een lijst vragen is en geen lap tekst. */
.qa { border-top: 2px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 72px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 600 21px/1.3 var(--body);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+'; flex: none; font: 700 30px/1 var(--cond); color: var(--gold);
  transition: transform .2s;
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 0 26px; max-width: 58ch; font-size: 18px; line-height: 1.55; color: var(--mute); }
.qa b { color: var(--ink); font-weight: 600; }
.qa a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* Drie korte feiten naast elkaar. */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.fact { border-top: 2px solid var(--ink); padding-top: 22px; }
.fact .idx { margin-bottom: 18px; }
.fact h3 { margin: 0; font: 800 clamp(30px, 2.8vw, 40px)/.95 var(--display); text-transform: uppercase; }
.fact p { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--mute); max-width: 30ch; }

/* Lastrekening per oefening: de features-versie van 75 + 30 = 105. */
.load { margin-top: 44px; border-top: 2px solid var(--ink); }
.load__row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.load__lift { font: 700 15px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); grid-column: 1 / -1; }
.load__sum { font: 700 clamp(26px, 2.4vw, 34px)/1 var(--cond); font-variant-numeric: tabular-nums; }
.load__sum i { font-style: normal; color: var(--mute); }
.load__total { font: 800 clamp(48px, 4.6vw, 68px)/.8 var(--display); font-variant-numeric: tabular-nums; }
.load__total small { font: 700 15px/1 var(--cond); letter-spacing: .1em; margin-left: 4px; color: var(--mute); }

/* Prijzen: drie kaarten, de jaarprijs met een gouden rand. */
.has-cur { position: relative; z-index: 3; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.plan { position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px 34px; }
.plan--best { border-color: transparent; box-shadow: inset 0 0 0 2px var(--gold); }
.plan__tag { position: absolute; top: 30px; right: 30px; font: 700 13px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 3px 0 var(--gold); padding-bottom: 4px; }
.plan__n { display: block; font: 800 clamp(64px, 6.2vw, 96px)/.85 var(--display); font-variant-numeric: tabular-nums; }
.plan__per { display: block; margin-top: 12px; font: 700 15px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.plan p { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; color: var(--mute); }
.plan p b { color: var(--ink); font-weight: 600; }
.plans__note { margin-top: 28px; font-size: 15px; color: var(--mute); max-width: 70ch; }

/* Valutakiezer (gebouwd door js/price.js). De sectie is de stapelcontext, zie .has-cur. */
.cur { position: relative; display: inline-block; margin-top: 20px; }
.cur__now {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.cur__now::-webkit-details-marker { display: none; }
.cur__now::after {
  content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .16s;
}
.cur[open] .cur__now::after { transform: translateY(1px) rotate(225deg); }
.cur__now:hover { color: var(--ink); }
.cur__code { color: var(--ink); box-shadow: 0 2px 0 var(--gold); }
.cur__menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  width: 380px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.cur__list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
.cur__opt {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 14px; border: 0; border-left: 2px solid transparent;
  background: none; color: var(--mute); text-align: left; cursor: pointer; font: inherit;
}
.cur__opt:hover { background: rgba(14, 14, 14, .05); color: var(--ink); }
.cur__opt[aria-current='true'] { border-left-color: var(--gold); color: var(--ink); }
.cur__opt-code { font: 700 13px/1 var(--cond); letter-spacing: .1em; color: var(--ink); }
.cur__opt-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cur__opt-price { font: 600 14px/1 var(--cond); font-variant-numeric: tabular-nums; }

/* Genummerde stappen (bugmelding). */
.steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 19px; line-height: 1.45; }
.steps b { font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 var(--gold); justify-self: start; }

/* Wat nooit gebeurt: grote regels in display-caps. */
.nevers { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.nevers li { padding: 22px 0; border-bottom: 1px solid var(--line); font: 800 clamp(28px, 2.9vw, 42px)/1 var(--display); text-transform: uppercase; }

/* Het grote mailadres op contact. */
.mail {
  display: inline-block; margin-top: 44px; color: var(--ink); text-decoration: none;
  font: 800 clamp(30px, 5.6vw, 80px)/1 var(--display); letter-spacing: -.005em;
  box-shadow: 0 5px 0 var(--gold); padding-bottom: 6px; transition: opacity .2s;
}
.mail:hover { opacity: .8; }

/* Eindigt een pagina op een zwart vlak, dan scheidt een lijn het van de even zwarte voet. */
.foot--rule .foot__top { border-top: 1px solid var(--line); }

/* ---------- Tablet en mobiel ---------- */

@media (max-width: 1080px) {
  .nav__links { gap: 26px; }
  .nav__links a:nth-child(3) { display: none; }
}

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; height: 68px; }
  .brand { gap: 9px; }
  .brand__mark { height: 19px; }
  .brand__word { font-size: 25px; }
  .pill { height: 40px; padding: 0 20px; font-size: 16px; }

  .hero__body { padding: 0 var(--pad) 40px; }
  .hero__h1 { font-size: clamp(50px, 13.8vw, 72px); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 24px; }
  .hero__sub { font-size: 17px; }
  .badge img { height: 48px; }

  .sec { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .sec__text, .sec--flip .sec__text { grid-column: 1; grid-row: 1; padding: 72px 0 0; }
  .duo, .sec--flip .duo { grid-column: 1; grid-row: 2; }
  .sec__h { font-size: clamp(40px, 11vw, 56px); }
  .sec__p { margin-top: 14px; font-size: 17px; }
  .idx { margin-bottom: 16px; }

  .sec--sum .sec__text { grid-column: 1; }
  .eq { gap: 16px; margin-top: 24px; }
  .eq div { gap: 6px; }
  .eq b { font-size: 60px; }
  .eq span { font-size: 11px; }
  .eq__total b { box-shadow: 0 -4px 0 var(--gold); padding-top: 8px; }

  .duo { --w: min(52vw, 230px); height: calc(var(--w) * 1.7 + 20px); margin-top: 44px; }
  .duo--solo { --w: min(66vw, 280px); height: calc(var(--w) * 1.5); }

  .shot, .sec--flip .shot { grid-column: 1; grid-row: 2; width: min(86vw, 360px); padding: 32px 0 56px; }
  .shelf { padding: 72px var(--pad) 24px; }
  /* Mobiel: een veegrij, elk toestel snapt naar de linkerrand; de rij loopt door tot de schermrand. */
  .shelf__items {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; column-gap: 16px;
    margin: 44px calc(var(--pad) * -1) 0; padding: 0 var(--pad); scroll-padding: 0 var(--pad);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .shelf__items::-webkit-scrollbar { display: none; }
  .item { scroll-snap-align: start; }
  .item__h { font-size: clamp(28px, 8vw, 36px); }
  .item__p { font-size: 16px; }
  .item__dev { --w: min(62vw, 250px); padding-top: 32px; height: calc(var(--w) * 1.35 + 32px); }

  .close { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .close__text { grid-column: 1; padding: 72px 0 0; }
  .close .duo, .close .shot { grid-column: 1; }
  .close__row { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }

  .foot__top { height: auto; padding: 32px 0; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
  .foot__nav { display: none; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 36px 0 48px; }
  .foot__col--contact { grid-column: 1 / -1; }
  .foot__col h3 { font-size: 19px; }
  .foot__col a { font-size: 16px; }

  .phead { padding: 128px var(--pad) 64px; }
  .phead__h1 { font-size: clamp(48px, 13vw, 72px); }
  .phead__sub { margin-top: 22px; font-size: 17px; }
  .phead--404 { min-height: 80svh; }
  .phead--dev, .phead--split { display: block; }
  .phead--dev { padding-top: 128px; padding-bottom: 0; }
  .phead--dev .phead__text { padding-bottom: 0; }
  .phead__dev { width: fit-content; margin: 40px auto 0; }
  .phead--split .phead__aside { padding: 22px 0 0; }

  .blk { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 72px var(--pad); }
  .blk__head, .blk__body, .blk--stack .blk__head, .blk--stack .blk__body { grid-column: 1; }
  .blk__body, .blk--stack .blk__body { margin-top: 36px; }
  .btn { height: 44px; padding: 0 20px; font-size: 16px; }

  .row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
  .row__v { font-size: 17px; }
  .qa summary { font-size: 18px; min-height: 64px; }
  .qa p { font-size: 17px; padding-bottom: 20px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fact p { font-size: 17px; }
  .load { margin-top: 28px; }
  .load__sum { font-size: 22px; }
  .load__total { font-size: 44px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plan { padding: 26px 24px 28px; }
  .plan__tag { top: 26px; right: 24px; }
  .plan__n { font-size: 64px; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); font-size: 17px; padding: 18px 0; }
  .steps b { font-size: 28px; }
  .nevers li { font-size: 26px; padding: 18px 0; }
  .mail { margin-top: 32px; font-size: clamp(26px, 8.4vw, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .pill, .badge { transition: none; }
}

/* ---------- Features 2.4: één doorlopende grond met tegels (bento) ----------
   Geen zwart/wit-ritme meer: de tegels (#161616, 1px rand) geven de structuur, en per pagina is er
   één gouden vlak als uitroepteken (de afsluiter). Elke tegel draagt een echt stuk app, in HTML
   nagebouwd uit de screenshots in img/app/, zodat het scherp blijft en kan bewegen. Maten bewust
   ongelijk: gelijke kaarten op een rij keurde Ayden af in ronde 1. */

.phead--tight { padding-bottom: 64px; }
.bento {
  --ink: #f0eee8; --mute: #9a978f; --line: rgba(240, 238, 232, .12);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
  padding: 0 var(--pad) 120px; color: var(--ink);
}
.tile {
  position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 36px;
  padding: 36px; border-radius: 28px;
  background: #161616; border: 1px solid rgba(240, 238, 232, .08);
}
.tile .idx { margin-bottom: 18px; }
.tile__h { font: 800 clamp(34px, 3.2vw, 48px)/.92 var(--display); text-transform: uppercase; max-width: 14ch; }
.tile__p { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--mute); max-width: 38ch; }

.tile--load { grid-column: 1 / 8; }
.tile--phone { grid-column: 8 / 13; grid-row: span 2; padding-bottom: 0; }
.tile--chart { grid-column: 1 / 8; }
.tile--pr { grid-column: 1 / 6; }
.tile--path { grid-column: 6 / 13; }
.tile--muscles { grid-column: 1 / 5; padding: 0; gap: 0; }
.tile--lib { grid-column: 5 / 10; }
.tile--rest { grid-column: 10 / 13; }

/* 01: de som, zoals de app hem rekent. */
.sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-top: auto; }
.sum__n { display: block; font: 800 clamp(64px, 7.2vw, 124px)/.8 var(--display); font-variant-numeric: tabular-nums; }
.sum__n small { font-size: .3em; margin-left: .12em; color: var(--mute); }
.sum__part--total .sum__n { color: var(--gold); }
.sum__l { display: block; margin-top: 14px; font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.sum__op { font: 800 clamp(40px, 4vw, 64px)/1 var(--display); color: var(--mute); padding-bottom: 38px; }
.sum__foot {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line);
  font: 700 15px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.sum__foot b { color: var(--ink); font-weight: 700; }

/* 02: de enige telefoon op de pagina, onderaan uit de tegel gesneden. */
.tile__ph {
  --w: clamp(240px, 28vw, 360px);
  --edge: inset 0 0 0 calc(var(--w) * .006) #5a5853, inset 0 0 0 calc(var(--w) * .012) #111;
  position: relative; align-self: center; margin-top: auto; margin-bottom: calc(var(--w) * -.14);
  box-shadow: var(--edge), 0 30px 60px -10px rgba(0, 0, 0, .7);
}

/* 03: de 1RM-lijn uit Progress, met de echte punten van Aug 4 tot Sep 22. */
.chart { margin-top: auto; }
.chart__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.chart__lab { display: block; margin-bottom: 10px; font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.chart__n { font: 800 clamp(56px, 5.6vw, 84px)/.85 var(--display); font-variant-numeric: tabular-nums; }
.chart__n small { font-size: .32em; margin-left: .12em; color: var(--mute); }
.chart__delta { font: 700 18px/1 var(--cond); letter-spacing: .04em; color: var(--gold); white-space: nowrap; }
.chart__plot { position: relative; margin-top: 24px; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid line { stroke: rgba(240, 238, 232, .08); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart__dot {
  position: absolute; left: 98.333%; top: 27.727%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(227, 178, 60, .22);
}
.chart__x { display: flex; justify-content: space-between; margin-top: 12px; font: 700 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* 04: de PR-kaart, iets gekanteld en over de onderrand: hij is iets dat je deelt, geen paneel. */
.prc {
  align-self: flex-start; width: min(100%, 340px); margin: auto 0 -64px 8px; padding: 26px 26px 88px;
  border-radius: 22px; border: 1px solid rgba(227, 178, 60, .4);
  background: radial-gradient(120% 90% at 100% 0%, rgba(227, 178, 60, .16), transparent 60%), #0f0f0f;
  transform: rotate(-3deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.prc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prc__tag { padding: 7px 11px; border-radius: 999px; background: rgba(227, 178, 60, .14); color: var(--gold); font: 700 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.prc__brand { font: 700 13px/1 var(--cond); letter-spacing: .3em; text-transform: uppercase; }
.prc__lift { display: block; margin-top: 34px; font: 700 17px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.prc__n { display: block; margin-top: 10px; font: 800 112px/.82 var(--display); color: var(--gold); }
.prc__n small { font-size: .3em; vertical-align: top; margin-left: .08em; }
.prc__sub { display: block; margin-top: 18px; font: 600 26px/1 var(--body); }

/* 05: pathways, elke balk vult tot waar je staat. */
.paths { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 22px; }
.paths li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
.paths__name { font: 700 18px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.paths__next { font: 700 18px/1 var(--cond); color: var(--gold); }
.paths__bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: rgba(240, 238, 232, .1); overflow: hidden; }
.paths__bar::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: var(--gold); transform-origin: left; transform: scaleX(var(--f)); }
.paths__ticks { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 700 13px/1 var(--cond); letter-spacing: .06em; color: var(--mute); }
.paths__ticks i { font-style: normal; }

/* 06: de spierkaart uit de gids, randen weggevaagd in de tegel. */
.tile__art { width: 100%; -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 44%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 70% 72% at 50% 44%, #000 50%, transparent 100%); }
.tile--muscles .tile__text { padding: 0 36px 36px; margin-top: -24px; }

/* 07 en 08 */
.lib__n { font: 800 clamp(96px, 9.6vw, 150px)/.8 var(--display); color: var(--gold); margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.rest { margin-top: auto; }
.rest__lab { display: block; font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.rest__t { display: block; margin-top: 10px; font: 800 clamp(80px, 7.6vw, 116px)/.82 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.rest__btns { display: flex; gap: 8px; margin-top: 22px; }

/* Beweging, met een budget (ronde 1 liet elke tegel apart inkomen en dat was te veel):
   1. Een tegelgroep ([data-in], de hele .bento) komt één keer binnen, als geheel. Nooit per tegel.
   2. Daarbinnen beweegt alleen data die iets vertelt ([data-play]: de lijn, de balken), en maximaal
      één daarvan per schermhoogte. Tegels zelf bewegen daarna nooit meer.
   Alles hangt aan html.js-motion, dat het script alleen zet zonder reduced motion. Zonder JS staat
   alles dus gewoon in de eindstand. */
.js-motion [data-in] { transition: opacity .8s, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js-motion [data-in]:not(.is-in) { opacity: 0; transform: translateY(20px); }
.js-motion [data-play] .chart__line { transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .2s; }
.js-motion [data-play]:not(.is-in) .chart__line { stroke-dashoffset: 1; }
.js-motion [data-play] :is(.chart__area, .chart__dot) { transition: opacity .6s 1.5s; }
.js-motion [data-play]:not(.is-in) :is(.chart__area, .chart__dot) { opacity: 0; }
.js-motion [data-play] .paths__bar::after { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .2s; }
.js-motion [data-play] .paths li:nth-child(2) .paths__bar::after { transition-delay: .3s; }
.js-motion [data-play] .paths li:nth-child(3) .paths__bar::after { transition-delay: .4s; }
.js-motion [data-play] .paths li:nth-child(4) .paths__bar::after { transition-delay: .5s; }
.js-motion [data-play]:not(.is-in) .paths__bar::after { transform: scaleX(0); }

/* ---------- Gedeeld voor alle 2.4-pagina's: kop boven een groep, spans, onderdelen in een tegel ---------- */

.bento + .bento { padding-top: 0; }
.bento__head { grid-column: 1 / -1; padding: 40px 0 16px; }
.bento__head .sec__h { max-width: 16ch; }
.bento__head .sec__p { max-width: 44ch; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
.tile--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 48px; }
.tile--lift { background: #1c1c1c; border-color: rgba(227, 178, 60, .45); }
.tile .rows, .tile .qa, .tile .steps, .tile .nevers { border-top: 1px solid var(--line); }
.tile .row { grid-template-columns: 9em minmax(0, 1fr); }
.tile .qa p, .tile .row__v { font-size: 17px; }
.tile .btn { align-self: flex-start; }
.tile__foot { margin-top: auto; }
.big { font: 800 clamp(64px, 6.4vw, 104px)/.82 var(--display); font-variant-numeric: tabular-nums; }
.big small { font-size: .3em; margin-left: .1em; color: var(--mute); }
.big--gold { color: var(--gold); }
.lab { display: block; font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* Een beeld uit de app dat in de tegel wegvaagt (spierkaart, gids). */
.tile--art { padding: 0; gap: 0; }
.tile--art .tile__text { padding: 0 36px 36px; margin-top: -24px; }

/* De week uit het homescherm. */
.week { display: flex; justify-content: space-between; gap: 6px; margin-top: auto; }
.week i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(240, 238, 232, .18); display: grid; place-items: center; font-style: normal; font-size: 16px; color: var(--black); }
.week .is-done i { background: var(--gold); border-color: var(--gold); }
.week .is-today i { border-color: var(--ink); }
.week .is-today { color: var(--ink); }

/* Rankings: de som van de vier lifts. Geen verzonnen namen of plekken. */
.board { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--line); }
.board div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 18px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.board div span:last-child { color: var(--mute); }
.board .board__total { border-bottom: 0; padding-top: 18px; color: var(--gold); font-size: 22px; }
.board .board__total span:last-child { color: var(--gold); }
.scopes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pricing in tegels. */
.tile--plan { gap: 28px; }
.tile--plan .plan__tag { position: static; align-self: flex-start; }
.tile--plan .plan__per { margin-top: 12px; }
.tile--plan > p:last-child { font-size: 17px; line-height: 1.5; color: var(--mute); padding-top: 20px; border-top: 1px solid var(--line); margin-top: auto; }
.tile--plan > p:last-child b { color: var(--ink); font-weight: 600; }
.tile--lift { transform: translateY(-16px); }
.trial { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.trial::before { content: ''; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--gold) 0 66%, rgba(240, 238, 232, .14) 66%); }
.trial li { position: relative; padding-top: 34px; }
.trial li::before { content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
.trial li:last-child::before { background: #161616; border: 2px solid rgba(240, 238, 232, .4); }
.trial b { display: block; font: 800 34px/.95 var(--display); text-transform: uppercase; }
.trial span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--mute); max-width: 30ch; }
.bento .cur__menu { background: #1c1c1c; border-color: rgba(240, 238, 232, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.bento .cur__opt:hover { background: rgba(240, 238, 232, .06); }

/* Support: de rekensom achter de schatting. */
.calc { margin-top: auto; font: 800 clamp(30px, 2.6vw, 40px)/1.1 var(--display); text-transform: uppercase; }
.calc b { color: var(--gold); font-weight: 800; }
.calc .lab { margin-bottom: 14px; }
.path3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; font: 700 20px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.path3 span { padding: 12px 16px; border-radius: 12px; background: rgba(240, 238, 232, .08); }
.path3 i { font-style: normal; color: var(--gold); }

/* Privacy: waar het staat. */
.where { font: 800 clamp(40px, 3.6vw, 56px)/.9 var(--display); text-transform: uppercase; color: var(--gold); }
.tile .nevers li { font-size: clamp(26px, 2.4vw, 34px); }

@media (max-width: 1080px) {
  .tile--load, .tile--chart { grid-column: 1 / 8; }
  .tile--phone { grid-column: 8 / 13; }
  .tile--pr, .tile--muscles { grid-column: 1 / 7; }
  .tile--path, .tile--lib { grid-column: 7 / 13; }
  .tile--rest { grid-column: 1 / 13; flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
@media (max-width: 820px) {
  .phead--tight { padding-bottom: 40px; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 72px; }
  .bento .tile { grid-column: 1; grid-row: auto; flex-direction: column; align-items: stretch; padding: 28px 22px; border-radius: 22px; gap: 30px; }
  .bento .tile--phone { padding-bottom: 0; max-height: 640px; }
  .tile__ph { --w: 250px; }
  .bento .tile--muscles { padding: 0; gap: 0; }
  .tile--muscles .tile__text { padding: 0 22px 28px; }
  .sum { gap: 10px 14px; }
  .sum__n { font-size: 52px; }
  .sum__op { font-size: 34px; padding-bottom: 32px; }
  .sum__foot { flex-direction: column; gap: 8px; }
  .chart__top { flex-direction: column; align-items: flex-start; }
  .prc { width: min(100%, 300px); }
  .prc__n { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-in], [data-play] *, [data-play] *::after { transition: none !important; }
}

/* Ritme tussen groepen: na een wit vlak eerst lucht, tussen twee groepen minder dan onderaan. */
.sec + .bento { padding-top: 96px; }
.bento:has(+ .bento) { padding-bottom: 40px; }
.bento__note { grid-column: 1 / -1; padding: 0 4px 24px; }
.bento__note .plans__note { margin-top: 12px; }
.price2 { display: flex; align-items: flex-end; gap: 40px; flex-shrink: 0; }
.price2 .lab { margin-top: 12px; }

@media (max-width: 1080px) {
  .span-3 { grid-column: span 4; }
  .tile--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
  .sec + .bento { padding-top: 64px; }
  .bento:has(+ .bento) { padding-bottom: 28px; }
  .bento__head { padding: 24px 0 8px; }
  .bento .tile--art { padding: 0; gap: 0; }
  .tile--art .tile__text { padding: 0 22px 28px; }
  .tile--lift { transform: none; }
  .tile .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .trial { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .trial::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold) 0 66%, rgba(240, 238, 232, .14) 66%); }
  .trial li { padding: 0 0 28px 36px; }
  .trial li:last-child { padding-bottom: 0; }
  .price2 { flex-wrap: wrap; gap: 20px 32px; }
  .price2 .btn { width: 100%; justify-content: center; }
  .week i { width: 30px; height: 30px; }
  .where { font-size: 44px; }
}

/* Twee kolommen in één tegel: uitleg links, feiten rechts. */
.tile--split { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.nw { white-space: nowrap; }
@media (max-width: 820px) {
  .bento .tile--split { display: flex; }
}

/* ---------- 2.4 ronde 3: wat eruitziet als een knop, is er een ----------
   Chips, scopes, de weekstrook, de rusttimer, de belt-stepper en de gids-schakelaar deden
   niets, terwijl ze eruitzien als de app. Nu zijn het echte knoppen met echte gevolgen
   (js/motion.js). Eén reset, dan per onderdeel alleen wat anders is. */
.chips button, .scopes button, .week button, .rest__btns button, .stepper button, .seg button {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font: 700 15px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); transition: color .2s, border-color .2s, background-color .2s; }
.chips button:hover { color: var(--ink); border-color: rgba(240, 238, 232, .3); }
.chips .is-on, .chips .is-on:hover { border-color: var(--gold); color: var(--gold); background: rgba(227, 178, 60, .1); }
.lib__n { transition: opacity .15s; }
.lib__n.is-swap { opacity: .25; }

.scopes button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font: 700 14px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); transition: color .2s, border-color .2s; }
.scopes button:hover { color: var(--ink); }
.scopes .is-on, .scopes .is-on:hover { border-color: var(--gold); color: var(--gold); background: rgba(227, 178, 60, .1); }
.board__basis { margin-top: 14px; font-size: 16px; color: var(--ink); }

.week button { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 40px; padding: 4px 0; font: 700 12px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.week button:hover i { border-color: rgba(240, 238, 232, .45); }
.week .is-done i::after { content: '\2713'; }
.week .is-today { color: var(--ink); }

.rest__btns button { min-height: 44px; padding: 0 14px; border-radius: 10px; background: rgba(240, 238, 232, .08); font: 700 15px/1 var(--cond); transition: background-color .2s; }
.rest__btns button:hover { background: rgba(240, 238, 232, .16); }
.rest__btns .is-on, .rest__btns .is-on:hover { background: var(--gold); color: var(--black); }

.stepper { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.stepper .sum__l { margin: 0; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; background: rgba(240, 238, 232, .08); font: 700 22px/1 var(--body); transition: background-color .2s; }
.stepper button:hover { background: rgba(240, 238, 232, .16); }
.stepper button:disabled { opacity: .3; cursor: default; }

/* De gids: één tegel, de schakelaar uit de app als echte knop, beide beelden erachter. */
.guide { position: relative; padding-top: 68px; }
.seg { position: absolute; z-index: 1; left: 50%; top: 20px; transform: translateX(-50%); display: flex; padding: 4px; border-radius: 999px; background: rgba(14, 14, 14, .8); border: 1px solid var(--line); }
.seg button { min-height: 40px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 var(--cond); letter-spacing: .04em; color: var(--mute); transition: color .2s, background-color .2s; }
.seg button:hover { color: var(--ink); }
.seg .is-on, .seg .is-on:hover { background: rgba(227, 178, 60, .16); color: var(--gold); }
.tile--guide .tile__art { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.tile--guide .tile__text { margin-top: -8px; }

/* De echte PR-kaart uit de app, met de golflijnen. Kantelt mee met de muis. */
.prc--img {
  padding: 0; border: 0; background: none; border-radius: 20px;
  width: min(100%, 330px); margin: auto 0 -48px 8px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-3deg);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform;
}
.prc--img.is-tilting { transition: transform .08s linear; }

/* Voet: de dubbele navigatie is weg (de kolommen eronder hebben dezelfde links). */
.foot__tag { margin-left: auto; max-width: 30ch; text-align: right; font-size: 16px; line-height: 1.4; color: var(--mute); }

/* Support: het pad in Instellingen is een pad, geen rij knoppen. */
.path3 span { padding: 0; background: none; border-radius: 0; }
.path3 i { font-size: 26px; }

@media (max-width: 820px) {
  .foot__tag { display: none; }
  .seg { top: 14px; }
  .prc--img { margin-bottom: -40px; }
}
@media (prefers-reduced-motion: reduce) {
  .prc--img { transition: none; }
}

/* De voorbeelden onder de chips: echte namen uit de seed, ze wisselen mee met de chip. */
.libx { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line); }
.libx li { padding: 13px 0; border-bottom: 1px solid var(--line); font: 700 20px/1.1 var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.tile--lib .libx + .chips { margin-top: 0; }
/* De rusttijd mag groot: in die smalle tegel is hij het beeld. */
.tile--rest .rest__t { font-size: clamp(96px, 9.4vw, 150px); }
@media (max-width: 820px) {
  /* De som past op 390 niet op een regel: het totaal krijgt een eigen regel onder een lijn,
     en het losse = verdwijnt, want het zou anders alleen aan het eind van regel een hangen. */
  .sum > span.sum__op:nth-of-type(2) { display: none; }
  .sum__part--total { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
}


/* ---------- 2.6 ronde 1: type. Caps en het display-font blijven alleen in de hero en op getallen.
   Alle andere koppen in Barlow, gewone zinnen, kleiner. De genummerde labels boven secties gaan weg:
   de kop draagt de sectie zelf. Staat onderaan zodat hij de mobiele regels erboven ook overschrijft. ---------- */
.idx { display: none; }
.sec__h, .item__h, .tile__h, .close__h, .phead__h1, .fact h3, .nevers li, .trial b, .calc, .where, .mail {
  font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: -.02em; line-height: 1.06;
}
.sec__h, .tile__h { font-size: clamp(32px, 3.4vw, 50px); max-width: 18ch; }
.phead__h1, .close__h { font-size: clamp(38px, 4.2vw, 62px); max-width: 16ch; letter-spacing: -.025em; }
.item__h, .fact h3 { font-size: clamp(22px, 1.8vw, 28px); max-width: 20ch; }
.nevers li, .calc, .trial b { font-size: clamp(22px, 2vw, 30px); }
.where { font-size: clamp(30px, 2.8vw, 42px); }
.mail { font-size: clamp(24px, 3.2vw, 44px); }

/* ---------- 2.6 ronde 2: grond. Eén zwarte grond van boven tot onder. De witte vlakken (som en afsluiter)
   worden zwart en de kaarten verliezen hun vulling en rand: secties scheiden met een hairline en lucht. ---------- */
.sec--light, .close { --ink: #f0eee8; --mute: #9a978f; --line: rgba(240, 238, 232, .12); background: var(--black); color: var(--ink); color-scheme: dark; }
.sec + .sec, .sec + .shelf, .shelf, .bento, .close, .blk { border-top: 1px solid rgba(240, 238, 232, .12); }
.tile { background: none; border: 0; border-radius: 0; padding: 48px 0; }
.bento { gap: 0 24px; }

/* ---------- 2.6 ronde 3: beeld. Eén materiaal voor elk toestel op de site: het CSS-frame om een echt
   screenshot. De 3D-renders van 2.5 gaan van de homepage; het toestel staat recht op de onderrand van
   zijn sectie en loopt uit in de grond, net als in de subpaginakop en de app-rij. ---------- */
.shot { align-self: end; padding: 96px 0 0; width: auto; }
.shot .duo { margin-top: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.shot .duo--solo { height: calc(var(--w) * 1.2); }
@media (max-width: 820px) {
  .shot, .sec--flip .shot { width: fit-content; justify-self: center; padding: 40px 0 0; }
}

/* ---------- 2.6 ronde 4: nav en voet. De nav wordt een smalle balk: klein merk, links in gewone letters,
   een kleine pil. De voet is één regel links plus de kleine lettertjes; de tweede downloadknop en de
   kolomkoppen vallen weg, de afsluiter erboven heeft de badge al. ---------- */
.nav__inner { height: 68px; gap: 32px; }
.brand__mark { height: 19px; }
.brand__word { font-size: 23px; }
.nav__links { gap: 28px; }
.nav__links a { font: 500 15px/1 var(--body); letter-spacing: 0; text-transform: none; color: #c9c6bf; }
.nav__links a:hover { opacity: 1; color: #f0eee8; }
.nav__links a, .foot__nav a { padding: 14.5px 0; margin: -14.5px 0; }
.nav__links b { font-weight: 500; }
.pill { height: 38px; padding: 0 18px; font: 600 15px/1 var(--body); letter-spacing: 0; text-transform: none; }

.foot { padding: 0 var(--pad) 32px; }
.foot__top { height: 96px; }
.foot__top .pill, .foot__tag, .foot__col h3 { display: none; }
.foot__grid { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 28px 0 40px; }
.foot__col { display: contents; }
.foot__col a { font-size: 15px; padding: 12px 0; }
.foot__col--contact a:first-of-type { margin-left: auto; }
.foot__legal { border-top: 0; padding-top: 0; font-size: 13px; }
@media (max-width: 820px) {
  .brand__word { font-size: 21px; }
  .foot__grid { gap: 0 22px; }
  .foot__col--contact a:first-of-type { margin-left: 0; }
}

/* ---------- 2.6 ronde 6: uitlijning. Geen onderdelen meer die naar de onderrand van een rij springen
   waardoor koppen op wisselende hoogtes staan en er gaten vallen naast hogere buren. ---------- */
/* Onderrij features: elke tegel begint met zijn kop, het bewegende deel zit onderaan. */
.tile--lib .tile__text { display: contents; }
.tile--lib .tile__h { order: 1; }
.tile--lib .tile__p { order: 2; }
.tile--lib .lib__n { order: 3; margin: auto 0 0; }
.tile--lib .chips { order: 4; margin-top: 0; }
@media (min-width: 821px) {
  /* Tegel 02: de telefoon staat direct onder de tekst in plaats van onderaan een tegel van twee rijen. */
  .tile--phone .tile__ph { margin-top: 0; }
  /* Gids: tekst boven, beeld eronder, zodat de kop op dezelfde hoogte staat als zijn buren. */
  .tile--muscles { flex-direction: column-reverse; justify-content: flex-end; }
  .tile--muscles .tile__text { padding: 0; margin-top: 0; }
  .tile--muscles .guide { margin-top: 0; }
}
/* Support en privacy: de rekensom, het pad en de kolomtekst volgen hun kop, ze zakken niet naar de rand. */
.tile .calc, .tile .path3, .tile .where + .tile__foot { margin-top: 0; }
/* Pricing: het label hangt in de hoek, de drie plannen staan op één basislijn met gelijke lijn en tekst. */
.tile--plan { position: relative; }
.tile--plan .plan__tag { position: absolute; top: 48px; right: 0; }
.tile--lift { transform: none; }
.tile--plan > p:last-child { margin-top: 0; }
/* Slotblok boven de afsluiter: de tegel heeft zelf al 48px, de bento hoeft er geen 120 bij. */
.bento:has(+ .close) { padding-bottom: 0; }
@media (max-width: 820px) {
  .tile--plan .plan__tag { position: static; align-self: flex-start; }
}
/* h3 had the browser margin (h1, h2 and p are reset at the top, h3 was not): it pushed the guide heading 49px down. */
.tile__h { margin: 0; }

/* ---------- 2.6 ronde 7: twee witte vlakken voor contrast (Ayden, 3 okt). Home: de som 75 + 30 = 105.
   Features: de afsluiter met telefoon. Verder blijft alles zwart. Wit is --white, inkt zwart, hairlines
   zwart met lage dekking, goud alleen als lijn of in een donkere variant (AA op wit). ---------- */
.sec--sum, .close--light {
  --ink: #0e1113; --mute: #5c5a55; --line: rgba(14, 14, 14, .14);
  background: var(--white); color: var(--ink); color-scheme: light; border-top: 0;
}
.sec--sum + .shelf { border-top: 0; }
.sec--sum .eq__total i { color: #8a6410; }
.sec--sum .eq__total b, .close--light .fine { color: var(--ink); }
/* Telefoon op wit: zelfde frame, schaduw veel lichter zodat er geen zwarte vlek onder staat. */
.sec--sum .ph, .close--light .ph {
  --edge: inset 0 0 0 calc(var(--w) * .006) #4a4844, inset 0 0 0 calc(var(--w) * .012) #111;
  box-shadow: var(--edge), 0 2px 6px rgba(0, 0, 0, .14), 14px 24px 40px -14px rgba(0, 0, 0, .22);
}