/* Kraamuurtje - site.css
   Huisstijl: zie CONTRACT.md. Vormregel: kaarten 28px, binnenkaartjes 16px, knoppen en chips volledig rond. */
:root {
  --paper: #FBF3D5;
  --paper-2: #F7EBC2;
  --card: #FFFBEE;
  --ink: #4A3326;
  --soft: #6F5848;
  --mute: #8F7B67;
  --line: #EEE1B8;
  --pink: #D97F99;
  --pink-soft: #FBE3E8;
  --pink-deep: #A9546E;
  --blue: #7E9BE3;
  --blue-soft: #E3EAFB;
  --milk: #EFE0CB;
  --sage: #E4EADF;
  --sage-deep: #5E7055;
  --r: 28px;
  --r-s: 16px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter Tight', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(110, 70, 50, .35);
  --gut: 16px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: clip; }
body { font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 99px; z-index: 50; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 768px) { :root { --gut: 32px; } }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 380; color: var(--ink); margin: 0; font-optical-sizing: auto; }
h1 { font-size: clamp(38px, 6.4vw, 70px); line-height: 1.02; letter-spacing: -.032em; font-variation-settings: 'SOFT' 100; }
h2 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.026em; font-variation-settings: 'SOFT' 100; }
h3 { font-size: 23px; line-height: 1.18; letter-spacing: -.012em; font-variation-settings: 'SOFT' 100; }
h1 em, h2 em { font-style: italic; color: var(--pink-deep); font-variation-settings: 'SOFT' 100, 'WONK' 1; padding-bottom: .04em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--soft); max-width: 34em; }
.muted { color: var(--soft); }
.kicker { font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-deep); margin: 0 0 18px; }

