/* Plugkit — gedeelde stijl voor de plugin-detailpagina's.
   Zelfstandig (los van de homepage-inline-CSS): dezelfde tokens en componenten,
   plus de prijs-tabel met een CSS-only maand/jaar-schakelaar (geen JS -> CSP-veilig). */

:root {
  color-scheme: light;
  --bg:#ffffff;
  --surface:#e8ede9;
  --panel:#ffffff;
  --ink:#0c1712;
  --ink-2:#526059;
  --ink-3:#616e67;           /* WCAG AA (>=4.5:1 op wit) voor kleine tekst */
  --accent:#0b8457;
  --accent-2:#16b878;
  --accent-strong:#086a45;
  --accent-tint:#e0f1e8;
  --line:rgba(9,40,28,0.12);
  --line-soft:rgba(9,40,28,0.07);
  --dark:#0a0f0c;
  --dark-ink:#eef6f1;
  --dark-ink-2:#93a79c;
  --shadow-prod:0 5px 30px rgba(0,0,0,0.14), 0 40px 80px -34px rgba(8,70,46,0.30);
  --nav-bg:rgba(255,255,255,0.72);
  --maxw:1120px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body { margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
a { color:inherit; }
img { max-width:100%; }

/* logo + nav (gelijk aan de homepage) */
.logo { display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.logo .wm { font-weight:650; font-size:20px; letter-spacing:-0.03em; }
.logo .wm .k { color:var(--accent); }
.logo .wm .dot { color:var(--accent-2); }
nav.top { position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line-soft); }
.nav-inner { max-width:var(--maxw); margin:0 auto; padding:0 24px; height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-links { display:flex; align-items:center; gap:22px; }
.nav-links a { color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--ink); }
.nav-right { display:flex; align-items:center; gap:8px; }
.toggle { appearance:none; border:1px solid var(--line); background:transparent; color:var(--ink-2); font:inherit; font-size:13px; font-weight:500; height:34px; padding:0 12px; border-radius:980px; cursor:pointer; transition:color .2s,border-color .2s; }
.toggle:hover { color:var(--ink); border-color:var(--ink-3); }
.lang b { color:var(--ink); }
@media (max-width:620px){ .nav-links { display:none; } }

/* buttons */
.btn { appearance:none; border:0; cursor:pointer; font:inherit; font-weight:550; display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:13px 26px; border-radius:980px; font-size:16px; line-height:1; transition:transform .18s ease,background .2s,box-shadow .2s,color .2s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 14px -4px rgba(8,70,46,.5); }
.btn-primary:hover { transform:translateY(-1px); background:var(--accent-strong); box-shadow:0 10px 24px -6px rgba(8,70,46,.55); }
.btn-ghost { background:transparent; color:var(--accent-strong); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:9px 18px; font-size:14px; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip-link { position:absolute; left:12px; top:-64px; z-index:100; background:var(--accent); color:#fff; padding:11px 17px; border-radius:11px; font-weight:600; font-size:15px; text-decoration:none; transition:top .2s ease; }
.skip-link:focus { top:12px; }

/* section rhythm + type */
section { padding:clamp(64px,9vw,110px) 0; position:relative; }
.surface { background:var(--surface); }
.eyebrow { font-size:14px; font-weight:600; letter-spacing:0.01em; color:var(--accent-strong); margin:0 0 18px; }
h1,h2,h3 { margin:0; letter-spacing:-0.04em; text-wrap:balance; line-height:1.05; }
h1 { font-size:clamp(40px,6.4vw,74px); font-weight:700; letter-spacing:-0.045em; }
h2 { font-size:clamp(30px,4.4vw,50px); font-weight:700; }
h3 { font-size:clamp(19px,2.4vw,24px); font-weight:600; letter-spacing:-0.02em; }
.g { color:var(--accent); }
.lead { font-size:clamp(18px,2vw,22px); font-weight:400; color:var(--ink-2); line-height:1.45; max-width:40ch; }
.sec-head { max-width:640px; }
.sec-head .lead { margin-top:18px; }

/* reveal */
.reveal { transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); will-change:opacity,transform; }
.js .reveal { opacity:0; transform:translateY(24px); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal.d1 { transition-delay:.07s; } .js .reveal.d2 { transition-delay:.14s; } .js .reveal.d3 { transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){ .js .reveal { opacity:1; transform:none; transition:none; } }

/* breadcrumb */
.crumb { font-size:14px; color:var(--ink-2); margin:0 0 22px; }
.crumb a { color:var(--accent-strong); text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
.crumb span { color:var(--ink-3); }

/* plugin hero */
.phero { padding-top:clamp(44px,6vw,72px); padding-bottom:clamp(48px,6vw,80px); overflow:hidden; }
.phero::before { content:""; position:absolute; inset:-30% -20% auto -20%; height:720px; z-index:0; pointer-events:none;
  background:radial-gradient(620px 420px at 30% 0%, rgba(22,184,120,0.16), transparent 62%),
             radial-gradient(520px 420px at 82% 14%, rgba(11,132,87,0.12), transparent 64%); }
.phero .wrap { position:relative; z-index:1; }
.phero-grid { display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,64px); align-items:center; }
@media (min-width:900px){ .phero-grid { grid-template-columns:1.05fr .95fr; } }
.phero h1 { margin:12px 0 0; max-width:16ch; }
.phero .lead { margin:22px 0 0; max-width:44ch; }
.status { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.01em; padding:7px 13px; border-radius:980px; background:var(--accent-tint); color:var(--accent-strong); }
.status .dot { width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 3px rgba(22,184,120,.22); }
.status.soon { background:var(--surface); color:var(--ink-2); }
.status.soon .dot { background:var(--ink-3); box-shadow:0 0 0 3px rgba(125,139,132,.18); }
.phero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.priceline { margin-top:18px; font-size:15px; color:var(--ink-2); }
.priceline b { color:var(--ink); font-weight:600; }
.pchips { margin-top:22px; display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); }
.pchips span { background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-soft); border-radius:980px; padding:6px 12px; }

/* generic product mock ("browser window") */
.win { position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow-prod); overflow:hidden; text-align:left; }
.win-bar { display:flex; align-items:center; gap:10px; padding:12px 15px; background:linear-gradient(180deg,#fbfcfb,#f2f5f3); border-bottom:1px solid var(--line-soft); }
.tl { display:flex; gap:7px; } .tl i{ width:11px; height:11px; border-radius:50%; background:#dfe4e1; } .tl i:first-child{background:#ff5f57} .tl i:nth-child(2){background:#febc2e} .tl i:nth-child(3){background:#28c840}
.win-url { flex:1; text-align:center; font-size:12px; color:var(--ink-2); }
.win-body { padding:clamp(20px,3vw,28px); }
.panel-h { font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 14px; }
.mrow { display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line-soft); }
.mrow:first-of-type { border-top:0; }
.mrow .k { color:var(--ink-2); font-size:14.5px; }
.mrow .v { font-size:17px; font-weight:550; font-variant-numeric:tabular-nums; }
.mrow.total { border-top:1px solid var(--line); margin-top:4px; }
.mrow.total .k { color:var(--ink); font-weight:600; }
.mrow.total .v { color:var(--accent); font-size:26px; font-weight:750; }
.mbar { height:8px; border-radius:980px; background:var(--surface); overflow:hidden; margin-top:12px; }
.mbar i { display:block; height:100%; width:var(--w,40%); border-radius:980px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.mline { display:grid; grid-template-columns:78px 1fr 46px; align-items:center; gap:12px; margin-bottom:13px; }
.mline:last-child { margin-bottom:0; }
.mline .pn { font-size:14px; color:var(--ink-2); }
.mline .pt { height:8px; border-radius:980px; background:var(--surface); overflow:hidden; }
.mline .pt i { display:block; height:100%; width:var(--w); border-radius:980px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.mline .pv { text-align:right; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.chip-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.mchip { font-size:12px; font-weight:600; color:var(--accent-strong); background:var(--accent-tint); border-radius:8px; padding:5px 10px; }
.mnote { font-size:13px; color:var(--ink-3); margin:14px 0 0; }
.mmail { border:1px solid var(--line-soft); border-radius:12px; padding:16px 18px; background:#fff; }
.mmail .subj { font-weight:600; font-size:15px; margin:0 0 4px; }
.mmail .meta { font-size:12.5px; color:var(--ink-3); margin:0 0 12px; }
.mmail p { font-size:14px; color:var(--ink-2); margin:0 0 12px; line-height:1.5; }
.mmail .cta { display:inline-block; background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:8px 15px; border-radius:8px; text-decoration:none; }

/* "why" callout */
.why { display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,40px); margin-top:clamp(40px,5vw,60px); }
@media (min-width:760px){ .why { grid-template-columns:1fr 1fr; } }
.why-card { background:var(--panel); border-radius:18px; padding:clamp(24px,3vw,32px); box-shadow:0 0 0 1px var(--line-soft); }
.surface .why-card { background:#fff; }
.why-card h3 { margin:0 0 10px; }
.why-card p { margin:0; color:var(--ink-2); font-size:16px; line-height:1.55; }

/* steps */
.steps { display:grid; grid-template-columns:1fr; gap:clamp(24px,3.5vw,40px); margin-top:clamp(40px,5vw,60px); }
@media (min-width:760px){ .steps { grid-template-columns:repeat(3,1fr); } }
.step .num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-tint); color:var(--accent-strong); font-weight:650; font-size:15px; margin-bottom:15px; }
.step h3 { margin-bottom:9px; }
.step p { margin:0; color:var(--ink-2); font-size:16px; line-height:1.5; max-width:34ch; }

/* pricing (free vs pro) with CSS-only month/year toggle */
.pricing { margin-top:clamp(36px,5vw,56px); }
.billing-toggle { position:absolute; opacity:0; pointer-events:none; }
.bill-switch { display:inline-flex; background:var(--surface); border-radius:980px; padding:5px; gap:4px; margin-bottom:34px; }
.bill-switch label { cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-2); padding:9px 18px; border-radius:980px; transition:background .2s,color .2s; display:inline-flex; align-items:center; gap:8px; }
.bill-switch .save { font-size:11.5px; font-weight:700; color:#fff; background:var(--accent); border-radius:980px; padding:3px 8px; }
/* default (unchecked) = monthly active */
.bill-switch .m { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(8,70,46,.12); }
.billing-toggle:checked ~ .bill-switch .m { background:transparent; color:var(--ink-2); box-shadow:none; }
.billing-toggle:checked ~ .bill-switch .y { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(8,70,46,.12); }
.plans { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:720px){ .plans { grid-template-columns:1fr 1fr; } }
.plan { background:var(--panel); border-radius:20px; padding:clamp(26px,3vw,34px); box-shadow:0 0 0 1px var(--line-soft); display:flex; flex-direction:column; }
.surface .plan { background:#fff; }
.plan.pro { box-shadow:0 0 0 1.5px var(--accent); position:relative; }
.plan .pl-name { font-size:14px; font-weight:600; color:var(--accent-strong); margin:0 0 6px; letter-spacing:.01em; }
.plan .pl-tag { position:absolute; top:clamp(26px,3vw,34px); right:clamp(26px,3vw,34px); font-size:11.5px; font-weight:700; color:#fff; background:var(--accent); border-radius:980px; padding:5px 11px; }
.plan .amount { display:flex; align-items:baseline; gap:6px; margin:2px 0 2px; }
.plan .amount .big { font-size:clamp(34px,4.4vw,44px); font-weight:750; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.plan .amount .per { font-size:15px; color:var(--ink-2); }
.plan .amount .y { display:none; }
.billing-toggle:checked ~ .plans .amount .m { display:none; }
.billing-toggle:checked ~ .plans .amount .y { display:flex; }
.plan .sub { font-size:13.5px; color:var(--ink-3); margin:0 0 20px; min-height:1.2em; }
.plan .sub.y { display:none; }
.billing-toggle:checked ~ .plans .sub.m { display:none; }
.billing-toggle:checked ~ .plans .sub.y { display:block; }
.plan .amount .y.big-wrap, .plan .amount .m.big-wrap { align-items:baseline; gap:6px; }
.feat { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; }
.feat li { display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink); line-height:1.4; }
.feat li svg { flex:none; width:19px; height:19px; margin-top:1px; color:var(--accent); }
.feat li.no { color:var(--ink-3); }
.feat li.no svg { color:var(--ink-3); }
.plan .plan-cta { margin-top:auto; }
.plan .plan-cta .btn { width:100%; justify-content:center; }
.pricing-note { margin-top:22px; font-size:13.5px; color:var(--ink-2); text-align:center; max-width:60ch; margin-left:auto; margin-right:auto; }

/* trust / what leaves your shop */
.trust-grid { display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,36px); margin-top:clamp(40px,5vw,60px); }
@media (min-width:640px){ .trust-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .trust-grid { grid-template-columns:repeat(3,1fr); } }
.trust-cell .ic { width:44px; height:44px; border-radius:12px; background:var(--surface); color:var(--accent-strong); display:grid; place-items:center; margin-bottom:16px; }
.surface .trust-cell .ic { background:#fff; }
.trust-cell h3 { margin:0 0 8px; }
.trust-cell p { margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.5; max-width:36ch; }

/* FAQ */
.faq-grid { margin-top:clamp(36px,5vw,56px); display:grid; grid-template-columns:1fr; gap:0; max-width:820px; }
.faq-item { border-top:1px solid var(--line-soft); padding:clamp(18px,2.4vw,26px) 0; }
.faq-item:last-child { border-bottom:1px solid var(--line-soft); }
.faq-item h3 { font-size:clamp(17px,1.9vw,21px); margin:0 0 10px; }
.faq-item p { margin:0; color:var(--ink-2); font-size:16px; line-height:1.55; max-width:70ch; }

/* closing CTA (green wash) */
.cta-band { background:radial-gradient(1000px 560px at 50% -12%, #c7e8d8, #dcefe4 68%); text-align:center; }
.cta-band h2 { max-width:18ch; margin:0 auto; }
.cta-band .lead { margin:20px auto 0; max-width:44ch; }
.capture { margin:30px auto 0; max-width:520px; display:flex; gap:10px; }
.capture input[type=email] { flex:1; border:1px solid var(--line); border-radius:980px; padding:14px 20px; font:inherit; font-size:16px; background:#fff; }
.capture .hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.capture button[aria-busy="true"] { opacity:.7; pointer-events:none; }
.cap-err { margin:16px auto 0; font-size:15px; font-weight:500; color:#b42318; min-height:1px; }
.cap-err:empty { display:none; }
.cap-ok { display:none; }
.cta-band.done .capture { display:none; }
.cta-band.done .cap-ok { display:block; }
.cap-ok { margin:24px auto 0; font-size:19px; font-weight:600; color:var(--accent-strong); }
.cap-note { margin:16px auto 0; font-size:13px; color:var(--ink-2); }
.cap-note a { color:var(--accent-strong); }
@media (max-width:520px){ .capture { flex-direction:column; } }

/* footer */
footer { background:var(--surface); padding:clamp(48px,6vw,72px) 0; }
.foot-top { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-links { display:flex; gap:22px; flex-wrap:wrap; }
.foot-links a { color:var(--ink-2); text-decoration:none; font-size:15px; }
.foot-links a:hover { color:var(--ink); }
.foot-legal { margin-top:28px; padding-top:22px; border-top:1px solid var(--line-soft); color:var(--ink-2); font-size:13.5px; line-height:1.7; max-width:64ch; }