/* ==========================================================================
   Beloningsarchitectuur — hero
   Grafiet: licht uit de hoek dat een bouwtekening blootlegt, stof dat op
   het raster valt, en een groot logo dat openschuift tot navigatie.
   Alle kleur zit in de tokens hieronder.
   ========================================================================== */

/* ---------------------------------------------------------------- Grafiet: donkergrijs (geen zwart), wit, mosterd */
:root{
  --bg-top:      #363940;
  --bg-2:        #2B2E34;
  --bg:          #23252A;
  --bg-deep:     #1B1C20;
  --bg-deep-rgb: 27, 28, 32;

  --fg:          #FFFFFF;
  --fg-2:        #DADBE0;
  --muted:       #9A9CA6;
  --muted-2:     #B3B5BE;

  --accent:      #E6C866;          /* lichte mosterd */
  --accent-rgb:  230, 200, 102;
  --accent-hot:  #F2DB8E;
  --on-accent:   #1A1608;

  --line:        rgba(255,255,255,.16);
  --line-2:      rgba(255,255,255,.10);
  --fill:        rgba(255,255,255,.05);
  --card:        rgba(27,28,32,.76);
  --card-2:      #202226;
  --panel:       rgba(27,28,32,.92);

  --light:       255, 246, 214;
  --sun-a:       1;
  --draft:       255, 240, 200;
  --draft-a:     .10;
  --vignette:    rgba(0,0,0,.42);
  --arch-shadow: rgba(0,0,0,.5);

  --seg-1:#FFFFFF; --seg-2:#F1F1EE; --seg-3:#D5D5D0; --seg-4:#A9A9A4;
  --key-1:#F8EBB6; --key-2:#E6C866; --key-3:#C4A544; --key-4:#8A7330;

  --p-dust-a:    255, 255, 255;
  --p-dust-b:    235, 230, 215;
  --p-ink:       230, 200, 102;

  /* aliassen die de indicatietool gebruikt */
  --yellow:      var(--accent);
  --yellow-hot:  var(--accent-hot);
  --bone:        var(--fg);
  --dim:         var(--muted);

  --cell:        48px;
  --shell:       min(1120px, 100%);
  --gutter:      clamp(20px, 5vw, 56px);
  --font:        "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .5s ease, color .5s ease;
}

/* --------------------------------------------------------------- achtergrond */

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(78% 66% at 14% 0%,  rgba(var(--light), calc(.17 * var(--sun-a))) 0%, rgba(var(--light), calc(.06 * var(--sun-a))) 44%, rgba(var(--light),0) 76%),
    radial-gradient(50% 42% at 96% 100%, rgba(var(--light), .05) 0%, rgba(var(--light),0) 72%),
    linear-gradient(160deg, var(--bg-top) 0%, var(--bg-2) 38%, var(--bg) 72%, var(--bg-deep) 100%);
  transition:background .5s ease;
}

/* de bouwtekening: een fijn raster dat alleen in het licht zichtbaar is */
.bg .draft{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(var(--draft), var(--draft-a)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--draft), var(--draft-a)) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  background-position:0 0;
  -webkit-mask-image:radial-gradient(64% 58% at 14% 0%, #000 0%, rgba(0,0,0,.4) 46%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(64% 58% at 14% 0%, #000 0%, rgba(0,0,0,.4) 46%, rgba(0,0,0,0) 100%);
}

/* lichtbundels uit de hoek, twee ongelijke waaiers die traag tegen elkaar in bewegen */
.bg .rays{
  position:absolute;
  inset:-22% -12% 0 -12%;
  transform-origin:22% 0;
  background:
    repeating-conic-gradient(from 118deg at 22% 0%,
      rgba(var(--light),0)                       0deg,
      rgba(var(--light), calc(.075 * var(--sun-a))) 1.6deg,
      rgba(var(--light),0)                       3.4deg,
      rgba(var(--light),0)                       7.2deg,
      rgba(var(--light), calc(.04 * var(--sun-a)))  8.4deg,
      rgba(var(--light),0)                       10.9deg);
  -webkit-mask-image:radial-gradient(70% 64% at 22% 0%, #000 0%, rgba(0,0,0,.5) 36%, rgba(0,0,0,0) 74%);
          mask-image:radial-gradient(70% 64% at 22% 0%, #000 0%, rgba(0,0,0,.5) 36%, rgba(0,0,0,0) 74%);
  animation:sway 26s ease-in-out infinite alternate;
}
.bg .rays::after{
  content:"";
  position:absolute;
  inset:0;
  transform-origin:22% 0;
  background:
    repeating-conic-gradient(from 123deg at 22% 0%,
      rgba(var(--light),0)                        0deg,
      rgba(var(--light), calc(.045 * var(--sun-a))) 2.8deg,
      rgba(var(--light),0)                        5.1deg,
      rgba(var(--light),0)                        13.7deg);
  animation:sway 34s ease-in-out infinite alternate-reverse;
}

@keyframes sway{
  from{ transform:rotate(-1.8deg); }
  to  { transform:rotate(1.8deg); }
}

/* de lichtbron: een bleke schijf net buiten de linkerbovenhoek, die zachtjes ademt */
.bg .sun{
  position:absolute;
  left:14%;
  top:0;
  width:min(62vw, 760px);
  aspect-ratio:2 / 1;
  transform:translate(-50%, -66%);
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(var(--light), calc(.40 * var(--sun-a))) 0%,
    rgba(var(--light), calc(.22 * var(--sun-a))) 40%,
    rgba(var(--light), calc(.08 * var(--sun-a))) 70%,
    rgba(var(--light), 0) 100%);
  filter:blur(30px);
  animation:breathe 11s ease-in-out infinite alternate;
}

@keyframes breathe{
  from{ opacity:.82; transform:translate(-50%, -66%) scale(1); }
  to  { opacity:1;   transform:translate(-50%, -64%) scale(1.04); }
}

/* randen vallen weg */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(135% 108% at 50% 22%, rgba(0,0,0,0) 46%, var(--vignette) 100%);
}

#particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* --------------------------------------------------------------- layout */

.hero{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-inline:var(--gutter);
  padding-block:clamp(48px, 9vh, 88px);
}

.hero-core{
  flex:1;
  width:100%;
  max-width:var(--shell);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* --------------------------------------------------------------- logo dat openschuift */

.arch-wrap{
  position:relative;
  width:clamp(220px, 34vw, 440px);
  margin:0 auto;
}

.arch{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 20px 52px var(--arch-shadow));
}

.st-1{ stop-color:var(--seg-1); } .st-2{ stop-color:var(--seg-2); }
.st-3{ stop-color:var(--seg-3); } .st-4{ stop-color:var(--seg-4); }
.sk-1{ stop-color:var(--key-1); } .sk-2{ stop-color:var(--key-2); }
.sk-3{ stop-color:var(--key-3); } .sk-4{ stop-color:var(--key-4); }
.st, .sk{ transition:stop-color .5s ease; }

.arch .seg{
  transform-origin:100px 100px;
  cursor:pointer;
  pointer-events:auto;
  animation:rise .7s cubic-bezier(.2,.8,.25,1) backwards;
  transition:transform .55s cubic-bezier(.2,.8,.25,1), filter .3s ease, opacity .3s ease;
}
.arch .seg:nth-of-type(1){ animation-delay:.06s; }
.arch .seg:nth-of-type(2){ animation-delay:.14s; }
.arch .seg:nth-of-type(3){ animation-delay:.36s; }
.arch .seg:nth-of-type(4){ animation-delay:.22s; }
.arch .seg:nth-of-type(5){ animation-delay:.30s; }

.arch .seg--key{ animation:rise .7s cubic-bezier(.2,.8,.25,1) .36s backwards, keyPulse 5s ease-in-out 2s infinite alternate; }
@keyframes keyPulse{
  from{ filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.30)); }
  to  { filter:drop-shadow(0 0 30px rgba(var(--accent-rgb),.60)); }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px) scale(.94); }
  to  { opacity:1; transform:none; }
}

/* open: de blokken schuiven langs hun eigen as naar buiten */
.arch-wrap.is-open .seg[data-i="0"]{ transform:translate(-10.5px,  3.4px); }
.arch-wrap.is-open .seg[data-i="1"]{ transform:translate(-6.5px,  -8.9px); }
.arch-wrap.is-open .seg[data-i="2"]{ transform:translate(0,       -11px);  }
.arch-wrap.is-open .seg[data-i="3"]{ transform:translate(6.5px,   -8.9px); }
.arch-wrap.is-open .seg[data-i="4"]{ transform:translate(10.5px,   3.4px); }

.arch-wrap.is-open .seg:not(.hot){ opacity:.82; }
.arch .seg.hot{ filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.55)); opacity:1; }

/* eenmalige hint na het binnenkomen: even ademen */
.arch-wrap.hint .seg{ animation:hint 1.4s ease-in-out 1; }
@keyframes hint{
  0%,100%{ transform:none; }
  45%{ transform:translate(calc(var(--hx) * .45), calc(var(--hy) * .45)); }
}
.arch .seg[data-i="0"]{ --hx:-10.5px; --hy:3.4px; }
.arch .seg[data-i="1"]{ --hx:-6.5px;  --hy:-8.9px; }
.arch .seg[data-i="2"]{ --hx:0px;     --hy:-11px; }
.arch .seg[data-i="3"]{ --hx:6.5px;   --hy:-8.9px; }
.arch .seg[data-i="4"]{ --hx:10.5px;  --hy:3.4px; }

/* maatlijnen: van elk blok een dunne lijn naar zijn label, zoals op een tekening */
.arch .lead{
  stroke:var(--fg);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  opacity:0;
  transition:opacity .35s ease .08s;
}

.arch-wrap.is-open .lead{ opacity:.55; }
.arch-wrap.is-open .lead.hot{ opacity:1; stroke:var(--accent); }

/* de labels die uit de blokken komen: massief, recht, scherp */
.arch-nav{ position:absolute; left:0; right:0; top:0; aspect-ratio:200 / 105; pointer-events:none; }

.chip{
  position:absolute;
  display:inline-block;
  padding:9px 14px;
  border-radius:2px;
  border:1px solid var(--fg);
  background:var(--fg);
  color:var(--bg-top);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.25,1), border-color .2s ease, color .2s ease, background-color .2s ease;
}
/* ankerpunten = uiteinden van de maatlijnen (in procenten van het logovlak 200×105) */
.chip[data-group="aanpak"]{    left:-9%;  top:30%;  transform:translate(-100%, -50%) translateX(8px); }
.chip[data-group="indicatie"]{ left:50%;  top:-19%; transform:translate(-50%, -100%) translateY(6px); }
.chip[data-group="over-ons"]{  left:109%; top:30%;  transform:translate(0, -50%) translateX(-8px); }

.arch-wrap.is-open .chip{ opacity:1; pointer-events:auto; }
.arch-wrap.is-open .chip[data-group="aanpak"]{    transform:translate(-100%, -50%); }
.arch-wrap.is-open .chip[data-group="indicatie"]{ transform:translate(-50%, -100%); }
.arch-wrap.is-open .chip[data-group="over-ons"]{  transform:translate(0, -50%); }

