/* Store Build bestelpagina: gedeelde basis voor de drie ontwerpen. Huisstijl van Nightlane (papier, inkt, smaragd).
   Eén lichte weergave, bewust. Alle kleur loopt via de tokens hieronder. */
:root{
  --paper:#f1f3ee; --surface:#ffffff; --field:#fafbf8;
  --ink:#101412; --ink-card:#1a201c; --ink-2:#454d47; --muted:#5a625c;
  --line:#d3d8cf; --line-strong:rgba(16,20,18,.22);
  --accent:#0e7a53; --accent-deep:#0a5c3f; --accent-soft:#35c08c; --accent-tint:#dff1e8; --on-accent:#ffffff;
  --on-dark:#f1f3ee; --on-dark-2:#b5bcb6; --on-dark-mut:#939b95; --line-dark:rgba(255,255,255,.16);
  --err:#a8331f; --err-soft:#f8e4df; --warn-soft:#f6efd9; --no:#e5677a;
  --ring:rgba(14,122,83,.2);
  --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(18px,5vw,64px);
  --ease-out:cubic-bezier(0,0,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,dl,dd,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px;border-radius:4px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--accent)}
.body{max-width:62ch;color:var(--ink-2)}

/* merk */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:inherit}
/* het bewegende teken van Nightlane: een buis met licht van linksboven; mark.js laat hem lopen */
.mark{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;
  --mk-hi:#5c675f;--mk-mid:#1a201c;--mk-lo:#030504;--mk-dot-hi:#55d9a5;--mk-dot:var(--accent);--mk-dot-lo:#06472f;
  --mk-gloss:.5;--mk-shade:rgba(16,20,18,.34);--mk-ground:rgba(16,20,18,.34)}
.mark--dark{--mk-hi:#ffffff;--mk-mid:#e9ece5;--mk-lo:#98a29a;--mk-dot-hi:#9df0cb;--mk-dot:var(--accent-soft);--mk-dot-lo:#107a55;
  --mk-gloss:.9;--mk-shade:rgba(0,0,0,.6);--mk-ground:rgba(53,192,140,.45)}
.mark-float{position:relative;z-index:1;display:block;width:100%;height:100%;animation:mark-float 7s ease-in-out infinite;transition:transform .3s var(--ease-out)}
.mark svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px var(--mk-shade))}
.mark::after{content:"";position:absolute;left:10%;right:10%;top:100%;height:30%;border-radius:50%;background:var(--mk-ground);filter:blur(5px);opacity:.75;transform:translateY(14%);animation:mark-shadow 7s ease-in-out infinite}
.brand:hover .mark-float{transform:translateY(-2px) rotate(-8deg)}
@keyframes mark-float{0%,100%{translate:0 1px;rotate:0deg}50%{translate:0 -3px;rotate:-2.5deg}}
@keyframes mark-shadow{0%,100%{scale:1;opacity:.75}50%{scale:.84;opacity:.5}}
.brand-name{font:700 1.2rem/1 var(--font-display);letter-spacing:-.02em}
.brand-sub{font-size:.82rem;font-weight:500;line-height:1;color:var(--muted);padding-left:10px;border-left:1.5px solid var(--line-strong)}

/* knoppen */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font:700 15.5px/1 var(--font-sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .1s var(--ease-out),background-color .2s,color .2s,border-color .2s}
.pill:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill:active{transform:scale(.97)}
.pill svg{width:17px;height:17px;flex:none}
.pill--line{min-height:44px;padding:0 20px;font-size:14px;background:transparent;color:inherit;border-color:currentColor}
.pill--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.pill[aria-disabled="true"],.pill[aria-disabled="true"]:hover{background:transparent;border-style:dashed;border-color:currentColor;color:inherit;opacity:.72}

/* prijs */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:.95rem;color:var(--muted)}
.price b{font:800 2.5rem/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.price--xl b{font-size:clamp(3.6rem,10vw,5.2rem);font-stretch:87.5%;line-height:.9}
.pc-sub{font-size:.95rem;color:var(--muted)}
.nextline{font-size:.92rem;font-weight:600}
.fine,.vat{font-size:.86rem;line-height:1.5;color:var(--muted);max-width:60ch}

/* lijsten */
.ticks{display:grid;gap:18px 32px}
@media (min-width:720px){.ticks{grid-template-columns:1fr 1fr}}
.ticks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.ticks svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.ticks b{display:block;font-weight:650}
.ticks span{display:block;font-size:.93rem;color:var(--muted)}
.plain{display:flex;flex-direction:column;gap:8px;font-size:.93rem}
.plain li{position:relative;padding-left:18px}
.plain li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:currentColor;opacity:.6}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:9px 16px;border:1.5px solid var(--line-strong);border-radius:999px;font-size:.93rem;font-weight:600;background:var(--surface)}
.who{display:inline-block;font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:6px}
.who-you{background:var(--ink);color:var(--paper)}
.who-we{background:var(--accent-tint);color:var(--accent-deep)}

/* toegang */
.acc{display:grid;gap:14px}
@media (min-width:720px){.acc{grid-template-columns:1fr 1fr}}
.acc-col{border-radius:20px;padding:22px;border:1.5px solid var(--line-strong);min-width:0}
.acc-yes{background:var(--accent-tint);border-color:rgba(14,122,83,.35)}
.acc-no{background:var(--surface)}
.acc-h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.acc ul{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.acc li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-weight:550}
.acc svg{width:18px;height:18px;margin-top:.22em}
.acc-yes svg{color:var(--accent)}
.acc-no svg{color:var(--err)}
.acc-note{font-size:.95rem;color:var(--ink-2);max-width:62ch}

/* vragen */
.faq-list{border-bottom:1.5px solid var(--faq-line,var(--line-strong))}
.faq-list details{border-top:1.5px solid var(--faq-line,var(--line-strong))}
.faq-list summary{position:relative;list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:700 1.12rem/1.25 var(--font-display);letter-spacing:-.012em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-54%);font:400 22px/1 var(--font-sans);color:var(--faq-plus,var(--accent));transition:transform .25s var(--ease-out)}
.faq-list details[open] summary::after{transform:translateY(-54%) rotate(45deg)}
.faq-list details p{padding:0 0 22px;max-width:62ch;color:var(--faq-text,var(--ink-2))}

