:root {
    --excel-grid: #d0d0d0;
    --excel-grid-strong: #909090;
    --excel-header-bg: #e8eaed;
    --excel-header-text: #404040;
    --excel-row-header: #f3f4f6;
    --excel-text: #1a1a1a;
    --excel-muted: #707070;
    --excel-tco-bg: #e6f0fa;
    --excel-roi-bg: #f0e6fa;
    --green: #1e7a3c;
    --green-bg: #e8f5ec;
    --green-strong-bg: #c8eed4;
    --red: #b41e1e;
    --red-bg: #fbeaea;
    --gold: #b8860b;
    --gold-bg: #fef5e0;
    --accent-dark: #0d2438;
    --accent: #1e4d6b;
    --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --mono: 'SF Mono', Menlo, Consolas, monospace;
    --serif: 'Charter', 'Iowan Old Style', Georgia, serif;
    /* sticky bar: collapses from --bar-exp (top) to --bar-col (scrolled); driven by --collapse 0..1 */
    --bar-exp: 404px; --bar-col: 94px;
    --val-base: 24px; --val-grow: 6px; --fig-w: 19%; /* desktop: replaced by the measured px width */
    --collapse: 0; --desc-scale: 1;
  }
  .bar-h { height: calc(var(--bar-exp) - (var(--bar-exp) - var(--bar-col)) * var(--collapse) + env(safe-area-inset-top, 0px)); }
  * { box-sizing: border-box; }
  html { scrollbar-gutter: stable; overflow-y: scroll; }
  body { margin: 0; position: relative; background: #f0f0f0; color: var(--excel-text); font-family: var(--sans); font-size: 13px; line-height: 1.4; padding-top: calc(var(--bar-exp) + env(safe-area-inset-top, 0px)); }
  .sticky-bar { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 50; background: var(--accent-dark); color: white; padding: 0 14px; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); box-sizing: border-box; height: calc(var(--bar-exp) - (var(--bar-exp) - var(--bar-col)) * var(--collapse) + env(safe-area-inset-top, 0px)); overflow: hidden; }

  /* STICKY BAR — big = the 5 KPIs stacked on the left; scrolling sweeps each one along a quarter-ellipse
     (pivoting on the top-left KPI) up into the compact row. JS sets each cell's transform + width;
     --collapse (0..1) drives bar height, font sizes and the fading descriptions. */
  .sticky-grid { position: relative; max-width: 980px; margin: 0 auto; height: 100%; }
  .sticky-cell { position: absolute; top: 0; left: 0; display: flex; flex-direction: row; align-items: flex-start; column-gap: calc((1 - var(--collapse)) * 2px); text-align: left; line-height: 1.15; text-decoration: none; cursor: pointer; border-radius: 6px; padding: calc(3px + (1 - var(--collapse)) * 4px) 14px calc((1 - var(--collapse)) * 4px) 13px; box-sizing: border-box; overflow: hidden; transition: background 0.12s; will-change: transform, width, height; }
  @media (hover: hover) { .sticky-cell:hover { background: rgba(255,255,255,0.08); } }
  @media (hover: hover) { .sticky-cell:hover .sticky-value { text-decoration: underline; text-underline-offset: 3px; } }
  .sticky-cell:hover .kpi-arrow { transform: translateY(calc(-50% + 2px)); }
  .kpi-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #b3e5c7; font-weight: 800; line-height: 1; font-size: calc(13px + (1 - var(--collapse)) * 9px); opacity: 0; display: none; pointer-events: none; transition: transform 0.12s; }
  /* left column = figure (label+value), ~1/5 of the width; right = description, ~4/5; divider lines up because every big line spans the full width */
  .sticky-fig { display: flex; flex-direction: column; flex: 0 0 auto; width: calc(var(--fig-w) * (1 - var(--collapse)) + 100% * var(--collapse)); min-width: 0; overflow: hidden; justify-content: flex-start; row-gap: calc(1px + (1 - var(--collapse)) * 2px); padding-right: calc((1 - var(--collapse)) * 5px); }
  .sticky-label { font-family: var(--mono); font-size: calc(10px + (1 - var(--collapse)) * 3px * var(--desc-scale)); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); font-weight: 700; line-height: 1.18; margin-top: -0.09em; }
  /* expanded (desktop), on one shared --desc-scale: headline 28, figure 32, description 26, label 13, eyebrow 15,
     CTA 12 — the figure a step above its sentence, the label well below it. On a desktop the figure column is as
     wide as the widest figure (measured, set as --fig-w in px), so no number is ever clipped; on a phone it stays
     29%. Collapsed: the figure stays at --val-base so the scrolled bar is readable. (15 September 2026) */
  .sticky-value { font-size: min(calc(var(--val-base) + (1 - var(--collapse)) * (32px * var(--desc-scale) - var(--val-base))), 64px); font-weight: 800; color: #b3e5c7; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sticky-value.main { color: white; }
  .sticky-value .decimals { font-size: 0.6em; opacity: 0.85; font-weight: 600; }
  /* Every start-screen figure carries two forms (15 September 2026):
       .v-s  short, for the phone and the compact bars — €9.04M, €113.0k, 6.0%/yr, 4.1 yr
       .v-f  written out, for the desktop start screen — €9 042 485, 6.0% per year, 4.1 years
     EU English: decimal point, a no-break space between thousands, € straight before the amount, no space
     before % or before the M/k multipliers, a no-break space before a word unit. #kbar copies the HTML, and
     only ever shows the short form. */
  .v-f { display: none; }
  .sticky-value .unit { font-size: 0.5em; opacity: 0.8; font-weight: 700; margin-left: 1px; vertical-align: baseline; letter-spacing: 0; }
  .sticky-desc { flex: 1 1 0; min-width: 0; max-width: calc(max(0, 1 - var(--collapse) * 3) * 100%); font-size: calc((17px + (1 - var(--collapse)) * 9px) * var(--desc-scale)); line-height: 1.28; margin-top: -0.14em; color: rgba(255,255,255,0.98); opacity: calc(1 - var(--collapse) * 4); overflow: hidden; font-weight: 500; letter-spacing: 0.002em; }
  .sticky-desc strong { color: #b3e5c7; font-weight: 800; }
  .excel-block { scroll-margin-top: 152px; }
  /* ---- View toggle: starts in place, sticks under the KPI bar when reached, overlays site ---- */
  .view-toggle-bar { position: sticky; top: var(--bar-now, 0px); z-index: 45; background: transparent; margin: 0 0 14px; padding: 6px 14px; pointer-events: none; }
  .view-toggle-inner { max-width: 980px; margin: 0 auto; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; pointer-events: none; }
  .view-toggle-prefix { flex: 1; text-align: left; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--excel-muted); line-height: 1.5; pointer-events: auto; }
  .view-toggle { display: inline-flex; flex: none; flex-direction: row; background: rgba(255,255,255,0.97); border: 1px solid var(--excel-grid-strong); border-radius: 7px; padding: 1px; gap: 2px; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); transform-origin: 0% 0%; will-change: transform; }
  .view-toggle button { border: none; background: transparent; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--excel-muted); padding: 2px 8px; border-radius: 5px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
  .view-toggle button.on { background: var(--excel-header-bg); color: var(--accent-dark); box-shadow: inset 0 0 0 1px var(--excel-grid-strong); }
  /* ---- Collapsible result blocks ---- */
  .excel-block-title.collapsible { cursor: pointer; }
  .excel-block-title.collapsible::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: 0.6; transition: transform 0.15s; }
  .excel-block-title.collapsible { position: relative; padding-right: 30px; }
  .excel-block.collapsed .excel-block-title.collapsible::after { transform: translateY(-50%) rotate(-90deg); }
  .excel-block.collapsed > *:not(.excel-block-title) { display: none; }
  /* Cashflow + returns side by side only on wide desktop; stacked otherwise */
  .cf-returns-row { display: block; }
  #inv-svg { text-align: center; }
  #inv-svg svg { width: 100%; max-width: 640px; height: auto; display: inline-block; }
  .inv-chart-cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--excel-muted); margin: 8px 0 4px; }
  .inv-legend { margin: 6px 0 14px; font-size: 11px; color: var(--excel-muted); }
  .inv-legend strong { color: var(--accent-dark); }
  #tbl-invest .inv-row-truck td { background: #e3efe6; font-weight: 700; }
  #tbl-invest .inv-row-truck td:first-child { box-shadow: inset 4px 0 0 var(--green); }
  .inv-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--excel-grid-strong); }
  #tbl-invest .yc { table-layout: auto; width: auto; min-width: 100%; }
  #tbl-invest .yc th, #tbl-invest .yc td { white-space: nowrap; text-align: right; }
  #tbl-invest .yc thead th { background: var(--accent-dark); color: #fff; }
  #tbl-invest .yc tr.inv-row-truck td { background: #e3efe6; font-weight: 700; }
  #tbl-invest .yc td.yc-name, #tbl-invest .yc th.yc-name { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; }
  #tbl-invest .yc thead th.yc-name { background: var(--accent-dark); }
  #tbl-invest .yc tr.inv-row-truck td.yc-name { background: #e3efe6; }
  #tbl-invest .yc tr.yc-sub td { background: #faf8f2; color: var(--excel-muted); font-weight: 400; font-size: 10.5px; border-top: none; }
  #tbl-invest .yc tr.yc-sub td.yc-name { background: #faf8f2; padding-left: 18px; font-style: italic; }
  /* keep sign + € + number + M/k together on one line everywhere */
  td.val-pos, td.val-neg, td.cf-pos, td.cf-neg { white-space: nowrap; }
  .inv-detail-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 11px; color: var(--excel-muted); cursor: pointer; }
  .inv-frame { border: 1px solid var(--excel-grid-strong); border-radius: 5px; padding: 9px 11px 11px; margin: 12px 0 16px; background: #fff; }
  .inv-frame-title { font-weight: 700; font-size: 14px; color: var(--accent-dark); margin-bottom: 2px; }
  .inv-frame .inv-chart-cap { margin: 6px 0 3px; }
  .inv-frame #inv-cap { margin-top: 0; }
  .inv-frame .inv-legend { margin: 4px 0 4px; }
  .inv-frame .inv-detail-toggle { margin: 2px 0 5px; }
  @media (max-width: 720px) { #inv-svg svg { max-width: 100%; } }
  /* Nothing on this page is wider than the 980 px text column. The cashflow
     and NPV/MIRR tables stack, each at the full column width (on 14 September
     they sat side by side in a 1360 px breakout; undone 15 September).

     The investment chart is what sits side by side instead: on a desktop it
     takes the left of its frame, with the two tick boxes under it, and the
     running net cash table the right, so the empty band to the right of the
     chart is used. The table column is exactly as wide as the table needs, so
     it does not scroll sideways. Placed with grid areas (the table column is
     display: contents), so the markup and the phone order stay as they were.
     Below 900 px the two stack exactly as before. (15 September 2026) */
  .inv-duo-chart, .inv-duo-table { min-width: 0; }
  @media (min-width: 900px) {
    .inv-duo { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); column-gap: 16px; align-items: start;
      grid-template-rows: auto auto auto auto 1fr;
      grid-template-areas: "chart cap" "chart table" "t1 table" "t2 table" ". table"; }
    .inv-duo .inv-duo-table { display: contents; }
    .inv-duo .inv-duo-chart { grid-area: chart; }
    .inv-duo #inv-yc-cap { grid-area: cap; margin-top: 2px; }
    .inv-duo .inv-detail-toggle { display: flex; align-items: flex-start; margin: 6px 0 0; }
    .inv-duo .inv-detail-toggle:nth-of-type(1) { grid-area: t1; }
    .inv-duo .inv-detail-toggle:nth-of-type(2) { grid-area: t2; }
    .inv-duo .inv-scrollx { grid-area: table; }
    .inv-duo #inv-svg svg { max-width: 100%; }
    #tbl-invest .inv-duo .yc th, #tbl-invest .inv-duo .yc td { padding: 6px 4px; font-size: 11px; }
    #tbl-invest .inv-duo .yc th.yc-name, #tbl-invest .inv-duo .yc td.yc-name { padding-left: 7px; }
  }
  .excel-block.kpi-flash { animation: kpiflash 1.6s ease; }
  @keyframes kpiflash { 0%,15% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 3px transparent; } }

  .wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 60px; }
  /* Space between the start screen and the first card. It was 1 px, less than the 14 px between the cards
     themselves, so the page read as one run-on block; a section break wants clearly more than the rhythm inside
     it: 24 px on a phone growing to 40 px on a desktop. It sits under the sentinel that brings in the compact
     bar, so that bar still appears the moment the start screen has gone. (15 September 2026) */
  #sc-compact { height: 1px; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0; }

  /* BELGIAN BANNER */
  .be-banner { background: white; border: 1px solid var(--excel-grid-strong); border-left: 3px solid var(--accent); border-radius: 4px; padding: 14px 18px; margin-bottom: 14px; }
  .be-banner .be-flag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; margin-bottom: 4px; }
  .be-banner h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 4px; color: var(--accent-dark); letter-spacing: -0.01em; }
  .be-banner p { margin: 0; font-size: 13px; color: var(--excel-text); }
  .be-banner strong { color: var(--accent-dark); }

  /* DEMO BANNER */
  .demo-banner { background: var(--gold-bg); border: 1px solid var(--gold); border-left: 3px solid var(--gold); padding: 12px 18px; margin-bottom: 14px; font-size: 13px; line-height: 1.55; border-radius: 4px; }
  .demo-banner strong { color: var(--accent-dark); }
  .demo-banner .demo-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 4px; display: block; }

  /* ABSTRACT */
  .abstract { background: var(--accent-dark); color: white; width: 100%; border-top: 1px solid rgba(179,229,199,0.22); }
  .ab-band { max-width: 980px; margin: 0 auto; padding: 2px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .ab-band #abstract-text { margin: 0; font-size: calc((17px + (1 - var(--collapse)) * 16px) * var(--desc-scale)); line-height: 1.28; font-weight: 500; color: rgba(255,255,255,0.85); }
  .sticky-bar .ab-title { max-width: 980px; margin: 0 auto calc(3px * var(--desc-scale)); padding: 16px 14px 16px 13px; font-size: calc((17px + (1 - var(--collapse)) * 11px) * var(--desc-scale)); line-height: 1.3; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: 0.01em; }
  .sticky-bar .ab-title::before { content: "eTruck TCO analysis"; display: block; font-family: var(--mono); font-size: 1em; letter-spacing: 0.06em; text-transform: uppercase; color: #b3e5c7; font-weight: 800; opacity: 1; margin-bottom: 0.3em; }
  .sticky-bar .ab-title strong { color: #b3e5c7; font-weight: 800; }
  /* desktop title hierarchy: eyebrow (site name) at half the headline, the parameter sentence is the headline */
  /* Desktop start screen, one clear order of importance (15 September 2026, second pass):
       title "eTruck TCO analysis"  46 px, white, sentence case — the largest thing on the screen
       the scenario sentence        21 px, a subtitle under it, softer white
       each figure                  30 px, mint — the numbers are what the page is for
       its explanation              18 px, body text, bottom-aligned with its figure
       its label                   11.5 px, small caps-style mono
     (with floors of 32 / 15 / 22 / 14 / 10 px, so a small laptop window stays readable; when even those do not fit
     the window, the fit sets .bar-tight and the floors drop to 26 / 13 / 18 / 12 / 9 — the CTA must stay on screen)
     All on one shared --desc-scale, which the fit keeps between 0.6 and 1.2 on a desktop, so the ratios hold on
     every screen and a tall window adds air between the rows instead of inflating the text. The phone keeps its
     own sizes in the max-width: 720px block. */
  /* Before the fit has run, the cells sit on top of each other and the figures are the ones typed in the HTML.
     Show only the heading until then and fade the rest in. The 2s animation is a safety net if the script fails.
     (23 September 2026) */
  html:not(.bar-ready) .sticky-bar .sticky-grid, html:not(.bar-ready) #abstract-band { visibility: hidden; animation: bar-late 0s 2s forwards; }
  html:not(.bar-ready) .sticky-bar .ab-title { visibility: hidden; animation: bar-late 0s 2s forwards; }
  html:not(.bar-ready) .sticky-bar .ab-title::before { visibility: visible; }
  @keyframes bar-late { to { visibility: visible; } }
  html.bar-ready .sticky-bar .sticky-grid, html.bar-ready #abstract-band, html.bar-ready .sticky-bar .ab-title { animation: bar-in 0.18s ease-out; }
  @keyframes bar-in { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { html.bar-ready .sticky-bar .sticky-grid, html.bar-ready #abstract-band, html.bar-ready .sticky-bar .ab-title { animation: none; } }
  @media (min-width: 721px) {
    :root { --f-title: 32px; --f-sub: 15px; --f-val: 22px; --f-desc: 14px; --f-lab: 10px; }
    .sticky-bar.bar-tight { --f-title: 26px; --f-sub: 13px; --f-val: 18px; --f-desc: 12px; --f-lab: 9px; }
    .sticky-bar .ab-title { text-wrap: balance; font-size: max(var(--f-sub), calc(21px * var(--desc-scale))); line-height: 1.35; font-weight: 500;
      color: rgba(255,255,255,0.8); letter-spacing: 0; padding: 18px 14px 12px 13px; margin-bottom: calc(10px * var(--desc-scale)); }
    .sticky-bar .ab-title strong { font-weight: 700; }
    .sticky-bar .ab-title::before { font-family: var(--sans); text-transform: none; font-size: max(var(--f-title), calc(46px * var(--desc-scale))); line-height: 1.05;
      letter-spacing: -0.02em; color: #fff; font-weight: 800; margin-bottom: 0.3em; }
    .sticky-cell { align-items: flex-end; }
    .sticky-label { font-size: max(var(--f-lab), calc(11.5px * var(--desc-scale))); }
    .sticky-value { font-size: max(var(--f-val), calc(30px * var(--desc-scale))); padding-bottom: 0.12em; }   /* room for descenders */
    .sticky-bar .sticky-value .v-s { display: none; }
    .sticky-bar .sticky-value .v-f { display: inline; }
    .sticky-desc { font-size: max(var(--f-desc), calc(18px * var(--desc-scale))); line-height: 1.35; margin-top: 0; color: rgba(255,255,255,0.86); }
  }
  .abstract .ab-cta { flex: none; display: inline-flex; align-items: center; gap: 7px; color: #b3e5c7; font-weight: 800; font-size: max(13.5px, 12px * var(--desc-scale)); letter-spacing: 0.01em; text-decoration: none; border: 1px solid rgba(179,229,199,0.45); border-radius: 999px; padding: 8px 16px; white-space: nowrap; transition: background 0.14s ease, color 0.14s ease; }
  .abstract .ab-cta:hover { background: #b3e5c7; color: var(--accent-dark); }
  .abstract .ab-cta .ab-cta-arrow { font-size: 15px; line-height: 1; }
  @media (min-width: 721px) { .abstract .ab-cta .ab-cta-arrow { font-size: 1.1em; } }
  .abstract strong { color: #b3e5c7; font-weight: 800; }
  .abstract a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; white-space: nowrap; }
  /* the one-liner pins right under the shrinking header through the big + transition phases; JS releases it (position:static) once the bar is compact, so it scrolls away under the compact bar */
  .head-sticky { position: sticky; top: var(--bar-now, 0px); z-index: 46; }
  /* band now lives INSIDE the fixed bar (JS controls its max-height/opacity during the sweep) */
  .abstract.in-bar { position: static; z-index: auto; margin: 0 -14px; width: calc(100% + 28px); }
  .abstract-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-strong-bg); font-weight: 700; margin-bottom: 5px; }
  .abstract p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.92); }
  .abstract strong { color: #b3e5c7; }
  .abstract a { color: white; text-decoration: underline; font-weight: 700; white-space: nowrap; }
  .abstract a:hover { color: #b3e5c7; }

  /* DOC HEADER */
  .doc-header { background: white; padding: 20px 22px; margin-bottom: 14px; border: 1px solid var(--excel-grid); display: flex; justify-content: space-between; align-items: baseline; }
  .doc-title { font-size: 22px; font-weight: 700; color: var(--accent-dark); margin: 0; font-family: var(--serif); letter-spacing: -0.01em; }
  .doc-meta { font-family: var(--mono); font-size: 11px; color: var(--excel-muted); letter-spacing: 0.04em; text-align: right; }

  /* PARAMS */
  .params { background: white; padding: 18px 22px; margin-bottom: 14px; border: 1px solid var(--excel-grid); border-top: 3px solid var(--accent); }
  .params-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
  .params-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .params-hint { font-size: 12px; color: var(--excel-muted); font-style: italic; }
  .params-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .param-group label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--excel-muted); font-weight: 700; margin-bottom: 4px; }
  .info-btn { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: white; font-family: var(--serif); font-style: italic; font-size: 10px; font-weight: 700; text-decoration: none; vertical-align: middle; margin-left: 3px; line-height: 1; transition: background 0.15s; }
  .info-btn:hover { background: var(--accent-dark); }
  .explain-target { scroll-margin-top: 80px; }
  .explain-target:target { box-shadow: 0 0 0 2px var(--accent); animation: flash-explain 1.4s ease; }
  @keyframes flash-explain { 0% { background: var(--gold-bg); } 100% { background: white; } }
  .to-top { position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-dark); color: #fff; border: none; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,0.28); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 200; }
  .to-top.show { opacity: 0.92; visibility: visible; transform: translateY(0); }
  .to-top:hover { opacity: 1; background: var(--accent); }
  @media (max-width: 640px) { .to-top { right: 12px; bottom: 12px; width: 40px; height: 40px; } }
  .param-group select, .param-group input[type="range"] { width: 100%; padding: 7px 10px; border: 1px solid var(--excel-grid); border-radius: 4px; font-size: 13px; background: white; color: var(--excel-text); font-family: var(--sans); }
  .param-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30,77,107,0.12); }
  .param-group .range-wrap { display: flex; align-items: center; gap: 8px; }
  .param-group .range-value { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); min-width: 50px; text-align: right; }
  .param-group input[type="range"] { padding: 0; height: 6px; cursor: pointer; }
  .param-hint { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--excel-grid); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10px; color: var(--excel-muted); letter-spacing: 0.02em; line-height: 1.4; }
  .param-hint-value { color: var(--green); font-weight: 700; white-space: nowrap; }

  /* What sits under the diesel slider - the VAT line, the "Today's price"
     button and where the figure comes from - folded into one line by default
     (27 September 2026): open, it took more room than every other control
     around it together. The net price stays in the folded line, because it is
     the one number a reader wants without opening anything. */
  details.param-more { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--excel-grid); }
  details.param-more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
    align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--excel-muted);
    letter-spacing: 0.02em; line-height: 1.4; }
  details.param-more > summary::-webkit-details-marker { display: none; }
  details.param-more > summary .more-label::before { content: "▸ "; display: inline-block; transition: transform .15s; }
  details.param-more[open] > summary .more-label::before { transform: rotate(90deg); }
  details.param-more > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  details.param-more > .param-hint:first-of-type { border-top: none; }
  /* The 'where this price came from' line under the diesel slider: a plain
     sentence that wraps, not a label/value pair like the hints above it. */
  .param-today { margin-top: 7px; font-family: var(--sans); font-size: 12px; font-weight: 700;
    padding: 6px 11px; border-radius: 5px; border: 1px solid var(--excel-grid); background: #fff;
    color: var(--green); cursor: pointer; white-space: nowrap; }
  .param-today:hover:not([disabled]) { background: #eefaf3; border-color: var(--green); }
  .param-today:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .param-today[disabled] { opacity: .55; cursor: default; }
  #p-diesel-src { display: block; font-family: var(--sans); font-size: 11px; line-height: 1.5; letter-spacing: 0; }
  #p-diesel-src a { color: var(--green); }
  .be-params-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--excel-grid); font-size: 11.5px; color: var(--excel-muted); line-height: 1.5; }
  .param-note { margin-top: 6px; font-size: 11px; color: var(--excel-muted); line-height: 1.55; }
  .param-note > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; user-select: none; }
  .param-note > summary::-webkit-details-marker { display: none; }
  .param-note > summary::before { content: 'i'; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--serif); font-style: italic; font-size: 9px; font-weight: 700; }
  .param-note[open] > summary { color: var(--accent-dark); }
  .param-note > div { margin-top: 6px; }
  .param-note strong { color: var(--accent-dark); }
  .be-params-note strong { color: var(--accent-dark); }
  .infl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

  /* COUNTRY SPLIT */
  .split { background: white; padding: 18px 22px; margin-bottom: 14px; border: 1px solid var(--excel-grid); border-top: 3px solid var(--gold); }
  .split-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
  .split-sub { font-size: 12px; color: var(--excel-muted); margin-bottom: 14px; }
  .split-rows { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
  .split-country { }
  .split-country label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--excel-muted); font-weight: 700; margin-bottom: 4px; }
  .split-country label .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: baseline; }
  .split-country input { width: 100%; padding: 7px 8px; border: 1px solid var(--excel-grid); border-radius: 4px; font-size: 14px; font-family: var(--mono); font-weight: 700; text-align: right; color: var(--excel-text); }
  .split-country input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30,77,107,0.12); }
  .split-country .toll-note { font-family: var(--mono); font-size: 9px; color: var(--excel-muted); margin-top: 3px; text-align: right; }
  .split-bar { height: 22px; border-radius: 4px; overflow: hidden; display: flex; border: 1px solid var(--excel-grid); margin-bottom: 10px; }
  .split-bar-seg { height: 100%; transition: width 0.25s ease; }
  .split-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .split-total { font-family: var(--mono); font-size: 12px; font-weight: 700; }
  .split-total.ok { color: var(--green); }
  .split-total.bad { color: var(--red); }

  /* EXPLAINER */
  .explainer { background: white; padding: 14px 18px; border: 1px solid var(--excel-grid); border-left: 3px solid var(--accent); margin-bottom: 18px; font-size: 13px; line-height: 1.65; }
  .explainer h4 { margin: 0 0 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .explainer p { margin: 0; color: var(--excel-text); }
  .table-caption { background: #fbfaf7; border-bottom: 1px solid var(--excel-grid); font-size: 12px; line-height: 1.55; color: var(--excel-text); }
  .table-caption > summary { list-style: none; cursor: pointer; padding: 8px 13px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; display: flex; align-items: center; gap: 6px; user-select: none; }
  .table-caption > summary::-webkit-details-marker { display: none; }
  .table-caption > summary::before { content: '▸'; font-size: 9px; transition: transform 0.15s; }
  .table-caption[open] > summary::before { transform: rotate(90deg); }
  .table-caption > summary:hover { color: var(--accent-dark); }
  .table-caption .cap-body { padding: 0 13px 11px 13px; user-select: text; -webkit-user-select: text; }

  /* EXCEL TABLE */
  .excel-block { background: white; border: 1px solid var(--excel-grid-strong); margin-bottom: 18px; overflow: auto; }
  .excel-block-title { background: var(--excel-header-bg); border-bottom: 1px solid var(--excel-grid-strong); padding: 8px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--excel-header-text); font-weight: 700; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; position: sticky; left: 0; }
  .excel-block-title .sub { font-size: 10px; letter-spacing: 0.05em; color: var(--excel-muted); text-transform: none; font-weight: 600; }
  .section-bridge { margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-dark); }
  .section-bridge h3 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--accent-dark); letter-spacing: -0.01em; }
  .section-bridge p { margin: 5px 0 0; font-size: 12.5px; color: var(--excel-muted); line-height: 1.55; }
  table.excel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-family: var(--sans); }
  table.excel th, table.excel td { border: 1px solid var(--excel-grid); padding: 7px 10px; font-size: 13px; text-align: right; background: white; color: var(--excel-text); }
  table.excel thead th { background: var(--excel-header-bg); color: var(--excel-header-text); font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 8px 10px; border-bottom: 1px solid var(--excel-grid-strong); }
  table.excel thead tr.col-letters th { background: #f7f7f7; color: var(--excel-muted); font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: none; padding: 4px 0; text-align: center; }
  table.excel tbody td.row-label { background: var(--excel-row-header); color: var(--excel-header-text); font-weight: 700; text-align: left; font-size: 12px; padding-left: 12px; border-right: 1px solid var(--excel-grid-strong); width: 200px; }
  table.excel tbody td.row-num { background: #f7f7f7; color: var(--excel-muted); font-family: var(--mono); font-size: 10px; font-weight: 600; text-align: center; width: 28px; padding: 0; border-right: 1px solid var(--excel-grid); }
  tr.row-tco td { background: var(--excel-tco-bg); font-weight: 700; }
  tr.row-tco td.row-label { background: #cfe0ee; }
  tr.row-roi td { background: var(--excel-roi-bg); }
  tr.row-roi td.row-label { background: #ddd0ee; }
  tr.row-sub td { background: #fafafa; font-size: 12px; color: var(--excel-muted); padding-top: 5px; padding-bottom: 5px; }
  tr.row-sub td.row-label.sub-label { background: #f3f4f6; font-weight: 600; color: var(--excel-muted); padding-left: 22px; font-size: 11.5px; }
  tr.row-sub td.val-pos { background: #ecf6ef !important; color: #2d8a52; font-weight: 600; }
  tr.row-sub td.val-neg { background: #faf0f0 !important; color: #b46464; font-weight: 600; }
  tr.row-sub td.row-num { font-size: 9px; color: #b0b0b0; }
  td.cell-formula { font-family: var(--mono); font-size: 11.5px; color: var(--excel-muted); text-align: center; }
  .frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; vertical-align: middle; }
  .frac .fr-num { padding: 0 3px; }
  .frac .fr-den { padding: 0 3px; border-top: 1px solid var(--excel-muted); }
  td.val-pos { color: var(--green); background: var(--green-bg) !important; font-weight: 700; }
  td.val-neg { color: var(--red); background: var(--red-bg) !important; font-weight: 700; }
  tr.row-tco td.val-pos { background: #d4ecd9 !important; }
  tr.row-tco td.val-neg { background: #f5d3d3 !important; }
  table.excel.cashflow td.cf-neg { background: var(--red-bg); color: var(--red); font-weight: 700; }
  table.excel.cashflow td.cf-pos { background: var(--green-bg); color: var(--green); font-weight: 700; }
  table.excel.cashflow td.cf-check { background: var(--green-strong-bg) !important; }

  @keyframes flash { 0% { background-color: #fff3a8; } 100% { background-color: inherit; } }
  .updated { animation: flash 0.6s ease-out; }

  /* COLLAPSIBLE */
  details.toll-details { background: white; border: 1px solid var(--excel-grid); margin-bottom: 18px; }
  details.toll-details summary { cursor: pointer; padding: 14px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
  details.toll-details summary::-webkit-details-marker { display: none; }
  details.toll-details summary::after { content: '▸ show'; font-size: 10px; color: var(--excel-muted); }
  details.toll-details[open] summary::after { content: '▾ hide'; }
  /* The data summary shown when collapsed — make it readable, not cramped uppercase mono */
  details.toll-details summary > span { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--excel-text); }
  details.toll-details summary { flex-wrap: wrap; gap: 2px 8px; line-height: 1.5; }
  details.toll-details .toll-body { padding: 0 18px 16px; font-size: 12.5px; line-height: 1.6; color: var(--excel-text); }
  details.toll-details table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
  details.toll-details th, details.toll-details td { border: 1px solid var(--excel-grid); padding: 6px 9px; text-align: left; }
  details.toll-details th { background: var(--excel-header-bg); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
  details.toll-details .warn { background: var(--gold-bg); border-left: 3px solid var(--gold); padding: 8px 12px; margin-top: 10px; font-size: 12px; }

  /* MATH */
  .math-block { background: #fdfcf9; border: 1px solid var(--excel-grid-strong); margin-top: 24px; margin-bottom: 18px; }
  .math-block-header { padding: 20px 22px; background: linear-gradient(180deg, #f7f5f0 0%, #fdfcf9 100%); border-bottom: 1px solid var(--excel-grid-strong); }
  .math-block-tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; background: white; padding: 4px 10px; border: 1px solid var(--excel-grid); border-radius: 3px; margin-bottom: 8px; }
  .math-block h3 { font-family: var(--serif); font-size: 22px; margin: 4px 0 8px; color: var(--accent-dark); letter-spacing: -0.01em; }
  .math-block > .math-block-header > p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--excel-muted); max-width: 760px; }
  .math-legend { margin-top: 12px; background: white; border: 1px solid var(--excel-grid); border-radius: 4px; padding: 10px 14px; font-size: 12px; line-height: 1.6; }
  .math-legend strong { color: var(--accent); font-family: var(--mono); }
  .math-section { padding: 18px 22px; border-bottom: 1px solid var(--excel-grid); display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
  .math-section:last-of-type { border-bottom: none; }
  .math-section-num { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; padding-top: 2px; }
  .math-section-body h4 { margin: 0 0 12px; font-family: var(--serif); font-size: 17px; color: var(--accent-dark); letter-spacing: -0.01em; }
  .math-section-body > p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; }
  .math-grid { background: white; border: 1px solid var(--excel-grid); }
  .math-row { display: grid; grid-template-columns: 60px 1fr 170px; align-items: baseline; padding: 7px 12px; border-bottom: 1px solid #f0eee5; font-family: var(--mono); font-size: 12px; }
  .math-row:last-child { border-bottom: none; }
  .math-row:nth-child(even) { background: #fbfaf6; }
  .math-var { font-weight: 700; color: var(--accent); font-size: 13px; }
  .math-eq { color: var(--excel-muted); font-family: var(--sans); font-size: 12px; }
  .math-val { text-align: right; font-weight: 700; color: var(--excel-text); font-variant-numeric: tabular-nums; }
  .math-derive { background: white; border: 1px solid var(--excel-grid); }
  .math-formula { padding: 11px 14px; border-bottom: 1px solid #f0eee5; }
  .math-formula:last-child { border-bottom: none; }
  .math-formula:nth-child(even) { background: #fbfaf6; }
  .math-formula.highlight { background: #f0f6fc; border-left: 3px solid var(--accent); }
  .math-formula.highlight.green { background: #ecf6ef; border-left: 3px solid var(--green); }
  .math-fhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 3px; }
  .math-label { font-size: 12px; color: var(--excel-text); font-weight: 700; font-family: var(--sans); }
  .math-result { text-align: right; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .math-formula.highlight .math-result { color: var(--accent-dark); font-size: 14px; }
  .math-formula.highlight.green .math-result { color: var(--green); font-size: 14px; }
  .math-expr { font-family: var(--mono); font-size: 12.5px; color: var(--excel-text); font-weight: 700; line-height: 1.4; margin-bottom: 2px; }
  .math-words { font-size: 11.5px; color: var(--excel-text); line-height: 1.5; margin: 1px 0 4px; }
  details.math-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
  details.math-fold > summary::-webkit-details-marker { display: none; }
  details.math-fold > summary h4 { margin: 0; }
  details.math-fold > summary .fold-hint { font-size: 10px; color: var(--accent); font-weight: 600; }
  details.math-fold > summary .fold-hint::before { content: '▸ '; }
  .fold-legend { margin: 8px 0 6px; font-size: 11px; color: var(--excel-muted); line-height: 1.5; }
  .fold-legend .lg-edit { display: inline-block; border: 1px solid var(--excel-grid); background: #fffdf5; border-radius: 3px; padding: 0 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; }
  details.math-fold[open] > summary .fold-hint::before { content: '▾ '; }
  .ma-in { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--excel-text); width: 58px; padding: 2px 4px; border: 1px solid var(--excel-grid); border-radius: 3px; background: #fffdf5; text-align: right; -moz-appearance: textfield; }
  .ma-in::-webkit-outer-spin-button, .ma-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ma-in:focus { outline: 2px solid var(--gold); outline-offset: 0; }
  .math-words::before { content: 'in words'; display: inline-block; font-weight: 700; text-transform: uppercase; font-size: 8.5px; letter-spacing: 0.06em; color: var(--accent); background: var(--excel-header-bg); border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
  /* merged diesel vs electric comparison */
  .cmp-derive { display: block; }
  .cmp-row { display: grid; grid-template-columns: 1fr minmax(84px, 0.78fr) 1fr; gap: 7px; align-items: stretch; padding: 11px 0; border-top: 1px solid var(--excel-grid); }
  .cmp-row:first-child { border-top: none; padding-top: 2px; }
  .cmp-row.cmp-total { background: var(--gold-bg); border-radius: 5px; padding: 11px 7px; border-top: 1px solid var(--gold); }
  .cmp-mid { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 3px; }
  .cmp-name { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
  .cmp-formula { font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--excel-text); }
  .cmp-words { font-size: 9.5px; font-style: italic; color: var(--excel-muted); line-height: 1.35; margin-top: 3px; }
  .cmp-side { background: #fff; border: 1px solid var(--excel-grid); border-radius: 4px; padding: 7px 8px; }
  .cmp-side.diesel { border-top: 2px solid var(--excel-muted); }
  .cmp-side.electric { border-top: 2px solid var(--green); }
  .cmp-side-label { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--excel-muted); margin-bottom: 1px; }
  .cmp-val { font-size: 14px; font-weight: 700; color: var(--excel-text); white-space: nowrap; line-height: 1.15; }
  .cmp-side.electric .cmp-val { color: var(--green); }
  .cmp-detail { font-size: 10px; color: var(--excel-muted); line-height: 1.4; margin-top: 3px; }
  .cmp-sub { font-family: var(--mono); font-size: 9.5px; color: var(--excel-muted); margin-top: 2px; white-space: nowrap; overflow-x: auto; }
  .cmp-line { margin-top: 5px; padding-top: 5px; border-top: 1px dotted var(--excel-grid); }
  @media (max-width: 560px) {
    .show-detail .cmp-extra { grid-template-columns: 1fr; gap: 7px 0; }
    .cmp-sub, .cmp-extra .cmp-sub { white-space: normal; overflow-x: visible; word-break: break-word; }
    .cmp-crow { grid-template-columns: 1fr 76px 1fr; }
    .cmp-row { grid-template-columns: 1fr 1fr; gap: 6px 6px; padding: 10px 0; }
    .cmp-mid { grid-column: 1 / -1; order: -1; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; justify-content: center; margin-bottom: 2px; }
    .cmp-name { margin-bottom: 0; }
  }
  /* ultra-compact comparison: fits one mobile viewport; detail behind a toggle */
  .cmp-compact { display: block; }
  .cmp-crow { display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--excel-grid); }
  .cmp-crow:first-child { border-top: none; }
  .cmp-crow.head { border-top: none; padding: 0 0 3px; }
  .cmp-crow.total { background: var(--gold-bg); border-radius: 4px; padding: 6px 6px; border-top: 1px solid var(--gold); }
  .cmp-c-d { text-align: right; font-weight: 700; font-size: 12.5px; white-space: nowrap; color: var(--excel-text); }
  .cmp-c-e { text-align: left; font-weight: 700; font-size: 12.5px; white-space: nowrap; color: var(--green); }
  .cmp-c-name { text-align: center; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; color: var(--excel-text); line-height: 1.15; }
  .cmp-crow.head .cmp-c-d, .cmp-crow.head .cmp-c-e { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--excel-muted); font-weight: 700; }
  .cmp-c-f { display: none; font-family: var(--mono); font-size: 8px; font-weight: 400; color: var(--excel-muted); text-transform: none; letter-spacing: 0; margin-top: 1px; line-height: 1.2; }
  .show-detail .cmp-c-f { display: block; }
  .cmp-extra { display: none; grid-column: 1 / -1; font-size: 10px; color: var(--excel-muted); line-height: 1.4; padding: 3px 0 1px; }
  .show-detail .cmp-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .cmp-extra .xw { grid-column: 1 / -1; font-style: italic; text-align: center; }
  .show-detail .cmp-extra > div:nth-child(1):not(.xw), .show-detail .cmp-extra > div:nth-child(2):not(.xw) { border-left: 2px solid var(--excel-muted); padding-left: 7px; }
  .show-detail .cmp-extra > div:nth-child(2):not(.xw) { border-left-color: var(--green); }
  .show-detail .cmp-extra > div:nth-child(1):not(.xw)::before { content: 'Diesel'; display: block; font-family: var(--mono); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--excel-muted); margin-bottom: 1px; }
  .show-detail .cmp-extra > div:nth-child(2):not(.xw)::before { content: 'Electric'; display: block; font-family: var(--mono); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); margin-bottom: 1px; }
  .cmp-extra .cmp-sub { font-family: var(--mono); font-size: 9px; white-space: nowrap; overflow-x: auto; display: block; color: var(--excel-muted); }
  .cmp-detail-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11px; color: var(--accent); cursor: pointer; font-weight: 600; }
  /* FINAL OVERRIDE (must stay last of the .cmp rules): never horizontal-scroll the formula detail on phones */
  @media (max-width: 720px) {
    .cmp-sub, .cmp-extra .cmp-sub, .show-detail .cmp-extra .cmp-sub { white-space: normal !important; overflow-x: visible !important; word-break: break-word; }
    .cmp-extra, .cmp-extra .xw { word-break: break-word; }
  }
  @keyframes kpiFlash { 0%, 15% { box-shadow: inset 0 0 0 2000px rgba(245,184,0,0.55); } 100% { box-shadow: inset 0 0 0 2000px rgba(245,184,0,0); } }
  td.kpi-flash { animation: kpiFlash 1.9s ease-out 1; }
  @keyframes viewFlash { 0% { box-shadow: 0 0 0 0 rgba(245,184,0,0); } 12% { box-shadow: 0 0 0 4px rgba(245,184,0,0.75); } 100% { box-shadow: 0 0 0 0 rgba(245,184,0,0); } }
  .view-toggle button.view-flash { animation: viewFlash 1.7s ease-out 1; }
  .th-hint { display: block; font-weight: 400; font-size: 8.5px; text-transform: none; letter-spacing: 0; color: var(--excel-muted); margin-top: 1px; line-height: 1.1; }
  .math-expr sub { font-size: 0.75em; vertical-align: sub; }
  .math-expr sup { font-size: 0.75em; vertical-align: super; }
  .math-note { font-size: 12px; color: var(--excel-muted); font-style: italic; line-height: 1.5; margin-bottom: 3px; }
  .math-sub { font-family: var(--mono); font-size: 11.5px; color: var(--accent); line-height: 1.4; }
  .math-disclaimer { padding: 18px 22px; background: #fef9ed; border-top: 2px solid var(--gold); }
  .math-disclaimer h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .math-disclaimer ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
  .math-disclaimer li { margin-bottom: 4px; }
  .math-disclaimer strong { color: var(--excel-text); }

  /* FOOTER NOTE */
  .footer-note { background: white; padding: 14px 18px; margin-top: 18px; border: 1px solid var(--excel-grid); font-size: 12px; color: var(--excel-muted); line-height: 1.65; }
  .footer-note strong { color: var(--excel-text); }
  .footer-note h4 { margin: 0 0 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .footer-note h4:not(:first-child) { margin-top: 12px; }
  .footer-note ul { margin: 4px 0 0; padding-left: 18px; }
  .footer-note table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
  .footer-note th, .footer-note td { border: 1px solid var(--excel-grid); padding: 6px 9px; text-align: left; }
  .footer-note th { background: var(--excel-header-bg); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark); }
  .footer-note .warn { background: var(--gold-bg); border-left: 3px solid var(--gold); padding: 8px 12px; margin: 10px 0 0; font-size: 12px; }

  .backlink { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-bottom: 14px; }
  .backlink:hover { color: var(--accent-dark); text-decoration: underline; }

  @media (max-width: 720px) {
    /* TCO table: fit the full phone width, no horizontal scroll */
    #tbl-fleet { overflow: visible; }
    #tbl-fleet table.excel { table-layout: fixed; width: 100%; }
    #tbl-fleet table.excel th, #tbl-fleet table.excel td { padding: 5px 4px; font-size: 11px; white-space: normal; word-break: break-word; }
    #tbl-fleet table.excel thead th { font-size: 9px; padding: 6px 2px; letter-spacing: 0.02em; }
    #tbl-fleet table.excel tbody td.row-label { width: auto; font-size: 10.5px; padding-left: 5px; line-height: 1.25; }
    #tbl-fleet table.excel tbody td.row-num { width: 18px; font-size: 8.5px; }
    #tbl-fleet table.excel tr.row-sub td.row-label.sub-label { padding-left: 10px; font-size: 10px; }
    #tbl-fleet table.excel colgroup col.c-num { width: 18px; }
    #tbl-fleet table.excel colgroup col.c-lab { width: 31%; }
    /* figures never break: sign, number and M/k stay on one line */
    #tbl-fleet table.excel td:not(.row-label) { white-space: nowrap; word-break: normal; }
    #tbl-fleet td.cell-formula { font-size: 9px; }
    /* Cashflow, NPV/MIRR & capital-alternatives tables: full phone width, no horizontal scroll */
    #tbl-cashflow, #tbl-returns, #tbl-bench { overflow: visible; }
    #tbl-cashflow table.excel, #tbl-returns table.excel, #tbl-bench table.excel { table-layout: fixed; width: 100%; }
    #tbl-cashflow table.excel th, #tbl-cashflow table.excel td,
    #tbl-returns table.excel th, #tbl-returns table.excel td,
    #tbl-bench table.excel th, #tbl-bench table.excel td { padding: 5px 3px; font-size: 10.5px; white-space: normal; word-break: break-word; }
    #tbl-cashflow table.excel thead th, #tbl-returns table.excel thead th, #tbl-bench table.excel thead th { font-size: 8.5px; padding: 5px 2px; letter-spacing: 0.02em; }
    /* money cells stay on one line — sign, €, number, unit and ✓ never split */
    #tbl-cashflow table.excel td:not(:first-child), #tbl-returns table.excel td:not(:first-child) { white-space: nowrap; word-break: normal; }
    #tbl-bench td.val-pos, #tbl-bench td.val-neg { white-space: nowrap; word-break: normal; }
    #tbl-cashflow table.excel th:first-child, #tbl-cashflow table.excel td:first-child { width: 21%; text-align: left; padding-left: 5px; }
    #tbl-returns table.excel th:first-child, #tbl-returns table.excel td:first-child { width: 15%; text-align: left; padding-left: 5px; }
    #tbl-returns table.excel td.cell-formula { white-space: normal; word-break: break-word; font-size: 8.5px; line-height: 1.2; }
    #tbl-bench table.excel tbody td.row-num, #tbl-bench table.excel thead th:first-child { width: 16px; font-size: 8.5px; }
    #tbl-bench table.excel tbody td.row-label { width: auto; font-size: 10px; padding-left: 4px; line-height: 1.25; }
    #tbl-bench .th-hint { display: none; }
    body { font-size: 14px; padding-top: calc(var(--bar-exp) + env(safe-area-inset-top, 0px)); }
    :root { --bar-exp: 372px; --bar-col: 88px; --val-base: 14px; --val-grow: 7px; --fig-w: 29%; }
    .view-toggle-bar { padding: 6px 10px; }
    .sticky-bar { padding-left: 4px; padding-right: 4px; }
    .sticky-cell { padding: calc(3px + (1 - var(--collapse)) * 3px) calc(3px + (1 - var(--collapse)) * 3px) calc((1 - var(--collapse)) * 3px) calc(3px + (1 - var(--collapse)) * 3px); }
    .sticky-label { font-size: calc(9px + (1 - var(--collapse)) * 4px); letter-spacing: 0.05em; }
    .sticky-value { font-size: min(calc(var(--val-base) + (1 - var(--collapse)) * (40px * var(--desc-scale) - var(--val-base))), 30px); }
    .sticky-desc { font-size: calc((16px + (1 - var(--collapse)) * 24px) * var(--desc-scale)); line-height: 1.24; }
    .sticky-bar .ab-title { padding: 12px 6px; font-size: calc((16px + (1 - var(--collapse)) * 24px) * var(--desc-scale)); }
    .kpi-arrow { right: 8px; font-size: calc(11px + (1 - var(--collapse)) * 7px); }
    .ab-band { flex-direction: column; align-items: flex-start; gap: 5px; padding: 2px 16px; }
    .ab-band #abstract-text { font-size: calc((16px + (1 - var(--collapse)) * 24px) * var(--desc-scale)); line-height: 1.26; }
    .abstract .ab-cta { display: block; align-self: stretch; white-space: normal; text-align: center; line-height: 1.3; font-size: 12.5px; padding: 8px 14px; }
    .abstract .ab-cta .ab-cta-arrow { display: inline; }
    .be-banner h1 { font-size: 18px; }
    .doc-header { flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px; }
    .doc-title { font-size: 18px; }
    .doc-meta { text-align: left; }
    .params-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .infl-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .params { padding: 14px; }
    .param-hint { font-size: 12px; }
    details.param-more > summary { font-size: 12px; }
    .split-rows { grid-template-columns: 1fr 1fr; gap: 8px; }
    .excel-block-title { padding: 6px 10px; font-size: 9.5px; flex-direction: column; gap: 2px; align-items: flex-start; }
    table.excel th, table.excel td { padding: 5px 6px; font-size: 11px; }
    table.excel thead th { font-size: 9px; padding: 6px 4px; }
    /* Returns build-up table has 6 columns — tighten so it fits the screen */
    #tbl-returns table.excel th, #tbl-returns table.excel td { padding: 5px 3px; font-size: 10px; }
    #tbl-returns table.excel thead th { font-size: 8px; padding: 5px 2px; }
    #tbl-returns table.excel td:first-child { font-size: 9px; }
    table.excel tbody td.row-label { font-size: 10px; width: 120px; padding-left: 8px; }
    table.excel tbody td.row-label.sub-label { font-size: 9.5px; padding-left: 14px; }
    table.excel tbody td.row-num { width: 18px; font-size: 9px; }
    td.cell-formula { font-size: 9.5px; }
    .math-section { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
    .math-row { grid-template-columns: 44px 1fr 90px; padding: 6px 8px; font-size: 10.5px; }
    .math-eq { font-size: 13px; }
    .math-expr { font-size: 11.5px; }
    .math-sub { font-size: 10.5px; }
    .math-note { font-size: 13px; }
    /* Explainer reference tables (toll / charging systems / residual) live in .footer-note.
       Force a fixed layout so prose columns get the room and numeric columns stay tight. */
    .footer-note table { font-size: 12px; table-layout: fixed; width: 100%; }
    .footer-note th, .footer-note td { padding: 7px 6px; word-break: normal; overflow-wrap: break-word; vertical-align: top; }
    .footer-note td:first-child, .footer-note th:first-child { width: 22%; }
    .footer-note td.num, .footer-note th.num { width: 13%; text-align: center; white-space: nowrap; }
    /* Numeric headers: let them wrap within their narrow column instead of overflowing */
    .footer-note thead th { vertical-align: bottom; }
    .footer-note th.num { white-space: normal; word-break: normal; overflow-wrap: break-word; font-size: 9px; line-height: 1.15; padding: 6px 3px; }
    .footer-note th:not(.num) { white-space: normal; word-break: normal; }
    /* 4-column charging table: System | Architecture | Loss | Verdict */
    .footer-note table.t-charge { font-size: 11px; }
    .footer-note table.t-charge td:first-child, .footer-note table.t-charge th:first-child { width: 20%; }
    .footer-note table.t-charge td:nth-child(2), .footer-note table.t-charge th:nth-child(2) { width: 24%; }
    .footer-note table.t-charge td.num, .footer-note table.t-charge th.num { width: 14%; }
    .footer-note table.t-charge td.num { white-space: normal; text-align: center; font-size: 10px; }
    /* Explainer collapsible tables, if any */
    details.toll-details table { font-size: 12px; table-layout: fixed; width: 100%; }
    details.toll-details th, details.toll-details td { padding: 7px 6px; word-break: normal; overflow-wrap: break-word; vertical-align: top; }
    .footer-note { padding: 12px; font-size: 13.5px; }
    .footer-note li { line-height: 1.6; }
    details summary { font-size: 13px; }
    details.toll-details summary > span { font-size: 13.5px; }
  }

  /* ===== Config / preset panel (bottom) ===== */
  .cfg-panel { background:#fff; border:1px solid var(--excel-grid-strong); border-left:3px solid var(--accent); border-radius:4px; padding:18px 18px 16px; margin:22px 0; }
  .cfg-flag { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-dark); font-weight:700; margin-bottom:6px; }
  .cfg-panel h3 { font-family:var(--serif); font-size:19px; margin:0 0 4px; color:var(--accent-dark); letter-spacing:-0.01em; }
  .cfg-sub { font-size:12.5px; color:var(--excel-muted); margin:0 0 14px; line-height:1.5; }
  .cfg-presets { display:flex; gap:8px; margin-bottom:10px; }
  .cfg-preset { flex:1; text-align:left; background:#faf8f2; border:1px solid var(--excel-grid-strong); border-radius:6px; padding:11px 13px; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
  .cfg-preset:hover { background:#fff; }
  .cfg-preset.on { background:#fff; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
  .cfg-preset .cp-name { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent-dark); }
  .cfg-preset .cp-desc { font-size:11.5px; color:var(--excel-muted); margin-top:3px; line-height:1.45; }
  .cfg-mix { flex:0.8; background:#faf8f2; border:1px solid var(--excel-grid-strong); border-radius:6px; padding:11px 13px; display:flex; flex-direction:column; gap:6px; }
  .cfg-mix-btn { text-align:left; background:#fff; border:1px solid var(--excel-grid-strong); border-radius:5px; padding:7px 9px; font-size:11px; font-weight:600; color:var(--excel-muted); cursor:pointer; line-height:1.35; }
  .cfg-mix-btn.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent-dark); }
  .cfg-stateline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 14px; font-size:12px; color:var(--excel-muted); }
  .cfg-badge { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:2px 7px; border-radius:4px; }
  .cfg-badge.clean { background:#eef4ee; color:#2f6f3f; }
  .cfg-badge.dirty { background:#fbf0e3; color:#9a5a16; }
  .cfg-reset { background:none; border:none; color:var(--accent); font-family:var(--sans); font-size:12px; text-decoration:underline; cursor:pointer; padding:0; }
  .cfg-reset[disabled] { color:#bbb; text-decoration:none; cursor:default; }
  .cfg-io { display:flex; gap:8px; flex-wrap:wrap; }
  .cfg-btn { flex:1; min-width:150px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:11px 14px; border-radius:6px; cursor:pointer; transition:background .15s; }
  .cfg-btn:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
  .cfg-btn.ghost { background:#fff; color:var(--accent); }
  .cfg-btn.ghost:hover { background:#f3f7f9; }
  .cfg-status { margin-top:11px; font-size:12px; line-height:1.5; color:var(--excel-muted); min-height:1.2em; }
  .cfg-status.ok { color:#2f6f3f; }
  .cfg-status.warn { color:#9a5a16; }
  .cfg-status.err { color:#a8331f; }
  .cfg-status ul { margin:5px 0 0; padding-left:18px; }
  .cfg-status li { margin:1px 0; }
  @media (max-width:560px){ .cfg-presets { flex-direction:column; } .cfg-btn { min-width:0; } }
  /* ===== six-zone split UI + toll params + per-year table ===== */
  #split-rows { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  .zone-item { display:flex; flex-direction:column; gap:2px; }
  .zone-row { display:flex; align-items:center; gap:8px; }
  .zone-corr { display:none; font-family:var(--mono); font-size:10.5px; color:var(--excel-muted); margin-left:24px; }
  #split-rows.one-zone .zone-corr { display:none !important; }
  .split-total.corr { color:var(--accent-dark); font-weight:700; }
  .zone-row .zone-name { flex:1; display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
  .zone-row .zone-name input[type=checkbox] { margin:0; }
  .zone-row .dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; }
  .zone-row .zone-pct { width:64px; }
  .zone-row .zone-note { font-family:var(--mono); font-size:10.5px; color:var(--excel-muted); white-space:nowrap; }
  #split-rows.one-zone .zone-pct, #split-rows.one-zone .zone-note { display:none; }
  .split-extra { overflow:hidden; max-height:2000px; opacity:1; transition:max-height .35s ease, opacity .25s ease; }
  .split-extra.collapsed { max-height:0; opacity:0; }
  .split-collapsed-note { display:none; font-size:12px; color:var(--excel-muted); margin-top:6px; }
  .br-subsplit { margin-top:12px; }
  .toll-params-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:12px; }
  .toll-params-grid .chk-label { display:flex; align-items:center; gap:8px; font-size:12.5px; }
  .toll-yeardetail { margin-top:12px; }
  .toll-yeardetail summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--accent-dark); }
  .ty-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; }
  .ty-table th, .ty-table td { padding:3px 6px; border-bottom:1px solid var(--excel-grid); text-align:right; }
  .ty-table th:first-child, .ty-table td:first-child { text-align:left; }
  .ty-table tr.ty-cliff { background:#fbf0e3; }
  .ty-table tr.ty-step { background:#eef4ee; }
  .ty-leg { font-size:10.5px; color:var(--excel-muted); margin-top:6px; }
  .ty-key { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:middle; }
  .ty-key.ty-cliff { background:#fbf0e3; border:1px solid #e0c79b; }
  .ty-key.ty-step  { background:#eef4ee; border:1px solid #bcd3bc; }
  @media (max-width:560px){ .toll-params-grid { grid-template-columns:1fr; } }
  /* ---- MOBILE compact bar: rich 2-row labelled grid first, then 1-line value-only once the fleet/truck button shows ---- */
  #ckpi { display: none; }
  .sticky-bar.is-compact { position: fixed; top: 0; left: 0; right: 0; }
  .sticky-bar.is-compact #abstract-band { display: none !important; }
  /* compact-mini: collapse to one value-only line once the fleet/truck button is on screen */
  .sticky-bar.is-compact.is-mini .sticky-grid { display: none !important; }
  .sticky-bar.is-compact.is-mini { height: calc(54px + env(safe-area-inset-top, 0px)) !important; }
  .sticky-bar.is-compact.is-mini #ckpi {
    display: flex; align-items: stretch; justify-content: space-between; gap: 2px;
    height: 100%; padding: env(safe-area-inset-top, 0px) 6px 0; box-sizing: border-box;
    font-family: var(--mono); overflow: hidden;
  }
  #ckpi .ck-chip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 5px; overflow: hidden; }
  #ckpi .ck-chip + .ck-chip { border-left: 1px solid rgba(255,255,255,0.10); }
  #ckpi .ck-lab { font-size: 8.5px; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ckpi .ck-lab em { font-style: normal; color: #b3e5c7; font-weight: 800; }
  #ckpi .ck-val { font-size: 14px; font-weight: 800; color: #b3e5c7; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; overflow: hidden; }
  #ckpi .ck-val .unit { font-weight: 700; font-size: 0.78em; opacity: 0.85; }
  /* ---- COMPACT KPI BAR (rebuilt) ---- */
  #kbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: none;
    transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: transform;
    grid-template-columns: repeat(4, 1fr); box-sizing: border-box;
    background: var(--accent-dark); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding-top: env(safe-area-inset-top, 0px); font-family: var(--mono); }
  #kbar.show { display: grid; }
  #kbar.full   { height: calc(88px + env(safe-area-inset-top, 0px)); }
  #kbar.single { height: calc(52px + env(safe-area-inset-top, 0px)); }
  #kbar .kb-item { display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 4px 5px; min-width: 0; overflow: hidden; text-decoration: none; color: inherit;
    border-left: 1px solid rgba(255,255,255,0.08); }
  #kbar .kb-item:first-child { border-left: none; }
  #kbar.full .kb-item:nth-child(5) { border-left: none; }
  #kbar.full .kb-item:nth-child(n+5) { border-top: 1px solid rgba(255,255,255,0.10); }
  #kbar .kb-lab { font-size: clamp(7px, 2.3vw, 8.5px); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 700;
    color: rgba(255,255,255,0.55); line-height: 1.08; white-space: normal; overflow: visible; }
  #kbar .kb-lab em { font-style: normal; color: #b3e5c7; font-weight: 800; }
  #kbar .kb-val { font-size: clamp(11px, 3.7vw, 14px); font-weight: 800; color: #b3e5c7; letter-spacing: -0.01em; line-height: 1.05;
    white-space: nowrap; overflow: hidden; }
  #kbar .kb-val .unit { font-weight: 700; font-size: 0.8em; opacity: 0.85; }
  #kbar .v-f { display: none !important; }
  #kbar.single .k-fullonly { display: none; }
  body[data-view="fleet"] #kbar.single .k-truck { display: none; }
  body[data-view="truck"] #kbar.single .k-fleet { display: none; }
  /* DESKTOP: align the full-bleed compact bar to the 980px content column + scale type up */
  @media (min-width: 981px) {
    #kbar { padding-left: calc((100% - 980px) / 2); padding-right: calc((100% - 980px) / 2); }
    #kbar.full   { height: calc(96px + env(safe-area-inset-top, 0px)); }
    #kbar.single { height: calc(58px + env(safe-area-inset-top, 0px)); }
    #kbar .kb-item { padding: 6px 16px; gap: 3px; }
    #kbar .kb-lab { font-size: 10.5px; }
    #kbar .kb-val { font-size: 18px; }
  }