.chip:hover, .chip.hot, .chip[aria-expanded="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.chip--key{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.chip--key:hover, .chip--key.hot{ background:var(--accent-hot); border-color:var(--accent-hot); }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; opacity:1; pointer-events:auto; }

/* op kleine schermen staan de knoppen als rij onder het logo, altijd zichtbaar */
@media (max-width:700px){
  .arch-nav{
    position:static; aspect-ratio:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
    width:min(92vw, 420px); margin:18px 0 0 50%; transform:translateX(-50%); pointer-events:auto;
  }
  .arch-nav .chip, .arch-wrap.is-open .chip{ position:static; opacity:1; pointer-events:auto; transform:none; }
  .arch .lead{ display:none; }
  .arch-wrap{ width:min(72vw, 300px); }
  .wordmark{ font-size:clamp(17px, 5.6vw, 24px); }
  .arch-wrap.hint .seg{ animation:none; }
}

/* --------------------------------------------------------------- naam, groot onder het logo */

/* breder dan het logoblok, maar wel erin gecentreerd */
.wordmark-wrap{
  width:max-content;
  max-width:calc(100vw - 2 * var(--gutter));
  margin:clamp(24px, 4.2vh, 44px) 0 0 50%;
  transform:translateX(-50%);
}
.wordmark{
  margin:0;
  font-size:clamp(20px, 4.6vw, 58px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.012em;
  text-transform:uppercase;
  white-space:nowrap;
  text-align:center;
  color:var(--fg);
  text-shadow:0 0 44px rgba(var(--accent-rgb),.16), 0 2px 28px rgba(0,0,0,.4);
  animation:fadeUp .7s ease-out .5s backwards;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* --------------------------------------------------------------- knoppen */

.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:16px 30px;
  border-radius:2px;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease,
             color .2s ease, background-color .2s ease, filter .2s ease;
}

.btn--primary{
  color:var(--on-accent);
  background:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 8px 30px rgba(var(--accent-rgb),.22);
}
.btn--primary:hover{
  background:var(--accent-hot);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             0 14px 42px rgba(var(--accent-rgb),.32);
}

.btn--ghost{
  background:var(--fill);
  color:var(--fg);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
}

.btn .arrow{ transition:transform .2s ease; }
.btn--primary:hover .arrow{ transform:translateX(3px); }

.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* --------------------------------------------------------------- rust */

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ==========================================================================
   Indicatietool — sectie onder de hero
   ========================================================================== */

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

.tool{
  position:relative;
  z-index:1;
  scroll-margin-top:24px;
  padding-inline:var(--gutter);
  padding-block:clamp(64px, 12vh, 132px);
  background:linear-gradient(180deg, rgba(var(--bg-deep-rgb),0) 0%, rgba(var(--bg-deep-rgb),.70) 7%, rgba(var(--bg-deep-rgb),.93) 18%, rgba(var(--bg-deep-rgb),.96) 100%);
}

.tool-inner{ max-width:760px; margin:0 auto; }

/* ---------------------------------------------------------------- kop */

.tool-head{ margin-bottom:clamp(30px, 5vh, 46px); }

.t-eyebrow{
  margin:0 0 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--yellow);
}

.t-title{
  margin:0;
  font-size:clamp(26px, 4.2vw, 40px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--bone);
  text-wrap:balance;
}

.t-intro{
  margin:14px 0 0;
  max-width:56ch;
  font-size:16px;
  line-height:1.62;
  color:var(--muted-2);
}

/* ---------------------------------------------------------------- voortgang */

.rail{ display:flex; align-items:flex-end; gap:5px; height:30px; margin-bottom:9px; }

.rung{
  flex:1;
  border:none;
  padding:0;
  border-radius:1px 1px 0 0;
  background:var(--line-2);
  cursor:default;
  transition:background .25s ease;
}
.rung[data-done="1"]{ background:var(--yellow); }
.rung[data-current="1"]{ background:var(--bone); }
.rung.clickable{ cursor:pointer; }
.rung.clickable:hover{ background:var(--yellow-hot); }
.rung:disabled{ cursor:default; }
.rung:nth-child(1){ height:38%; }
.rung:nth-child(2){ height:53%; }
.rung:nth-child(3){ height:68%; }
.rung:nth-child(4){ height:84%; }
.rung:nth-child(5){ height:100%; }

.railcap{
  display:flex;
  justify-content:space-between;
  margin-bottom:26px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ---------------------------------------------------------------- vraag */

.t-card{
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:3px;
  padding:clamp(20px, 4vw, 30px);
  backdrop-filter:blur(3px);
}

.t-qnum{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--yellow);
}

.t-q{
  margin:9px 0 0;
  font-size:clamp(20px, 3.1vw, 27px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.018em;
  color:var(--bone);
  text-wrap:balance;
}

.t-hint{ margin:9px 0 0; font-size:14px; color:var(--dim); }

.t-card fieldset{ border:0; margin:20px 0 0; padding:0; }
.t-card legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.t-opts{ display:flex; flex-direction:column; gap:8px; }

.t-opt{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:14px 16px;
  border:1px solid var(--line-2);
  border-radius:2px;
  background:var(--fill);
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease;
}
.t-opt:hover{ border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.04); }
.t-opt input{ margin:3px 0 0; accent-color:var(--yellow); flex:none; }
.t-opt span{ font-size:15px; line-height:1.45; color:var(--fg-2); }
.t-opt:has(input:checked){ border-color:var(--yellow); background:rgba(var(--accent-rgb),.09); }
.t-opt:has(input:checked) span{ color:var(--bone); }
.t-opt:has(input:focus-visible){ outline:2px solid var(--yellow); outline-offset:2px; }

.t-nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:22px; }

.btn--sm{ padding:13px 24px; font-size:14px; }

button.btn{ font-family:inherit; }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none !important; }

/* ---------------------------------------------------------------- uitkomst */

.t-res{ display:flex; flex-direction:column; gap:18px; }

.t-block{
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:3px;
  padding:clamp(20px, 4vw, 30px);
  backdrop-filter:blur(3px);
}

.t-lede{
  margin:0;
  font-size:clamp(18px, 2.6vw, 23px);
  font-weight:700;
  line-height:1.38;
  letter-spacing:-.014em;
  color:var(--bone);
  text-wrap:pretty;
}

.t-prose p{
  margin:0 0 15px;
  max-width:62ch;
  font-size:16px;
  line-height:1.7;
  color:var(--fg-2);
}
.t-prose p:last-child{ margin-bottom:0; }

.t-levels{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.t-levels li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:13px 16px;
  background:var(--fill);
  font-size:15px;
  line-height:1.45;
  color:var(--fg-2);
}
.t-levels li:first-child{ border-radius:2px 2px 0 0; }
.t-levels li:last-child{ border-radius:0 0 2px 2px; }
.t-tier{
  flex:none;
  padding-top:2px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  color:var(--yellow);
  font-variant-numeric:tabular-nums;
}

.t-note{ margin:14px 0 0; font-size:14px; color:var(--dim); }

.t-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; }
.t-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:700;
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgb),.5);
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.t-links a:hover{ color:var(--accent); border-color:var(--accent); }
.t-links a[data-todo]{ border-bottom-style:dashed; }

.t-figs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1px;
  background:var(--line-2);
  border-radius:2px;
  overflow:hidden;
}
.t-fig{ background:var(--card-2); padding:17px 18px; }
.t-fig dt{
  margin:0 0 6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
}
.t-fig dd{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.t-fig--spot{ background:rgba(var(--accent-rgb),.10); }
.t-fig--spot dd{ color:var(--yellow); font-size:23px; }

.t-pay{ margin:15px 0 0; font-size:14px; color:var(--dim); }
.t-free{ margin:10px 0 0; font-size:15px; font-weight:600; color:var(--yellow); }

.t-calc{ margin-top:18px; border-top:1px solid var(--line-2); padding-top:14px; }
.t-calc summary{ font-size:13px; color:var(--dim); cursor:pointer; list-style:none; }
.t-calc summary::-webkit-details-marker{ display:none; }
.t-calc summary::before{ content:"▸ "; color:var(--yellow); }
.t-calc[open] summary::before{ content:"▾ "; }
.t-calc table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
.t-calc td{ padding:5px 10px 5px 0; color:var(--dim); }
.t-calc td:last-child{ text-align:right; color:var(--fg-2); font-variant-numeric:tabular-nums; }

.t-cta{
  background:linear-gradient(140deg, rgba(var(--accent-rgb),.13) 0%, rgba(var(--accent-rgb),.04) 60%, rgba(var(--accent-rgb),0) 100%);
  border-color:rgba(var(--accent-rgb),.30);
}
.t-cta p{ margin:0 0 18px; max-width:60ch; font-size:16px; line-height:1.68; color:var(--fg-2); }

.t-nomatch{ border-left:2px solid var(--yellow); }

.t-disclaim{ margin:0; font-size:12px; color:var(--muted); text-align:center; }

.t-restart{ display:flex; justify-content:center; }

@media (max-width:520px){
  .t-nav{ flex-direction:column; align-items:stretch; }
  .t-nav .btn{ justify-content:center; width:100%; }
}