/* Chipn, promotiesite. Zelfde uitgangspunt als de app: het Material 3-palet
   uit src/theme/material-colors.json, geen externe fonts of CDN's. De site
   maakt nul netwerkaanroepen naar derden, net als de app. */

:root {
  --primary: #006a68;
  --on-primary: #ffffff;
  --primary-container: #9ef2ef;
  --ink: #191c1c;
  --muted: #3f4948;
  --bg: #fafdfc;
  --surface: #ffffff;
  --surface-alt: #e9efee;
  --border: #d5dbda;
  --accent-gold: #d9a521;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4ddad6;
    --on-primary: #003737;
    --primary-container: #004f4d;
    --ink: #e0e3e2;
    --muted: #a5adac;
    --bg: #121414;
    --surface: #1b1e1e;
    --surface-alt: #222626;
    --border: #343a39;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* height: auto is nodig omdat de screenshots width/height-attributen dragen
   (tegen layout shift): zonder deze regel blijft het height-attribuut gelden
   terwijl max-width de breedte krimpt, en rekt het beeld uit. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }

/* --- Kop --- */
header.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
/* Het merk eerst: icoon plus naam, als link naar de startpagina. */
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.3rem; color: var(--ink); text-decoration: none;
}
.brand img { width: 36px; height: 36px; border-radius: 9px; }

/* --- Taalmenu: CSS-only dropdown via <details>, vlaggen als lokale SVG's
   (emoji-vlaggen tonen op Windows alleen letters). --- */
details.lang { position: relative; }
details.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; color: var(--primary);
  padding: .45rem .95rem; border: 1px solid var(--border); border-radius: 999px;
}
details.lang summary::-webkit-details-marker { display: none; }
details.lang summary::after { content: "▾"; font-size: .75em; opacity: .7; }
details.lang nav {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10;
  min-width: 11.5rem; display: grid;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; padding: .4rem;
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .4);
}
details.lang nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: .7rem;
  text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink);
}
details.lang nav a:hover { background: var(--surface-alt); }
details.lang nav a[aria-current="true"] { color: var(--primary); }
img.flag {
  display: inline-block; vertical-align: middle;
  width: 30px; height: 20px; flex-shrink: 0; border-radius: 4px; box-shadow: 0 0 0 1px var(--border);
}

/* --- Taalhint: een onopvallende pil onderaan met één link naar de pagina in
   de taal van de browser. Bewust géén automatische doorverwijzing: die stuurde
   ook Google (dat met Engelse browsertaal kijkt) van de Nederlandse
   hoofdpagina weg, en een gedeelde link landde bij een Franstalige op een
   andere pagina dan de verzender bedoelde. Vast onderaan, dus geen
   verschuiving van de inhoud na het laden. --- */
.lang-hint {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 20; max-width: calc(100% - 2rem);
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .45rem .5rem .45rem 1rem;
  padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .4);
  font-size: .95rem;
}
.lang-hint a { font-weight: 600; white-space: nowrap; }
.lang-hint button {
  width: 2rem; height: 2rem; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface-alt); color: var(--muted); font: inherit; font-size: 1.1rem; line-height: 1;
}
.lang-hint button:hover { color: var(--ink); }

/* --- Hero --- */
.hero {
  display: grid; gap: 2.5rem; align-items: center;
  padding: 2.5rem 0 3.5rem;
}
@media (min-width: 820px) { .hero { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.1; margin: 0 0 1rem; font-weight: 700; }
.hero h1 .beat { color: var(--primary); }
.hero h1 .beat.strong { font-weight: 900; }
.hero p.sub { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.75rem; max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  border-radius: 999px; padding: .85rem 1.6rem; font-size: 1.05rem;
}
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.ghost { color: var(--primary); border: 2px solid var(--primary); }
.soon { font-size: .9rem; color: var(--muted); margin-top: 1rem; }

/* --- Telefoonkaders --- */
.phone {
  border-radius: 2rem; overflow: hidden;
  border: 6px solid #1c1f1e;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .35);
  background: #1c1f1e;
  max-width: 300px;
}
.hero .phone { justify-self: center; }

/* --- Stappen --- */
section { padding: 3rem 0; }
section h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .5rem; }
section p.lead { color: var(--muted); max-width: 40rem; margin: 0 0 2rem; }
.steps { display: grid; gap: 2rem; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: 1.5rem; padding: 1.5rem; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-weight: 800;
  margin-bottom: .8rem;
}
.step h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.step p { margin: 0 0 1.2rem; color: var(--muted); font-size: .98rem; }
.step .phone { margin: 0 auto; max-width: 230px; }

/* Stap 1: de papieren bon schuin naast de telefoon, het ding dat je scant. */
.scan-pair { position: relative; max-width: 230px; margin: 0 auto; }
.scan-pair .paper {
  position: absolute; z-index: 2; width: 48%;
  left: -14%; bottom: -4%;
  transform: rotate(-7deg);
  border-radius: .5rem;
  border: 1px solid var(--border);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .35);
}

/* --- Functies --- */
.features { display: grid; gap: 1rem; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .features { grid-template-columns: 1fr 1fr 1fr; } }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.25rem 1.4rem; }
.feature .emoji { font-size: 1.6rem; }
.feature h3 { margin: .5rem 0 .3rem; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }

/* --- Veelgestelde vragen: inklapbaar met <details>. De antwoorden staan
   gewoon in de HTML, dus zoekmachines lezen ze ook dichtgeklapt. --- */
.faq { display: grid; gap: 1rem; align-items: start; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: 0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 1.25rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: -.3rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: .3rem; }
.faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.faq-item h3 { margin: 0; font-size: 1.05rem; }
.faq-item p { margin: 0; padding: 0 1.4rem 1.25rem; color: var(--muted); font-size: .95rem; }

/* --- Demobonnen ---
   Vier voorbeeldbonnen om de app mee uit te proberen. Op een groot scherm
   naast elkaar, op een telefoon onder elkaar, waar ze meteen te scannen zijn
   met een tweede toestel. */
.demos { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .demos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .demos { grid-template-columns: repeat(4, 1fr); } }
.demo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 1rem 1rem 1.25rem;
  display: flex; flex-direction: column;
}
/* De bon zelf: op wit, met een randje, zodat hij als papier oogt en niet als
   een vlak dat in de kaart opgaat. Vaste verhouding, want de bonnen
   verschillen in lengte en de kaarten horen op één lijn te staan; de
   onderkant van de langste bon valt dan weg, en dat is precies waar de
   voettekst staat. */
.demo a.sheet {
  display: block; border-radius: .75rem; overflow: hidden;
  border: 1px solid var(--border); background: #ffffff;
  aspect-ratio: 620 / 700;
}
.demo a.sheet img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo h3 { margin: .9rem 0 .25rem; font-size: 1rem; }
.demo p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
/* Duwt de regel met aantal en bedrag naar de onderkant van de kaart. */
.demo .meta { margin-top: auto; padding-top: .6rem; font-size: .85rem; color: var(--primary); font-weight: 600; }

/* --- Privacyband --- */
.privacy {
  background: var(--primary); color: var(--on-primary);
  border-radius: 2rem; padding: 2.5rem 2rem; text-align: center;
}
.privacy h2 { color: inherit; }
.privacy p { max-width: 38rem; margin: .75rem auto 1.5rem; opacity: .92; }
.privacy a.btn { background: var(--on-primary); color: var(--primary); }

/* --- Tester --- */
.tester { text-align: center; }
.tester p.lead { margin-left: auto; margin-right: auto; }

/* --- Testerformulier --- */
form.tester-form {
  max-width: 30rem; margin: 0 auto; text-align: left;
  display: grid; gap: 1rem;
}
form.tester-form label { font-weight: 600; font-size: .95rem; display: grid; gap: .35rem; }
form.tester-form input,
form.tester-form select,
form.tester-form textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: .8rem; padding: .7rem .9rem;
}
form.tester-form textarea { min-height: 6.5rem; resize: vertical; }
form.tester-form input:focus,
form.tester-form select:focus,
form.tester-form textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }
form.tester-form .btn { border: none; cursor: pointer; justify-self: center; }
.form-note { font-size: .85rem; color: var(--muted); text-align: center; margin-top: 1.25rem; }

/* --- Documentpagina's (privacybeleid): één leesbare kolom. --- */
.doc { max-width: 44rem; margin: 0 auto; padding: 2rem 0 4rem; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.6rem); line-height: 1.15; margin: 0 0 .25rem; }
.doc-date { color: var(--muted); margin: 0 0 2rem; }
.doc h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.doc p, .doc li { color: var(--ink); }
.doc li { margin: .3rem 0; }
.doc .table-scroll { overflow-x: auto; margin: 1rem 0; }
.doc table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .6rem .5rem; border-bottom: 1px solid var(--border); }
.doc th { color: var(--muted); font-weight: 600; }

/* --- Voet --- */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0 3rem; margin-top: 2rem;
  color: var(--muted); font-size: .95rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }