@font-face {
  font-family: "Cal Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/CalSans-Regular.ttf") format("truetype");
}

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cal Sans", var(--font-body);
  --room: #ffffff;
  --beige: #fff3e7;
  --purple: #6c5cff;
  --purple-deep: #4c3fd5;
  --title: #1c1840;
  --ebony: #2b2742;
  --muted: #756f78;
  --low: #c3c6cc;
  --blue: #72c8fe;
  --rose: #fce3d9;
  --shadow-soft: 0 24px 80px rgba(28, 24, 64, 0.14);
  --shadow-purple: 0 18px 46px rgba(108, 92, 255, 0.32);
  --section-radius: clamp(38px, 7vw, 72px);
  --card-radius: 20px;
  --button-radius: 10px;
  --page: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--title);
}

body {
  margin: 0;
  background: var(--title);
  color: var(--title);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a,
input {
  font: inherit;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  /* woordmerk | navigatie | taal | App Store. De taalschakelaar is een vierde
     kolom geworden; hij blijft ook op mobiel staan, want juist daar landt de
     expat-bezoeker die naar EN moet kunnen. */
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px var(--page) 0;
  color: #ffffff;
  transform: translateY(0);
  transition: transform 900ms var(--ease-out), color 300ms ease;
}

.site-header.is-hidden {
  transform: translateY(-120%);
}

.site-header.on-light {
  color: var(--title);
}

.wordmark {
  justify-self: start;
  position: relative;
  width: 83px;
  height: 30px;
  text-decoration: none;
}

.logo {
  position: absolute;
  inset: 0;
  width: 83px;
  height: 30px;
  transition: opacity 240ms ease;
}

.logo-dark {
  opacity: 0;
}

.site-header.on-light .logo-light {
  opacity: 0;
}

.site-header.on-light .logo-dark {
  opacity: 1;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px);
  transition: background 300ms ease, border-color 300ms ease;
}

/* NL | EN in de paginakop. Heette BEWUST niet .lang-switch: die naam was ooit
   bezet door een tweede schakelaar in de BODY van /support, /privacy en /terms,
   en die regel stond later in dit bestand — hij won dus, inclusief zijn
   `margin-bottom: 40px`, waardoor deze schakelaar naar de bovenrand van de
   header werd geduwd. Die tweede schakelaar is er niet meer (elke pagina heeft
   nu dezelfde header), maar de naam blijft: hernoemen levert niets op.

   Geen automatische omleiding: die zou een bewuste keuze overrulen en Google
   een redirect voorschotelen waar een hreflang-paar hoort. */
.site-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Zelfde padding als .nav-pill, en de links hieronder hetzelfde min-height:
     de twee pillen staan naast elkaar, dus een verschil van tien pixels leest
     als scheef, ook al delen ze hun middellijn. */
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  transition: background 300ms ease, border-color 300ms ease;
}

.site-header.on-light .site-lang {
  border-color: rgba(28, 24, 64, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

.site-lang a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.62;
  transition: background 200ms ease, opacity 200ms ease;
}

.site-lang a:hover {
  opacity: 1;
}

.site-lang a.is-current {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.site-header.on-light .site-lang a.is-current {
  background: rgba(28, 24, 64, 0.09);
}

.site-header.on-light .nav-pill {
  border-color: rgba(28, 24, 64, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 44px rgba(28, 24, 64, 0.1);
}

.nav-pill a,
.nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 22px;
  color: currentColor;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.9;
  transition: background 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.nav-pill a:hover,
.nav-cta:hover {
  background: rgba(255, 255, 255, 0.13);
  opacity: 1;
  transform: translateY(-1px);
}

.site-header.on-light .nav-pill a:hover,
.site-header.on-light .nav-cta:hover {
  background: rgba(108, 92, 255, 0.1);
}

.nav-cta {
  justify-self: end;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.nav-cta img {
  width: 128px;
  height: auto;
}

.site-header.on-light .nav-cta {
  background: transparent;
}

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--title);
  color: #ffffff;
  text-align: center;
}

.hero-media,
.hero-vignette,
.closing-media::after {
  position: absolute;
  inset: 0;
}

.hero-media img,
.closing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 44%;
}

.hero-media img {
  object-position: 64% 40%;
}

.hero-media img {
  filter: saturate(0.84) contrast(0.98);
  transform: scale(1.04);
  transition: transform 1200ms var(--ease-out);
}

.hero-vignette {
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 24, 64, 0.14) 0%, rgba(28, 24, 64, 0.48) 58%, rgba(28, 24, 64, 0.78) 100%),
    linear-gradient(0deg, rgba(28, 24, 64, 0.72) 0%, rgba(28, 24, 64, 0.18) 42%, rgba(28, 24, 64, 0.2) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 40px));
  padding-top: 64px;
}