/* ---------- knoppen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 99px; font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform .18s var(--ease), background-color .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--pink-deep); color: #fff; box-shadow: 0 10px 24px -12px rgba(169, 84, 110, .7); }
.btn-primary:hover { background: #994760; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #3b281d; }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--line), inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: #fff; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { color: var(--pink-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- header ---------- */
.site-top { position: sticky; top: 0; z-index: 40; background: rgba(251, 243, 213, .78); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); transition: box-shadow .3s; }
.site-top.scrolled { box-shadow: 0 1px 0 var(--line); }
.site-top .wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { height: 36px; width: auto; }
.nav { display: none; gap: 2px; }
.nav a { text-decoration: none; padding: 9px 14px; border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--soft); transition: background-color .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--card); color: var(--ink); }
.top-actions { display: none; gap: 8px; align-items: center; }
.top-actions .login { text-decoration: none; font-weight: 500; font-size: 15px; padding: 9px 12px; border-radius: 99px; }
.top-actions .login:hover { background: var(--card); }
.menu-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); box-shadow: 0 1px 0 var(--line); display: grid; place-items: center; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; transition: transform .3s var(--ease), background-color .2s; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.menu-btn span::before { transform: translateY(-6px); } .menu-btn span::after { transform: translateY(6px); }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: rotate(45deg); } .menu-open .menu-btn span::after { transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 68px 0 auto 0; z-index: 39; background: var(--paper); padding: 8px var(--gut) 24px; box-shadow: 0 30px 40px -30px rgba(74, 51, 38, .35); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s; }
.menu-open .mobile-menu { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--ease), opacity .25s; }
.mobile-menu a.m { display: block; text-decoration: none; font: 400 26px/1.2 var(--serif); padding: 12px 4px; border-bottom: 1px solid var(--line); }
.mobile-menu .cta-row { margin-top: 20px; }
.mobile-menu .cta-row .btn { flex: 1; }
@media (min-width: 980px) {
  .nav, .top-actions { display: flex; }
  .menu-btn, .mobile-menu { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 28px 0 56px; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero h1 { max-width: 13em; }
.hero .lead { margin: 22px 0 30px; }
@media (min-width: 900px) {
  .hero { padding: 56px 0 96px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
}

/* ---------- telefoon-mockup (echte mini-UI, nagebouwd uit de app) ---------- */
.stage { position: relative; display: grid; place-items: center; padding: 18px 0 24px; }
.stage::before { content: ''; position: absolute; width: min(460px, 92%); aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: radial-gradient(120% 90% at 30% 20%, #fff 0%, var(--pink-soft) 48%, #F7E7A6 100%); z-index: 0; }
.phone { position: relative; z-index: 1; width: 290px; height: 590px; border-radius: 46px; background: var(--paper); box-shadow: 0 0 0 9px #3f2b20, 0 0 0 10px #6b5040, 0 40px 80px -30px rgba(74, 51, 38, .55); overflow: hidden; font-size: 13px; line-height: 1.35; }
.phone .notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 99px; background: #2c1f17; z-index: 3; }
.phone .scr { padding: 46px 14px 14px; height: 100%; }
.ph-hero { text-align: center; }
.ph-eye { font: 500 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.ph-name { font: 300 50px/.95 var(--serif); letter-spacing: -.035em; margin: 6px 0 2px; font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.ph-age { color: var(--soft); font-size: 11.5px; }
.ph-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 14px 0 12px; }
.ph-day { border-radius: 11px; background: var(--card); padding: 6px 0 5px; text-align: center; box-shadow: 0 1px 0 var(--line); }
.ph-day small { display: block; font-size: 8.5px; color: var(--mute); }
.ph-day b { font: 400 15px/1.1 var(--serif); }
.ph-day i { display: block; width: 4px; height: 4px; margin: 3px auto 0; border-radius: 50%; background: var(--blue); }
.ph-day.sel { background: var(--ink); color: var(--paper); box-shadow: none; }
.ph-day.sel small { color: rgba(251, 243, 213, .7); } .ph-day.sel i { background: var(--paper); }
.ph-dh { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 8px; }
.ph-dh b { font: 400 15px/1.2 var(--serif); }
.ph-dh span { font-size: 10px; color: var(--mute); }
.ph-slots { display: grid; gap: 7px; }
.ph-slot { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 15px; padding: 10px 10px 10px 12px; box-shadow: 0 1px 0 var(--line); transition: opacity .4s, transform .4s var(--ease); }
.ph-slot .t { font: 400 18px/1 var(--serif); letter-spacing: -.02em; }
.ph-slot .t em { font-style: normal; color: var(--mute); font-size: 12px; }
.ph-slot .meta { font-size: 10px; color: var(--soft); margin-top: 3px; }
.ph-slot .go { margin-left: auto; flex: none; height: 26px; padding: 0 11px; border-radius: 99px; background: var(--pink); color: #fff; font-weight: 600; font-size: 10.5px; display: flex; align-items: center; }
.ph-slot.taken { opacity: .55; } .ph-slot.taken .go { background: var(--line); color: var(--soft); }
.ph-slot.pick .go { background: var(--ink); }
.ph-feed { display: flex; gap: 10px; align-items: center; border-radius: 15px; padding: 9px 12px; background: repeating-linear-gradient(-45deg, var(--milk), var(--milk) 6px, #F4E8D6 6px, #F4E8D6 12px); color: var(--soft); font-size: 10.5px; }
.ph-feed b { color: var(--ink); font-weight: 600; display: block; font-size: 11px; }
.ph-feed svg { width: 18px; height: 18px; color: var(--pink-deep); flex: none; }

.float { position: absolute; z-index: 2; background: rgba(255, 251, 238, .82); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 40px -22px rgba(74, 51, 38, .5); padding: 12px 14px; font-size: 13px; line-height: 1.3; }
.notif { top: 232px; right: max(0px, calc(50% - 262px)); width: 236px; display: flex; gap: 10px; align-items: flex-start; }
.notif .app-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--paper); display: grid; place-items: center; box-shadow: 0 1px 0 var(--line); }
.notif .app-ic img { width: 26px; height: 26px; }
.notif small { color: var(--mute); font-size: 11px; display: block; }
.notif b { font-weight: 600; }
.listcard { bottom: 40px; left: max(0px, calc(50% - 272px)); width: 196px; }
.listcard .h { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.listcard .h span { color: var(--pink-deep); }
.bar { height: 7px; border-radius: 99px; background: rgba(217, 127, 153, .18); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--p, 58%); border-radius: inherit; background: var(--pink); transform-origin: left; }
.listcard ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; font-size: 12px; color: var(--soft); }
.listcard li { display: flex; align-items: center; gap: 7px; }
.listcard li::before { content: ''; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mute); flex: none; }
.listcard li.ok { color: var(--ink); }
.listcard li.ok::before { background: var(--sage-deep); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 520px) {
  .notif { right: 0; top: 214px; width: 214px; }
  .listcard { left: 0; bottom: 18px; width: 176px; }
  .phone { width: 262px; height: 540px; }
}

/* ---------- animaties (alleen bij geen reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .8s var(--ease) both; }
  .rise.d1 { animation-delay: .08s } .rise.d2 { animation-delay: .16s } .rise.d3 { animation-delay: .24s }
  .notif { animation: drop .9s var(--ease) 1.1s both; }
  .listcard { animation: rise .9s var(--ease) 1.6s both; }
  .listcard .bar i { animation: fill 1.4s var(--ease) 2.1s both; }
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.in .bar i { animation: fill 1.4s var(--ease) .3s both; }
  .ph-slot.pick { animation: pick 1s var(--ease) 2.6s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) scale(.96); } }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes pick { 0% { transform: none; } 40% { transform: scale(.97); } 100% { transform: none; } }

/* ---------- secties ---------- */
section { scroll-margin-top: 80px; }
.sec { padding: 72px 0; }
@media (min-width: 900px) { .sec { padding: 112px 0; } }
.sec-head { max-width: 40em; margin-bottom: 40px; }
.sec-head p { margin-top: 16px; }

/* verhaal van de maker */
.story { background: var(--card); border-radius: var(--r); padding: 36px 22px; display: grid; gap: 28px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.story .weight { font: 300 clamp(64px, 12vw, 132px)/.9 var(--serif); letter-spacing: -.045em; color: var(--pink-deep); font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.story .weight small { display: block; font: 500 14px/1.4 var(--sans); letter-spacing: 0; color: var(--soft); margin-top: 12px; }
.story blockquote { margin: 0; font: 350 clamp(21px, 2.3vw, 27px)/1.42 var(--serif); letter-spacing: -.01em; font-variation-settings: 'SOFT' 100; }
.story blockquote p { margin: 0 0 .8em; }
.story cite { font: 500 15px/1.4 var(--sans); font-style: normal; color: var(--soft); }
@media (min-width: 900px) { .story { grid-template-columns: .8fr 1.4fr; padding: 64px; gap: 56px; align-items: start; } }

/* stappen */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.step { position: relative; padding: 26px 22px 24px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.step .n { font: 300 64px/1 var(--serif); color: var(--pink); letter-spacing: -.04em; margin-bottom: 14px; font-variation-settings: 'opsz' 144; }
.step p { color: var(--soft); margin: 10px 0 0; }
.step .mini { margin-top: 18px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step:nth-child(2) { transform: translateY(36px); }
  .step:nth-child(3) { transform: translateY(72px); }
  .steps-wrap { padding-bottom: 72px; }
}
.mini-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 99px; padding: 8px 14px; font-size: 14px; color: var(--soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-chip b { color: var(--ink); font-weight: 600; }
.mini-feeds { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-feeds span { font-size: 13px; padding: 6px 10px; border-radius: 99px; background: var(--milk); color: var(--soft); }
.mini-feeds span.on { background: var(--pink-soft); color: var(--pink-deep); font-weight: 600; }

/* functies: bento */
.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tile { border-radius: var(--r); padding: 26px 22px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; position: relative; min-width: 0; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--soft); margin: 0; font-size: 16px; }
.tile.pink { background: var(--pink-soft); }
.tile.blue { background: var(--blue-soft); }
.tile.sage { background: var(--sage); }
.tile.milk { background: var(--milk); }
.tile .vis { margin-top: 22px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .t-feed { grid-column: span 4; } .t-list { grid-column: span 2; }
  .t-links, .t-push { grid-column: span 3; }
  .t-log, .t-addr, .t-wa { grid-column: span 2; }
  .tile { padding: 32px 30px; }
}
/* dagbalk: voedingen blokkeren */
.daybar { position: relative; height: 66px; border-radius: var(--r-s); background: var(--paper); overflow: hidden; }
.daybar .blk { position: absolute; top: 8px; bottom: 26px; border-radius: 10px; }
.daybar .feed { background: repeating-linear-gradient(-45deg, var(--milk), var(--milk) 5px, #E9D6BC 5px, #E9D6BC 10px); }
.daybar .visit { background: var(--blue); }
.daybar .visit.b { background: var(--pink); }
.daybar .lbl { position: absolute; bottom: 6px; font-size: 11px; color: var(--mute); transform: translateX(-50%); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--soft); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.ring { width: 96px; height: 96px; }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: rgba(169, 84, 110, .15); }
.ring .fg { stroke: var(--pink-deep); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 251.3; stroke-dashoffset: 105; }
@media (prefers-reduced-motion: no-preference) { .js .reveal .ring .fg { stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.6s var(--ease) .3s; } .js .reveal.in .ring .fg { stroke-dashoffset: 105; } }
.ring-row { display: flex; align-items: center; gap: 16px; }
.ring-row b { font: 400 30px/1 var(--serif); }
.linkchip { display: grid; gap: 8px; }
.linkchip .lc { background: var(--card); border-radius: var(--r-s); padding: 12px 14px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linkchip .lc code { font: 500 13px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ink); word-break: break-all; }
.linkchip .lc span { color: var(--soft); }
.pushcard { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .7); border-radius: var(--r-s); padding: 12px 14px; font-size: 14px; }
.pushcard + .pushcard { margin-top: 8px; opacity: .7; }
.pushcard img { width: 30px; height: 30px; flex: none; }
.pushcard small { display: block; color: var(--mute); font-size: 12px; }
.loglist { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 6px; }
.loglist li { display: flex; gap: 10px; color: var(--soft); }
.loglist time { color: var(--ink); font-weight: 600; min-width: 42px; }
.wa { background: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 14px; box-shadow: 0 1px 0 var(--line); }
.wa a { color: var(--pink-deep); }

/* demo-band */
.demo { border-radius: var(--r); background: linear-gradient(135deg, var(--pink-soft), #F8E9C4 70%); padding: 40px 22px; display: grid; gap: 26px; align-items: center; }
.demo p { color: var(--soft); max-width: 30em; margin-top: 12px; }
.demo .opts { display: grid; gap: 12px; }
.demo .opt { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: 22px; padding: 18px 20px; text-decoration: none; box-shadow: var(--shadow); transition: transform .25s var(--ease); }
.demo .opt:hover { transform: translateY(-2px); }
.demo .opt:active { transform: scale(.98); }
.demo .opt b { font: 400 21px/1.2 var(--serif); display: block; }
.demo .opt span { color: var(--soft); font-size: 15px; }
.demo .opt svg { margin-left: auto; flex: none; width: 22px; height: 22px; color: var(--pink-deep); }
@media (min-width: 900px) { .demo { grid-template-columns: 1.1fr 1fr; padding: 64px; } }

/* prijs */
.price { display: grid; gap: 28px; align-items: center; }
.price-card { background: var(--card); border-radius: var(--r); padding: 34px 26px; box-shadow: var(--shadow); text-align: center; position: relative; }
.price-card .amt { font: 300 clamp(76px, 12vw, 120px)/.9 var(--serif); letter-spacing: -.05em; font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.price-card .amt sup { font-size: .36em; vertical-align: .9em; letter-spacing: 0; margin-right: 4px; }
.price-card .per { color: var(--soft); margin: 10px 0 24px; }
.price-card .btn { width: 100%; }
.price-card .fine { font-size: 14px; color: var(--soft); margin: 14px 0 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.checks li::before { content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 14.5l3.6 3.6 7.4-7.6' fill='none' stroke='%235E7055' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.checks b { display: block; font-weight: 600; }
.checks span { color: var(--soft); font-size: 16px; }
@media (min-width: 900px) { .price { grid-template-columns: 1.1fr .9fr; gap: 72px; } }

/* cadeau */
.gift { display: grid; gap: 34px; align-items: center; }
.ticket { position: relative; max-width: 420px; margin: 0 auto; width: 100%; background: var(--card); border-radius: var(--r); padding: 28px 26px; box-shadow: var(--shadow); transform: rotate(-2.5deg); }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--paper); }
.ticket::before { left: -14px; } .ticket::after { right: -14px; }
.ticket .to { font: italic 350 26px/1.2 var(--serif); color: var(--pink-deep); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.ticket .msg { color: var(--soft); margin: 10px 0 20px; }
.ticket .code { border-top: 2px dashed var(--line); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket .code code { font: 600 17px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; }
.ticket .code span { font-size: 14px; color: var(--soft); }
@media (min-width: 900px) { .gift { grid-template-columns: 1fr 1fr; gap: 72px; } .gift .ticket { order: -1; } }

/* faq */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--card); border-radius: 22px; box-shadow: 0 1px 0 var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font: 400 20px/1.3 var(--serif); position: relative; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 9.5l4 4 4-4' fill='none' stroke='%234A3326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .a { padding: 0 22px 22px; color: var(--soft); }
.faq .a p:last-child { margin-bottom: 0; }
.faq-group { margin-top: 48px; }
.faq-group h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }

/* eind-cta */
.endcta { text-align: center; padding: 80px 0 96px; }
.endcta h2 { max-width: 14em; margin: 0 auto; }
.endcta p { margin: 18px auto 30px; }
.endcta .cta-row { justify-content: center; }

/* footer */
.site-foot { background: var(--paper-2); padding: 56px 0 40px; margin-top: 24px; font-size: 15px; }
.foot-grid { display: grid; gap: 34px; grid-template-columns: 1fr 1fr; }
.foot-grid .about { grid-column: 1 / -1; color: var(--soft); max-width: 24em; }
.foot-grid .about img { height: 34px; width: auto; margin-bottom: 14px; }
.foot-grid h2 { font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--soft); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .foot-grid .about { grid-column: auto; } }

/* ---------- binnenpagina's ---------- */
.page-head { padding: 40px 0 30px; }
.page-head .lead { margin-top: 18px; }
@media (min-width: 900px) { .page-head { padding: 72px 0 44px; } }
.crumbs { font-size: 14px; color: var(--soft); margin-bottom: 18px; }
.crumbs a { color: var(--soft); }
.prose { max-width: 68ch; font-size: 18px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin: 1.8em 0 .5em; }
.prose h3 { margin: 1.5em 0 .4em; }
.prose p, .prose li { color: #5a4334; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--pink-deep); text-underline-offset: 3px; }
.prose .box { background: var(--card); border-radius: 22px; padding: 22px 24px; margin: 1.6em 0; box-shadow: 0 1px 0 var(--line); }
.prose .box.tip { background: var(--sage); }
.prose .box p:last-child { margin: 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 1em 0 1.4em; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
.table-scroll { overflow-x: auto; }
.ph { background: #FFE58A; color: var(--ink); padding: 0 .3em; border-radius: 4px; font-weight: 600; }
.concept-note { background: #FFF3C4; border-radius: 16px; padding: 14px 18px; font-size: 15px; margin-bottom: 28px; color: var(--ink); }
.two-col { display: grid; gap: 40px; }
@media (min-width: 980px) { .two-col { grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; } .aside-sticky { position: sticky; top: 96px; align-self: start; } }
.aside-card { background: var(--card); border-radius: var(--r); padding: 26px 24px; box-shadow: var(--shadow); }
.aside-card h2 { font-size: 24px; margin-bottom: 10px; }
.aside-card p { color: var(--soft); font-size: 16px; }
.aside-card .btn { width: 100%; margin-top: 6px; }
.toc { font-size: 15px; margin-top: 22px; }
.toc a { display: block; padding: 6px 0; color: var(--soft); text-decoration: none; }
.toc a:hover { color: var(--ink); }

/* uitgebreide stappen (hoe-het-werkt) */
.flow { display: grid; gap: 20px; }
.flow-row { display: grid; gap: 24px; background: var(--card); border-radius: var(--r); padding: 28px 22px; box-shadow: var(--shadow); align-items: center; }
.flow-row .n { font: 300 52px/1 var(--serif); color: var(--pink); }
.flow-row h2 { font-size: clamp(26px, 3vw, 36px); margin: 6px 0 10px; }
.flow-row p { color: var(--soft); }
.flow-row ul { color: var(--soft); padding-left: 1.1em; margin: 0; }
.flow-row .vis { background: var(--paper); border-radius: 22px; padding: 20px; }
@media (min-width: 900px) { .flow-row { grid-template-columns: 1.1fr .9fr; padding: 44px; gap: 48px; } .flow-row:nth-child(even) .vis { order: -1; } }

/* formulier */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--soft); }
.input { width: 100%; background: var(--card); border: 1.5px solid #E3D3A6; border-radius: var(--r-s); padding: 14px 16px; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: #8F7B67; }
.input:focus { border-color: var(--pink-deep); box-shadow: 0 0 0 4px rgba(169, 84, 110, .14); }
textarea.input { min-height: 110px; resize: vertical; }
.form-error { display: none; background: #FBE3E0; color: #8A3424; border-radius: var(--r-s); padding: 12px 16px; font-size: 15px; }
.form-error.on { display: block; }
.form .btn { width: 100%; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.count-hint { text-align: right; font-size: 13px; color: var(--soft); }

/* 404 */
.nf { text-align: center; padding: 64px 0 96px; }
.nf .clock { width: 120px; height: 120px; margin: 0 auto 26px; }
@media (prefers-reduced-motion: no-preference) { .nf .clock .min { animation: spin 6s linear infinite; transform-origin: 22px 23px; } }
@keyframes spin { to { transform: rotate(360deg); } }
.nf .cta-row { justify-content: center; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }
@media (prefers-reduced-transparency: reduce) { .site-top, .float { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }