/* Tesla Kortingsmeter — calculator-as-landing styles (single-tool IA). Prefix: bx- */
/* Font stack per brief; tabular figures for numbers. Light + dark mode.    */

:root{
  --bx-font: "Lucida Sans","Lucida Grande","Segoe UI",sans-serif;
  --bx-accent:#f26522;        /* Dutch orange accent */
  --bx-accent-ink:#8a2f05;
  --bx-accent-2:#244e9a;      /* Delft blue */
  --bx-bg:#eef1f5;
  --bx-bg-2:#e3e7ee;
  --bx-tile:#ffffff;
  --bx-tile-2:#f6f8fb;
  --bx-ink:#12151c;
  --bx-ink-soft:#4a5160;
  --bx-line:#d7dde6;
  --bx-ok:#137a4b;
  --bx-radius:18px;
  --bx-shadow:0 1px 2px rgba(16,20,30,.05), 0 8px 24px rgba(16,20,30,.06);
  --bx-maxw:1200px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bx-bg:#0b0d12; --bx-bg-2:#0f1219; --bx-tile:#161b24; --bx-tile-2:#1b212c;
    --bx-ink:#e8ebf1; --bx-ink-soft:#a2abbb; --bx-line:#2a313d;
    --bx-accent:#ff7a3c; --bx-accent-ink:#ffd9c4; --bx-accent-2:#6f9be6;
    --bx-ok:#4fce93;
    --bx-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"]{
  --bx-bg:#eef1f5; --bx-bg-2:#e3e7ee; --bx-tile:#fff; --bx-tile-2:#f6f8fb;
  --bx-ink:#12151c; --bx-ink-soft:#4a5160; --bx-line:#d7dde6; --bx-accent:#f26522;
  --bx-accent-ink:#8a2f05; --bx-accent-2:#244e9a; --bx-ok:#137a4b;
  --bx-shadow:0 1px 2px rgba(16,20,30,.05), 0 8px 24px rgba(16,20,30,.06);
}
:root[data-theme="dark"]{
  --bx-bg:#0b0d12; --bx-bg-2:#0f1219; --bx-tile:#161b24; --bx-tile-2:#1b212c;
  --bx-ink:#e8ebf1; --bx-ink-soft:#a2abbb; --bx-line:#2a313d; --bx-accent:#ff7a3c;
  --bx-accent-ink:#ffd9c4; --bx-accent-2:#6f9be6; --bx-ok:#4fce93;
  --bx-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--bx-font); color:var(--bx-ink);
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb,var(--bx-accent) 10%, transparent), transparent 60%),
    var(--bx-bg);
  line-height:1.6; font-size:17px; overflow-x:hidden;
}
.bx-num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1}
img,svg{max-width:100%}
a{color:var(--bx-accent-2)}
a:hover{color:var(--bx-accent)}
:focus-visible{outline:3px solid var(--bx-accent); outline-offset:2px; border-radius:6px}

.bx-skip{position:absolute; left:-999px; top:0; background:var(--bx-accent); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 10px 0}
.bx-skip:focus{left:0}

/* ---- Nav ---- */
.bx-nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bx-bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--bx-line)}
.bx-nav-inner{max-width:var(--bx-maxw); margin:0 auto; display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem}
.bx-brand{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; text-decoration:none; color:var(--bx-ink); font-size:1.05rem}
.bx-brand-mark{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--bx-accent),var(--bx-accent-2)); color:#fff; font-size:1rem}
.bx-brand b{font-weight:800}
.bx-brand-nl{color:var(--bx-accent)}
.bx-nav-links{display:flex; gap:.2rem; margin-left:auto; flex-wrap:wrap}
.bx-nav-link{text-decoration:none; color:var(--bx-ink-soft); padding:.4rem .6rem; border-radius:9px; font-size:.94rem; font-weight:600}
.bx-nav-link:hover{background:var(--bx-tile-2); color:var(--bx-ink)}
.bx-nav-link.bx-is-active{color:var(--bx-accent); background:color-mix(in srgb,var(--bx-accent) 12%, transparent)}
.bx-theme-btn,.bx-menu-btn{background:var(--bx-tile); border:1px solid var(--bx-line); color:var(--bx-ink); border-radius:10px; width:38px; height:38px; cursor:pointer; font-size:1.05rem}
.bx-menu-btn{display:none; margin-left:auto}

/* ---- Main / containers ---- */
.bx-main{max-width:var(--bx-maxw); margin:0 auto; padding:1.4rem 1.1rem 3rem}
.bx-crumbs{font-size:.85rem; color:var(--bx-ink-soft); margin:.2rem 0 1rem}
.bx-crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0}
.bx-crumbs li:not(:last-child)::after{content:"›"; margin-left:.4rem; color:var(--bx-line)}
.bx-crumbs a{color:var(--bx-ink-soft)}

h1{font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.15; margin:.2rem 0 .5rem; letter-spacing:-.01em}
.bx-lead{font-size:1.12rem; color:var(--bx-ink-soft)}
.bx-verified{font-size:.85rem; color:var(--bx-ink-soft)}
.bx-verified--inline{display:inline-block; background:var(--bx-tile-2); border:1px solid var(--bx-line); padding:.25rem .6rem; border-radius:999px; margin:.3rem 0}
.bx-kicker{display:inline-block; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--bx-accent); margin:0 0 .2rem}

/* ---- Calculator-as-landing hero: the tool fills the first screen ---- */
.bx-lander{min-height:min(90vh,860px); display:flex; flex-direction:column; justify-content:center; gap:1.1rem; padding:.6rem 0 1.6rem}
.bx-lander-intro{max-width:64ch}
.bx-lander-note{font-size:.9rem; color:var(--bx-ink-soft); margin:.2rem 0 0}
.bx-lander-note a{font-weight:600; text-decoration:none}
.bx-calc-shell{background:linear-gradient(160deg,var(--bx-tile),var(--bx-tile-2)); border:1px solid var(--bx-line); border-radius:var(--bx-radius); padding:1.4rem; box-shadow:var(--bx-shadow)}

/* ---- Generic section + card ---- */
.bx-section{margin-top:2.4rem}
.bx-section>h2{font-size:1.5rem; margin:0 0 .7rem}
.bx-card{background:var(--bx-tile); border:1px solid var(--bx-line); border-radius:var(--bx-radius); padding:1.3rem; box-shadow:var(--bx-shadow)}
.bx-tile-more{margin-top:.9rem; font-weight:600}
.bx-tile-more a{text-decoration:none}
.bx-cta-band{background:var(--bx-bg-2); border:1px solid var(--bx-line); border-radius:var(--bx-radius); padding:1.4rem}
.bx-cta-band .bx-key{background:linear-gradient(160deg,var(--bx-tile),var(--bx-tile-2)); margin-top:.6rem}
.bx-order-sub{font-size:1.12rem; margin:1.3rem 0 .3rem}

/* ---- Key (code) card ---- */
.bx-key{background:linear-gradient(160deg,var(--bx-tile),var(--bx-tile-2))}
.bx-key-tag{display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--bx-accent)}
.bx-key-title{font-size:1.3rem; margin:.15rem 0 .9rem}
.bx-key-box{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem 1rem;
  background:var(--bx-bg-2); border:1px dashed color-mix(in srgb,var(--bx-accent) 45%, var(--bx-line));
  border-radius:14px; padding:1rem 1.1rem; min-height:84px}
