/* Tekst zoals sanalabs.com (27 okt, Lucas: "kijk hoe sana texten aanpakt, dat is hoe onze site er ook uit moet zien").
   Gemeten op 1440 px: kop 83 px gewicht 400, blokkop 48 px gewicht 500, tekst 16 px, smal en gecentreerd, één kleur.
   Wordt als laatste geladen op de home en /app, zodat het de oudere maten overschrijft. */

/* Hoofdkop: groot maar licht */
.k-display { font-size: clamp(44px, 5.8vw, 84px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; }
.k-hero .k-display { font-size: clamp(44px, 5.8vw, 84px); }

/* Blokkoppen: kleiner, medium, gecentreerd */
.fam h2, .k-chip, .k-dark h2, .teams-card h2, .hn-head h2, .final h2,
.app-rij-tekst h2, .app-feiten h2, .app-nodig h2, .k-deck h2 {
  font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em;
}
/* De kaartenstapel is smaller (2 nov, Lucas: "wat kleiner, niet zo breed"): kop iets kleiner, zodat hij op twee regels blijft */
.k-deck .k-chip { font-size: clamp(28px, 3vw, 42px); }
.mt-answer { font-weight: 400; letter-spacing: -.02em; }

/* Tussenkoppen: medium, niet vet */
.fam h3, .mt-points h3, .nw-card h3, .k-req-card h3, .app-drie h3 { font-weight: 500; letter-spacing: -.01em; }
.mt-points h3 { font-size: clamp(19px, 1.6vw, 22px); }

/* Lopende tekst: 16-17 px, smal, gecentreerd, één kleur */
.fam-risk, .mt-points p, .teams-card p, .app-deck-zin, .app-rij-tekst p, .k-req-card p {
  font-size: 16px; line-height: 1.45; letter-spacing: -.005em;
}
.ink-text { font-weight: 400; letter-spacing: -.02em; }

/* Functies op /app: tekst gecentreerd boven het scherm, zoals de blokken van Sana */
.app-rij { grid-template-columns: 1fr !important; justify-items: center; gap: clamp(28px, 3.5vw, 48px); }
.app-rij .app-rij-tekst { order: 0; text-align: center; max-width: 520px; }
.app-rij .app-paneel { order: 1; width: min(100%, 720px); }
.app-rij-tekst h2, .app-rij-tekst p { text-align: center; margin-left: auto; margin-right: auto; }
.app-rij-tekst p { margin-top: 12px; max-width: 30ch; color: var(--muted); }
.app-rij-tekst .app-ook { max-width: 42ch; font-size: 14px; }
.app-feiten h2, .app-nodig h2 { text-align: center; }

/* Home: punten en kaarten gecentreerd */
.fam h2, .fam h3, .fam-risk, .mt-points li, .k-dark h2, .mt-answer { text-align: center; }
.fam-risk { color: var(--muted); }
.mt-answer { color: inherit; -webkit-text-fill-color: currentColor; background: none; font-size: clamp(30px, 3.4vw, 48px); font-weight: 400; }
.mt-points svg { margin: 0 auto 10px; width: 28px; height: 28px; }
.mt-points li:first-child svg { stroke: var(--k-dark-ink); }
.app-rij .app-wa-knop { display: flex; justify-content: center; }

/* Plannen (27 okt, Lucas: "niet clean dit"): elke kaart dezelfde opbouw, zodat naam, regel, prijs, knop en lijst
   in alle vier op één lijn staan; één knop per kaart; winkels als kleine pictogrammen onder Free; lichtere letters. */
.plan { display: grid; grid-template-rows: auto 3em 76px auto 1fr auto; padding: 28px 26px 30px; border-radius: 22px; background: var(--soft); }
.plan.featured { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.plan h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.015em; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.plan-for { margin: 6px 0 0; min-height: 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
.plan.featured .plan-for, .plan.featured .feat li { color: inherit; }
.plan.featured .plan-for { color: var(--muted); }
.price { margin: 18px 0 0; height: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.price b, .price b.talk { font-size: 44px; font-weight: 500; letter-spacing: -.03em; line-height: 1; padding: 0; }
.price span { font-size: 14px; color: var(--muted); padding: 0; }
.plan .ctas { margin-top: 22px; }
.plan .badge { width: 100%; justify-content: center; min-height: 46px; font-weight: 500; }
.plan .ctas .badge:first-child { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.plan.free .ctas .badge:first-child { background: var(--ink); color: var(--bg); box-shadow: none; }
.feat { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); gap: 10px; align-content: start; }
.feat li { font-size: 15px; }
.plan .plan-also { margin-top: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.plan .plan-also-k { flex: 1; font-size: 14px; color: var(--muted); }
.plan .plan-also .badge { width: 40px; min-height: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; flex: none; font-size: 0; border-radius: 50%; background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); }
.plan .plan-also .badge img { margin: 0; width: 20px; height: 20px; }
@media (max-width: 640px) { .plan { grid-template-rows: auto auto auto auto auto auto; } .plan h2 { white-space: normal; } }
.plan { grid-template-rows: auto 3.4em 76px auto 1fr auto; }
.plan-for { line-height: 1.35; }
.feat { margin-top: 18px; }
.plan .plan-also-k { order: -1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan.featured { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--ink); } }
:root[data-theme="dark"] .plan.featured { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.plan { grid-template-rows: auto 50px 84px auto 1fr auto; } .plan-for { font-size: 15px; }
.price b, .price b.talk { line-height: 1; height: auto; } .price span { flex-basis: auto; line-height: 1.3; }
.plans-sec .plan .price b, .plans-sec .plan .price b.talk { font-size: 44px; font-weight: 500; line-height: 1; } .plans-sec .plan .price span { flex: none; height: auto; }
.plans-sec .plan .price b { height: auto; display: block; } .plans-sec .plan .price span { min-height: 0; } .plans-sec .plan .plan-for { min-height: 0; } .plans-sec .plan { grid-template-rows: auto 54px 84px auto 1fr auto; }
.plan .plan-also .badge { background: #fff !important; }
/* De rondjes zijn altijd wit: de browsericonen nooit omkeren, ook niet in donker of als eerste knop (Lucas 30 okt: Edge en Firefox waren onzichtbaar) */
.plan .plan-also .badge img { filter: none !important; }

/* Doorschuiven van Melo naar het resultaat (27 okt): twee schermen naast elkaar in één venster, 3,5 s elk.
   Bij "minder beweging" blijft het eerste scherm staan. */
.app-swipe { --h: min(600px, 72vh); }
.app-swipe-track { display: flex; width: calc(var(--h) * 600 / 1304); overflow: hidden; border-radius: clamp(26px, 3vw, 40px); box-shadow: 0 30px 70px -30px rgba(20, 50, 100, .45), 0 0 0 1px rgba(0, 0, 0, .06); }
.app-swipe-track img { flex: none; width: 100%; height: auto !important; max-width: none; border-radius: 0 !important; box-shadow: none !important; animation: app-swipe 8s cubic-bezier(.65, 0, .35, 1) infinite !important; }
@keyframes app-swipe { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
@media (max-width: 699px) { .app-swipe { --h: min(520px, 64vh); } }
@media (prefers-reduced-motion: reduce) { .app-swipe-track img { animation: none !important; } }

/* Functies op /app weer om en om naast elkaar over de hele breedte (27 okt, Lucas: "links rechts onder elkaar, niet
   direct; gebruik het gehele scherm"). Op de telefoon blijven ze onder elkaar en gecentreerd. */
@media (min-width: 900px) {
  .app-rij { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; justify-items: stretch; gap: clamp(40px, 5vw, 96px); padding-left: clamp(24px, 5vw, 96px); padding-right: clamp(24px, 5vw, 96px); }
  .app-rij-om { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; }
  .app-rij .app-rij-tekst { text-align: left; max-width: 520px; justify-self: center; }
  .app-rij-om .app-rij-tekst { order: 2; }
  .app-rij .app-rij-tekst h2, .app-rij .app-rij-tekst p { text-align: left; margin-left: 0; margin-right: 0; }
  .app-rij .app-paneel { width: 100%; order: 1; }
  .app-rij-om .app-paneel { order: 1; }
  .app-rij .app-wa-knop { justify-content: flex-start; }
  .app-rij-tekst h2 { font-size: clamp(36px, 3.6vw, 56px); }
  .app-rij-tekst p { font-size: clamp(17px, 1.3vw, 20px); }
}