/* Bestemmingspagina's (/to/<app>/) — statisch, buiten de React-bundel.
   Tokens zijn letterlijk src/styles/global.css (donkere landingsnorm);
   gedupliceerd met opzet, net als public/styles.css dat voor de lichte
   pagina's doet: deze pagina's delen niets met de bundel-build.
   Ontwerpbron: Paper, artboard "Site · /to/ template — Notion". */

:root {
  --ground: #131110;
  --text: #f7f4f0;
  --text-secondary: rgba(247, 244, 240, 0.55);
  --text-soft: rgba(247, 244, 240, 0.65);
  --text-muted: rgba(247, 244, 240, 0.45);
  --text-dim: rgba(247, 244, 240, 0.34);
  --text-placeholder: rgba(247, 244, 240, 0.3);
  --hairline: rgba(247, 244, 240, 0.1);
  --hairline-input: rgba(247, 244, 240, 0.18);
  --accent: #fe4b1b;
  --fill-button: #f7f4f0;
  --font: "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sticky footer. Elke statische pagina heeft dezelfde opbouw: header,
   main, voettekst. Door body de viewport te laten vullen en main de
   rest te laten opeisen, staat de voettekst altijd onderaan het scherm
   in plaats van halverwege te zweven op een korte pagina (/writing met
   één bericht liet dat zien). Op lange pagina's verandert er niets. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `.wrap` staat op `margin: 0 auto`, en een flex-item met auto-marges in
   de dwarsrichting rekt niet mee maar krimpt naar zijn inhoud — dat
   plakte de nav in het midden aan elkaar. Expliciet 100% breed maken
   herstelt de oude geometrie; `.wrap` centreert daarbinnen zoals altijd
   via zijn eigen max-width. */
body > * {
  width: 100%;
}

body > main {
  flex: 1 0 auto;
}

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

button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}

.section {
  padding-top: clamp(48px, 6.8vw, 96px);
  padding-bottom: clamp(48px, 6.8vw, 96px);
}

.section-kop {
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--fill-button);
  color: var(--ground);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.btn-fill:hover {
  opacity: 0.9;
}

.btn-fill:disabled {
  background: rgba(247, 244, 240, 0.12);
  color: rgba(247, 244, 240, 0.4);
  cursor: default;
}

.btn-fill:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Navigatie en voettekst: /chrome.css (kopie van src/chrome/chrome.css,
   geschreven door tools/chrome.mjs), zodat ze op elke pagina dezelfde zijn
   als op de homepage. */

/* Hero — kop links, aankomstbewijs rechts. */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.5vw, 80px);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(48px, 6.8vw, 96px);
}

.hero-kopblok {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kruimelpad {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  padding-bottom: 24px;
}

.kruimelpad a:hover {
  color: var(--text);
}

.kruimelpad .hier {
  color: var(--text);
}

.hero-kop {
  display: flex;
  flex-direction: column;
  font-size: clamp(30px, 3.9vw, 56px);
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -0.036em;
}

.hero-kop-dim {
  color: rgba(247, 244, 240, 0.4);
}

.hero-sub {
  max-width: 520px;
  padding-top: 24px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.statusregel {
  max-width: 520px;
  padding-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

.hero-formulier {
  padding-top: 32px;
}

.waitlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.waitlist-cel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(480px, 100%);
  height: 64px;
  padding: 6px 6px 6px 20px;
  border-radius: 15px;
  border: 1px solid var(--hairline-input);
}

.waitlist-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.waitlist-input::placeholder {
  color: var(--text-dim);
}

.waitlist-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.waitlist-success {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  padding: 20px 0;
}

.waitlist-error {
  font-size: 14px;
  color: var(--accent);
}



.hero-noot {
  padding-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

.hero-vormen {
  display: flex;
  gap: 28px;
  list-style: none;
  padding-top: 28px;
  font-size: 14px;
  color: var(--text-soft);
}

.hero-vormen li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Het toestel uit de homepage-hero, statisch in de eindtoestand met
   de bestemmingschip op deze app. Waarden letterlijk uit
   src/styles/sections.css (.phone en verder). */
.hero-toestel {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.phone {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 640px;
  border-radius: 40px;
  border: 1px solid rgba(247, 244, 240, 0.16);
  background: #171412;
  overflow: hidden;
  padding-top: 18px;
}

.phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 22px;
}

.phone-merk {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent);
  overflow: hidden;
}

.phone-top-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.phone-veld {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  padding: 20px 22px 12px;
  min-height: 0;
}

.phone-invoer {
  display: block;
  max-width: 236px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.026em;
}

.phone-caret {
  display: inline-block;
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: -4px;
  animation: caret-blink 1.1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .phone-caret {
    animation: none;
  }
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.phone-placeholder {
  color: var(--text-placeholder);
  margin-left: 2px;
}

.phone-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.phone-status svg {
  flex-shrink: 0;
}

.phone-balk {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 62px;
  padding: 0 14px 8px;
}

.phone-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(247, 244, 240, 0.14);
  flex-shrink: 0;
}

.phone-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(247, 244, 240, 0.14);
  font-size: 13px;
  font-weight: 500;
  margin-left: auto;
}

.phone-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent);
  flex-shrink: 0;
}

.phone-keys {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 7px 3px 0;
  background: #1a1714;
}

.phone-keyrow {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 0 3px;
}

.phone-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 33px;
  border-radius: 4px;
  background: #35302c;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 17px;
  color: #f6f3ef;
}

.phone-key-special {
  background: #25211e;
  width: 32px;
  font-size: 13px;
}

.phone-key-wide {
  width: 52px;
  font-size: 12px;
}

.phone-key-space {
  flex: 1;
}

.phone-home {
  display: flex;
  justify-content: center;
  padding: 10px 0 7px;
}

.phone-home::after {
  content: "";
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: #f6f3ef;
}

/* Wat er landt — kop links, haarlijnrijen rechts. */
.landt {
  display: flex;
  gap: clamp(48px, 6.6vw, 96px);
}

.landt-kopblok {
  width: clamp(240px, 33vw, 480px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landt-kopblok p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.landt-rijen {
  flex: 1;
  min-width: 0;
}

.landt-rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
}

.landt-rij:last-child {
  border-bottom: 1px solid var(--hairline);
}

.landt-rij dt {
  width: 176px;
  flex-shrink: 0;
}

.landt-rij dd {
  color: var(--text-secondary);
  text-align: right;
}

/* De lange weg — twee kolommen met een haarlijn ertussen. */
.vergelijking {
  display: flex;
  gap: clamp(32px, 4.4vw, 64px);
  padding-top: 40px;
}

.vergelijking-kolom {
  flex: 1;
  min-width: 0;
}

.vergelijking-kolom + .vergelijking-kolom {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(32px, 4.4vw, 64px);
}

.vergelijking-kolom h3 {
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 8px;
}

.stappen {
  list-style: none;
}

.stappen li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  color: var(--text-soft);
}

.stappen li:first-child {
  border-top: 0;
}

.stappen .nummer {
  width: 16px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Questions — kop links, uitklaprijen rechts. */
.vragen {
  display: flex;
  gap: clamp(48px, 6.6vw, 96px);
}

.vragen .section-kop {
  width: clamp(200px, 25vw, 360px);
  flex-shrink: 0;
}

.vragen-lijst {
  flex: 1;
  min-width: 0;
}

.vraag {
  border-top: 1px solid var(--hairline);
}

.vraag:last-child {
  border-bottom: 1px solid var(--hairline);
}

.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
}

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

.vraag summary::after {
  content: "+";
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.vraag[open] summary {
  font-weight: 500;
  color: var(--text);
}

.vraag[open] summary::after {
  content: "\2212";
}

.vraag-antwoord {
  max-width: 600px;
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Meer bestemmingen — witte logo-tegels, zoals Koppelingen A in Paper. */
.meer-kopregel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.meer-teller {
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tegelrij {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 40px;
}

.tegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 112px;
  font-size: 14px;
  color: var(--text-soft);
  text-align: center;
}

.tegel:hover {
  color: var(--text);
}

.tegel-vlak {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tegel-vlak img,
.tegel-vlak svg {
  width: 56px;
  height: 56px;
}

.tegel-vlak.stil {
  background: rgba(247, 244, 240, 0.06);
}

/* Afsluiter — merkteken, grote kop, formulier. */
.afsluiter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.afsluiter .merkteken {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  background: var(--accent);
  overflow: hidden;
}

.afsluiter-kop {
  display: flex;
  flex-direction: column;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.036em;
  line-height: 1.15;
}


.afsluiter .waitlist {
  align-items: center;
}

.afsluiter-noot {
  font-size: 13px;
  color: var(--text-dim);
}

/* Hub (/to/) */
.hub-intro {
  max-width: 620px;
  padding-top: 24px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Het zoekfilter en de tegels verbergen via [hidden]; expliciet omdat
   .tegel en .groep hun eigen display zetten en die anders wint. */
[hidden] {
  display: none !important;
}

/* Zoekregel op de hub: veld met vergrootglas links, teller rechts. */
.zoekregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
}

.zoekcel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(480px, 100%);
  height: 56px;
  padding: 0 20px;
  border-radius: 15px;
  border: 1px solid var(--hairline-input);
  cursor: text;
}

.zoekcel svg {
  flex-shrink: 0;
}

.zoekcel:focus-within {
  border-color: rgba(247, 244, 240, 0.35);
}

.zoekveld {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.zoekveld::placeholder {
  color: var(--text-dim);
}

.zoekteller {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Cataloguswand op de hub: groepen met logo-tegels. Alleen tegels met
   een eigen /to/-pagina zijn een link (naam wit, klein oranje pijltje);
   de rest staat er zonder doorklik met een gedempte naam. */
.groep {
  padding-top: 24px;
  padding-bottom: 40px;
}

.groep-kop {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.groep .tegelrij {
  padding-top: 28px;
}

.tegel-naam {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

a.tegel .tegel-naam {
  color: var(--text);
}

.tegel-stil {
  cursor: default;
}

.tegel-stil .tegel-naam {
  color: var(--text-muted);
}

.tegel-stil:hover {
  color: var(--text-muted);
}

/* Het kaartgrid: vier kolommen met Composio-stijl kaarten — logo,
   naam en één zin beschrijving. Zonder logo een initiaal in het
   witte vlak. Ontwerpbron: Paper-artboard "Site · /to/ overzicht —
   cards". */
/* De kop-sectie van de hub eindigt strak op het grid: zonder deze
   twee regels stapelt de sectie-padding (96px) op de grid-padding en
   zit er ruim 160px lucht tussen zoekbalk en kaarten, waar het
   Paper-artboard 40px heeft. */
.hub-kop {
  padding-bottom: 0;
}

.kaartgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 16px;
}

.kaart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  min-width: 0;
}

a.kaart:hover {
  border-color: rgba(247, 244, 240, 0.28);
}

.kaart-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  flex-shrink: 0;
}

.kaart-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.kaart-logo.initiaal {
  color: #1f1b17;
  font-size: 16px;
  font-weight: 500;
}

.kaart-naam {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.kaart-tekst {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .kaartgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Op mobiel dezelfde dichtheid als de chipwand op de homepage:
   kleinere logovlakken en compactere kaarten, twee kolommen; onder
   480px vervalt de beschrijving zodat de wand scanbaar blijft. */
@media (max-width: 800px) {
  .kaartgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .kaart {
    padding: 14px;
    gap: 10px;
  }

  .kaart-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .kaart-logo img {
    width: 20px;
    height: 20px;
  }

  .kaart-logo.initiaal {
    font-size: 14px;
  }

  .kaart-naam {
    font-size: 15px;
  }

  .kaart-tekst {
    font-size: 13px;
    line-height: 18px;
  }
}

@media (max-width: 480px) {
  .kaart-tekst {
    display: none;
  }
}

.groep-noot {
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 560px;
}

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-toestel {
    width: 100%;
    padding-top: 8px;
  }

  .landt,
  .vragen {
    flex-direction: column;
    gap: 32px;
  }

  .landt-kopblok,
  .vragen .section-kop {
    width: 100%;
  }

  .vergelijking {
    flex-direction: column;
    gap: 32px;
  }

  .vergelijking-kolom + .vergelijking-kolom {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: 32px;
  }

  .landt-rij {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .landt-rij dd {
    text-align: left;
  }

  /* Kleinere logo-tegels in "one stop on the route", in lijn met de
     dichtheid van de homepage op mobiel. */
  .tegelrij {
    gap: 16px;
  }

  .tegel {
    width: 76px;
    font-size: 13px;
    gap: 10px;
  }

  .tegel-vlak {
    width: 76px;
    height: 76px;
    border-radius: 19px;
  }

  .tegel-vlak img,
  .tegel-vlak svg {
    width: 38px;
    height: 38px;
  }
}