:root{
  --bg:#E7E8DF; --paper:#FFFFFF; --soft:#F7F8F1; --ink:#15140F; --inkSoft:#56544B;
  --muted:#9C9A8E; --line:rgba(20,18,12,0.09); --hair:rgba(20,18,12,0.06);
  --accent:#C7ED4B; --accentInk:#5C7A12;
  --radius-card:26px; --shadow:0 1px 2px rgba(20,16,10,0.04), 0 14px 34px rgba(20,16,10,0.07);
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
}
*{ box-sizing:border-box; } html,body{ margin:0; overflow-x:hidden; }
body{ background:radial-gradient(130% 110% at 50% -10%, #F1F2E9 0%, #E6E7DD 60%, #DBDCD0 100%) fixed;
  font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5;
  padding:30px 16px 70px; display:flex; justify-content:center; }
.phone{ width:100%; max-width:390px; }

.toggle{ display:flex; gap:8px; margin-bottom:20px; }
.toggle button{ flex:1; padding:10px; border-radius:999px; font-family:var(--sans); font-weight:800; font-size:13px;
  border:0.5px solid var(--hair); background:var(--paper); color:var(--inkSoft); box-shadow:var(--shadow); cursor:pointer; }
.toggle button.on{ background:var(--accent); color:var(--ink); border-color:transparent; box-shadow:0 6px 16px rgba(199,237,75,0.4); }

.topbar{ display:flex; align-items:center; gap:11px; margin-bottom:24px; }
.mark{ position:relative; width:34px; height:34px; border-radius:28%; background:var(--accent);
  box-shadow:0 4px 12px rgba(199,237,75,0.45), inset 0 1px 0 rgba(255,255,255,0.4); flex:none; }
.wm{ font-size:17px; font-weight:800; letter-spacing:-0.8px; } .wm span{ color:var(--accentInk); }
.topbar .tag{ margin-left:auto; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:700; }

.eyebrow{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 2px 8px; }
h1{ margin:0 0 2px; font-size:34px; font-weight:800; letter-spacing:-1.4px; }

.intro{ background:var(--soft); border:0.5px solid var(--hair); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:18px; margin:18px 0 30px; }
.intro p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink); font-weight:600; letter-spacing:-0.2px; }

.sec-label{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 2px 12px; }

.zin{ background:var(--paper); border:0.5px solid var(--hair); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:20px 19px; margin-bottom:14px; }
.zin .lead{ font-size:18px; line-height:1.35; font-weight:700; letter-spacing:-0.4px; margin:0; }
.zin .why{ margin:8px 0 0; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:0.2px; }
.keuzes{ display:flex; gap:8px; margin-top:16px; }
.doe{ flex:1.4; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:999px;
  background:var(--accent); color:var(--ink); font-weight:800; font-size:14px; border:none; font-family:var(--sans);
  box-shadow:0 8px 20px rgba(199,237,75,0.42); cursor:pointer; }
.alt{ flex:1; padding:13px 8px; border-radius:16px; background:var(--paper); border:0.5px solid var(--hair);
  color:var(--inkSoft); font-weight:700; font-size:12.5px; font-family:var(--sans); cursor:pointer; }

.foot{ margin-top:24px; text-align:center; font-size:11.5px; color:var(--muted); font-weight:600; }

/* ── kennismaking ── */
.hint{ font-size:11px; color:var(--muted); text-align:center; margin:0 0 20px; letter-spacing:0.2px; }
.row{ display:flex; margin-bottom:8px; }
.row.maatje .bubble{ max-width:88%; background:var(--paper); border:0.5px solid var(--hair); box-shadow:var(--shadow);
  border-radius:20px 20px 20px 7px; padding:13px 16px; font-size:15px; line-height:1.45; letter-spacing:-0.15px; }
.ob-input{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper);
  border:0.5px solid var(--hair); box-shadow:var(--shadow); border-radius:16px; padding:13px 15px; margin:0 0 18px; resize:none; }
.ob-input::placeholder{ color:var(--muted); }
.ob-input:focus{ outline:none; border-color:rgba(92,122,18,0.35); }
.ob-input.leeg{ border-color:#E59A3A; }
.chips{ display:flex; gap:9px; margin:0 0 18px; }
.chip{ flex:1; padding:12px; border-radius:14px; font-family:var(--sans); font-weight:700; font-size:13.5px;
  background:var(--paper); border:0.5px solid var(--hair); box-shadow:var(--shadow); color:var(--inkSoft); cursor:pointer; }
.chip.on{ background:rgba(199,237,75,0.18); border-color:rgba(92,122,18,0.32); color:var(--ink); }
.maak{ width:100%; padding:16px; border-radius:999px; background:var(--accent); color:var(--ink);
  font-family:var(--sans); font-weight:800; font-size:15px; border:none; box-shadow:0 8px 20px rgba(199,237,75,0.42);
  cursor:pointer; margin-top:6px; }
.demo{ text-align:center; font-size:12.5px; color:var(--muted); margin:16px 0 0; }
.demo a{ color:var(--accentInk); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.terug{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; margin-bottom:14px; }

/* ── aanbod basis-check ── */
.choices2{ display:flex; gap:9px; justify-content:flex-end; margin-top:4px; }
.choices2 button{ font-family:var(--sans); font-weight:800; font-size:13.5px; border-radius:999px; padding:12px 18px; cursor:pointer; }
.ja2{ background:var(--accent); color:var(--ink); border:none; box-shadow:0 6px 16px rgba(199,237,75,0.4); }
.nee2{ background:var(--paper); color:var(--inkSoft); border:0.5px solid var(--hair); box-shadow:var(--shadow); }
.bubble b{ font-weight:800; }

/* ── basis-check ── */
.prog{ height:5px; border-radius:999px; background:rgba(20,18,12,0.08); overflow:hidden; margin:6px 0 9px; }
.prog span{ display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s; }
.progrow{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 22px; }
.progrow .eyebrow{ margin:0; }
.count{ font-size:11.5px; font-weight:800; color:var(--accentInk); letter-spacing:0.3px; }
.stmt{ font-size:24px; line-height:1.28; font-weight:800; letter-spacing:-0.7px; margin:6px 0 24px; text-wrap:balance; }
.opts{ display:flex; flex-direction:column; gap:9px; }
.opt{ display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:16px; background:var(--paper);
  border:0.5px solid var(--hair); box-shadow:var(--shadow); font-family:var(--sans); font-size:15px; font-weight:600;
  color:var(--ink); cursor:pointer; text-align:left; }
.opt:hover{ border-color:rgba(92,122,18,0.32); background:rgba(199,237,75,0.08); }
.opt .tick{ width:21px; height:21px; border-radius:50%; border:2px solid rgba(20,18,12,0.18); flex:none; }
.bcnav{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.back2{ background:none; border:none; font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; min-height:20px; }
.stoppen{ font-size:12.5px; color:var(--muted); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ── week-interacties ── */
.zin.gedaan{ background:linear-gradient(180deg, rgba(199,237,75,0.14), rgba(199,237,75,0.05)); border-color:rgba(92,122,18,0.22); }
.badge-gedaan{ font-size:11px; font-weight:800; letter-spacing:0.4px; color:var(--accentInk); margin-bottom:7px; }
.zin.gedaan .lead{ font-size:16px; color:var(--inkSoft); }
.zin.geschoven{ opacity:0.6; }
.zin.geschoven .lead{ font-size:16px; }
.afronden{ width:100%; padding:15px; border-radius:999px; background:var(--paper); border:0.5px solid var(--hair);
  box-shadow:var(--shadow); color:var(--inkSoft); font-family:var(--sans); font-weight:800; font-size:14px; cursor:pointer; margin-top:8px; }

/* voltooiing */
.done-card{ display:flex; align-items:center; gap:14px; background:linear-gradient(180deg, rgba(199,237,75,0.16), rgba(199,237,75,0.06));
  border:0.5px solid rgba(92,122,18,0.22); border-radius:24px; box-shadow:var(--shadow); padding:20px; margin-bottom:18px; }
.check{ width:42px; height:42px; border-radius:50%; background:var(--accent); flex:none; display:flex; align-items:center;
  justify-content:center; font-size:22px; font-weight:800; color:var(--ink); box-shadow:0 6px 16px rgba(199,237,75,0.5); }
.eyebrow2{ font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--accentInk); font-weight:800; }
.dh{ margin:3px 0 0; font-size:16px; font-weight:800; letter-spacing:-0.3px; line-height:1.3; }
.rh{ margin:24px 0 3px; font-size:17px; font-weight:800; letter-spacing:-0.4px; }
.rsub{ margin:0 0 14px; font-size:12.5px; color:var(--muted); }
.ervchips{ display:flex; gap:10px; }
.ervchip{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:15px 8px; border-radius:18px;
  background:var(--paper); border:0.5px solid var(--hair); box-shadow:var(--shadow); font-family:var(--sans);
  font-weight:700; font-size:13.5px; color:var(--ink); cursor:pointer; }
.ervchip .d{ width:12px; height:12px; border-radius:50%; }

/* week-check */
.lead2{ font-size:13.5px; color:var(--muted); font-weight:600; margin:14px 0 6px; }
.wch{ font-size:26px; letter-spacing:-0.8px; margin:0 0 22px; }
.wopts{ display:flex; flex-direction:column; gap:10px; }
.wopt{ display:flex; align-items:center; gap:13px; padding:16px 17px; border-radius:16px; background:var(--paper);
  border:0.5px solid var(--hair); box-shadow:var(--shadow); font-family:var(--sans); cursor:pointer; text-align:left; }
.wopt .d2{ width:13px; height:13px; border-radius:50%; flex:none; }
.wopt .lb{ font-size:15.5px; font-weight:700; }
.wopt .sub2{ font-size:12.5px; color:var(--muted); margin-left:auto; font-weight:600; }
.note2{ margin-top:22px; }
.note2 label{ display:block; font-size:13.5px; font-weight:700; color:var(--inkSoft); margin:0 2px 8px; }
.note2 textarea{ width:100%; min-height:64px; resize:none; border-radius:15px; border:0.5px solid var(--hair);
  background:var(--paper); box-shadow:var(--shadow); padding:13px 15px; font-family:var(--sans); font-size:14px; color:var(--ink); }
.note2 textarea:focus{ outline:none; border-color:rgba(92,122,18,0.35); }

/* afronding */
.klaar-body{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:40px; }
.check.groot{ width:64px; height:64px; font-size:32px; }
.kh{ font-size:34px; letter-spacing:-1.4px; margin:22px 0 10px; }
.kp{ font-size:15px; color:var(--inkSoft); max-width:30ch; margin:0 0 26px; }

/* ── macroplan ── */
.mph{ font-size:30px; letter-spacing:-1px; margin:2px 0 16px; }
.dest{ position:relative; background:linear-gradient(180deg, rgba(199,237,75,0.18), rgba(199,237,75,0.06));
  border:0.5px solid rgba(92,122,18,0.22); border-radius:26px; padding:22px 20px; margin:18px 0 30px; }
.dlabel{ font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accentInk); font-weight:800; }
.dtext{ margin:9px 0 0; font-family:'Instrument Serif', Georgia, serif; font-size:23px; line-height:1.3; color:var(--ink); max-width:24ch; }
.route{ position:relative; padding-left:2px; margin-bottom:14px; }
.stop{ position:relative; display:grid; grid-template-columns:30px 1fr; gap:13px; padding-bottom:18px; }
.stop:last-child{ padding-bottom:4px; }
.mdot{ width:28px; height:28px; border-radius:50%; }
.mdot.now{ background:var(--accent); box-shadow:0 4px 12px rgba(199,237,75,0.5); }
.mdot.fut{ background:var(--paper); border:2px solid rgba(156,154,142,0.45); }
.sc .when{ font-size:10.5px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--accentInk); }
.sc .when.fut{ color:var(--muted); }
.sc .sh{ margin:2px 0 0; font-size:16.5px; font-weight:800; letter-spacing:-0.4px; }
.sc .sh.fut{ color:var(--inkSoft); }
.sc .ss{ margin:3px 0 0; font-size:13px; color:var(--muted); text-wrap:pretty; }
.rnote{ font-size:12.5px; color:var(--muted); margin:0 2px 28px; text-wrap:pretty; }
.pact{ background:var(--paper); border:0.5px solid var(--hair); box-shadow:var(--shadow); border-radius:22px; padding:16px 18px; margin-bottom:24px; }
.prow{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:14px; color:var(--ink); font-weight:600; }
.pc{ color:var(--accentInk); font-weight:800; flex:none; }

/* ── week-nav ── */
.weeknav{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; }
.weeknav a{ font-size:12.5px; font-weight:700; color:var(--accentInk); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.weeknav span{ color:var(--muted); }

/* ── koers ── */
.kph{ font-size:27px; letter-spacing:-0.9px; margin:0 0 7px; }
.ksub{ font-size:14px; color:var(--inkSoft); margin:0 0 22px; }
.koerskaart{ background:var(--paper); border:0.5px solid var(--hair); box-shadow:var(--shadow); border-radius:26px; padding:8px 20px; }
.lane{ padding:16px 0; border-top:1px solid var(--hair); }
.lane:first-child{ border-top:none; }
.lane-head{ display:flex; align-items:center; margin-bottom:12px; }
.lnm{ font-size:15px; font-weight:800; letter-spacing:-0.3px; }
.ktrend{ margin-left:auto; font-size:11px; font-weight:800; padding:4px 11px; border-radius:999px; }
.ktrend.stroom{ color:var(--accentInk); background:rgba(199,237,75,0.24); }
.ktrend.start{ color:#9a6a1e; background:rgba(229,154,58,0.16); }
.ktrend.stabiel{ color:var(--inkSoft); background:var(--soft); }
.ktrend.nvt{ color:var(--muted); background:var(--soft); }
.ktrack{ position:relative; height:14px; border-radius:999px;
  background:linear-gradient(90deg, rgba(229,154,58,0.30) 0%, rgba(201,210,74,0.30) 50%, rgba(127,194,78,0.38) 100%);
  box-shadow:inset 0 0 0 0.5px rgba(20,16,10,0.05); }
.ktrail{ position:absolute; top:50%; height:2px; transform:translateY(-50%); border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(20,18,12,0.22) 0 4px, transparent 4px 8px); }
.kghost{ position:absolute; top:50%; width:11px; height:11px; transform:translate(-50%,-50%); border-radius:50%;
  background:var(--paper); box-shadow:inset 0 0 0 2px rgba(156,154,142,0.7); }
.kmarker{ position:absolute; top:50%; width:19px; height:19px; transform:translate(-50%,-50%); border-radius:50%;
  border:3px solid #fff; box-shadow:0 3px 9px rgba(20,16,10,0.22); }
.kfoot{ margin-top:18px; text-align:center; font-size:12px; color:var(--muted); line-height:1.5; }

/* ── maandplan ── */
.card2{ background:var(--paper); border:0.5px solid var(--hair); box-shadow:var(--shadow); border-radius:24px; padding:19px 20px; margin-bottom:24px; }
.card2.focus2{ background:linear-gradient(180deg, rgba(199,237,75,0.13), rgba(199,237,75,0.05)); border-color:rgba(92,122,18,0.22); }
.c2t{ margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-0.4px; }
.c2p{ margin:0; font-size:14.5px; color:var(--inkSoft); text-wrap:pretty; }