/* illustratie: schematisch, met label */
.illu{position:relative;margin:0;padding-top:12px}
.illu svg{display:block;width:100%;height:auto}
.illu-tag{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;padding:3px 10px;border:1px solid var(--il-line,var(--line-strong));border-radius:999px;background:var(--il-tag,var(--paper));color:var(--il-text,var(--muted));font:500 10.5px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.illu figcaption{display:grid;grid-template-columns:43.75% 1fr 43.75%;margin-top:10px;font-size:.8rem;line-height:1.35;text-align:center;color:var(--il-text,var(--muted))}
.illu figcaption span:last-child{grid-column:3}
.il-frame{fill:var(--il-surface,#fff);stroke:var(--il-line,rgba(16,20,18,.22));stroke-width:1.5}
.il-dot{fill:var(--il-line,rgba(16,20,18,.22))}
.il-b,.il-btn{fill:var(--il-block,#e2e6dd)}
.il-own .il-frame{stroke:var(--il-accent,var(--accent));stroke-width:2;stroke-dasharray:7 6}
.il-own .il-b{fill:var(--il-own-block,#cfe8db)}
.il-own .il-btn{fill:var(--il-accent,var(--accent))}
.il-arrow{fill:none;stroke:var(--il-ink,var(--ink));stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* klaarleggen */
.ready{border:1.5px dashed var(--line-strong);border-radius:18px;padding:18px 20px;min-width:0}
.ready-h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ready ol{counter-reset:r;display:grid;gap:12px 22px;margin-top:12px}
@media (min-width:760px){.ready ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ready li{counter-increment:r;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;font-size:.92rem;line-height:1.4}
.ready li::before{content:counter(r);grid-row:span 2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:600 12px/1 var(--font-mono)}
.ready li b{font-weight:650}
.ready li span{color:var(--muted)}

/* meldingen */
.notice{border-radius:18px;padding:18px 20px;border:1.5px solid var(--line-strong);color:var(--ink)}
.notice h3{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.notice.full{background:var(--warn-soft)}
.notice.closed{background:var(--accent-tint)}
.notice.cancelled{background:var(--surface)}

/* formulier */
fieldset{border:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:18px}
/* zwevend: dan is het geen 'echte' legend meer en doet hij gewoon mee in de kolom (geen streep door de rand) */
legend{float:left;width:100%;display:flex;align-items:center;gap:10px;padding:0 0 2px;font:700 1.2rem/1.2 var(--font-display);letter-spacing:-.015em}
legend span{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:600 12px/1 var(--font-mono)}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-items:start}
@media (max-width:600px){.two{grid-template-columns:1fr}}
label{font-weight:600;font-size:.95rem}
.opt{font-weight:400;color:var(--muted);font-size:.85rem}
.hint{font-size:.86rem;line-height:1.45;color:var(--muted)}
input[type=text],input[type=email],input[type=url],select,textarea{-webkit-appearance:none;appearance:none;width:100%;min-width:0;min-height:52px;padding:14px;border:1.5px solid var(--line-strong);border-radius:12px;background-color:var(--field);color:var(--ink);font:400 16px/1.3 var(--font-sans);transition:border-color .15s,box-shadow .15s}
select{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23101412' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
input::placeholder,textarea::placeholder{color:#8b928c}
input[type=text]:focus,input[type=email]:focus,input[type=url]:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
input.code{width:8.6ch;min-width:132px;text-align:center;font-family:var(--font-mono);font-size:20px;letter-spacing:.35em;padding-left:calc(14px + .35em)}
textarea{min-height:120px;resize:vertical}
.bad input[type=text],.bad input[type=email],.bad input[type=url],.bad select,.bad textarea{border-color:var(--err);background-color:var(--err-soft)}
.msg{font-size:.86rem;font-weight:600;color:var(--err)}
.help{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.92rem;background:var(--field)}
.help summary{cursor:pointer;font-weight:600}
.help ol{list-style:decimal;margin:10px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.check{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-size:.95rem}
.check input{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin:0;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--field);display:grid;place-content:center;cursor:pointer;transition:background-color .12s,border-color .12s}
.check input::after{content:"";width:12px;height:7px;border:solid var(--on-accent);border-width:0 0 2.5px 2.5px;transform:translateY(-1.5px) rotate(-45deg) scale(0);transition:transform .12s var(--ease-out)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{transform:translateY(-1.5px) rotate(-45deg) scale(1)}
.check label{font-weight:400;cursor:pointer}
.bad .check input{border-color:var(--err);background:var(--err-soft)}
.count{font-size:.8rem;color:var(--muted);align-self:flex-end;font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;padding:0 16px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 clamp(.84rem,3.75vw,1.06rem)/1.2 var(--font-sans);letter-spacing:-.01em;cursor:pointer;transition:transform .1s var(--ease-out),background-color .2s}
.send:hover{background:var(--accent-deep)}
.send:active{transform:scale(.985)}
.send[disabled]{opacity:.45;cursor:default;transform:none;background:var(--accent)}
.pay{text-align:center}
.formerror{background:var(--err-soft);color:var(--err);border-radius:12px;padding:12px 14px;font-size:.92rem;font-weight:600}

/* voet met de wettelijke gegevens, klein */
.foot{padding:26px var(--gutter) 40px;border-top:1px solid var(--line);font-size:.78rem;line-height:1.55;color:var(--muted)}
.foot p{max-width:96ch}
.foot .draft{font-style:italic;margin-top:6px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
.foot a{color:inherit;text-underline-offset:3px}
.foot a:hover{color:var(--ink)}

/* voorwaarden, privacy en herroeping: één leeskolom */
.is-legal .foot{padding-bottom:40px}
.legal{max-width:calc(720px + 2 * var(--gutter));margin-inline:auto;padding:clamp(20px,5vw,56px) var(--gutter) 72px;display:flex;flex-direction:column;gap:30px}
.legal-head h1{margin-top:10px;font:800 clamp(2.1rem,6.6vw,3.4rem)/1.02 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.legal-date{margin-top:12px;font-size:.86rem;color:var(--muted)}
.legal section{display:flex;flex-direction:column;gap:10px;min-width:0}
.legal h2{font:700 1.18rem/1.25 var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.legal p,.legal li{max-width:68ch;color:var(--ink-2);overflow-wrap:anywhere}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;list-style:disc}
.legal a{color:var(--accent);text-underline-offset:3px}
.legal .wd-form{display:flex;flex-direction:column;gap:18px}
.legal .wd-done{display:block}
.legal .wd-done[hidden]{display:none}

/* vaste balk onderaan op de telefoon */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--on-dark);border-top:1px solid var(--line-dark);transition:transform .25s var(--ease-out),visibility 0s}
.bar p{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bar b{font:800 1.3rem/1.1 var(--font-display);letter-spacing:-.02em}
.bar p span{font-size:.74rem;color:var(--on-dark-2)}
.bar .pill{min-height:48px;padding:0 20px;background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-size:15px}
.bar .pill[aria-disabled="true"]{background:transparent;color:var(--on-dark);border-color:var(--on-dark-2)}
.bar.is-away{transform:translateY(110%);visibility:hidden;transition:transform .25s var(--ease-out),visibility 0s .25s}
@media (max-width:899px){.foot{padding-bottom:104px}}
@media (min-width:900px){.bar{display:none}}

/* bedankpagina */
.is-thanks .foot{padding-bottom:40px}
.thanks{max-width:calc(760px + 2 * var(--gutter));margin-inline:auto;padding:clamp(20px,5vw,56px) var(--gutter) 72px;display:flex;flex-direction:column;gap:clamp(32px,5vw,48px)}
.t-hero h1{margin-top:10px;font-size:clamp(2.3rem,7.4vw,4rem);font-weight:800;line-height:1;letter-spacing:-.035em}
.t-hero .lede{margin-top:18px;font-size:1.05rem;color:var(--ink-2)}
.ordernr{font:600 .95rem/1 var(--font-mono);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:8px;padding:4px 9px;white-space:nowrap}
.thanks h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.t-now{background:var(--accent);color:var(--on-accent);border-radius:26px;padding:clamp(22px,4.5vw,40px)}
.t-steps{margin-top:16px}
.t-steps li{display:grid;grid-template-columns:clamp(52px,12vw,76px) minmax(0,1fr);gap:14px;padding:18px 0;border-top:1.5px solid rgba(255,255,255,.3)}
.t-steps li:last-child{padding-bottom:0}
.t-n{font:800 clamp(2.6rem,9vw,3.6rem)/.82 var(--font-display);font-stretch:75%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.t-steps b{display:block;font-size:1.06rem}
.t-steps div span{display:block;margin-top:2px;font-size:.95rem;color:rgba(255,255,255,.9)}
.t-know ul{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.t-know li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;color:var(--ink-2)}
.t-know svg{width:20px;height:20px;margin-top:.2em;color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .mark-float,.mark::after{animation:none}
}


/* ===== Ontwerp 1: de rustige uitleg =====
   Papier, één leeskolom, één smaragd band voor de stappen, formulier op één scherm in een witte kaart. */
.d1 .wrap{max-width:calc(840px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.d1 .top{max-width:calc(840px + 2 * var(--gutter));margin-inline:auto}
@media (max-width:599px){.d1 .top-cta,.d1 .hero .fine{display:none}}

.d1 .hero{padding-block:clamp(20px,5vw,56px) clamp(36px,6vw,56px)}
.d1 .hero h1{margin-top:12px;font-size:clamp(2.55rem,8.6vw,4.7rem);font-weight:800;line-height:.98;letter-spacing:-.035em}
.d1 .hero .lede{margin-top:20px;font-size:1.1rem;color:var(--ink-2);max-width:54ch}
.d1 .hero-buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:26px}
.d1 .hero .fine,.d1 .hero .nextline{margin-top:14px}
.d1 .trio{display:grid;margin-top:32px;border-top:1.5px solid var(--ink)}
.d1 .trio li{display:grid;grid-template-columns:8.6rem minmax(0,1fr);align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-strong)}
.d1 .trio b{font:800 1.35rem/1.1 var(--font-display);letter-spacing:-.02em}
.d1 .trio span{font-size:.93rem;color:var(--muted)}
@media (min-width:760px){
  .d1 .trio{grid-template-columns:repeat(3,1fr);gap:0 28px;border-bottom:1px solid var(--line-strong)}
  .d1 .trio li{display:flex;flex-direction:column;gap:4px;border-bottom:0;padding:18px 0}
}

.d1 .sec{display:flex;flex-direction:column;gap:20px;padding-top:clamp(56px,8vw,96px)}
.d1 .sec>.eyebrow,.d1 .how .eyebrow{margin-bottom:-10px}
.d1 h2{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:700;line-height:1.04;letter-spacing:-.028em}

.d1 .how{margin-top:clamp(56px,8vw,96px);padding-block:clamp(48px,7vw,88px);background:var(--accent);color:var(--on-accent);--focus:var(--paper)}
.d1 .how .wrap{display:flex;flex-direction:column;gap:20px}
.d1 .how .eyebrow{color:rgba(255,255,255,.85)}
.d1 .lanes{margin-top:8px;border-bottom:1.5px solid rgba(255,255,255,.32)}
.d1 .lanes li{display:grid;grid-template-columns:clamp(58px,13vw,104px) minmax(0,1fr);gap:16px;padding:22px 0;border-top:1.5px solid rgba(255,255,255,.32)}
.d1 .lane-n{font:800 clamp(3rem,10vw,5rem)/.8 var(--font-display);font-stretch:75%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.d1 .lanes h3{margin-top:8px;font-size:1.45rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.d1 .lanes li div>p:last-child{margin-top:4px;color:rgba(255,255,255,.92);max-width:52ch}
.d1 .how .who-you{background:var(--paper);color:var(--ink)}
.d1 .how .who-we{background:transparent;color:var(--on-accent);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}

.d1 .pricecard{display:grid;gap:28px;padding:clamp(22px,4.5vw,44px);background:var(--surface);border:1.5px solid var(--ink);border-radius:28px}
.d1 .pc-main{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.d1 .pc-main .pill{margin-top:10px}
.d1 .pc-side{min-width:0;padding-top:24px;border-top:1.5px dashed var(--line-strong)}
.d1 .pc-side .plain{margin-top:12px;color:var(--ink-2)}
@media (min-width:800px){
  .d1 .pricecard{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px}
  .d1 .pc-side{padding:0 0 0 44px;border-top:0;border-left:1.5px dashed var(--line-strong)}
}

.d1 .order{padding-bottom:clamp(48px,7vw,88px)}
.d1 .card{display:flex;flex-direction:column;gap:22px;padding:6px clamp(18px,4.5vw,40px) clamp(24px,4.5vw,40px);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:28px}
.d1 .card fieldset{padding-block:26px 30px;border-bottom:1.5px solid var(--line)}
.d1 .card fieldset:last-of-type{border-bottom:0;padding-bottom:4px}
.d1 .card .send{margin-top:-4px}
.d1 .card .pay{margin-top:-10px}
.d1 .foot{padding-inline:max(var(--gutter),calc((100% - 840px) / 2))}


/* ===== Ontwerp 1 kort =====
   Zelfde stijl als 1-uitleg (die regels gaan hieraan vooraf). De pagina hoeft de verkoop niet meer te maken:
   opening met prijs, wat je krijgt in één lijst, vijf korte stappen, toegang in één alinea, formulier (btw-uitleg bij de betaalknop), vier vragen eronder.
   Weg ten opzichte van de lange versie: de tekening, de drie feiten, het apps-blok en de prijskaart.
   Sinds 13-10-2026 is dit het gekozen ontwerp: build.py schrijft het ook naar dist/. */
.dk .hero{padding-bottom:clamp(8px,2vw,16px)}
.dk .hero .fine{display:block}
.dk .sec{padding-top:clamp(36px,6vw,60px);gap:14px}
.dk h2{font-size:clamp(1.45rem,4.4vw,1.9rem);letter-spacing:-.022em;line-height:1.1}
.dk .order h2{font-size:clamp(1.9rem,5.4vw,3rem);letter-spacing:-.028em;line-height:1.04}

.dk .klist{display:grid;gap:10px 28px;font-weight:550}
.dk .klist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.dk .klist svg{width:22px;height:22px;padding:4px;margin-top:.12em;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.dk .klist .kg{margin-top:6px;padding-top:14px;border-top:1px solid var(--line-strong);font-weight:400;color:var(--ink-2)}
.dk .klist .kg b{font-weight:650;color:var(--ink)}
@media (min-width:640px){.dk .klist{grid-template-columns:1fr 1fr}.dk .klist .kg{grid-column:1 / -1}}

.dk .how{margin-top:clamp(36px,6vw,60px);padding-block:clamp(30px,5vw,48px)}
.dk .how .wrap{gap:14px}
.dk .ksteps{counter-reset:k;border-bottom:1.5px solid rgba(255,255,255,.32)}
.dk .ksteps li{counter-increment:k;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start;padding:13px 0;border-top:1.5px solid rgba(255,255,255,.32)}
.dk .ksteps li::before{content:counter(k,decimal-leading-zero);font:800 2rem/.86 var(--font-display);font-stretch:75%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dk .ksteps b{font:700 1.1rem/1.2 var(--font-display);letter-spacing:-.012em;margin-right:10px}
.dk .ksteps .who{vertical-align:2px}
.dk .ksteps p{margin-top:3px;font-size:.93rem;line-height:1.4;color:rgba(255,255,255,.93)}
@media (min-width:760px){
  .dk .ksteps li div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:4px 20px;align-items:baseline}
  .dk .ksteps b{grid-column:1}
  .dk .ksteps .who{grid-column:1;justify-self:start}
  .dk .ksteps p{grid-column:2;grid-row:1 / span 2;margin-top:0;font-size:.98rem}
}

.dk .card .vat{max-width:none;text-align:center;font-size:.8rem;margin-top:-10px}
.dk .order{padding-bottom:0}
.dk .kfaq{padding-bottom:clamp(48px,7vw,88px)}