.eyebrow,
.section-kicker,
.section-label,
.card-kicker {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  margin-bottom: 22px;
  font-size: clamp(48px, 7.6vw, 108px);
  line-height: 0.92;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Hero heading: smaller so long Dutch words stay whole instead of hyphenating. */
.hero h1 {
  margin-bottom: 20px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  hyphens: manual;
}

.hero-copy p:not(.eyebrow) {
  width: min(650px, 100%);
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.42;
}

.hero-button,
.app-store-badge {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 28px;
  background: #ffffff;
  color: var(--title);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease;
}

.app-store-badge {
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.app-store-badge img {
  width: 178px;
  height: auto;
}

.hero-note {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 700;
}

.hero-button:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  right: var(--page);
  bottom: 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.content-shell {
  position: relative;
  z-index: 5;
  margin-top: -1px;
  padding-top: clamp(44px, 6vw, 80px);
  border-radius: var(--section-radius) var(--section-radius) 0 0;
  background: var(--room);
  color: var(--title);
  overflow: hidden;
}

.split-section {
  display: grid;
  grid-template-columns: 0.28fr 0.9fr 0.7fr;
  gap: clamp(24px, 5vw, 74px);
  align-items: start;
  padding: clamp(56px, 9vw, 120px) var(--page) clamp(56px, 9vw, 110px);
}

.section-label,
.section-kicker {
  color: var(--purple);
}

.split-copy h2,
.feature-intro h2,
.how-copy h2,
.faq-heading h2,
.closing-copy h2 {
  margin-bottom: 0;
  font-size: clamp(46px, 6.7vw, 104px);
  line-height: 0.94;
}

.split-text p,
.how-copy p,
.faq-heading,
.closing-copy p {
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}

.principle-stage {
  min-height: 620px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  padding: 0 var(--page) clamp(88px, 12vw, 150px);
}

.principle-card,
.feature-card,
.phone-frame,
.truth-band,
details {
  border: 1px solid rgba(28, 24, 64, 0.08);
  box-shadow: var(--shadow-soft);
}

.principle-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border-radius: var(--card-radius);
  background: var(--beige);
}

.principle-card:nth-child(2) {
  min-height: 480px;
  background: var(--purple);
  color: #ffffff;
  transform: translateY(-42px);
}

.principle-card:nth-child(2) .card-kicker,
.principle-card:nth-child(2) p {
  color: rgba(255, 255, 255, 0.74);
}

.principle-card:nth-child(3) {
  background: linear-gradient(145deg, #f1f8ff 0%, rgba(114, 200, 254, 0.42) 100%);
  transform: translateY(34px);
}

.card-kicker {
  color: var(--purple);
}

.principle-card h3 {
  max-width: 320px;
  margin-bottom: 22px;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 0.98;
}

.principle-card p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.app-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(560px, 1.22fr);
  gap: clamp(34px, 7vw, 90px);
  align-items: center;
  padding: clamp(80px, 11vw, 150px) var(--page);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
}

.app-showcase-copy {
  max-width: 620px;
}

.app-showcase-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(42px, 5.8vw, 86px);
  line-height: 0.96;
}

.app-showcase-copy p:not(.section-kicker) {
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
}

.screenshot-wall {
  position: relative;
  min-height: 760px;
}

.app-screen {
  position: absolute;
  width: min(260px, 34vw);
  margin: 0;
  padding: 10px;
  border-radius: 34px;
  background: var(--title);
  box-shadow: 0 28px 80px rgba(28, 24, 64, 0.22);
}

.app-screen img {
  width: 100%;
  border-radius: 25px;
}

.app-screen figcaption {
  padding: 12px 8px 4px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.screen-home {
  top: 0;
  left: 12%;
  transform: rotate(-4deg);
  z-index: 3;
}

.screen-voices {
  top: 108px;
  right: 4%;
  transform: rotate(5deg);
  z-index: 2;
}

.screen-new {
  left: 34%;
  bottom: 0;
  transform: rotate(-1deg);
  z-index: 4;
}

.mascot-card {
  position: absolute;
  left: 0;
  bottom: 74px;
  z-index: 5;
  width: clamp(150px, 18vw, 240px);
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 243, 231, 0.9);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.brand-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px rgba(28, 24, 64, 0.12));
}

.shape-heart {
  top: 72px;
  right: 38%;
  width: 54px;
  transform: rotate(-10deg);
}

.shape-star {
  right: 0;
  bottom: 160px;
  width: 62px;
  transform: rotate(12deg);
}

.shape-diamond {
  left: 8%;
  top: 54%;
  width: 74px;
  transform: rotate(10deg);
}

.feature-stack {
  padding: clamp(80px, 10vw, 130px) var(--page);
  background: var(--beige);
}

.feature-intro {
  max-width: 880px;
  margin-bottom: clamp(34px, 7vw, 82px);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature-card {
  min-height: 315px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border-radius: var(--card-radius);
  background: #ffffff;
}

.feature-card:nth-child(2) {
  border-color: rgba(114, 200, 254, 0.42);
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
}

.feature-card:nth-child(2) .feature-num {
  color: #2e93c9;
}

.feature-card:nth-child(2) .icon-badge {
  background: rgba(114, 200, 254, 0.2);
  color: #2e93c9;
}

.feature-card:nth-child(3) {
  background: var(--beige);
}

.feature-card .feature-num {
  color: var(--purple);
  font-weight: 700;
}

.feature-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-card h3 {
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1.02;
}

.feature-card p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.how-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: center;
  padding: clamp(90px, 12vw, 160px) var(--page);
}

.how-copy {
  max-width: 780px;
}

.how-copy h2 {
  margin-bottom: 24px;
}

.phone-scene {
  min-height: 650px;
  display: grid;
  place-items: center;
}

.phone-frame {
  width: min(390px, 100%);
  min-height: 590px;
  padding: 22px;
  border: 10px solid var(--title);
  border-radius: 48px;
  background:
    radial-gradient(circle at 84% 15%, rgba(114, 200, 254, 0.5), transparent 24%),
    radial-gradient(circle at 12% 74%, rgba(108, 92, 255, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, var(--beige) 100%);
}

.phone-status {
  width: 74px;
  height: 12px;
  margin: 0 auto 46px;
  border-radius: 999px;
  background: rgba(28, 24, 64, 0.12);
}

.app-title {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 36px;
}

.story-cover {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: 24px;
  background: var(--purple);
  color: #ffffff;
}

.story-cover p {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.story-cover h3 {
  margin: 0;
  font-size: 62px;
}

.story-cover button {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
}

.story-cover button::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 23px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--purple);
}

.mini-player {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--title);
  color: #ffffff;
}

.mini-player span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue);
}

.mini-player p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truth-band {
  margin: 0 var(--page);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 5vw, 56px);
  border-radius: var(--section-radius);
  background: var(--title);
  color: #ffffff;
}

.truth-band p {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: clamp(54px, 8vw, 124px);
  line-height: 0.9;
}

.truth-band span {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 20px;
  line-height: 1.45;
}

.faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.9fr);
  gap: clamp(40px, 8vw, 110px);
  padding: clamp(84px, 12vw, 150px) var(--page);
}

.faq-heading h2 {
  margin-bottom: 20px;
  font-size: clamp(42px, 5.4vw, 74px);
}

.faq-list {
  display: grid;
  gap: 12px;
}

details {
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 24px;
  color: var(--title);
  font-weight: 700;
}

summary::-webkit-details-marker {
  display: none;
}

details p {
  margin: -4px 24px 24px;
  color: var(--muted);
  line-height: 1.45;
}

.closing {
  position: relative;
  z-index: 2;
  min-height: calc(100svh + var(--section-radius));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: calc(var(--section-radius) * -1);
  padding: calc(var(--section-radius) + 94px) var(--page) 28px;
  overflow: hidden;
  background: var(--title);
  color: #ffffff;
}

.closing-media {
  position: absolute;
  inset: 0;
  opacity: 0.34;
}

.closing-media::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(28, 24, 64, 0.98), rgba(28, 24, 64, 0.58)),
    linear-gradient(0deg, rgba(28, 24, 64, 0.92), rgba(28, 24, 64, 0.14));
}

.closing-copy {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.closing-copy h2 {
  margin-bottom: 24px;
  color: #ffffff;
}

.closing-copy p {
  max-width: 520px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.74);
}

.closing-copy .app-store-badge img {
  width: 190px;
}

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
}

.site-footer img {
  width: 83px;
  height: 30px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* De horizontale tussenruimte blijft 20px; verticaal iets ruimer, want de
     links staan met de nieuwe raakvlakhoogte anders tegen elkaar aan zodra ze
     op een smal scherm afbreken. */
  gap: 4px 20px;
}

.footer-links a {
  /* Waren 17px hoog — te krap voor een duim. Met deze regel haalt elke link
     een raakvlak van 34px zonder dat de voettekst zelf verspringt. */
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  opacity: 0.86;
  transition: opacity 200ms ease;
}

.footer-links a:hover {
  opacity: 1;
}

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Storytelling sections (landing-page layout in the Heare look & feel)
   Hero stats, card grids, dark free-story band, voice section.
--------------------------------------------------------------------------- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 40px);
  margin-top: 32px;
}

.hero-stat {
  text-align: center;
}

.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  color: #ffffff;
}

.hero-stat span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 600;
}

.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.24);
}

/* Generic band wrapper + centered intro */
.band {
  padding: clamp(72px, 10vw, 130px) var(--page);
}

.band-beige {
  background: var(--beige);
}

.band-moments {
  padding-top: 0;
}

.band-intro {
  max-width: 820px;
  margin: 0 auto clamp(34px, 6vw, 70px);
  text-align: center;
}

.band-intro h2 {
  margin-bottom: 18px;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.96;
}

.band-intro p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
}

/* Card grids (moments, trust, use-cases) */
.card-grid {
  display: grid;
  gap: 16px;
}

.card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid rgba(28, 24, 64, 0.08);
  border-radius: var(--card-radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.info-card .card-kicker {
  margin: 0;
}

.info-card h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.02;
}

.info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.info-card--beige {
  background: var(--beige);
}

.info-card--blue {
  border-color: rgba(114, 200, 254, 0.42);
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
}

/* Dark "first story is free" band */
.free-band {
  --free-pad: clamp(44px, 7vw, 86px);
  display: grid;
  /* Eén kolom: de verhalenrij moet de volle breedte van de band hebben. In een
     halve kolom paste er niets van de bibliotheek in, en juist de lengte van die
     rij is het argument. */
  grid-template-columns: 1fr;
  gap: clamp(34px, 6vw, 56px);
  align-items: center;
  margin: 0 var(--page) clamp(72px, 10vw, 130px);
  padding: var(--free-pad);
  border-radius: var(--section-radius);
  background: linear-gradient(145deg, var(--title) 0%, #2a245c 100%);
  color: #ffffff;
  overflow: hidden;
}

.free-band .section-kicker {
  color: rgba(255, 255, 255, 0.5);
}

.free-band h2 {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.96;
}

.free-band .free-copy > p {
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
}

.free-band .app-store-badge {
  /* Ook de badge op een eigen regel, anders bepaalt de tekstregel eromheen zijn
     verticale positie en gaat de uitlijning van het hele blok zwemmen. */
  display: inline-flex;
  vertical-align: top;
}

.free-band .app-store-badge img {
  width: 178px;
}

.free-band .free-note {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
}

/* De verhalenrij in de gratis-band. script.js vult hem bij het laden met de
   echte catalogus (catalog-list); de HTML bevat drie ECHTE verhalen als
   fallback, zodat er ook zonder netwerk niets verzonnen op het scherm staat.
   Bewust geen play-knop: hier valt niets af te spelen — je vraagt iemand het
   voor te lezen. */
.story-row-wrap {
  min-width: 0;
}

.story-row-lead {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.story-row {
  display: flex;
  gap: 14px;
  /* Bloedt tot de rand van de band en scrollt daar door: de rij hoort breder te
     zijn dan het scherm — dat is precies de boodschap. */
  margin: 0 calc(-1 * var(--free-pad));
  padding: 4px var(--free-pad) 12px;
  overflow-x: auto;
  /* GEEN scroll-snap. Met snap ging de rij bij het laden uit zichzelf naar
     scrollLeft 86 staan, en snapte hij opnieuw bij elke layoutwijziging — de
     reveal-animatie van 900ms, een cover die inlaadt, een hover. Dat was het
     flikkeren op desktop. Een posterrij hoort ook niet te snappen; vrij
     scrollen is hier het juiste gedrag. */
  overscroll-behavior-x: contain;
  /* Expliciet dicht: `overflow-x: auto` zet overflow-y volgens spec óók op
     auto, dus alles wat ook maar iets buiten de tegel valt (een schaduw, een
     opgetilde cover) haalt een verticale scrollbar tevoorschijn en laat de rij
     springen. Niets in deze rij mag naar buiten treden. */
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.story-row::-webkit-scrollbar {
  height: 6px;
}

.story-row::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
}

.story-tile {
  display: block;
  width: 132px;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.story-tile__cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  /* Inset, nooit outset: een slagschaduw zou buiten de tegel vallen en daarmee
     de scrollbar terugroepen die hierboven net is dichtgezet. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.25s ease;
}

.story-tile__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}

.story-tile__time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  /* Dekkend in plaats van backdrop-filter: zeventien blur-lagen in een
     scrollcontainer is puur compositiewerk zonder zichtbaar verschil. */
  background: rgba(20, 17, 48, 0.86);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.story-tile__title {
  display: block;
  margin-top: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

/* De hover blijft binnen de tegel: de afbeelding schaalt achter een
   overflow:hidden cover, en de rand licht op. Niets verplaatst zich, dus de
   muis kan de tegel niet onder zichzelf vandaan zien schuiven. */
.story-tile:hover .story-tile__cover,
.story-tile:focus-visible .story-tile__cover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.story-tile:hover .story-tile__cover img,
.story-tile:focus-visible .story-tile__cover img {
  transform: scale(1.06);
}

.story-row-category {
  align-self: center;
  flex: 0 0 auto;
  width: 1px;
  height: 96px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.14);
}

/* De tweede weg naar binnen: niet iedereen heeft een iPhone, en de webrecorder
   is een blijvende ingang — die hoort dus ook op de pagina te staan. */
.free-web-link {
  /* Op een eigen regel ONDER de App Store-badge, links uitgelijnd met de rest
     van het blok. Inline-block liet hem naast de badge staan, waar hij als een
     bijschrift bij de knop las in plaats van als het tweede pad naar binnen.
     `width: fit-content` houdt de onderstreping bij de tekst. */
  display: block;
  width: fit-content;
  margin-top: 18px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 4px;
}

.free-web-link:hover {
  text-decoration-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .story-tile__cover,
  .story-tile__cover img {
    transition: none;
  }

  .story-tile:hover .story-tile__cover img {
    transform: none;
  }
}

/* "Wat een stem doet" two-column section */
.voice-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
  padding: clamp(80px, 10vw, 140px) var(--page);
}

.voice-copy h2 {
  margin-bottom: 22px;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 0.96;
}

.voice-copy > p {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}

.voice-quote {
  margin: 28px 0 0;
  padding: 26px 30px;
  border-left: 4px solid var(--purple);
  border-radius: 0 16px 16px 0;
  background: var(--beige);
}

.voice-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  color: var(--title);
}

.voice-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}

.voice-details {
  display: grid;
  gap: 14px;
}

.voice-detail {
  padding: 24px 28px;
  border: 1px solid rgba(28, 24, 64, 0.08);
  border-radius: var(--card-radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.voice-detail h3 {
  margin-bottom: 6px;
  font-size: 24px;
  line-height: 1.05;
}

.voice-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Icons + decorative illustrations
   Brand-toned line icons (via the SVG sprite) and supporting imagery.
--------------------------------------------------------------------------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: rgba(108, 92, 255, 0.12);
  color: var(--purple);
}

.card-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info-card .icon-badge {
  margin-bottom: 2px;
}

.info-card--blue .icon-badge {
  background: rgba(114, 200, 254, 0.22);
  color: #2e93c9;
}

.voice-detail .icon-badge {
  margin-bottom: 14px;
  background: var(--beige);
}

/* Inset photo for "Het moment" */
.moment-figure {
  grid-column: 1 / -1;
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.moment-figure img {
  width: 100%;
  height: clamp(220px, 30vw, 360px);
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
}

.moment-figure figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* Photo tucked under the three how-it-works steps */
.feature-figure {
  position: relative;
  z-index: 1;
  margin-top: clamp(34px, 6vw, 70px);
}

.feature-figure img {
  height: clamp(240px, 34vw, 420px);
  object-position: 50% 42%;
}

/* Standing mascot tucked into the dark quote band */
.truth-band {
  position: relative;
  overflow: hidden;
}

.truth-mascot {
  position: absolute;
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(-6px, 1vw, 12px);
  width: clamp(110px, 16vw, 210px);
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* Decorative brand shapes inside the feature band */
.feature-stack {
  position: relative;
  overflow: hidden;
}

.section-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(28, 24, 64, 0.12));
}

.section-shape--1 {
  top: clamp(20px, 4vw, 48px);
  right: 6%;
  width: clamp(38px, 5vw, 60px);
  transform: rotate(12deg);
}

.section-shape--2 {
  bottom: 8%;
  left: 4%;
  width: clamp(34px, 4.5vw, 54px);
  transform: rotate(-14deg);
}

.feature-intro,
.feature-grid {
  position: relative;
  z-index: 1;
}

/* App-design gallery */
.app-gallery {
  padding: clamp(72px, 10vw, 130px) var(--page);
  background: var(--beige);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.gallery-phone {
  margin: 0;
  padding: 10px;
  border-radius: 30px;
  background: var(--title);
  box-shadow: 0 24px 60px rgba(28, 24, 64, 0.2);
}

.gallery-phone img {
  width: 100%;
  border-radius: 22px;
}

.gallery-phone figcaption {
  padding: 12px 8px 4px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 980px) {
  .free-band,
  .voice-section {
    grid-template-columns: 1fr;
  }

  .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-stat-divider {
    display: none;
  }
}

@media (max-width: 640px) {
  .card-grid--2,
  .card-grid--4 {
    grid-template-columns: 1fr;
  }

  .band {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .voice-section {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .free-band {
    --free-pad: 24px;
    padding: 36px var(--free-pad);
  }

  .truth-mascot {
    width: 96px;
    right: 14px;
    bottom: 14px;
    opacity: 0.92;
  }

  .band-intro h2,
  .free-band h2,
  .voice-copy h2 {
    font-size: clamp(40px, 12vw, 58px);
  }
}

/* ---------------------------------------------------------------------------
   Sub-pages: /support, /privacy, /terms
   Light, readable document pages that reuse the brand palette and type.
--------------------------------------------------------------------------- */
.subpage {
  background: var(--room);
  color: var(--title);
}

.doc-main {
  width: min(820px, calc(100% - 2 * var(--page)));
  margin: 0 auto;
  /* Bovenin ruimte voor `.site-header`, die vast staat en dus over de inhoud
     zou vallen. Op de homepage vangt de hero dat op; hier is er niets. */
  padding: clamp(114px, 13vw, 160px) 0 clamp(64px, 9vw, 110px);
}

.doc-hero {
  margin-bottom: clamp(36px, 6vw, 64px);
}

.doc-hero .eyebrow {
  color: var(--purple);
}

.doc-hero h1 {
  margin-bottom: 18px;
  /* Ondergrens 32 en niet 40: op 375px past "Lievelingsverhalen," niet op één
     regel bij 40px, en dan grijpt `overflow-wrap: break-word` in en zet de komma
     los op de volgende regel. Zelfde reden waarom `.hero h1` een lagere
     ondergrens heeft dan de gewone h1. */
  font-size: clamp(32px, 7vw, 76px);
  line-height: 0.96;
  /* Zelfde reden als bij `.hero h1`: lange Nederlandse woorden mogen niet
     afgebroken worden in een kop. "voorgelezen door ie-mand" leest als een fout. */
  hyphens: manual;
}

.doc-hero .doc-lead {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
}

.doc-meta {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}

body:has(#en:target) .doc-hero {
  display: none;
}

.doc-body > section[lang="en"] {
  display: none;
}

.doc-body:has(> #en:target) > section[lang="nl"] {
  display: none;
}

.doc-body:has(> #en:target) > section[lang="en"] {
  display: block;
}

.doc-body:has(> #nl:target) > section[lang="nl"] {
  display: block;
}

.doc-body:has(> #nl:target) > section[lang="en"] {
  display: none;
}

.doc-body h2 {
  margin: clamp(40px, 6vw, 64px) 0 16px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  scroll-margin-top: 90px;
}

.doc-body h3 {
  margin: 32px 0 12px;
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.15;
}

.doc-body p,
.doc-body li {
  color: var(--ebony);
  font-size: 17px;
  line-height: 1.62;
}

.doc-body p {
  margin: 0 0 16px;
}

.doc-body ul,
.doc-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.doc-body li {
  margin-bottom: 8px;
}

.doc-body a {
  color: var(--purple-deep);
  font-weight: 600;
  text-underline-offset: 3px;
}

.doc-body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--beige);
  font-size: 0.92em;
}

.doc-body hr {
  margin: clamp(48px, 7vw, 72px) 0;
  border: 0;
  border-top: 1px solid rgba(28, 24, 64, 0.12);
}

.doc-table-wrap {
  margin: 0 0 22px;
  overflow-x: auto;
}

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.doc-body th,
.doc-body td {
  padding: 12px 16px;
  border: 1px solid rgba(28, 24, 64, 0.1);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.doc-body th {
  background: var(--beige);
  color: var(--title);
  font-weight: 700;
}

.fill {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(108, 92, 255, 0.12);
  color: var(--purple-deep);
  font-size: 0.9em;
  font-weight: 600;
}

/* Support page */
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: clamp(48px, 7vw, 80px);
}

.support-card {
  padding: 28px;
  border: 1px solid rgba(28, 24, 64, 0.08);
  border-radius: var(--card-radius);
  background: var(--beige);
  box-shadow: var(--shadow-soft);
}

.support-card:nth-child(2) {
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
  border-color: rgba(114, 200, 254, 0.42);
}

.support-card h3 {
  margin-bottom: 10px;
  font-size: 26px;
  line-height: 1.05;
}

.support-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.support-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.support-card a {
  color: var(--purple-deep);
  font-weight: 600;
}

.support-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 4px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--purple);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
  transition: transform 220ms var(--ease-out);
}

.support-cta:hover {
  transform: translateY(-2px);
}

.faq-block {
  margin-top: clamp(40px, 6vw, 64px);
}

.faq-block h2 {
  margin-bottom: 8px;
  font-size: clamp(32px, 4.4vw, 52px);
}

.faq-block > p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
}

.doc-footer {
  padding: 40px var(--page);
  border-top: 1px solid rgba(28, 24, 64, 0.08);
  background: var(--title);
  color: rgba(255, 255, 255, 0.7);
}

.doc-footer-inner {
  width: min(820px, calc(100% - 2 * var(--page)));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
}

.doc-footer-inner img {
  width: 83px;
  height: 30px;
}

.doc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.doc-footer a {
  color: inherit;
  text-decoration: none;
  opacity: 0.86;
}

.doc-footer a:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .support-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 10px;
  }

  .nav-pill {
    display: none;
  }

  .site-lang a {
    padding: 0 9px;
  }

  .split-section,
  .how-section,
  .faq-section {
    grid-template-columns: 1fr;
  }

  .principle-stage,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .principle-stage {
    min-height: 0;
  }

  .principle-card,
  .principle-card:nth-child(2),
  .principle-card:nth-child(3) {
    min-height: 280px;
    transform: none;
  }

  .app-showcase {
    grid-template-columns: 1fr;
  }

  .screenshot-wall {
    min-height: 980px;
  }

  .app-screen {
    width: min(250px, 48vw);
  }

  .screen-home {
    left: 4%;
  }

  .screen-voices {
    right: 4%;
  }

  .screen-new {
    left: 28%;
  }

  .phone-scene {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-top: 16px;
  }

  .wordmark {
    font-size: 29px;
  }

  .nav-cta {
    min-height: 40px;
    padding: 0 16px;
  }

  .hero {
    place-items: end center;
    text-align: left;
  }

  .hero-media img {
    object-position: 68% 42%;
  }

  .hero-vignette {
    background:
      linear-gradient(0deg, rgba(28, 24, 64, 0.95) 0%, rgba(28, 24, 64, 0.7) 50%, rgba(28, 24, 64, 0.08) 100%),
      linear-gradient(90deg, rgba(28, 24, 64, 0.38), rgba(28, 24, 64, 0));
  }

  .hero-copy {
    width: 100%;
    padding: 120px var(--page) 76px;
  }

  h1 {
    font-size: clamp(38px, 10.6vw, 45px);
    line-height: 0.98;
  }

  .hero h1 {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.04;
  }

  .hero-copy p:not(.eyebrow) {
    margin-left: 0;
    font-size: 17px;
  }

  .hero-button {
    width: 100%;
  }

  .scroll-cue {
    display: none;
  }

  .split-section,
  .feature-stack,
  .how-section,
  .faq-section {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .split-copy h2,
  .feature-intro h2,
  .how-copy h2,
  .closing-copy h2 {
    font-size: clamp(44px, 12vw, 62px);
  }

  .principle-stage {
    padding-bottom: 66px;
  }

  .app-showcase {
    padding-top: 66px;
    padding-bottom: 82px;
  }

  .screenshot-wall {
    min-height: 1060px;
  }

  .app-screen {
    width: min(255px, 72vw);
    border-radius: 30px;
  }

  .screen-home {
    top: 0;
    left: 0;
    transform: rotate(-3deg);
  }

  .screen-voices {
    top: 285px;
    right: 0;
    transform: rotate(4deg);
  }

  .screen-new {
    left: 10%;
    bottom: 0;
    transform: rotate(-2deg);
  }

  .mascot-card {
    left: auto;
    right: 0;
    bottom: 230px;
    width: 138px;
    padding: 12px;
  }

  .shape-heart {
    top: 30px;
    right: 12px;
  }

  .shape-star {
    right: 18px;
    bottom: 94px;
  }

  .shape-diamond {
    left: 0;
    top: 52%;
  }

  .truth-band {
    min-height: 360px;
  }

  .phone-frame {
    min-height: 540px;
    border-width: 8px;
    border-radius: 40px;
  }

  .site-footer {
    flex-direction: column;
  }
}

/* Perspagina — drie toevoegingen op de bestaande subpagina-opmaak. */
.press-steps {
  /* De supportpagina staat op twee kolommen; hier zijn het er drie, anders valt
     stap 3 alleen op een tweede rij. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.press-steps .support-card:nth-child(2) {
  /* De supportpagina zet de tweede kaart blauw om twee kaarten uit elkaar te
     houden. Hier staan er drie in een rij en is dat willekeur; alle drie beige. */
  background: var(--beige);
  border-color: rgba(28, 24, 64, 0.08);
}

.press-step-number {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--purple);
}

.press-quote {
  margin: 0 0 clamp(48px, 7vw, 80px);
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--card-radius);
  background: var(--beige);
}

.press-quote blockquote {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.25;
  color: var(--title);
}

.press-quote figcaption {
  color: var(--muted);
  font-size: 16px;
}

.press-download {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--button-radius);
  background: var(--purple);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
}

.press-download:hover {
  background: var(--purple-deep);
}

@media (max-width: 860px) {
  .press-steps {
    grid-template-columns: 1fr;
  }
}

/* Tweetalige tekstpagina's (support, privacy, terms): de taalschakelaar in de
   header wijst naar #nl en #en, en `:target` laat zien welke aan staat. Op de
   perspagina's staat `is-current` gewoon in de HTML — die zijn per taal een
   eigen bestand. */