.bx-key-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bx-ink-soft); grid-row:1; grid-column:1/3}
.bx-key-code{grid-row:2; grid-column:1/3; font-size:clamp(1.3rem,3.2vw,1.9rem); font-weight:800; letter-spacing:.01em; word-break:break-all; min-height:1.4em; display:block}
.bx-copy{grid-row:1/3; grid-column:3; align-self:center; background:var(--bx-accent); color:#fff; border:0; border-radius:11px; padding:.7rem 1rem; font-weight:800; cursor:pointer; font-family:inherit; font-size:.95rem; min-width:112px}
.bx-copy:hover{filter:brightness(1.05)}
.bx-copy .bx-copy-done{display:none}
.bx-copy.bx-is-done{background:var(--bx-ok)}
.bx-copy.bx-is-done .bx-copy-idle{display:none}
.bx-copy.bx-is-done .bx-copy-done{display:inline}
.bx-key-actions{margin-top:.9rem}
.bx-key-foot{font-size:.88rem; color:var(--bx-ink-soft); margin:.9rem 0 0}
.bx-key-ph{color:var(--bx-accent-ink)}

/* ---- Buttons ---- */
.bx-btn{display:inline-block; text-decoration:none; font-weight:800; border-radius:12px; padding:.8rem 1.2rem; border:1px solid transparent; cursor:pointer; font-family:inherit; font-size:1rem}
.bx-btn-accent{background:var(--bx-accent); color:#fff; width:100%; text-align:center}
.bx-btn-accent:hover{filter:brightness(1.06); color:#fff}
.bx-btn-quiet{background:transparent; color:var(--bx-ink); border-color:var(--bx-line)}
.bx-btn-quiet:hover{background:var(--bx-tile-2); color:var(--bx-ink)}

/* ---- Flux callout ---- */
.bx-flux{border-left:4px solid var(--bx-accent); background:color-mix(in srgb,var(--bx-accent) 8%, var(--bx-tile)); border-radius:12px; padding:1rem 1.1rem}
.bx-flux-h{margin:.1rem 0 .5rem; font-size:1.1rem}
.bx-flux-list{margin:.5rem 0; padding-left:1.1rem}
.bx-flux-list li{margin:.35rem 0}
.bx-flux-cta{font-size:.92rem; color:var(--bx-ink-soft)}

/* ---- Steps ---- */
.bx-steps{list-style:none; counter-reset:none; padding:0; margin:.5rem 0; display:grid; gap:.9rem}
.bx-step{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start}
.bx-step-n{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bx-accent-2); color:#fff; font-weight:800}
.bx-step-h{margin:.1rem 0 .2rem; font-size:1.02rem}
.bx-step p{margin:0; color:var(--bx-ink-soft); font-size:.95rem}

/* ---- FAQ ---- */
.bx-faq{display:grid; gap:.5rem}
.bx-faq-item{border:1px solid var(--bx-line); border-radius:12px; background:var(--bx-tile-2); padding:.2rem .9rem}
.bx-faq-item summary{cursor:pointer; font-weight:700; padding:.7rem 0; list-style:none}
.bx-faq-item summary::-webkit-details-marker{display:none}
.bx-faq-item summary::before{content:"+"; color:var(--bx-accent); font-weight:800; margin-right:.5rem}
.bx-faq-item[open] summary::before{content:"–"}
.bx-faq-a{padding:0 0 .8rem; color:var(--bx-ink-soft)}

/* ---- Calculator ---- */
.bx-calc{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.bx-calc-form{display:grid; gap:.9rem; align-content:start}
.bx-field{border:1px solid var(--bx-line); border-radius:12px; padding:.7rem .9rem; margin:0; background:var(--bx-tile-2)}
.bx-field legend,.bx-field>label{font-weight:700; font-size:.9rem; padding:0}
.bx-field input[type="number"]{width:100%; margin-top:.35rem; font-family:inherit; font-size:1.05rem; padding:.55rem .6rem; border:1px solid var(--bx-line); border-radius:9px; background:var(--bx-tile); color:var(--bx-ink)}
.bx-radio{display:inline-flex; align-items:center; gap:.35rem; margin:.35rem .8rem .1rem 0; font-weight:600; font-size:.95rem}
.bx-hint{display:block; font-size:.78rem; color:var(--bx-ink-soft); margin-top:.3rem}
.bx-hint--q{display:inline; font-weight:600; color:var(--bx-accent-ink)}
.bx-result{background:var(--bx-tile-2); border:1px solid var(--bx-line); border-radius:14px; padding:1.1rem; align-self:start; min-height:320px}
.bx-result-h{margin:.1rem 0 .8rem; font-size:1.05rem}
.bx-result-row{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.55rem 0; border-bottom:1px dashed var(--bx-line); min-height:2.6em}
.bx-result-sub .bx-result-lbl{color:var(--bx-ink-soft)}
.bx-result-lbl{font-size:.92rem}
.bx-result-val{font-weight:800; text-align:right; white-space:nowrap}
.bx-result-total{border-bottom:0; border-top:2px solid var(--bx-ink); margin-top:.3rem; padding-top:.7rem; font-size:1.05rem}
.bx-result-total .bx-result-val{font-size:1.3rem; color:var(--bx-accent)}
.bx-result-caveat{font-size:.8rem; color:var(--bx-ink-soft); margin:.8rem 0 0}

/* ---- Sources ---- */
.bx-sources{margin-top:2rem; background:var(--bx-tile); border:1px solid var(--bx-line); border-radius:var(--bx-radius); padding:1.3rem; box-shadow:var(--bx-shadow)}
.bx-sources-lead{color:var(--bx-ink-soft)}
.bx-sources-list{margin:.5rem 0; padding-left:1.1rem}
.bx-sources-list li{margin:.3rem 0}

/* ---- Prose ---- */
.bx-prose{max-width:75ch}
.bx-prose--wide{max-width:100%}
.bx-prose h2{font-size:1.4rem; margin:2rem 0 .6rem}
.bx-prose h3{font-size:1.12rem; margin:1.3rem 0 .4rem}
.bx-prose p,.bx-prose li{color:var(--bx-ink)}
.bx-prose code{background:var(--bx-tile-2); border:1px solid var(--bx-line); border-radius:6px; padding:.05rem .35rem; font-size:.9em}
.bx-defs h3{color:var(--bx-accent-2)}

/* ---- Blog ---- */
.bx-blog-list{list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:1rem}
.bx-blog-card{background:var(--bx-tile); border:1px solid var(--bx-line); border-radius:var(--bx-radius); padding:1.1rem 1.3rem; box-shadow:var(--bx-shadow)}
.bx-blog-card h2{font-size:1.15rem; margin:0 0 .3rem}
.bx-blog-card h2 a{text-decoration:none; color:var(--bx-ink)}
.bx-blog-card h2 a:hover{color:var(--bx-accent)}
.bx-blog-meta{font-size:.8rem; color:var(--bx-ink-soft); margin:0 0 .4rem}
.bx-blog-card p:last-child{margin-bottom:0; color:var(--bx-ink-soft)}
.bx-disclosure--inline{background:var(--bx-tile-2); border:1px solid var(--bx-line); border-radius:12px; padding:.8rem 1rem; margin-top:1.6rem}
.bx-blog-badge{display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; background:var(--bx-tile-2); border:1px solid var(--bx-line); border-radius:6px; padding:.1rem .4rem; margin-right:.4rem; color:var(--bx-ink-soft)}
.bx-news-figure{margin:1.2rem 0 1.6rem; border:1px solid var(--bx-line); border-radius:var(--bx-radius); overflow:hidden; background:var(--bx-tile)}
.bx-news-figure img{display:block; width:100%; height:auto}
.bx-news-figure figcaption{padding:.55rem .9rem; font-size:.8rem; color:var(--bx-ink-soft)}
.bx-news-figure figcaption a{color:inherit}

/* ---- Footer ---- */
.bx-footer{border-top:1px solid var(--bx-line); background:var(--bx-bg-2); margin-top:2rem}
.bx-foot-grid{max-width:var(--bx-maxw); margin:0 auto; padding:2rem 1.1rem; display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.6rem}
.bx-brand--foot{margin-bottom:.5rem}
.bx-foot-lead{color:var(--bx-ink-soft); font-size:.95rem; max-width:52ch}
.bx-disclosure{font-size:.82rem; color:var(--bx-ink-soft); margin-top:.8rem}
.bx-foot-col h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bx-ink-soft)}
.bx-foot-col a{display:block; text-decoration:none; color:var(--bx-ink); padding:.2rem 0; font-size:.95rem}
.bx-foot-col a:hover{color:var(--bx-accent)}
.bx-foot-base{max-width:var(--bx-maxw); margin:0 auto; padding:1rem 1.1rem; border-top:1px solid var(--bx-line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.85rem; color:var(--bx-ink-soft)}

/* ---- Responsive ---- */
@media (max-width:900px){
  .bx-calc{grid-template-columns:1fr}
  .bx-lander{min-height:0}
  .bx-foot-grid{grid-template-columns:1fr}
  .bx-nav-links{display:none; position:absolute; top:56px; left:0; right:0; flex-direction:column; background:var(--bx-bg); border-bottom:1px solid var(--bx-line); padding:.6rem}
  .bx-nav-links.bx-is-open{display:flex}
  .bx-menu-btn{display:block}
  .bx-nav-inner{position:relative}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}