/* Calculator uses the original behavior with the current landing-page palette. */
.aplis {
 --font-body:var(--font); --font-display:var(--font);
 --ink:#123c47; --ink-soft:#547076; --surface:#f0eeea; --surface-2:#e9d9df;
 --surface-3:#163e48; --on-dark:#fff3e8; --on-dark-soft:#d4dbd5;
 --hairline:#62838644; --hairline-on-dark:#f2e4ca33; --field-border:#62838688;
 --slider-track:#62838655; --accent:#3f797b; --accent-weak:#b6d5cf66;
 --teal:#729f9b; --teal-deep:#4b8584; --gold:#bc8d77;
 --t-body:14px; --t-small:13px; --t-caption:11px; --t-micro:10px;
 --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
 --s-6:32px; --s-7:48px; --s-8:64px; --header-h:0px;
 --track-micro:1.3px; --r-1:12px; --r-2:22px;
 --dur-micro:140ms; --dur-ui:220ms; --dur-enter:620ms;
 --ease-out:cubic-bezier(.23,1,.32,1);
 padding:85px 0;
 background:radial-gradient(ellipse at 12% 80%,#f3dfc866,transparent 70%),radial-gradient(ellipse at 90% 15%,#e7d1e066,transparent 65%),linear-gradient(110deg,#e8eeed,#f0ebe6);
 color:var(--ink); font-size:14px; line-height:1.8;
}
.aplis label{color:var(--ink);margin:0}
.aplis__head .lead{max-width:650px;font-size:14px;line-height:1.9;color:var(--ink-soft);margin:24px 0 0}
.aplis input[type="range"]{border:0;box-shadow:none;padding:0;min-height:0;border-radius:0}
.aplis input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.aplis .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.aplis__head { max-width: 760px; margin-bottom: var(--s-7); }
.aplis__head h2 { max-width: 21ch; }
.ba { display: grid; gap: var(--s-7); align-items: start; }
.ba__stage { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ba__svg {
  display: block; width: 100%; max-width: 500px; height: auto; overflow: visible;
  touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
@media (pointer: coarse) { .ba__svg { touch-action: pan-y pinch-zoom; } }
.ba__caption {
  margin: var(--s-4) 0 0; text-align: center;
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
}
/* Every number on the wheel comes from JS; without it there is nothing honest to show. */
html.no-js .ba { display: none; }

.ba-grid { fill: none; stroke: rgba(95, 158, 154, .38); stroke-width: 1; }
.ba-label { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; line-height: 1.4; fill: var(--ink-soft); }
.ba-shape { fill: rgba(95, 158, 154, .26); stroke: var(--teal-deep); stroke-width: 2; stroke-linejoin: round; }
.ba-dot { fill: var(--teal-deep); stroke: var(--surface); stroke-width: 2; transition: fill var(--dur-ui) ease; }
.ba-dot.is-weak { fill: var(--gold); }
.ba-halo {
  fill: none; stroke: var(--gold); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  pointer-events: none;
}
.ba-halo.is-pulse { animation: baHalo var(--dur-enter) var(--ease-out) 2; }
@keyframes baHalo { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ba-halo, .ba-halo.is-pulse { animation: none; opacity: .6; transform: scale(1.6); }
}

.ba__panel { min-width: 0; }
.ba__inputs { border: 0; margin: 0; padding: 0; min-width: 0; }
.ba__inputs legend {
  padding: 0; margin-bottom: var(--s-3);
  font-size: var(--t-body); font-weight: 600; color: var(--ink);
}
.ba__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.ba__row:last-of-type { border-bottom: 1px solid var(--hairline); }
.ba__k { font-size: var(--t-small); font-weight: 600; }
.ba__q { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; }
.ba__ctl { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-1); }
.ba__ctl output {
  flex: none; width: 4.2ch; text-align: right;
  font-size: var(--t-body); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Range input: 16px font, 28px thumb, track in the page tokens */
.ba__ctl input[type="range"] {
  flex: 1; min-width: 0; height: 44px; margin: 0;
  font-size: 16px; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  accent-color: var(--accent);
}
.ba__ctl input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--slider-track); }
.ba__ctl input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--slider-track); }
.ba__ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  transition: transform var(--dur-micro) var(--ease-out);
}
.ba__ctl input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
}
.ba__ctl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }

/* The visitor's two numbers, on sand: every leak below is multiplied by them. */
.ba__money {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4);
  margin-bottom: var(--s-6); padding: var(--s-5);
  border-radius: var(--r-2); background: var(--surface-2);
}
.ba__mfield { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-1); }
.ba__box { position: relative; display: block; }
.ba__box input {
  box-sizing: border-box; width: 100%; min-height: 54px; padding: 12px 16px;
  font: 600 20px/1.2 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--r-1);
  -moz-appearance: textfield; appearance: textfield;
  transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.ba__box:has(.ba__unit) input { padding-right: 60px; }
.ba__box input::-webkit-outer-spin-button, .ba__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ba__box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.ba__unit {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-weight: 600; color: var(--ink-soft); pointer-events: none;
}

/* Leak line under each slider, in the visitor's own numbers. The dot repeats the wheel's:
   teal, and gold on the biggest leak. Rewritten on every input with no animation. */
.ba__leak {
  margin-top: 2px;
  font-size: var(--t-caption); line-height: 1.45; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ba__leak::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: var(--teal-deep);
}
.ba__row.is-max .ba__leak { color: var(--ink); font-weight: 600; }
.ba__row.is-max .ba__leak::before { background: var(--gold); }

/* Result card on petrol. The numbers change on every input with no animation: the changing
   number is the feedback (emil-motion frequency gate). */
.ba__res {
  display: flex; flex-direction: column;
  margin-top: var(--s-6); padding: var(--s-7);
  border-radius: var(--r-2); background: var(--surface-3); color: var(--on-dark);
  box-shadow: 0 24px 48px -32px rgba(14, 59, 68, .45);
}
.ba__res p { max-width: none; }
.ba__now {
  margin: 0 0 var(--s-5); padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline-on-dark); color: var(--on-dark-soft);
}
.ba__now strong { color: var(--on-dark); font-weight: 600; white-space: nowrap; }
.ba__label {
  margin: 0;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--on-dark-soft);
}
.ba__label::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: var(--gold);
}
.ba__label span { color: var(--on-dark); }
.ba__big {
  margin: var(--s-1) 0 0; overflow-wrap: anywhere;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(46px, 5.4vw, 72px); line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums; color: var(--on-dark);
}
.ba__per { font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; color: var(--on-dark-soft); }
.ba__year { margin: var(--s-2) 0 var(--s-6); color: var(--on-dark-soft); }
.ba__year span { color: var(--on-dark); font-weight: 600; }
.ba__whatif {
  margin-bottom: var(--s-5); padding-block: var(--s-4);
  border-top: 1px solid var(--hairline-on-dark); border-bottom: 1px solid var(--hairline-on-dark);
}
.ba__whatif[hidden] { display: none; }
.ba__wlabel { display: block; font-size: var(--t-small); color: var(--on-dark-soft); }
.ba__wlabel output { color: var(--on-dark); font-weight: 600; }
.ba__whatif input[type="range"] {
  display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; accent-color: var(--gold);
}
.ba__whatif input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(250, 247, 242, .28); }
.ba__whatif input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(250, 247, 242, .28); }
.ba__whatif input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--surface-3); box-shadow: 0 0 0 1px var(--gold);
}
.ba__whatif input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid var(--surface-3); box-shadow: 0 0 0 1px var(--gold);
}
.ba__whatif input[type="range"]:focus-visible { outline: 2px solid var(--on-dark-soft); outline-offset: 4px; }
.ba__gain { margin: 0; color: var(--on-dark-soft); }
.ba__gain strong {
  font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums; color: var(--on-dark);
}
.ba__fine { margin: 0; font-size: var(--t-caption); color: var(--on-dark-soft); }
.ba__bridge { margin: var(--s-4) 0 var(--s-5); color: var(--on-dark); }
.ba__res .btn { align-self: flex-start; }

@media (min-width: 960px) {
  .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); }
  .ba__stage { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (max-width: 767px) {
  .ba__svg { max-width: 420px; }
  .ba-label { font-size: 15px; }
  .ba__money { padding: var(--s-4); gap: var(--s-3); }
  .ba__res { padding: var(--s-5) 20px; }
  .ba__res .btn { align-self: stretch; }
}
/* Below the two-column layout the wheel would scroll out of sight while the six
   sliders under it are used, so the visitor never saw the shape change. Here the
   wheel is pinned under the header as a full-width band; the stage wrapper steps
   aside (display: contents) so the caption falls back into the flow above the panel.
   Skipped on short screens (landscape phones). */
@media (max-width: 959px) and (min-height: 600px) {
  .ba { display: flex; flex-direction: column; gap: 0; }
  .ba__stage { display: contents; }
  .ba__svg {
    order: 1; align-self: stretch;
    position: sticky; top: var(--header-h); z-index: 3;
    width: auto; max-width: none; height: min(260px, 34svh);
    padding-block: var(--s-2);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--hairline);
  }
  .ba-label { font-size: 17px; }
  .ba__caption { order: 2; }
  .ba__panel { order: 3; margin-top: var(--s-6); }
  /* A control reached with Tab must land below the pinned wheel, not under it
     (html's scroll-padding already clears the header). */
  .ba__panel input, .ba__panel a { scroll-margin-top: calc(min(260px, 34svh) + 16px); }
  /* The result card is read, not dragged: it slides over the pinned wheel (still under the
     header, z 100) so the whole card fits on screen instead of losing its top under the band. */
  .ba__res { position: relative; z-index: 4; }
}


.aplis__head h2{max-width:21ch;font-size:clamp(34px,4.5vw,62px)}
.ba__stage{padding-top:8px}
.ba__money{background:linear-gradient(115deg,#e9d7df,#e6e2d5)}
.ba__box input{font-size:17px;background:#ffffffc9}
.ba__unit{font-size:12px}
.ba__row{margin-bottom:0}
.ba__res{background:radial-gradient(ellipse at 100% 100%,#78617b66,transparent 65%),linear-gradient(125deg,#102e38,#225764);padding:36px;border-radius:22px}
.ba__res p{line-height:1.8}
.ba__res .ba__big{font-size:clamp(30px,3.5vw,48px);line-height:1.2;letter-spacing:-.05em;font-weight:500}
.ba__res .ba__wlabel{color:var(--on-dark-soft);font-size:13px}
.ba__res .ba__gain strong{font-size:27px;letter-spacing:-.04em;overflow-wrap:anywhere}
.ba__res .btn{background:linear-gradient(110deg,#edc4a1,#ecc8d5);color:#193b45;white-space:normal;text-align:center;font-size:12px;padding:16px 23px}
.ba__now strong{white-space:normal}
.ba__svg{isolation:isolate}
@media(max-width:959px) and (min-height:600px){.ba__svg{background:linear-gradient(110deg,#e8eeed,#f0ebe6);border-radius:12px}.ba__panel{width:100%}}
@media(max-width:740px){.aplis{padding:55px 0}.aplis__head .lead{font-size:12px}.aplis__head h2{font-size:36px}.ba__res{padding:28px 23px}.ba__box input{font-size:16px;padding:12px;min-height:50px}.ba__box:has(.ba__unit) input{padding-right:44px}.ba__unit{right:12px}.ba__res .ba__big{font-size:34px}.ba__caption{font-size:12px}}
@media(max-width:370px){.ba__money{padding:13px;gap:10px}.ba__k{font-size:12px}.ba__res .ba__big{font-size:29px}.ba__res .btn{font-size:11px;padding:14px}.ba__res .ba__gain strong{font-size:24px}}