.subpage:not(:has(#en:target)) .site-lang a[href="#nl"],
.subpage:has(#en:target) .site-lang a[href="#en"] {
  background: rgba(28, 24, 64, 0.09);
  opacity: 1;
}

/* ── Mobiel menu ──────────────────────────────────────────────────────────
   Boven 980px staat de gewone navigatiepil er; daaronder verdwijnt die, en
   zonder dit menu was er op een telefoon geen weg naar /press, /support,
   /privacy of /terms behalve tot de footer scrollen. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  color: currentColor;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.site-header.on-light .nav-toggle {
  border-color: rgba(28, 24, 64, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

.nav-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Twee streepjes worden een kruis. Een transform op het pad zelf, zodat er geen
   tweede icoon nodig is dat uit de pas kan lopen. */
.nav-toggle-top,
.nav-toggle-bottom {
  /* Expliciet, want de standaard is precies waar dit misging: bij een SVG valt
     `transform-origin: center` terug op het midden van de VIEWBOX (12,12) en
     niet op het midden van de lijn zelf. */
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 220ms var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-top {
  transform: rotate(45deg) translateY(4px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bottom {
  transform: rotate(-45deg) translateY(-4px);
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* Onder de header door, zodat het woordmerk en de sluitknop zichtbaar
     blijven: je moet altijd kunnen zien hoe je er weer uit komt. */
  padding: 96px var(--page) calc(32px + env(safe-area-inset-bottom));
  background: var(--room);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-menu[hidden] {
  display: none;
}

.site-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-menu-label {
  margin: 18px 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-menu-group {
  display: flex;
  flex-direction: column;
}

.site-menu-group a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid rgba(28, 24, 64, 0.08);
  color: var(--title);
  font-family: var(--font-display);
  font-size: 24px;
  text-decoration: none;
}

.site-menu-group a:last-child {
  border-bottom: 0;
}

.site-menu-cta {
  margin-top: 24px;
}

.site-menu-cta img {
  width: 178px;
  height: auto;
}

.nav-toggle:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

/* In het menu geen kader maar paarse tekst. Het kader viel op bij het OPENEN,
   want de focus sprong naar de eerste link; dat doet menu.js niet meer — die
   zet hem op het paneel zelf. Wie met een toetsenbord door de lijst loopt ziet
   nu een kleurwissel in plaats van een rand. */
.site-menu a:focus-visible {
  outline: none;
  color: var(--purple);
}

/* De pagina eronder mag niet meescrollen zolang het menu open staat. */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-top,
  .nav-toggle-bottom {
    transition: none;
  }
}

@media (max-width: 640px) {
  /* Drie kolommen passen niet naast elkaar; met flex-wrap werden het er twee
     plus een losse eronder, en dat leest als een fout. Onder elkaar dus, links
     uitgelijnd zoals al het andere in de hero, en compacter. */
  .hero-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 26px;
  }

  .hero-stat {
    text-align: left;
  }

  .hero-stat strong {
    font-size: 19px;
  }

  .hero-stat span {
    margin-top: 3px;
    font-size: 12px;
  }

  /* De bovenregel is lang; met minder spatiëring valt hij netter af. */
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  /* Ruimte voor de header, en wel HIER en niet op `.hero-copy`.

     De hero centreert zijn inhoud verticaal in 100svh. Past die inhoud ruim,
     dan valt hij vanzelf laag genoeg; wordt het scherm korter of de tekst
     langer, dan schuift het blok omhoog en kruipt de bovenregel onder de
     navigatie. Padding op de hero verkleint het vak waarbinnen gecentreerd
     wordt, dus dan is de afstand tot de header gegarandeerd — hoe hoog het
     scherm ook is. */
  .hero {
    padding-top: 140px;
  }

  .hero-copy {
    padding-top: 24px;
  }
}

@media (max-width: 980px) {
  /* De menuknop verschijnt precies waar de navigatiepil verdwijnt. */
  .nav-toggle {
    display: block;
  }

  /* En de App Store-knop gaat uit de header: die staat in de hero al, en op een
     telefoon stonden die twee tegelijk in beeld. In het menu staat hij ook. */
  .nav-cta {
    display: none;
  }
}

/* Zolang het menu openstaat is de achtergrond wit, ook op de homepage waar de
   header normaal wit-op-donker over de hero ligt. Zonder dit staat het witte
   woordmerk op een wit paneel en zie je niet meer hoe je eruit komt. Dezelfde
   omslag als `.on-light`, maar gestuurd door het menu in plaats van door de
   scrollpositie. */
html.menu-open .site-header {
  color: var(--title);
  transform: none;
}

html.menu-open .logo-light {
  opacity: 0;
}

html.menu-open .logo-dark {
  opacity: 1;
}

html.menu-open .site-lang,
html.menu-open .nav-toggle {
  border-color: rgba(28, 24, 64, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

html.menu-open .site-lang a.is-current {
  background: rgba(28, 24, 64, 0.09);
}