@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#EDF3F6; --surface:#FFFFFF; --surface-2:#F5F9FB;
  --ink:#494851; --ink-2:#5E5D68; --ink-3:#8B8A94;
  --line:#DBE5EB; --line-2:#EAF1F5;
  --accent:#1BA8DD; --accent-2:#6EC1E4; --accent-soft:#E6F5FB; --accent-ink:#0F7BA5;
  --amber-bg:#FDF3E2; --amber-ink:#8A5410; --amber-line:#E0A94E;
  --good-bg:#E4F4EC; --good-ink:#1C6B47;
  --bad-ink:#B3261E;
  --chrome:#E2EAEF; --chrome-ink:#7A8894;
  --btn-ink:#FFFFFF;
  --spice:#A8551A; --spice-2:#C2661A; --spice-ink:#FFFFFF; --spice-soft:#FBEEE2;
  --shadow:0 1px 2px rgba(73,72,81,.06),0 10px 30px rgba(73,72,81,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1319; --surface:#161C23; --surface-2:#1C232B;
    --ink:#E6EAEF; --ink-2:#B3BBC5; --ink-3:#87909B;
    --line:#2B333C; --line-2:#232B33;
    --accent:#45BFEE; --accent-2:#7FD2F5; --accent-soft:#10303D; --accent-ink:#8AD6F5;
    --amber-bg:#33260F; --amber-ink:#F0CC93; --amber-line:#8C6528;
    --good-bg:#12291F; --good-ink:#87D2AC;
    --bad-ink:#F0938A;
    --chrome:#1B222A; --chrome-ink:#87909B;
    --btn-ink:#08222C;
    --spice:#E8A05C; --spice-2:#F2B579; --spice-ink:#2A1608; --spice-soft:#33230E;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1319; --surface:#161C23; --surface-2:#1C232B;
  --ink:#E6EAEF; --ink-2:#B3BBC5; --ink-3:#87909B;
  --line:#2B333C; --line-2:#232B33;
  --accent:#45BFEE; --accent-2:#7FD2F5; --accent-soft:#10303D; --accent-ink:#8AD6F5;
  --amber-bg:#33260F; --amber-ink:#F0CC93; --amber-line:#8C6528;
  --good-bg:#12291F; --good-ink:#87D2AC;
  --bad-ink:#F0938A;
  --chrome:#1B222A; --chrome-ink:#87909B;
  --btn-ink:#08222C;
  --spice:#E8A05C; --spice-2:#F2B579; --spice-ink:#2A1608; --spice-soft:#33230E;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
}
/* type scale, one ladder for the whole site
   display 42 · section 32 · sub 21 · lead 21 · body 17 · small 16 · caption 14 · micro 12 */
:root{
  --t-display:26px; --t-h2:20px; --t-h3:15px; --t-lead:15px;
  --t-body:14px; --t-small:13px; --t-caption:11px; --t-micro:10px;
  --lh-tight:1.2; --lh-head:1.3; --lh-body:1.65;
}
@media(max-width:1100px){
  :root{--t-display:24px; --t-h2:19px; --t-h3:15px; --t-lead:14.5px}
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:var(--t-body); line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Inter,system-ui,sans-serif; text-wrap:balance; margin:0}
.mono{font-variant-numeric:tabular-nums}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{max-width:1180px;margin:0 auto;padding:18px 16px 60px}
.browser{border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}

.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px 0;flex-wrap:wrap}
.logo{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.1}
.logo em{font-style:normal;color:var(--ink)}
.wordmark{display:block;height:23px;width:auto;--nx-ink:var(--ink);--nx-accent:#4D9AF9}
.qb-head .live .wordmark{height:14px;--nx-ink:#FFFFFF;--nx-accent:#B9D4FD;margin:0 4px 0 2px}
@media print{.wordmark{--nx-ink:#0B0B0B;--nx-accent:#4D9AF9}}
.logo small{display:block;font-weight:400;font-size:var(--t-caption);color:var(--ink-3);letter-spacing:0;margin-top:3px}
.head-right{display:flex;gap:16px;align-items:stretch;min-width:0}
.head-tools{display:flex;flex-direction:column;gap:9px;align-items:flex-end;min-width:0}
.langs .calcbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font:600 12px/1 Inter,sans-serif;letter-spacing:.01em;white-space:nowrap;border-radius:7px;background:var(--accent);color:var(--btn-ink);border:1px solid var(--accent);transition:box-shadow .2s}
.langs .calcbtn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--btn-ink)}
.calcbtn:hover{box-shadow:0 0 16px rgba(27,168,221,.45)}
.calcbtn svg{width:18px;height:18px;flex:0 0 auto}
.search{display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;align-items:stretch;min-width:0}
.search-field{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.search-field svg{position:absolute;left:12px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.search-field:focus-within svg{color:var(--accent)}
.search input{font:400 var(--t-small)/1 Inter,sans-serif; padding:11px 13px 11px 38px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); width:264px; max-width:100%; min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{border-color:var(--accent-2)}
.search .btn{flex:0 0 auto;white-space:nowrap;gap:7px}
.btn-ico{width:15px;height:15px;flex:0 0 auto}
.hit{border:1px solid var(--line-2);border-radius:7px;padding:15px 18px;background:var(--surface-2);cursor:pointer;display:flex;flex-direction:column;gap:5px}
.hit:hover{border-color:var(--accent-2)}
.hit .where{font-size:var(--t-micro); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.hit b{font-size:14px; color:var(--ink)}
.hit p{margin:0; font-size:var(--t-small)}
.hit mark{background:var(--accent-soft);color:var(--accent-ink);padding:0 2px;border-radius:2px}
.qa{border:1px solid var(--line-2);border-radius:7px;overflow:hidden}
.qa details{border-bottom:1px solid var(--line-2)}
.qa details:last-child{border-bottom:0}
.qa summary{cursor:pointer; padding:10px 14px; font-weight:600; font-size:13px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--accent);font-weight:700;font-size:19px;line-height:1}
.qa details[open] summary::after{content:"\2212"}
.qa details[open] summary{background:var(--surface-2)}
.qa .a{padding:2px 14px 12px; background:var(--surface-2)}
.qa .a p{font-size:var(--t-small); margin:0 0 10px}
.qa .a p:last-child{margin:0}
.qa .a ul{margin:0 0 10px; padding-left:20px; font-size:var(--t-small); color:var(--ink-2)}
.qa .a li{margin-bottom:5px}
@media(max-width:760px){
  .head-right{width:100%}
  .langs{flex-wrap:wrap}
  .calcbtn{flex:1 1 100%;justify-content:center;padding:11px 14px}
  .head-tools{align-items:stretch;width:100%}
  .search{width:100%}
  .search input{width:100%}
  .search .btn span{display:none}
  .search .btn{padding:9px 13px}
}
.langs{display:flex;gap:8px;align-items:center}
.langs .cur{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-2);border-radius:7px;padding:7px 11px}
.langs select{font:600 12.5px/1 Inter,sans-serif;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:8px 10px;cursor:pointer;max-width:230px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.langs button{font:600 12px/1 Inter,sans-serif;padding:7px 11px;border-radius:7px;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--ink-2);letter-spacing:.04em}
.langs button:hover{color:var(--accent)}
.langs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-2)}
nav{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:8px 18px 0;border-bottom:1px solid var(--line)}nav button,nav a{position:relative; font:600 12px/1.35 Inter,sans-serif; background:none; border:0; cursor:pointer; color:var(--ink-2); padding:6px 16px 6px 0; border-bottom:3px solid transparent; text-align:left; width:100%}nav button[data-tip],nav a[data-tip]{text-decoration:underline dotted var(--line);text-underline-offset:4px}nav button[data-tip]:hover,nav a[data-tip]:hover{text-decoration-color:var(--accent)}nav button[data-tip]::after,nav a[data-tip]::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 2px);
  white-space:nowrap;background:var(--ink);color:var(--paper);font:500 11.5px/1.4 Inter,sans-serif;
  letter-spacing:.015em;padding:6px 10px;border-radius:7px;opacity:0;visibility:hidden;
  transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;pointer-events:none;z-index:8}nav button[data-tip]:hover::after,nav button[data-tip]:focus-visible::after,nav a[data-tip]:hover::after,nav a[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:900px){nav{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){nav{grid-template-columns:repeat(2,1fr)}nav button,nav a{font-size:var(--t-caption)}}nav button:hover,nav a:hover{color:var(--accent)}nav button[aria-current="page"],nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.menubtn{display:none;align-items:center;gap:8px;font:600 12px/1 Inter,sans-serif;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 12px;cursor:pointer}
.menubtn[aria-expanded="true"]{color:var(--accent-ink);border-color:var(--accent-2);background:var(--accent-soft)}
@media(max-width:640px){
  .masthead{flex-wrap:wrap}
  .menubtn{display:inline-flex;order:2}
  .head-tools{order:3;width:100%}
  nav{display:none;grid-template-columns:repeat(2,1fr);gap:0 12px;padding:6px 12px 8px}
  nav .navcell{grid-column:1/-1}
  nav.open{display:grid}nav button,nav a{padding:10px 8px;border-bottom:1px solid var(--line-2);font-size:13px}nav button[aria-current="page"],nav a[aria-current="page"]{border-bottom:1px solid var(--line-2);background:var(--accent-soft);border-radius:5px}nav button[data-tip]::after,nav a[data-tip]::after{display:none}
  .navcell .ddpanel{position:static;display:none;min-width:0;max-width:none;box-shadow:none;border:0;border-left:2px solid var(--accent-2);margin:0 0 6px 10px;padding:2px 0 4px 8px}
  .navcell.open .ddpanel{display:flex}
  .navcell:hover .ddpanel{display:none}
  .navcell.open:hover .ddpanel{display:flex}
}

main{padding:20px 22px 34px; display:flex; flex-direction:column; gap:20px}
.headblock{display:grid;gap:3px}
.subhead{font-style:italic; font-weight:700; font-size:var(--t-h3); line-height:1.3; color:var(--ink); margin:0; max-width:88ch}
.eyebrow{font-size:var(--t-micro); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}
h1{font-size:var(--t-display); line-height:var(--lh-tight); font-weight:600; letter-spacing:-.02em; color:var(--ink)}
h2{font-size:var(--t-h2); font-weight:600; letter-spacing:-.015em; color:var(--ink); line-height:var(--lh-head)}
h3,h2.h3{font-size:var(--t-h3); font-weight:600; color:var(--accent-ink); line-height:1.3; letter-spacing:-.002em}
p{margin:0 0 8px; max-width:96ch; color:var(--ink-2); font-size:var(--t-body); line-height:1.5}
p.lead{font-size:var(--t-lead); color:var(--ink-2); max-width:88ch; line-height:1.45}
section{display:flex; flex-direction:column; gap:10px}
.band{border-top:1px solid var(--line-2); padding-top:18px}

.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.btn.tile-cta{justify-content:center;align-self:center;justify-self:center;
  font:800 24px/1.15 Inter,sans-serif;letter-spacing:-.015em;
  padding:18px 26px;border-radius:7px;width:auto;min-height:0;text-align:center;
  background:#F26A0A;border-color:#F26A0A;color:#FFFFFF}
.btn.tile-cta:hover{background:#FF8124;border-color:#FF8124;color:#FFFFFF}
@media(max-width:520px){.btn.tile-cta{font-size:20px}}
.card{background:var(--surface-2); border:1px solid var(--line-2); border-radius:7px; padding:14px 16px; display:flex; flex-direction:column; gap:5px}
.card h3{color:var(--ink);font-size:14px}
.card p{margin:0; font-size:var(--t-small)}
.figure{font-size:20px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.025em; line-height:1.1}
.src{font-size:var(--t-caption); color:var(--ink-3)}

/* home page explainer patterns */
.split{display:grid; gap:16px}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px;align-items:start}}
.split>div>.chartbox, .split>div>.player, .split>div>.window{max-width:100%}
.split>div>.tablewrap{margin-top:14px}
.split-hero{align-items:start}
/* ── quotation configurator, everything under #cfg so it leaves the rest alone ── */
#cfg{display:flex;flex-direction:column;gap:18px}
#cfg .cfgsteps{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#cfg .cfgsteps div{flex:1;padding:11px 12px;border-right:1px solid var(--line);font-size:11.5px;font-weight:600;
  color:var(--ink-3);display:flex;align-items:center;gap:7px;min-width:0}
#cfg .cfgsteps div:last-child{border-right:0}
#cfg .cfgsteps div.on{background:var(--accent-soft);color:var(--accent-ink)}
#cfg .cfgsteps b{width:19px;height:19px;border-radius:50%;background:var(--line);color:var(--surface);
  display:grid;place-items:center;font-size:10.5px;flex:none}
#cfg .cfgsteps div.on b{background:var(--accent);color:var(--btn-ink)}
#cfg .cfgsteps span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cfg .cfgsync{display:flex;gap:9px;background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;padding:10px 13px;font-size:12.5px;color:var(--ink-2)}
#cfg .cfgcols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;align-items:start}
#cfg .cfgcol{display:flex;flex-direction:column;gap:18px;min-width:0}
#cfg .cfgout{position:sticky;top:16px}
#cfg .g3col{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:13px 14px}
#cfg .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
#cfg .fld label,#cfg .fld .lb{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);min-height:13px;display:block}
#cfg .fld .hint{font-size:11px;color:var(--ink-3);font-style:italic;text-transform:none;letter-spacing:0;font-weight:500}
#cfg .fld input,#cfg .fld select,#cfg .fld textarea{font:500 13.5px/1.4 Inter,sans-serif;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%}
#cfg .fld textarea{min-height:70px;resize:vertical}
#cfg .fld input:focus,#cfg .fld select:focus,#cfg .fld textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
#cfg .cfgseg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
#cfg .cfgseg button{flex:1;font:700 12.5px/1.25 Inter,sans-serif;padding:9px 8px;border:0;background:transparent;
  color:var(--ink-2);cursor:pointer}
#cfg .cfgseg button.on{background:var(--accent-ink);color:var(--btn-ink)}
#cfg input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;padding:0;border:0;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--p,20%),var(--line) var(--p,20%));cursor:pointer}
#cfg input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#FFFFFF;border:3px solid var(--accent);box-shadow:0 2px 7px rgba(15,123,165,.35)}
#cfg .cfgchk{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
#cfg .cfgchk input{width:auto;accent-color:var(--accent);margin-top:2px}

#cfg .inv{display:flex;flex-direction:column;gap:6px}
#cfg .invhead,#cfg .invrow{display:grid;gap:7px;align-items:center}
#cfg .invhead{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:2px 2px 0}
#cfg .invrow input,#cfg .invrow select{font:500 12.5px/1.35 Inter,sans-serif;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:8px 9px;width:100%;min-width:0}
#cfg .invrow input[type=number]{font-variant-numeric:tabular-nums;text-align:right}
#cfg .invrow .del{background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink-3);
  cursor:pointer;font:700 14px/1 Inter,sans-serif;padding:8px 0;width:30px}
#cfg .invrow .del:hover{border-color:var(--bad-ink);color:var(--bad-ink)}
#cfg .hw .invhead,#cfg .hw .invrow{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.35fr) 70px minmax(0,1.7fr) 30px}
#cfg .apl .invhead,#cfg .apl .invrow{grid-template-columns:minmax(0,1.6fr) 70px minmax(0,1.15fr) minmax(0,1.7fr) 104px 30px}
#cfg .apname{font-size:12.5px;font-weight:600;color:var(--ink);align-self:center;overflow-wrap:anywhere}
#cfg .sumrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
#cfg .sumrow span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}
#cfg .sumrow span b{color:var(--accent-ink);font-variant-numeric:tabular-nums}
#cfg .sumrow span.ok{background:var(--good-bg);border-color:transparent;color:var(--good-ink)}
#cfg .sumrow span.ok b{color:var(--good-ink)}
#cfg .sumrow span.warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
#cfg .sumrow span.warn b{color:var(--amber-ink)}
#cfg .sumrow span.tap{cursor:pointer}

#cfg .pickapps{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
#cfg .pickapps .cnt{font-size:12px;color:var(--ink-3);font-weight:600}
#cfg .apanel{border:1px solid var(--accent);border-radius:12px;background:var(--surface);
  box-shadow:0 20px 44px -26px rgba(15,35,55,.5);overflow:hidden}
#cfg .apanel-top{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:11px 13px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
#cfg .apanel-top input{flex:1;min-width:180px;font:500 13px/1.4 Inter,sans-serif;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px}
#cfg .apanel-top .sel{font-size:11.5px;font-weight:800;color:var(--accent-ink);white-space:nowrap}
#cfg .apanel-body{max-height:340px;overflow:auto;padding:11px 13px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:14px 18px;align-items:start}
#cfg .pgroup{display:flex;flex-direction:column;gap:5px;min-width:0}
#cfg .pgroup h3{margin:0;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);padding-bottom:4px;border-bottom:1px solid var(--line-2)}
#cfg .pgroup label{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.35;color:var(--ink-2);
  padding:5px 6px;border-radius:7px;cursor:pointer}
#cfg .pgroup label:hover{background:var(--accent-soft);color:var(--accent-ink)}
#cfg .pgroup label.on{color:var(--accent-ink);font-weight:700}
#cfg .pgroup input{accent-color:var(--accent);margin-top:2px;flex:none}
#cfg .apanel-foot{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:11px 13px;
  border-top:1px solid var(--line);background:var(--surface-2)}
#cfg .apanel-foot input{flex:1;min-width:180px;font:500 13px/1.4 Inter,sans-serif;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px}

#cfg .tot{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line-2)}
#cfg .tot .k{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
#cfg .tot .v{font-size:24px;font-weight:800;color:var(--accent-ink);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
#cfg .tot .s{font-size:11.5px;color:var(--ink-3)}
#cfg .tot.hero{background:var(--accent-soft);border-color:var(--accent)}
#cfg .cfglines{display:flex;flex-direction:column;font-size:12.5px}
#cfg .cfglines div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2)}
#cfg .cfglines div:last-child{border-bottom:0}
#cfg .cfglines span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
#cfg .cfglines .tt{font-weight:800;color:var(--accent-ink)}

#cfg .docwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
#cfg .dochead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:16px 18px;
  background:var(--accent-ink);color:#FFFFFF}
#cfg .dochead .dt{font-size:16px;font-weight:800;letter-spacing:-.01em}
#cfg .dochead .ds{font-size:11.5px;opacity:.85;margin-top:2px}
#cfg .dochead .dref{margin-left:auto;text-align:right;font-size:11.5px;opacity:.92}
#cfg .dochead .dref b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
#cfg .dsec{padding:15px 18px;border-top:1px solid var(--line-2)}
#cfg .dsec h3{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 9px}
#cfg .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 18px}
#cfg .kv div{display:flex;flex-direction:column;gap:1px;min-width:0}
#cfg .kv .k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
#cfg .kv .v{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
#cfg .dtab{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px;margin:0}
#cfg .dtab th{background:var(--surface-2);color:var(--ink-3);text-align:left;font-weight:800;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border-bottom:1px solid var(--line)}
#cfg .dtab td{padding:8px 11px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
#cfg .dtab td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap}
#cfg .dtab tr.sum td{background:var(--surface-2);font-weight:800;color:var(--accent-ink)}
#cfg .dscroll{overflow-x:auto;border:1px solid var(--line-2);border-radius:9px}
#cfg .gb{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}
#cfg .gb.g1{background:var(--good-bg);color:var(--good-ink)}
#cfg .gb.g2{background:var(--accent-soft);color:var(--accent-ink)}
#cfg .gb.g3{background:var(--amber-bg);color:var(--amber-ink)}
#cfg .dstats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
#cfg .dstats span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line-2);color:var(--ink-2)}
#cfg .dstats span b{color:var(--accent-ink);font-variant-numeric:tabular-nums}
@media(max-width:980px){
  #cfg .hw .invhead,#cfg .apl .invhead{display:none}
  #cfg .hw .invrow,#cfg .apl .invrow{grid-template-columns:1fr 1fr;row-gap:6px;padding:10px;
    border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2)}
  #cfg .hw .invrow>:first-child,#cfg .apl .invrow>:first-child{grid-column:1 / -1}
}
@media(max-width:860px){
  #cfg .cfgcols{grid-template-columns:1fr}
  #cfg .cfgout{position:static}
  #cfg .cfgsteps{flex-wrap:wrap}
  #cfg .cfgsteps div{flex:1 1 46%;border-bottom:1px solid var(--line)}
  #cfg .dochead .dref{margin-left:0;text-align:left}
}

/* ── picker panel: a tidy replacement for the native list ──────────── */
.pickwrap{position:relative}
.pickwrap>select{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none;overflow:hidden}
.pickbtn{width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  font:600 14px/1.35 Inter,sans-serif;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer}
.pickbtn:hover{border-color:var(--accent)}
.pickbtn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--qb-glow)}
.pickbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pickbtn .pv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbtn .pc{width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);margin-top:-4px;flex:none}
.picklist{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:320px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 50px -22px rgba(15,35,55,.6);padding:6px}
.picklist .pg{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:12px 12px 5px;border-top:1px solid var(--line-2);margin-top:4px}
.picklist .pg:first-child{border-top:0;margin-top:0;padding-top:7px}
.picklist .po{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;
  font:500 13.5px/1.35 Inter,sans-serif;color:var(--ink);padding:9px 12px;border-radius:8px;cursor:pointer}
.picklist .po:hover,.picklist .po.cur{background:var(--accent-soft);color:var(--accent-ink)}
.picklist .po[aria-selected="true"]{font-weight:700;color:var(--accent-ink)}
.picklist .po .tick{width:13px;flex:none;font-weight:800;text-align:center}
.hintline{margin:6px 0 0}
#booknav{display:flex;align-items:center;gap:14px}
#booknav .src{flex:1 1 auto;text-align:center;min-width:0;font-variant-numeric:tabular-nums}
#booknav .btn{flex:0 0 auto}
.optfs{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.optfs legend,.tool-grid .optfs legend{padding:0;font-size:var(--t-caption);font-weight:600;color:var(--ink)}
.optfs legend .lblhint{margin-left:6px}
.optgroup-h{margin:8px 0 0;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.optgroup-h:first-of-type{margin-top:2px}

/* ── aanvinkbare onderwerpen ──────────────────────────────────────────── */
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:7px}
.optgrid label,.tool-grid .optgrid label,.qb .optgrid label{display:flex;align-items:flex-start;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-2);
  letter-spacing:0;text-transform:none;line-height:1.35}
.optgrid label:hover{border-color:var(--accent)}
.optgrid input{margin:1px 0 0;flex:none;accent-color:var(--accent)}
.optgrid input:checked+span{color:var(--accent-ink);font-weight:600}
.optgrid label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

.split-hero>.hero-left{display:flex;flex-direction:column;align-self:stretch}
.hero-vidwrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:96px;margin-top:10px}
.hero-vidwrap .btn{font-size:14.5px;padding:14px 26px}
@media(min-width:900px){
  .split-hero{grid-template-columns:1fr 1fr; gap:30px}
  .split-hero>div+div{border-left:1px solid var(--line-2); padding-left:30px}
}
.navcell{position:relative}.navcell>button,.navcell>a{width:100%}
.ddpanel{position:absolute;left:0;top:100%;min-width:290px;max-width:340px;background:var(--surface);
  border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);padding:6px;z-index:30;
  display:none;flex-direction:column}
.navcell:hover .ddpanel,.navcell:focus-within .ddpanel{display:flex}.ddpanel button,.ddpanel a{font:500 12px/1.35 Inter,sans-serif;text-align:left;background:none;border:0;cursor:pointer;
  color:var(--ink-2);padding:8px 10px;border-radius:5px}.ddpanel button:hover,.ddpanel a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.art{border:1px solid var(--line-2);border-radius:7px;padding:14px 16px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.art-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.art-head h3{color:var(--ink);font-size:15px}
.art-src{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.art p{margin:0}
.art-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.panel{background:var(--surface-2); border:1px solid var(--line-2); border-radius:7px; padding:16px 18px; display:flex; flex-direction:column; gap:11px}
.panel h3{font-size:var(--t-h3);color:var(--accent-ink)}
.panel dl{margin:0;display:grid;grid-template-columns:max-content 1fr;column-gap:20px;row-gap:10px;align-items:baseline}
.panel dt{font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.panel dd{margin:0;font-size:var(--t-small);color:var(--ink-2);line-height:1.5}
.numlist{display:grid;gap:14px}
.numrow{display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; background:var(--surface); border:1px solid var(--line-2); border-radius:7px; padding:12px 14px}
.numrow>b{font-size:17px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.02em}
.numrow h3{font-size:14px;color:var(--ink);margin-bottom:6px}
.numrow p{margin:0;font-size:var(--t-small)}
.dayrow{border:1px solid var(--line-2);border-radius:7px;overflow:hidden}
.dayline{display:grid; grid-template-columns:196px 1fr; gap:20px; padding:11px 16px; border-bottom:1px solid var(--line-2); align-items:start}
.dayline:last-child{border-bottom:0}
.dayline:nth-child(odd){background:var(--surface-2)}
.dayline b{color:var(--ink);font-size:var(--t-small);line-height:1.5}
.dayline p{margin:0;font-size:var(--t-small)}
@media(max-width:700px){.dayline{grid-template-columns:1fr;gap:5px}.numrow{grid-template-columns:30px 1fr;gap:12px}}


.btn{display:inline-flex; align-items:center; gap:7px; font:600 12px/1 Inter,sans-serif; background:var(--accent); color:var(--btn-ink); border:1px solid var(--accent); border-radius:7px; padding:11px 18px; cursor:pointer; text-decoration:none; letter-spacing:.01em}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;color:var(--accent-ink);border-color:var(--accent-2)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{font-size:var(--t-caption); padding:10px 16px}
.btn.spice{background:var(--spice);border-color:var(--spice);color:var(--spice-ink)}
.btn.spice:hover{background:var(--spice-2);border-color:var(--spice-2)}
.btn.outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.outline:hover{border-color:var(--accent);color:var(--accent)}
.qrow{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.qlink{position:relative; background:none; border:0; padding:0; cursor:help; display:block; font:400 12px/1.95 Inter,sans-serif; color:var(--ink-2); text-align:left; text-decoration:underline dotted var(--line); text-underline-offset:4px}
.qlink:hover{text-decoration-color:var(--accent)}
.qlink:hover,.qlink:focus-visible{color:var(--accent)}
.qlink .tip{position:absolute;left:0;bottom:calc(100% + 9px);white-space:nowrap;
  background:var(--ink);color:var(--paper);font-size:11.5px;line-height:1.4;font-weight:500;
  letter-spacing:.015em;padding:6px 10px;border-radius:7px;opacity:0;visibility:hidden;
  transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;pointer-events:none;z-index:5}
.qlink .tip::after{content:"";position:absolute;left:14px;top:100%;border:5px solid transparent;
  border-top-color:var(--ink)}
.qlink:hover .tip,.qlink:focus-visible .tip{opacity:1;visibility:visible;transform:translateY(0)}
.cta-row{display:flex; gap:9px; flex-wrap:wrap; align-items:center}

.window{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.window-bar{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.window-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.window-bar span{font-size:var(--t-micro);color:var(--ink-3);margin-left:6px}
.window .shot{border:0;border-radius:0;min-height:300px}
.window-taskbar{display:flex;align-items:center;gap:10px;padding:8px 13px;background:var(--surface-2);border-top:1px solid var(--line-2);font-size:var(--t-micro);color:var(--ink-3)}
.window-taskbar b{background:var(--accent);color:var(--btn-ink);border-radius:7px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.05em}
.vframe{position:relative;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#0B1116}
.vframe iframe,.vframe video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#0B1116}
.vframe iframe{display:none}
.vnote{margin:0;padding:9px 12px;background:var(--surface-2);color:var(--ink-3)}
.player{position:relative;border-radius:7px;overflow:hidden;border:1px solid var(--line);background:#0B1116;cursor:pointer}
.player img{width:100%;display:block}
.player .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.player .play span{width:74px;height:74px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.player .play svg{width:26px;height:26px;margin-left:4px}
.player .meta{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(transparent,rgba(8,14,18,.85));color:#fff;font-size:var(--t-caption);display:flex;justify-content:space-between;gap:12px}
.player:hover .play span{background:var(--accent-2)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.shots figure{margin:0;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;background:var(--surface-2)}
.shots img{width:100%;display:block}
.shots figcaption{font-size:var(--t-caption);color:var(--ink-2);padding:10px 13px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{font:600 var(--t-caption)/1 Inter,sans-serif; padding:10px 14px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink-2); cursor:pointer}
.slot:hover{border-color:var(--accent-2);color:var(--accent-ink)}
.slot[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
.daycol{display:flex;flex-direction:column;gap:8px;min-width:132px}
.daycol h4,.daycol h3.h4{margin:0;font:600 12px/1.4 Inter,sans-serif;color:var(--ink)}
.daycol span{font-size:var(--t-micro);color:var(--ink-3)}
.booking{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px}
.cmp thead th.hl{background:var(--accent-ink)}
.cmp td.hl{background:var(--accent-soft)!important;color:var(--ink-2)}
.cmp thead th{vertical-align:bottom}
.cmp thead th small{display:block;font-weight:500;font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;opacity:.85;margin-top:3px}
.pkg{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;align-items:stretch}
.pkg-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.pkg-card.hero{border:2px solid var(--accent)}
.pkg-head{padding:20px 20px 17px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.pkg-card.hero .pkg-head{background:var(--accent-soft);border-bottom-color:var(--accent-2)}
.pkg-flag{display:block; min-height:15px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:7px}
.pkg-name{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.pkg-price{font-size:19px; font-weight:700; color:var(--accent); letter-spacing:-.03em; line-height:1.25; font-variant-numeric:tabular-nums}
.pkg-eff{font-size:var(--t-caption); color:var(--ink-3)}
.pkg-body{padding:2px 16px 4px}
.pkg-row{padding:9px 0; border-bottom:1px solid var(--line-2); display:grid; gap:3px}
.pkg-row:last-child{border-bottom:0}
.pkg-row .k{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.pkg-row .v{font-size:var(--t-small); color:var(--ink-2); line-height:1.5}
.pkg-settle{margin:14px 20px 18px;background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:0 7px 7px 0;padding:12px 14px;display:grid;gap:4px}
.pkg-settle b{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-ink)}
.pkg-settle span{font-size:var(--t-small); color:var(--ink-2); line-height:1.5}
.pkg-foot{padding:0 20px 20px;margin-top:auto}
.pkg-foot .btn{width:100%;justify-content:center}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.tier{border:1px solid var(--line);border-radius:7px;background:var(--surface);display:flex;flex-direction:column}
.tier.pick{border-color:var(--accent);border-width:2px}
.tier .top{padding:20px 20px 16px;border-bottom:1px solid var(--line-2)}
.tier .flag{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; display:block; min-height:14px}
.tier h3{font-size:14px; color:var(--ink); margin-bottom:3px}
.tier .price{font-size:19px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.025em; line-height:1.2}
.tier .hrs{font-size:var(--t-caption); color:var(--ink-3)}
.tier .body{padding:12px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1}
.tier .body p{margin:0; font-size:var(--t-small)}
.tier ul{margin:0; padding-left:17px; font-size:var(--t-small); color:var(--ink-2); display:flex; flex-direction:column; gap:5px}
.tier .foot{padding:0 20px 20px}
td.y{color:var(--accent-ink);font-weight:700}
td.n{color:var(--ink-3)}
.result{border:1px solid var(--accent-2);border-radius:7px;overflow:hidden}
.result .rh{background:var(--accent-soft); padding:13px 18px; font-size:var(--t-caption); color:var(--accent-ink); font-weight:600}
.result table{min-width:420px}
.result thead th{background:var(--surface-2);color:var(--ink);border-bottom:1px solid var(--line-2)}
.chartbox{border:1px solid var(--line-2); border-radius:7px; padding:14px 16px 10px; background:var(--surface)}
.chartbox h3{font-size:14px; color:var(--ink); margin-bottom:2px}
.chartbox .sub{font-size:var(--t-caption);color:var(--ink-3);margin-bottom:12px}
.chartbox svg{width:100%;height:auto;display:block}
.shot{border:1px dashed var(--accent-2);border-radius:7px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:24px;background:var(--accent-soft)}
.shot b{font-size:12px;color:var(--accent-ink);font-weight:700}
.shot span{font-size:var(--t-caption);color:var(--ink-2);max-width:42ch}

.tablewrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:7px}
table{border-collapse:collapse; width:100%; font-size:var(--t-small); min-width:480px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:top; color:var(--ink-2)}
thead th{background:var(--accent); color:var(--btn-ink); font-weight:600; font-size:var(--t-caption); border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:var(--surface-2)}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.fiveyear td:first-child,table.fiveyear th:first-child{width:40%;min-width:220px}
table.fiveyear td.num,table.fiveyear th.num{text-align:right}
table.fiveyear tr.cmp td{font-style:italic;color:#9A9A9A}
:root:not([data-theme="light"]) table.fiveyear tr.cmp td{color:#8A9099}

.callout{background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:0 7px 7px 0;
  padding:11px 14px; color:var(--ink-2); font-size:var(--t-small)}
.callout p{color:inherit;margin:0;max-width:none;font-size:inherit}
.callout b{color:var(--accent-ink)}
.callout.amberlead b{color:var(--amber-ink)}
.callout.warn{background:var(--amber-bg); border-left-color:var(--amber-line); color:var(--amber-ink)}
.callout.warn b{color:inherit}

.steps{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:7px;overflow:hidden}
.step{display:grid; grid-template-columns:96px 1fr auto; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line-2); align-items:start}
.step:last-child{border-bottom:0}
.step:nth-child(odd){background:var(--surface-2)}
.step .lvl{font-size:var(--t-micro); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding-top:3px}
.step .price{font-weight:700; font-size:14px; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums}
.step b{display:block; margin-bottom:4px; color:var(--ink); font-size:13px}
.step p{margin:0; font-size:var(--t-small)}

.calc{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 18px}
.qgrid .field label{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.qgrid output{font-size:16px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.qchecks{justify-content:flex-end;gap:8px}
.qgrid .field label.chk{justify-content:flex-start}
.chk{display:flex;align-items:center;gap:8px;font-size:var(--t-small);color:var(--ink-2);font-weight:500}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.qitems{border:0;border-radius:0;border-top:1px solid var(--line-2)}
.qitems table{min-width:0}
.qitems td:first-child{max-width:520px}
.qcta{padding:14px 22px 18px;border-top:1px solid var(--line-2)}
/* photography */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:stretch}
.hero-text{min-width:0;display:flex;flex-direction:column;gap:10px;justify-content:flex-start}
.hero-text>*{margin:0}
.hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:6px}
.hero-facts>div{display:grid;gap:3px;padding-top:9px;border-top:1px solid var(--line)}
.hero-facts .k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.hero-facts .v{font-size:var(--t-small);font-weight:600;color:var(--ink);line-height:1.4}
.hero-media,.side-media{margin:0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2)}
.hero-media{position:relative;min-height:250px}
.hero-media img{position:absolute;inset:0}
.hero-media img,.side-media img,.banner img{width:100%;height:100%;object-fit:cover;display:block}
.split-media{align-items:center}
.split-media{grid-template-columns:1.15fr 1fr;align-items:stretch}
.side-media{position:relative;min-height:240px}
.side-media img{position:absolute;inset:0}
.side-media.small{min-height:200px}
.hero-facts.roles4 .v{font-weight:500;color:var(--ink-2)}
.hero-facts .lnk{justify-self:start;background:none;border:0;padding:0;font:600 var(--t-caption)/1.4 Inter,sans-serif;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.banner{margin:0;position:relative;border-radius:10px;overflow:hidden;height:250px;box-shadow:var(--shadow)}
.banner figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 22px 16px;color:#FFFFFF;font-size:var(--t-small);font-weight:500;line-height:1.45;background:linear-gradient(180deg,rgba(6,20,28,0),rgba(6,20,28,.72));text-shadow:0 1px 2px rgba(0,0,0,.35)}
section.band .banner{margin-bottom:18px}
section.pad0{padding-top:0}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-media{height:200px;min-height:0}.hero-facts{grid-template-columns:1fr}.split-media{grid-template-columns:1fr}.side-media{height:200px;min-height:0}.banner{height:190px}.side-media.small{max-width:none;justify-self:stretch;height:170px}}
@media print{.banner,.hero-media,.side-media{display:none}}
/* home mini calculator */
.mini-top{padding:18px 22px 10px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.mini-top label{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink)}
.mini-top output{font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mini input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;margin:12px 0 8px;outline:none;cursor:pointer;background:linear-gradient(90deg,#1BA8DD 0,#45BFEE var(--p,50%),var(--qb-field-line) var(--p,50%))}
.mini input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#FFFFFF;border:3px solid #1BA8DD;box-shadow:0 0 0 4px var(--qb-glow),0 2px 8px rgba(15,123,165,.35)}
.mini input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#FFFFFF;border:3px solid #1BA8DD;box-shadow:0 0 0 4px var(--qb-glow)}
.mini .out{position:relative;padding:16px 22px 14px}
.mini .out::before{content:"";position:absolute;left:22px;top:0;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.mini .out.cmp::before{background:var(--ink-3)}
.mini .out .v{font-size:22px;letter-spacing:-.02em;margin-top:8px}
.mini .out.cmp .v{color:var(--ink-2)}
.mini .out .s{font-size:var(--t-micro);color:var(--ink-3);margin-top:4px}
.mini .qcta{border-top:1px solid var(--line-2)}
.mini .out .v.win,.qb .out .v.win{color:var(--accent-ink)}
.mini .out .v.lose,.qb .out .v.lose{color:var(--bad-ink)}
.mini .out .v.tie,.qb .out .v.tie{color:var(--ink-3)}
.mini .out .v,.qb .out .v{transition:color .25s}
/* compliance: filter and timeline */
table.rules td .pill{display:inline-block;white-space:nowrap}
.tl{padding:6px 0 4px}
.tl-track{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) 0,var(--accent) var(--now,40%),var(--line) var(--now,40%));margin:26px 12px 10px}
.tl-now{position:absolute;top:-8px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--surface);border:3px solid var(--accent);box-shadow:0 0 0 4px var(--qb-glow)}
.tl-now span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.tl-items{position:relative;height:126px;margin:0 12px}
.tl-item{display:grid;gap:3px;position:absolute;top:0;width:26%;padding-top:6px;transform:translateX(-5px)}
.tl-item.end{transform:translateX(-100%);text-align:right;justify-items:end;top:58px}
.tl-item.end i{margin-right:-5px;position:relative}
.tl-item.end i::before{content:"";position:absolute;left:4px;bottom:100%;width:2px;height:58px;background:var(--line)}
.tl-item i{display:block;width:10px;height:10px;border-radius:50%;background:var(--ink-3);margin-bottom:4px}
.tl-item.past i{background:var(--accent)}
.tl-item.end i{background:var(--amber-line)}
.tl-item b{font-size:12.5px;color:var(--ink)}
.tl-item span{font-size:var(--t-caption);color:var(--ink-2);line-height:1.4}
@media(max-width:700px){.tl-items{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}.tl-item{position:static;width:auto;transform:none}.tl-item.end{transform:none;text-align:left;justify-items:start}.tl-item.end i::before{display:none}}
/* article accordion */
.artlist{display:grid;gap:8px}
.artlist details.fold{margin:0}
.artlist details.fold summary{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 16px 12px 34px;position:relative;text-align:left}
.artlist details.fold summary::before{position:absolute;left:14px;top:19px}
.art-t{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.art-t b{font-size:13px;color:var(--ink)}
.art-t .art-src{font-size:var(--t-caption);color:var(--ink-3);font-weight:500}
.art-sub{font-size:var(--t-caption);color:var(--ink-2);font-weight:400}
.art-body{display:grid;gap:8px}
.art-body p{font-size:var(--t-small);color:var(--ink-2);margin:0}
.art-body .art-foot{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:4px}
/* question list */
.qtool{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.qtool-top{padding:16px 18px;background:var(--surface-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:12px}
.qtool .qs input{width:100%;font:400 var(--t-small)/1 Inter,sans-serif;padding:11px 13px 11px 38px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}
.qtool .qs input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--qb-glow)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:600 11.5px/1 Inter,sans-serif;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.chips button:hover{border-color:var(--accent);color:var(--accent-ink)}
.chips button.on{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
.qtool-meta{padding:10px 18px;font-size:var(--t-caption);color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.qtool .qa{border:0;border-radius:0}
.qtool .qa details:last-child{border-bottom:0}
.qcat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;margin-left:auto;padding-right:12px}
@media(max-width:600px){.qcat{display:none}}
/* small tools: hardware check, application route */
.tool{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px;padding:18px 20px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.tool-grid .field label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink)}
.tool-out{padding:18px 20px;display:grid;gap:10px}
.tool-out .verdict-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tool-out .vb{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:7px}
.vb.ok{background:var(--good-bg);color:var(--good-ink)}
.vb.note{background:var(--accent-soft);color:var(--accent-ink)}
.vb.light{background:var(--accent-soft);color:var(--accent-ink)}
.vb.no{background:var(--amber-bg);color:var(--amber-ink)}
.tool-out .vt{font-size:15px;font-weight:700;color:var(--ink)}
.tool-out ul{margin:0;padding-left:18px;font-size:var(--t-small);color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.tool-out .src{margin:0}
.tool-out td .pill{display:inline-block;margin:2px 6px 2px 0;line-height:1.3}
.tool-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 18px}
.ap-list{padding:0 20px 18px;display:grid;gap:10px}
.ap-list table{min-width:0}
.ap-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ap-sum>div{border:1px solid var(--line-2);border-radius:7px;padding:10px 12px;background:var(--surface-2)}
.ap-sum .k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ap-sum .v{font-size:17px;font-weight:700;color:var(--ink);margin-top:3px}
/* role switcher */
.roles{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.rolebar button{padding:12px 16px 10px}
.role-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px}
.role-body>h3{margin:4px 0 0}
.role-body>.src{margin-top:-8px}
.role-sum{font-size:var(--t-lead);color:var(--ink);margin:0;max-width:70ch;line-height:1.5}
.roles[data-role="dir"] [data-r]:not([data-r~="dir"]),.roles[data-role="it"] [data-r]:not([data-r~="it"]),.roles[data-role="proc"] [data-r]:not([data-r~="proc"]),.roles[data-role="user"] [data-r]:not([data-r~="user"]){display:none}
.roles .dayrow{gap:10px}
.prose-fold p{font-size:var(--t-small);color:var(--ink-2)}
/* tabs, level picker, folds */
.tabs{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.tabbar{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tabbar button{font:600 12px/1.3 Inter,sans-serif;color:var(--ink-2);background:transparent;border:0;border-bottom:3px solid transparent;padding:12px 16px 10px;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}
.tabbar button:hover{color:var(--accent-ink)}
.tabbar button.on{color:var(--accent-ink);border-bottom-color:var(--accent);background:var(--surface)}
.tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabpanel{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.tabpanel>h3{margin:0}
.tabpanel>p{margin:0}
.lvl-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lvl-bar button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:16px 18px 14px;border-right:1px solid var(--line)}
.lvl-bar button:last-child{border-right:0}
.lvl-bar .lf{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.lvl-bar .ln{font-size:14px;font-weight:700;color:var(--ink);margin-top:3px}
.lvl-bar .lp{font-size:19px;font-weight:700;color:var(--accent);letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.2}
.lvl-bar .lh{font-size:var(--t-caption);color:var(--ink-3)}
.lvl-bar button.on .lf{color:var(--accent-ink)}
.lvl-bar button.on{background:var(--surface)}
.lvl-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
@media(max-width:760px){.lvl-grid{grid-template-columns:1fr}.lvl-bar button{padding:12px 10px 10px}.lvl-bar .lf,.lvl-bar .lh{display:none}.lvl-bar .ln{font-size:12.5px;margin-top:0}.lvl-bar .lp{font-size:16px}.lvl-facts{grid-template-columns:1fr}}
.lvl-intro{font-size:var(--t-small);color:var(--ink);font-weight:600;margin:0 0 8px}
.lvl-panel ul{margin:0;padding-left:17px;font-size:var(--t-small);color:var(--ink-2);display:flex;flex-direction:column;gap:5px}
.lvl-side{display:flex;flex-direction:column;gap:12px}
.lvl-side .pkg-settle{margin:0}
.lvl-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border:1px solid var(--line-2);border-radius:7px;padding:12px 14px;background:var(--surface-2)}
.lvl-facts div{display:grid;gap:2px}
.lvl-facts .k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.lvl-facts .v{font-size:var(--t-caption);color:var(--ink);font-weight:600}
.lvl-cta{display:flex;flex-wrap:wrap;gap:8px}
details.fold{border:1px solid var(--line-2);border-radius:7px;background:var(--surface);margin-top:10px}
details.fold summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:var(--t-small);font-weight:600;color:var(--accent-ink);display:flex;align-items:center;gap:10px}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto}
details.fold[open] summary::before{transform:rotate(45deg)}
details.fold>*:not(summary){margin:0 16px 16px}
details.fold .result{margin-top:4px}
/* quotation builder, light console look */
:root{--qb-head:#0F7BA5;--qb-head-2:#1BA8DD;--qb-bg:#F3FAFD;--qb-bg-2:#E6F5FB;--qb-grid:rgba(15,123,165,.07);--qb-line:rgba(15,123,165,.28);--qb-label:#0F7BA5;--qb-field:#FFFFFF;--qb-field-line:#BFE1EF;--qb-text:#2B3A44;--qb-muted:#5E7C8A;--qb-glow:rgba(27,168,221,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--qb-head:#0E2C3C;--qb-head-2:#10303D;--qb-bg:#0E2432;--qb-bg-2:#0A1A25;--qb-grid:rgba(255,255,255,.045);--qb-line:rgba(69,191,238,.28);--qb-label:#9FC4D6;--qb-field:rgba(255,255,255,.06);--qb-field-line:rgba(255,255,255,.16);--qb-text:#F2F8FB;--qb-muted:#8FB6C8;--qb-glow:rgba(69,191,238,.35)}}
:root[data-theme="dark"]{--qb-head:#0E2C3C;--qb-head-2:#10303D;--qb-bg:#0E2432;--qb-bg-2:#0A1A25;--qb-grid:rgba(255,255,255,.045);--qb-line:rgba(69,191,238,.28);--qb-label:#9FC4D6;--qb-field:rgba(255,255,255,.06);--qb-field-line:rgba(255,255,255,.16);--qb-text:#F2F8FB;--qb-muted:#8FB6C8;--qb-glow:rgba(69,191,238,.35)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.qb{border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.qb-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 22px;background:linear-gradient(90deg,var(--qb-head),var(--qb-head-2));color:#E6F5FB;font-size:var(--t-caption)}
.qb-head .live{display:inline-flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;color:#FFFFFF}
.qb-head .meta{color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.qb-head .dot{width:8px;height:8px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 10px #FFFFFF;animation:qpulse 2.2s ease-in-out infinite}
@keyframes qpulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 10px #FFFFFF}50%{box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 16px #FFFFFF}}
@media (prefers-reduced-motion:reduce){.qb-head .dot{animation:none}}
.qb .calc-top{position:relative;padding:24px 22px 22px;border-bottom:1px solid var(--qb-line);
  background:radial-gradient(900px 260px at 85% -30%,rgba(27,168,221,.18),transparent 62%),linear-gradient(180deg,var(--qb-bg),var(--qb-bg-2))}
.qb .calc-top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--qb-grid) 1px,transparent 1px),linear-gradient(90deg,var(--qb-grid) 1px,transparent 1px);
  background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.qb .qgrid{position:relative;gap:18px 22px}
.qb .field{position:relative}
.qb .field label{color:var(--qb-label);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.qb select{appearance:none;-webkit-appearance:none;background:var(--qb-field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231BA8DD' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 13px center;
  border:1px solid var(--qb-field-line);color:var(--qb-text);border-radius:8px;padding:11px 36px 11px 13px;transition:border-color .15s,box-shadow .15s;cursor:pointer}
.qb select:hover{border-color:var(--accent)}
.qb select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--qb-glow)}
.qb select option{color:#0B1B26;background:#FFFFFF}
.seg{display:flex;gap:3px;background:var(--qb-field);border:1px solid var(--qb-field-line);border-radius:8px;padding:3px}
.seg button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:Inter,sans-serif;color:var(--qb-muted);background:transparent;border:0;border-radius:6px;padding:7px 11px;cursor:pointer;text-align:left;transition:background .15s,color .15s,box-shadow .15s}
.seg button b{font-size:12.5px;font-weight:700;color:inherit}
.seg button small{font-size:10px;letter-spacing:.02em;opacity:.85}
.seg button:hover{color:var(--accent-ink)}
.seg button.on{background:linear-gradient(180deg,#2FB6E6,#1BA8DD);color:#FFFFFF;box-shadow:0 2px 10px var(--qb-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qb .qgrid output{font-size:24px;line-height:1;color:var(--accent-ink);letter-spacing:-.02em}
.qb input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;margin:12px 0 8px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#1BA8DD 0,#45BFEE var(--p,50%),var(--qb-field-line) var(--p,50%))}
.qb input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#FFFFFF;border:3px solid #1BA8DD;box-shadow:0 0 0 4px var(--qb-glow),0 2px 8px rgba(15,123,165,.35);transition:box-shadow .15s}
.qb input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#FFFFFF;border:3px solid #1BA8DD;box-shadow:0 0 0 4px var(--qb-glow),0 2px 8px rgba(15,123,165,.35)}
.qb input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--qb-glow),0 2px 10px rgba(15,123,165,.45)}
.qb .ticks{color:var(--qb-muted);font-size:10.5px}
[hidden]{display:none!important}
.qb .field label.chk{text-transform:none;letter-spacing:0;font-size:var(--t-small);font-weight:500;color:var(--qb-text)}
.qb .chk{color:var(--qb-text)}
.qb .chk input{accent-color:#1BA8DD}
.qb .calc-out{background:var(--surface)}
.qb .out{position:relative;padding:20px 22px 18px}
.qb .out::before{content:"";position:absolute;left:22px;top:0;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);box-shadow:0 0 10px rgba(27,168,221,.55)}
.qb .out.cmp::before{background:var(--ink-3);box-shadow:none}
.qb .out .k{margin-top:2px}
.qb .out .v{font-size:25px;letter-spacing:-.02em;line-height:1.15;margin-top:8px;font-feature-settings:"tnum"}
.qb .out.cmp .v{color:var(--ink-2)}
.qb .out .s{font-size:var(--t-micro);color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
.qb .verdict{border-top:1px solid var(--line-2)}
@media print{.qb-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qb .calc-top{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.qchart{padding:18px 22px 14px;border-top:1px solid var(--line-2)}
.qchart h3{font-size:14px;color:var(--ink);margin:0 0 2px}
.qchart .sub{font-size:var(--t-caption);color:var(--ink-3);margin-bottom:12px;max-width:820px}
.qchart-wrap{position:relative}
.qchart svg{width:100%;height:auto;display:block;max-width:820px;font-family:Inter,system-ui,sans-serif}
.qtip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);padding:9px 12px;font-size:var(--t-caption);color:var(--ink-2);min-width:200px;z-index:3;line-height:1.5}
.qtip b{color:var(--ink);display:block;margin-bottom:2px}
.qtip .row{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.qlegend{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--t-caption);color:var(--ink-2);margin:6px 0 12px}
.qlegend span{display:inline-flex;align-items:center;gap:8px}
.sw{display:inline-block;width:22px;height:10px;border-radius:2px}
.sw.line{height:0;border-top:2px solid var(--accent);border-radius:0}
.sw.band{background:var(--ink-2);opacity:.28}
.qsave{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-width:820px}
.qsave>div{border:1px solid var(--line-2);border-radius:7px;padding:10px 12px;background:var(--surface-2)}
.qsave .k{font-size:var(--t-micro);color:var(--ink-3);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.qsave .v{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:3px}
.qsave .v.neg{color:var(--ink-3)}
.qsave .n{font-size:var(--t-micro);color:var(--ink-3);margin-top:2px}
@media print{.masthead,nav,footer.site,.qcta,.calc-top{display:none!important}}
.calc-top{padding:20px 22px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:12px}
.calc-top label{font-size:12px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.calc-top output{font-size:20px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent)}
.ticks{display:flex;justify-content:space-between;font-size:var(--t-micro);color:var(--ink-3);font-variant-numeric:tabular-nums}
.qnumrow{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:4px}
.qnumrow label{font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--qb-muted,var(--ink-3))}
.qnum{width:92px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:var(--t-small);font-variant-numeric:tabular-nums;text-align:right}
.qnum:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.out{padding:16px 22px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.out:last-child{border-right:0}
.out .k{font-size:var(--t-micro); color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em; font-weight:600}
.out .v{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; color:var(--ink)}
.verdict{padding:16px 22px; font-size:var(--t-small)}
.verdict.save{background:var(--good-bg);color:var(--good-ink)}
.verdict.cost{background:var(--amber-bg);color:var(--amber-ink)}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:15px 22px;border-top:1px solid var(--line-2)}
.pill{font-size:var(--t-caption); font-weight:600; padding:6px 12px; border-radius:7px; border:1px solid var(--line); color:var(--ink-2)}
.pill.ok{background:var(--good-bg);color:var(--good-ink);border-color:transparent}
.pill.no{background:var(--amber-bg);color:var(--amber-ink);border-color:transparent}

.dl{display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;padding:15px 18px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface-2)}
.dl .ext{font-size:11px;font-weight:700;letter-spacing:.06em;text-align:center;padding:8px 0;border-radius:7px;background:var(--accent);color:var(--btn-ink)}
.dl b{display:block; font-size:var(--t-small); color:var(--ink)}
.dl span{font-size:var(--t-caption); color:var(--ink-3)}

form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--t-caption); font-weight:600; color:var(--ink)}
input[type=text],input[type=email],select,textarea{font:400 var(--t-small)/1.5 Inter,sans-serif; padding:11px 13px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink)}
textarea{min-height:100px;resize:vertical}

footer.site{border-top:1px solid var(--line); padding:20px 22px 18px; background:var(--surface-2); display:flex; flex-direction:column; gap:16px; font-size:var(--t-caption); color:var(--ink-3)}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:22px 34px}
.foot-links b{color:var(--ink); display:block; margin-bottom:8px; font-size:var(--t-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.foot-links a{color:var(--ink-2); text-decoration:none; display:block; line-height:1.95; font-size:12px}
.foot-links a:hover{color:var(--accent)}

.identity{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.id-name{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin-bottom:12px}
.identity dl{margin:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:10px 30px;align-items:baseline}
.identity dl>div{display:flex;gap:9px;align-items:baseline;min-width:0}
@media(max-width:820px){.identity dl{grid-template-columns:1fr}}
.identity dt{font-size:var(--t-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.identity dd{margin:0; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums}


.foot-legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 30px; font-size:11px}
.foot-legal a{color:var(--ink-2);text-decoration:none}
.foot-legal a:hover{color:var(--accent)}
.note{font-size:var(--t-caption); color:var(--ink-3); max-width:96ch}
dialog{border:1px solid var(--line);border-radius:7px;padding:0;max-width:440px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(20,26,32,.5)}
.dlg{padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.dlg h3{font-size:15px; color:var(--ink)}
.dlg p{font-size:var(--t-small); margin:0}
@media(max-width:640px){
  :root{--t-display:22px; --t-h2:18px; --t-h3:14px; --t-lead:14px; --t-body:12px}
  .step{grid-template-columns:1fr;gap:6px}
  .shell{padding:10px 8px 40px}
  main{padding:24px 16px 34px}
}

/* ── WCAG 2.2 AA contrast pass, 5 September 2026: deeper accent for text and for surfaces that carry white text, darker captions ── */
:root{--ink-3:#6B6A75; --accent-ink:#0E739A; --accent-deep:#0B5F80}.eyebrow,.figure,.numrow>b,.pkg-price,.tier .flag,.tier .price,.step .price,.qgrid output,.mini-top output,.lvl-bar .lp,.calc-top output,.hit .where,nav button[aria-current="page"],nav button:hover,.langs button:hover,.foot-links a:hover,.foot-legal a:hover,.btn.outline:hover,.qlink:hover,.qlink:focus-visible,nav a[aria-current="page"],nav a:hover{color:var(--accent-ink)}
.langs .calcbtn,.btn,.window-taskbar b,.slot[aria-pressed="true"],thead th,.chips button.on,.dl .ext{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn:hover,.langs .calcbtn:hover,.chips button.on:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.ghost,.btn.outline{background:transparent;color:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost:hover,.btn.outline:hover{background:var(--accent-soft);color:var(--accent-deep)}
.cur,.pkg-settle b{color:var(--accent-deep)}
.cmp thead th small,thead th small{color:inherit;opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-deep:#BFE4F5}}
:root[data-theme="dark"]{--accent-deep:#BFE4F5}
/* WCAG 2.5.8 target size: footer links and question links at least 24 px high */
.foot-links a,.qlink{min-height:24px;line-height:24px;padding:1px 0}
.foot-legal a{display:inline-block;min-height:24px;line-height:24px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--accent-ink);color:#fff;font:600 13px/1 Inter,sans-serif;padding:10px 14px;border:0;border-radius:7px}
.skip:focus{left:16px;outline:2px solid var(--ink);outline-offset:2px}
.browser{position:relative}
.search input[type=text],.qtool .qs input[type=text]{padding-left:38px}

/* ── illustration of the NEXZOS start screen; these rules move to assets/styles.css ── */
.nxos{container-type:inline-size;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 44px rgba(10,26,60,.32);border:1px solid rgba(255,255,255,.16)}
.nxos .wall{position:relative;aspect-ratio:16/10;overflow:hidden;
  font:400 10px/1.4 Inter,-apple-system,'Segoe UI',system-ui,sans-serif;font-size:1.62cqw;color:#fff;
  background:radial-gradient(120% 95% at 82% 6%,#33429A 0%,#2C3B90 45%,#28358A 100%)}

/* bureaubladpictogrammen */
.nxos .dsk{position:absolute;top:1.0em;left:1.2em;display:grid;grid-template-columns:repeat(2,6.4em);gap:.9em .5em}
.nxos .di{text-align:center}
.nxos .di b{display:block;font-weight:600;font-size:.92em;margin-top:.45em;text-shadow:0 .1em .25em rgba(0,0,0,.5)}
.nxos .gl{display:block;width:3.2em;height:3.2em;margin:0 auto;border-radius:.85em;position:relative;
  box-shadow:0 .25em .6em rgba(0,0,0,.3)}
.nxos .gl.br{background:#fff}
.nxos .gl.br::after{content:"";position:absolute;inset:22%;border-radius:50%;border:.42em solid #1BA8DD}
.nxos .gl.doc{background:#fff}
.nxos .gl.doc::after{content:"";position:absolute;left:22%;right:22%;top:26%;height:.36em;
  box-shadow:0 .95em 0 #8FA3BC,0 1.9em 0 #8FA3BC;background:#4D9AF9}
.nxos .gl.mail{background:#4D9AF9;overflow:hidden}
.nxos .gl.mail::after{content:"";position:absolute;inset:30% 18%;background:#fff;border-radius:.14em}
.nxos .gl.mail::before{content:"";position:absolute;left:18%;right:18%;top:30%;height:1.1em;background:#DCE9FB;
  clip-path:polygon(0 0,100% 0,50% 78%);z-index:1}
.nxos .gl.cal{background:#fff;overflow:hidden}
.nxos .gl.cal::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:#E8734A}
.nxos .gl.fold{background:linear-gradient(#F5CE7A,#E9B84F)}
.nxos .gl.fold::after{content:"";position:absolute;left:14%;top:14%;width:42%;height:16%;border-radius:.2em;background:#F7DC9C}
.nxos .gl.call{background:#2FA36B}
.nxos .gl.call::after{content:"";position:absolute;inset:30% 24%;border-radius:.2em;background:#fff}

/* startmenu */
.nxos .menu{position:absolute;left:1.1em;bottom:4.0em;width:49%;min-width:20em;
  background:#F7F9FC;color:#26303E;border-radius:1.1em;overflow:hidden;
  box-shadow:0 1.6em 3.2em rgba(8,18,48,.45),0 0 0 1px rgba(255,255,255,.5) inset;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;padding:.7em .7em .6em}
.nxos .mleft{border-right:1px solid #E3E9F0;padding-right:.55em;display:grid;align-content:start;gap:.05em;position:relative}
.nxos .mleft::after{content:"";position:absolute;right:.18em;top:14%;bottom:22%;width:.3em;border-radius:.3em;background:#C9D3DF}
.nxos .mi{display:flex;align-items:center;gap:.6em;padding:.34em .5em;line-height:1.35;border-radius:.5em;font-size:.98em;white-space:nowrap}
.nxos .mi.on{background:#E9EEF5}
.nxos .mi i{margin-left:auto;font-style:normal;color:#93A2B4;font-size:1.05em}
.nxos .mi.all{margin-top:.3em;font-weight:600}
.nxos .mg{width:1.55em;height:1.55em;border-radius:.35em;flex:0 0 auto}
.nxos .mg.c1{background:linear-gradient(135deg,#F2A03D,#E8734A)}
.nxos .mg.c2{background:linear-gradient(135deg,#5FC2F0,#1BA8DD)}
.nxos .mg.c3{background:linear-gradient(135deg,#C98B4B,#9A6634)}
.nxos .mg.c4{background:linear-gradient(135deg,#6E8BF5,#3F5BD6)}
.nxos .mg.c5{background:linear-gradient(135deg,#B87BE0,#8248C4)}
.nxos .mg.c6{background:linear-gradient(135deg,#7A8899,#4E5A69)}
.nxos .mg.arr{background:none;display:flex;align-items:center;justify-content:center;color:#4A5768;font-size:1.15em;font-weight:700}

.nxos .mright{padding-left:.85em;display:grid;align-content:start;gap:.05em}
.nxos .usr{display:flex;align-items:center;gap:.55em;padding:.28em .3em .4em;font-size:.98em}
.nxos .usr b{font-weight:600}
.nxos .av{width:1.7em;height:1.7em;border-radius:50%;background:#6E8BF5;position:relative;flex:0 0 auto}
.nxos .av::after{content:"";position:absolute;left:22%;right:22%;bottom:14%;height:38%;border-radius:.6em .6em 0 0;background:#fff}
.nxos .av::before{content:"";position:absolute;left:34%;right:34%;top:18%;height:32%;border-radius:50%;background:#fff}
.nxos .mrule{height:1px;background:#E3E9F0;margin:.3em .2em .38em}
.nxos .mrule.last{margin:.5em .2em .35em}
.nxos .pl{display:flex;align-items:center;gap:.55em;padding:.24em .3em;line-height:1.35;font-size:.95em;white-space:nowrap}
.nxos .pg{width:1.2em;height:1.2em;border-radius:.22em;background:#8C9AAB;flex:0 0 auto}
.nxos .pg.desk{background:#7F8DA0;border-radius:.18em}
.nxos .pg.doc{background:#93A1B2}
.nxos .pg.down{background:#8C9AAB;clip-path:polygon(38% 0,62% 0,62% 52%,88% 52%,50% 100%,12% 52%,38% 52%)}
.nxos .pg.pic{background:#8C9AAB}
.nxos .pg.vid{background:#8C9AAB;clip-path:polygon(0 12%,74% 12%,74% 38%,100% 14%,100% 86%,74% 62%,74% 88%,0 88%)}
.nxos .pg.home{background:#8C9AAB;clip-path:polygon(50% 0,100% 44%,86% 44%,86% 100%,14% 100%,14% 44%,0 44%)}
.nxos .mfoot{display:flex;gap:1.35em;padding:.1em .35em .05em}
.nxos .fb{width:1.25em;height:1.25em;border-radius:.25em;background:#8C9AAB}
.nxos .fb.pw{border-radius:50%;background:none;border:.2em solid #8C9AAB;position:relative}
.nxos .fb.pw::after{content:"";position:absolute;left:50%;top:-.18em;width:.2em;height:.6em;background:#8C9AAB;transform:translateX(-50%)}

.nxos .msearch{grid-column:1/-1;margin-top:.55em;display:flex;align-items:center;gap:.6em;
  background:#EDF1F7;border:1px solid #DFE6EE;border-radius:.6em;padding:.42em .65em;font-size:.95em;color:#5D6B7B}
.nxos .mag{width:1.1em;height:1.1em;border-radius:50%;border:.2em solid #9AA8B8;position:relative;flex:0 0 auto}
.nxos .mag::after{content:"";position:absolute;right:-.28em;bottom:-.22em;width:.5em;height:.2em;background:#9AA8B8;transform:rotate(45deg);border-radius:.2em}

/* taakbalk */
.nxos .tbar{position:absolute;left:0;right:0;bottom:0;height:3.1em;display:flex;align-items:center;gap:1em;
  padding:0 1.1em;background:#1E2A6B;box-shadow:0 -.1em .8em rgba(0,0,0,.25)}
.nxos .tstart{width:2.1em;height:2.1em;border-radius:50%;background:#E8EEF8;box-shadow:0 0 0 .22em rgba(255,255,255,.14)}
.nxos .twin{width:2em;height:1.5em;border-radius:.3em;border:.2em solid #B9C6E4}
.nxos .tspace{flex:1}
.nxos .tray{display:flex;gap:.75em;align-items:center}
.nxos .tray i{width:1.05em;height:1.05em;border-radius:.22em;background:#AFBDDE;display:block}
.nxos .tray i:nth-child(1){background:#5FC2F0}
.nxos .tray i:nth-child(2){background:#5EC08A;border-radius:50%}
.nxos .clk{font-size:.95em;color:#E4EAF8;font-variant-numeric:tabular-nums;letter-spacing:.02em}

@container (max-width:340px){.nxos .di b{font-size:.85em}}

/* ── hero-badge, kernpunten en bijschrift ─────────────────────────────── */
.hpill{display:inline-flex;align-items:center;gap:9px;background:#FAF3E3;border:1px solid #E7D5A8;color:#7A5A1E;
  font-size:12px;font-weight:700;letter-spacing:.02em;padding:9px 15px;border-radius:99px;margin-bottom:16px}
.hpill i{width:7px;height:7px;border-radius:50%;background:#2FA36B;display:block;flex:0 0 auto}
.grid.even3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid.even3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid.even3{grid-template-columns:1fr}}
.grid.g2.pair{grid-template-columns:1fr 1fr}
.grid.g2.pair .card{padding:14px 15px}
@media(max-width:900px){.grid.g2.pair{grid-template-columns:1fr}}
.split-hero>.signup-col{align-self:stretch}
.readmore{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  border:1px solid rgba(255,255,255,.5);border-radius:11px;color:#2B1200;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,168,86,.92) 0%,rgba(255,146,48,.90) 46%,rgba(242,106,10,.90) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 10px 16px -10px rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,45,0,.18),0 8px 22px rgba(226,104,10,.28);
  font:700 13px/1 Inter,-apple-system,'Segoe UI',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 18px;margin:4px 0 2px;transition:box-shadow .15s ease,transform .15s ease,filter .15s ease}
.readmore:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(120,45,0,.2),0 10px 26px rgba(226,104,10,.34)}
.readmore:active{transform:translateY(1px)}
.readmore:focus-visible{outline:2px solid #0F7BA5;outline-offset:3px}
.readmore .rm-c{width:9px;height:9px;border-right:2.5px solid #2B1200;border-bottom:2.5px solid #2B1200;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.readmore[aria-expanded="true"] .rm-c{transform:translateY(2px) rotate(225deg)}
@media (prefers-reduced-motion:reduce){.readmore{transition:none}}
.morefold{display:grid;gap:26px}
.photostrip{display:grid;grid-auto-rows:minmax(0,1fr);gap:12px;margin-top:18px;flex:1;min-height:330px}
.photostrip figure{margin:0;position:relative;overflow:hidden;border-radius:10px;min-height:0}
.photostrip img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.photostrip figcaption{position:absolute;left:10px;bottom:10px;background:rgba(12,24,40,.78);color:#FFFFFF;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
@media(max-width:760px){.photostrip{min-height:0}.photostrip img{aspect-ratio:16/7;height:auto}}
.photopair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;flex:1;min-height:230px}
.photopair figure{margin:0;height:100%}
.photopair img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.photopair{grid-template-columns:1fr;min-height:0}.photopair img{aspect-ratio:4/3;height:auto}}
.signup-col{display:flex;flex-direction:column}
.signup-photo{flex:1;min-height:240px;margin-top:18px}
.signup-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.signup-photo{min-height:200px;max-height:280px}}
.nxcap{margin-top:9px;display:block}
.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px;
  border-top:1px solid var(--line-2);margin-top:24px;padding-top:18px}
.checks>div{display:grid;gap:4px;padding-left:24px;position:relative}
.checks>div::before{content:"";position:absolute;left:0;top:3px;width:14px;height:8px;
  border-left:2.5px solid #2FA36B;border-bottom:2.5px solid #2FA36B;transform:rotate(-45deg)}
.checks b{font-size:13.5px;line-height:1.4;color:var(--ink)}
.checks span{font-size:13px;line-height:1.55;color:var(--ink-2)}
.pt-out3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.pt-out3>div{display:grid;gap:2px;padding-top:9px;border-top:1px solid var(--line-2)}
.pt-out3 .k{font-size:var(--t-micro);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pt-out3 .v{font-size:20px;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pt-out3 .s{font-size:var(--t-caption);color:var(--ink-3)}
.wide{grid-column:1/-1}
.checkfield label{font-weight:400;text-transform:none;letter-spacing:normal;font-size:13px;
  display:flex;gap:9px;align-items:flex-start;justify-content:flex-start}
.checkfield input{margin-top:2px}
@media(max-width:900px){.checks{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.checks{grid-template-columns:1fr}}


/* ══ button bar and menu, deliberately last so it overrides the rest ══ */
@media(min-width:641px){
  nav{display:flex !important;flex-wrap:wrap;align-items:center;gap:2px 4px;
      grid-template-columns:none !important;padding:6px 14px}nav>a,nav>button,nav .navcell>button,nav .navcell>a{width:auto !important;padding:9px 13px;border-radius:9px;
      border-bottom:0 !important;white-space:nowrap}nav>a:hover,nav>button:hover,nav .navcell>button:hover,nav .navcell>a:hover{background:var(--accent-soft);color:var(--accent-ink)}
  nav>a[aria-current="page"],nav>button[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);border-bottom-color:transparent}
  nav .navcell.open>button{background:var(--accent-soft);color:var(--accent-ink)}
  nav .navcell{grid-column:auto !important}

  .masthead{align-items:flex-start}
  .head-right{align-items:center}
  .head-tools{--ctl:40px;flex-direction:row !important;flex-wrap:wrap;justify-content:flex-end;
      align-items:center;gap:10px;width:auto !important}
  .head-tools .search{flex:0 1 300px;min-width:230px}
  .head-tools .langs{gap:8px;flex:0 0 auto}
  .head-tools .search-field input,
  .head-tools .btn.sm,
  .head-tools .langs>select,
  .head-tools .langs .cur,
  .head-tools .calcbtn,
  .head-tools .demobtn{height:var(--ctl);border-radius:10px}
  .head-tools .search-field input{padding-left:38px}
  .head-tools .btn.sm{padding:0 16px}
  .head-tools .calcbtn,.head-tools .demobtn{padding:0 15px}
  .head-tools .langs>select{padding:0 34px 0 12px;max-width:210px}
  .head-tools .langs .cur{display:inline-flex;align-items:center;padding:0 12px}
}
@media(min-width:1120px){
  .head-tools{flex-wrap:nowrap}
  nav{gap:2px 10px;padding:6px 18px}
}
.head-tools .demobtn,.demobtn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font:600 12px/1 Inter,sans-serif;
  letter-spacing:.01em;white-space:nowrap;border-radius:7px;background:var(--accent-ink);color:var(--btn-ink);
  border:1px solid var(--accent-ink);cursor:pointer;transition:filter .15s ease}
.head-tools .demobtn:hover,.demobtn:hover{filter:brightness(1.12)}


@media(min-width:641px) and (max-width:1119px){
  .head-tools{flex-wrap:nowrap}
  .head-tools .btn.sm span{display:none}
  .head-tools .btn.sm{padding:0 12px}
  .head-tools .langs>select{max-width:118px}
  .head-tools .search{flex:1 1 170px;min-width:140px}
  .head-tools .calcbtn span,.head-tools .demobtn span{white-space:nowrap}
}
@media(min-width:641px) and (max-width:860px){
  .head-tools .calcbtn span{display:none}
  .head-tools .calcbtn{padding:0 12px}
}


@media(min-width:641px){
  .head-tools .langs{display:flex;flex-wrap:nowrap;align-items:center}
  .head-tools .langs>*{flex:0 0 auto;width:auto}
}
@media(min-width:641px) and (max-width:900px){
  .head-tools .langs .cur{display:none}
}


.ddpanel .ddhint{font-style:italic;font-size:.8em;color:var(--ink-2);margin-left:9px;font-weight:400;letter-spacing:0}

.navpill{margin:0 0 0 auto;align-self:center;flex:0 1 auto;font-size:11px;padding:7px 12px;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}
@media(max-width:1240px){.navpill{display:none}}

/* ── call-to-action knoppen, oranje glas ─────────────────────────────── */
.btn:not(.ghost):not(.outline),
.head-tools .demobtn,
.demobtn,
button.demobtn,
a.demobtn{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,168,86,.92) 0%,rgba(255,146,48,.90) 46%,rgba(242,106,10,.96) 100%) !important;
  color:#2B1200 !important;
  border:1px solid rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 10px 16px -10px rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(120,45,0,.18),0 6px 18px rgba(226,104,10,.26);
  transition:box-shadow .15s ease,transform .15s ease,filter .15s ease}
.btn:not(.ghost):not(.outline) svg,
.demobtn svg{color:#2B1200}
.btn:not(.ghost):not(.outline):hover,
.head-tools .demobtn:hover,
.demobtn:hover{filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(120,45,0,.2),0 9px 24px rgba(226,104,10,.34)}
.btn:not(.ghost):not(.outline):active,
.demobtn:active{transform:translateY(1px)}
.btn:not(.ghost):not(.outline):focus-visible,
.demobtn:focus-visible{outline:2px solid #0F7BA5;outline-offset:3px}
dialog .btn,#dlg .btn,dialog .btn.sm,#dlg .btn.sm,
.search .btn,.search .btn.sm{background:var(--accent-ink) !important;color:var(--btn-ink) !important;
  border:1px solid var(--accent-ink) !important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.btn:not(.ghost):not(.outline),.demobtn{transition:none}}


/* ── drie organisatiegroottes, tijdelijk zonder beeld ─────────────────── */
.sizestrip{display:grid;gap:12px;margin-top:18px;flex:1;align-content:stretch}
.sizestrip>div{display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:10px;padding:15px 18px}
.sizestrip>div:nth-child(2){border-left-color:var(--accent-ink)}
.sizestrip>div:nth-child(3){border-left-color:var(--spice-2)}
.sizestrip b{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sizestrip span{font-size:15px;font-weight:700;color:var(--accent-ink)}
.sizestrip i{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--ink-2)}


/* ── aanmeldsectie: formulier links, beeld rechts ────────────────────── */
.signup-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:18px}
.signup-split>.tool{margin:0}
.signup-media{display:grid;grid-template-rows:1fr 1fr 1fr auto;gap:12px;min-height:0}
.signup-media figure{margin:0;position:relative;overflow:hidden;border-radius:12px;min-height:0;aspect-ratio:3/1;width:100%;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.signup-media figure img{width:100%;height:100%;object-fit:cover;display:block}
.signup-media figcaption{position:absolute;left:12px;bottom:12px;background:rgba(12,24,40,.82);color:#FFFFFF;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;border-radius:7px}
.signup-media .src{margin:2px 0 0}
@media(max-width:900px){
  .signup-split{grid-template-columns:1fr}
  .signup-media{grid-template-rows:none}
  .signup-media figure{min-height:0;aspect-ratio:16/7;width:100%}
}


.signup-split>.tool{display:flex;flex-direction:column}
.signup-split>.tool>form{display:flex;flex-direction:column;flex:1 1 auto;width:100%;max-width:none}
.signup-split>.tool .tool-grid{width:100%}
.signup-split>.tool .tool-out{margin-top:auto}


/* ── name and address block, one field per line ───────────────────────── */
.naw{font-style:normal;line-height:1.75;color:var(--ink-2);margin:10px 0 0}
.naw b{color:var(--ink);font-weight:700}


/* ── explanatory note inside a form label, italic and 20 per cent smaller ── */
.lblhint{font-style:italic;font-size:.8em;font-weight:400;letter-spacing:0;color:var(--ink-2);text-transform:none}


/* ── audience selector ─────────────────────────── */
.audseg{display:inline-flex;align-self:flex-start;align-items:center;padding:3px;gap:3px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:11px;margin-bottom:16px;max-width:100%;flex-wrap:wrap;width:auto}
.audseg .segb{appearance:none;flex:0 0 auto;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font:600 13px/1 Inter,-apple-system,'Segoe UI',system-ui,sans-serif;color:var(--ink-2);
  padding:10px 16px;border-radius:8px;transition:background .14s ease,color .14s ease}
.audseg .segb.on{background:var(--accent-ink);color:#FFFFFF}
.audseg .segb:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
#biz-lim b{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);align-self:center;margin-right:4px}
@media (prefers-reduced-motion:reduce){.audseg .segb{transition:none}}


/* ── tag on articles that apply to the public sector only ───── */
.art-tag{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-line);
  padding:3px 8px;border-radius:20px;margin-left:8px;white-space:nowrap}


/* ── tijdlijn in de zijkolom ─────────────────────────────────────────── */
.tl{list-style:none;margin:10px 0 0;padding:0}
.tl li{position:relative;padding:0 0 15px 20px;border-left:2px solid var(--line)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--surface-2)}
.tl li:last-child::before{background:var(--spice)}
.tl b{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:3px}
.tl span{display:block;font-size:13px;line-height:1.5;color:var(--ink-2)}


/* ── vervolgstappen in de zijkolom ───────────────────────────────────── */
.nextlist{display:grid;gap:8px;margin-top:10px}
.nextlist button,.nextlist a{appearance:none;text-decoration:none;text-align:left;cursor:pointer;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:grid;gap:2px;
  font-family:inherit;transition:border-color .14s ease,background .14s ease}
.nextlist button:hover,.nextlist a:hover{border-color:var(--accent-2);background:var(--accent-soft)}
.nextlist button:focus-visible,.nextlist a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.nextlist b{font-size:13.5px;font-weight:700;color:var(--ink)}
.nextlist span{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.nextlist button,.nextlist a{transition:none}}


/* ── rekenhulpen: diepte en zichtbare samenhang ──────────────────────── */
.tool,.calc.qb,.calc:not(.qb){border-radius:14px;
  box-shadow:var(--shadow),0 22px 44px -30px rgba(15,35,55,.55);position:relative}
.tool>.tool-grid,.tool>form>.tool-grid,.tool>.tabbar,.tool>.mini-top,.tool>.chips{
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);box-shadow:inset 0 -7px 14px -12px rgba(15,35,55,.4)}

/* the outcome is a raised card with an arrow pointing back at the control */
#ap-out,#hw-out,#cty-out,#pt-out,#biz-out{position:relative;margin:18px 20px 0;
  padding:16px 18px 16px 20px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--accent);
  box-shadow:0 12px 26px -18px rgba(15,35,55,.6)}
#ap-out::before,#hw-out::before,#cty-out::before,#pt-out::before,#biz-out::before{
  content:"";position:absolute;top:-7px;left:30px;width:12px;height:12px;background:var(--surface);
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
#ap-out ul,#hw-out ul{margin:11px 0 0;padding-left:18px;display:grid;gap:6px}

/* opgetilde uitkomsttegels */
.ap-sum>div,.pt-out3>div{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;box-shadow:0 8px 18px -14px rgba(15,35,55,.5)}
.ap-sum .v{font-size:23px;font-weight:800;color:var(--accent-ink);margin-top:4px;line-height:1.15;
  font-variant-numeric:tabular-nums}

/* a table inside an outcome gets the same raised treatment */
#ap .ap-list .tablewrap,#biz-out .tablewrap,#cty-out .tablewrap{background:var(--surface);
  border-radius:11px;border:1px solid var(--line);box-shadow:0 8px 18px -14px rgba(15,35,55,.45)}
#ap .ap-list .tablewrap table,#biz-out .tablewrap table,#cty-out .tablewrap table{margin:0}

/* the list under the application route stays its own output band */
#ap .tool-actions{padding:15px 20px 18px}
#ap .ap-list{padding:18px 20px 20px;background:var(--surface-2);border-top:1px solid var(--line);gap:12px}
#ap .ap-listhead{display:flex;align-items:baseline;gap:10px}
#ap .ap-listhead b{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
#ap .ap-listhead span{font-size:12.5px;color:var(--ink-3)}
.tool>.chips{padding:15px 20px;align-items:center;gap:8px}
.tool>.chips>b{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
/* ── tabbladen: zelfde diepte en samenhang als de rekenhulpen ────────── */
.tabs{border-radius:14px;box-shadow:var(--shadow),0 22px 44px -30px rgba(15,35,55,.55);background:var(--surface-2)}
.tabs>.tabbar{background:linear-gradient(180deg,var(--surface-2) 0%,var(--paper) 100%);border-bottom:0;box-shadow:inset 0 -7px 14px -12px rgba(15,35,55,.4)}
.tabs>.tabbar button{position:relative;transition:background .18s,color .15s,border-color .15s}
.tabs>.tabbar button.on{background:var(--surface);box-shadow:0 -12px 24px -20px rgba(15,35,55,.55)}
.tabs>.tabbar button.on::after{content:"";position:absolute;left:50%;bottom:-8px;width:0;height:0;
  border:8px solid transparent;border-top-color:var(--accent);transform:translateX(-50%);pointer-events:none}
.tabs>.tabpanel{margin:17px 18px 18px;padding:18px 20px 20px 22px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--accent);box-shadow:0 12px 26px -18px rgba(15,35,55,.6)}



/* static build: links that carry a button class */
a.btn,a.qlink,nav a,.ddpanel a{text-decoration:none}
nav a,.ddpanel a{display:block;box-sizing:border-box}
.browser{border:0;border-radius:0;box-shadow:none}
.skiplink{position:absolute;left:-9999px}
.skiplink:focus{left:12px;top:12px;z-index:60;position:fixed}

/* build: utilities */
.u002535c{margin-top:12px}
.u00ac680{left:36.0%}
.u0931eae{float:right;font-weight:800;color:var(--accent-ink)}
.u114b3e2{gap:10px}
.u13076d9{text-align:center}
.u1b9b41e{grid-column:1/-1}
.u250bc98{grid-column:1/-1;margin:0}
.u293a6d7{left:36.5%}
.u3cc5c9f{--p: 100.0%}
.u3f9f96c{min-width:0}
.u402d9f3{left:74.4%}
.u4a3a3a5{left:100%}
.u5371db1{margin-top:10px}
.u553a645{margin-top:14px}
.u68e8688{--now: 36.7%}
.u7f42240{width:48%}
.u951d197{left:0%}
.u9f10b45{object-position:50% 22%}
.ua39f5d1{gap:12px}
.ub94aef7{width:22%}
.uc68e3ce{font-weight: 700; color: var(--amber-ink)}
.uc858897{width:100%;display:block}
.ud16ee22{margin-top:13px}
.ud41d8cd{}
.ud4477e5{font-weight: 700; color: var(--good-ink)}
.ud7614df{grid-template-columns:1fr}
.ud774752{--now:36.0%}
.udad9afc{margin:0;padding-left:19px}
.ue204f4f{--p:8.2%}
.uf0df2ca{font-weight: 700; color: var(--accent-ink)}
.uf6e3d7f{text-align:right}
.ufb38441{left: 36.7%}
.nx-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hit{display:block;color:inherit;text-decoration:none}