/*
 * Veercal base styles and components, v2 ("Tell-tale").
 * Requires tokens.css. Every class is prefixed vc- so pages can adopt it one at
 * a time without clashing with their old inline styles.
 *
 * Component reference with live examples: /design/v2/styleguide.html
 * Rules: docs/brand/DESIGN.md
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
.vc-page {
  margin: 0;
  background: var(--vc-cabin);
  color: var(--vc-text);
  font-family: var(--vc-font);
  font-weight: var(--vc-fw-body);
  font-size: var(--vc-fs-base);
  line-height: var(--vc-lh-body);
  -webkit-font-smoothing: antialiased;
}
.vc-page *, .vc-page *::before, .vc-page *::after { box-sizing: border-box; }
:where(.vc-page a) { color: inherit; text-underline-offset: 3px; }
.vc-page :focus-visible { outline: var(--vc-focus); outline-offset: var(--vc-focus-offset); }

.vc-container { max-width: var(--vc-max); margin: 0 auto; padding: 0 var(--vc-gutter); }
@media (max-width: 600px) { .vc-container { padding: 0 var(--vc-gutter-sm); } }

.vc-skip { position: absolute; left: -9999px; }
.vc-skip:focus { left: var(--vc-sp-4); top: var(--vc-sp-4); background: var(--vc-surface); padding: var(--vc-sp-2) var(--vc-sp-3); z-index: 10; }
/* The hidden attribute wins over a component's own display: a meter with an input
   missing, a band whose date has passed (Phase 3). */
.vc-page [hidden] { display: none !important; }

/* ── Type ─────────────────────────────────────────────────────────────── */
.vc-display, .vc-h1, .vc-h2, .vc-h3 { font-weight: var(--vc-fw-head); margin: 0; letter-spacing: var(--vc-track-head); }
.vc-display { font-size: var(--vc-fs-5xl); line-height: 1; }
.vc-h1 { font-size: var(--vc-fs-4xl); line-height: var(--vc-lh-tight); }
.vc-h2 { font-size: var(--vc-fs-3xl); line-height: var(--vc-lh-head); }
.vc-h3 { font-size: var(--vc-fs-2xl); line-height: var(--vc-lh-head); }
.vc-lead { font-size: var(--vc-fs-xl); line-height: var(--vc-lh-body); margin: 0; max-width: 32em; }
.vc-small { font-size: var(--vc-fs-sm); color: var(--vc-text-secondary); }
.vc-fine { font-size: var(--vc-fs-xs); color: var(--vc-text-secondary); line-height: 1.5; }
.vc-label { font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-figure { font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
.vc-crumbs { font-size: 14px; font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-crumbs a { color: inherit; }

/* ── Header and footer ───────────────────────────────────────────────── */
.vc-header { border-bottom: 1px solid var(--vc-line); background: var(--vc-cabin); }
.vc-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vc-sp-3) var(--vc-sp-7); padding-top: var(--vc-sp-4); padding-bottom: var(--vc-sp-4); }
.vc-header__logo img { display: block; height: 30px; width: auto; }
.vc-nav { display: flex; flex-wrap: wrap; gap: var(--vc-sp-1) 26px; }
.vc-nav a { font-weight: var(--vc-fw-label); font-size: 16px; text-decoration: none; padding: 10px 2px; border-bottom: 2px solid transparent; }
.vc-nav a[aria-current="page"] { border-bottom-color: var(--vc-amber); }

.vc-footer { background: var(--vc-ink); color: var(--vc-text-on-ink); margin-top: var(--vc-sp-11); }
.vc-footer__inner { padding-top: var(--vc-sp-9); padding-bottom: var(--vc-sp-8); display: flex; flex-direction: column; gap: var(--vc-sp-8); }
.vc-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--vc-sp-8); }
.vc-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 340px; color: var(--vc-text-on-ink-secondary); }
.vc-footer__brand img { height: 34px; width: auto; }
.vc-footer__cols { display: flex; flex-wrap: wrap; gap: var(--vc-sp-8); }
.vc-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 160px; }
.vc-footer__col h2 { font-size: 15px; font-weight: var(--vc-fw-head); margin: 0; }
.vc-footer__col a { color: var(--vc-text-on-ink-secondary); text-decoration: none; font-size: var(--vc-fs-sm); }
.vc-footer__legal { border-top: 1px solid #34373C; padding-top: var(--vc-sp-5); font-size: 14px; color: #B3B0A9; }

/* ── Buttons and doors ───────────────────────────────────────────────── */
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vc-sp-2);
  min-height: 44px; padding: 12px 18px; border-radius: var(--vc-r-md);
  font: var(--vc-fw-head) 17px/1.2 var(--vc-font); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--vc-ink); background: var(--vc-surface); color: var(--vc-ink);
}
.vc-btn--primary { background: var(--vc-ink); color: var(--vc-text-on-ink); }
.vc-btn--accent { background: var(--vc-amber); border-color: var(--vc-amber); color: var(--vc-ink); } /* one per dark band, never on cabin */
.vc-btn--on-ink { background: transparent; border-color: var(--vc-text-on-ink); color: var(--vc-text-on-ink); } /* a second button on a dark band, beside its accent button */
.vc-btn--block { width: 100%; }

.vc-doors { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-door {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px;
  border: 1.5px solid var(--vc-ink); border-radius: var(--vc-r-md); background: var(--vc-surface);
  font-weight: var(--vc-fw-label); font-size: var(--vc-fs-base); text-decoration: none; color: var(--vc-ink);
}
.vc-door:hover { background: var(--vc-ink); color: var(--vc-text-on-ink); }

/* ── Cards, bands, chips ─────────────────────────────────────────────── */
.vc-card { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); padding: 28px 30px; }
@media (max-width: 600px) { .vc-card { padding: 18px 16px; } }
.vc-band { background: var(--vc-ink); color: var(--vc-text-on-ink); border-radius: var(--vc-r-lg); padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-5) var(--vc-sp-8); }
.vc-band .vc-small { color: var(--vc-text-on-ink-secondary); }
/* Stacked dark band for a narrow column (the guide rail): heading, text, one accent button. */
.vc-band--stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--vc-sp-3); padding: 22px; }
.vc-band--stack .vc-band__title { margin: 0; font-size: 22px; line-height: 1.15; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); }
.vc-band--stack .vc-small { margin: 0; line-height: 1.5; }
.vc-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--vc-fw-head); font-size: var(--vc-fs-sm); border-radius: 8px; padding: 6px 10px; }
.vc-chip--good { background: var(--vc-green); color: #FFFFFF; }
.vc-chip--info { background: var(--vc-blue); color: #FFFFFF; }
.vc-chip--new { background: var(--vc-amber); color: var(--vc-ink); }
.vc-aside { background: var(--vc-tint); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.vc-aside .vc-aside__title { margin: 0; font-size: 18px; font-weight: var(--vc-fw-head); line-height: 1.3; }
.vc-aside .vc-aside__text { margin: 0; font-size: var(--vc-fs-base); line-height: 1.6; max-width: none; }
.vc-rule { border: 0; border-top: 2px solid var(--vc-ink); margin: 0; }

/* ── Gauges: containers (drawing is done by gauges.js / Gauges.jsx) ──── */
.vc-gauge { display: inline-block; flex: none; line-height: 0; }
.vc-gauge svg { display: block; }

/* A reading: gauge + label + value + note. The core results pattern. */
.vc-reading { display: flex; gap: var(--vc-sp-4); align-items: flex-start; padding: var(--vc-sp-4) 0; border-top: 1px solid var(--vc-line); }
.vc-reading--strong { border-top: 2px solid var(--vc-ink); padding-top: var(--vc-sp-5); }
.vc-reading__body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; min-width: 0; }
.vc-reading__label { font-size: 14px; font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-reading__value { font-size: 25px; line-height: 1.1; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
.vc-reading__title { font-size: var(--vc-fs-lg); font-weight: var(--vc-fw-head); }
.vc-reading__note { font-size: var(--vc-fs-sm); line-height: 1.45; color: var(--vc-text-secondary); }
.vc-reading button.vc-gauge { border: 0; background: transparent; padding: 0; cursor: pointer; } /* tap a meter to see its rule */
.vc-reading__rule { margin: var(--vc-sp-2) 0 0; padding: var(--vc-sp-3) var(--vc-sp-4); background: var(--vc-tint); border-radius: 10px; font-size: var(--vc-fs-sm); line-height: 1.5; color: var(--vc-ink); max-width: 34em; }

/* Odometer digits for the headline number */
.vc-odo { display: flex; gap: 4px; font-weight: var(--vc-fw-head); font-size: 44px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vc-odo__d { background: var(--vc-ink); color: var(--vc-text-on-ink); border-radius: 6px; padding: 2px 9px; }
.vc-odo__s { padding: 2px 3px; }
@media (max-width: 600px) { .vc-odo { font-size: 36px; } }
@media (prefers-reduced-motion: no-preference) {
  .vc-odo--roll .vc-odo__d { animation: vc-roll 600ms cubic-bezier(.2,.8,.2,1) both; }
  @keyframes vc-roll { from { transform: translateY(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Comparison chart drawn as level tubes */
.vc-levels { display: flex; gap: var(--vc-sp-6); align-items: flex-start; } /* tubes share one height, so tops and bottoms align */
.vc-levels__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vc-levels__value { font-weight: var(--vc-fw-head); font-size: 20px; font-variant-numeric: tabular-nums; }
.vc-levels__name { font-weight: var(--vc-fw-head); font-size: 16px; }
.vc-levels__sub { font-size: var(--vc-fs-xs); color: var(--vc-text-secondary); }
@media (max-width: 600px) { .vc-levels { gap: var(--vc-sp-3); } .vc-levels__value { font-size: 17px; } .vc-levels__name { font-size: 14px; } }

/* ── Forms ───────────────────────────────────────────────────────────── */
.vc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vc-field label, .vc-field__label { font-weight: var(--vc-fw-label); font-size: var(--vc-fs-sm); }
.vc-field__hint { font-size: var(--vc-fs-xs); color: var(--vc-text-secondary); }
.vc-input {
  display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px;
  background: var(--vc-surface); border: 1.5px solid var(--vc-line-strong); border-radius: var(--vc-r-md);
  font-weight: var(--vc-fw-label); font-size: var(--vc-fs-base);
}
.vc-input:focus-within { outline: var(--vc-focus); outline-offset: var(--vc-focus-offset); }
.vc-input input, .vc-input select {
  border: 0; outline: none; background: transparent; width: 100%; min-width: 0;
  font: inherit; color: var(--vc-text); font-variant-numeric: tabular-nums; min-height: 44px;
}
/* The field draws the one focus ring (focus-within above), not the control inside it. */
.vc-input input:focus-visible, .vc-input select:focus-visible, .vc-input textarea:focus-visible { outline: none; }
.vc-input__affix { color: var(--vc-text-secondary); }
.vc-range { width: 100%; accent-color: var(--vc-amber); height: 44px; margin: 0; }
.vc-seg { display: flex; flex-wrap: wrap; gap: var(--vc-sp-2); }
.vc-seg button {
  min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--vc-ink);
  background: var(--vc-surface); color: var(--vc-ink); font: var(--vc-fw-label) var(--vc-fs-sm)/1.2 var(--vc-font); cursor: pointer;
}
.vc-seg button[aria-pressed="true"] { background: var(--vc-ink); color: var(--vc-text-on-ink); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.vc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vc-table th, .vc-table td { padding: 10px 0; border-top: 1px solid var(--vc-line); text-align: right; font-weight: var(--vc-fw-body); }
.vc-table th:first-child { text-align: left; }
.vc-table thead th { border-top: 0; font-size: var(--vc-fs-xs); font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); padding-bottom: 6px; }
.vc-table tr.vc-table__total th, .vc-table tr.vc-table__total td { border-top: 2px solid var(--vc-ink); font-weight: var(--vc-fw-head); }
.vc-table-wrap { overflow-x: auto; }
/* Added for the novated guides (Phase 2): space between columns, a title over the
   table (worked examples, the example quote) with an optional note under it. */
.vc-table th + th, .vc-table th + td, .vc-table td + td, .vc-table td + th { padding-left: var(--vc-sp-4); }
@media (max-width: 600px) { .vc-table th + th, .vc-table th + td, .vc-table td + td, .vc-table td + th { padding-left: 10px; } } /* five columns fit at 390px */
.vc-table caption { caption-side: top; text-align: left; padding-bottom: var(--vc-sp-3); font-size: 18px; line-height: 1.3; font-weight: var(--vc-fw-head); }
.vc-table caption small { display: block; margin-top: var(--vc-sp-1); font-size: var(--vc-fs-sm); line-height: 1.45; font-weight: var(--vc-fw-body); color: var(--vc-text-secondary); }
/* Text tables: every column left- and top-aligned (eligibility notes, outcomes in words). */
.vc-table--text { font-size: 16px; line-height: 1.5; }
.vc-table--text th, .vc-table--text td { text-align: left; vertical-align: top; }
/* A heading row that groups the rows under it (the example quote's sections). */
.vc-table tr.vc-table__group th { border-top: 2px solid var(--vc-ink); padding-top: 18px; text-align: left; font-weight: var(--vc-fw-head); }
/* The one cell the text points to ("the highlighted cell"). The shadow widens the
   tint without moving the figure out of line with its column. */
.vc-table td.vc-table__hl { background: var(--vc-tint); box-shadow: 8px 0 0 var(--vc-tint); font-weight: var(--vc-fw-head); }

/* ── Long-form guides ────────────────────────────────────────────────── */
.vc-prose { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
/* Barlow is narrow: 760px of 19px text is ~93 characters a line. 30em keeps
   paragraphs and lists near 70; wider components keep the full column. */
.vc-prose p { margin: 0; font-size: var(--vc-fs-lg); line-height: var(--vc-lh-prose); max-width: 30em; }
.vc-prose h2 { margin: 24px 0 0; font-size: var(--vc-fs-3xl); line-height: var(--vc-lh-head); font-weight: var(--vc-fw-head); }
.vc-prose ul.vc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.6; max-width: 30em; }
.vc-prose ul.vc-list li { display: flex; gap: 14px; align-items: baseline; }
.vc-prose ul.vc-list li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--vc-ink); border-radius: 2px; transform: translateY(-2px); }
.vc-inshort { border-top: 2px solid var(--vc-ink); border-bottom: 1px solid var(--vc-line); padding: 18px 0; display: flex; flex-direction: column; gap: 12px; }
/* Type classes keep their own size inside prose. */
.vc-prose p.vc-lead { font-size: var(--vc-fs-xl); line-height: var(--vc-lh-body); max-width: 32em; }
.vc-prose p.vc-fine { font-size: var(--vc-fs-xs); line-height: 1.5; max-width: none; }
.vc-prose > .vc-btn { align-self: flex-start; }
/* "N min read · Updated … · Sources at the end" under a guide's H1 */
.vc-meta, .vc-prose p.vc-meta { margin: 0; font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-label); line-height: 1.4; color: var(--vc-text-secondary); }
/* Sources line at the end of a guide */
.vc-fine--rule { border-top: 1px solid var(--vc-line); padding-top: 14px; }
/* A question and its answer ("Common questions") */
.vc-qa { display: flex; flex-direction: column; gap: var(--vc-sp-2); }
/* Short options side by side, each under a 2px ink rule ("When it falls due") */
.vc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 var(--vc-sp-6); }
.vc-cols__item { border-top: 2px solid var(--vc-ink); padding: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.vc-cols .vc-cols__title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: var(--vc-fw-head); }
.vc-cols .vc-cols__text { margin: 0; font-size: 16px; line-height: 1.55; }
.vc-prose .vc-cols ul.vc-list { font-size: 16px; line-height: 1.55; gap: 10px; }

/* Added for the novated guides (Phase 2). */
/* Subheadings (H3) between paragraphs */
.vc-prose > .vc-h3 { margin-top: var(--vc-sp-2); }
/* Checklist: hollow squares in place of bullets (ul.vc-list.vc-list--check) */
.vc-prose ul.vc-list--check li::before { width: 16px; height: 16px; background: transparent; border: 2px solid var(--vc-ink); border-radius: 3px; transform: translateY(2px); }
/* Numbered steps and options (ol.vc-steps). Each item is one span of text, or a
   .vc-steps__body holding a .vc-steps__title and paragraphs. The number sits on an
   ink tile like an odometer digit. */
.vc-steps { margin: 0; padding: 0; list-style: none; counter-reset: vc-step; display: flex; flex-direction: column; gap: 18px; max-width: 32em; font-size: 18px; line-height: 1.6; }
.vc-steps > li { counter-increment: vc-step; display: flex; gap: 14px; align-items: baseline; }
.vc-steps > li::before { content: counter(vc-step); flex: none; min-width: 30px; padding: 0 6px; border-radius: 6px; background: var(--vc-ink); color: var(--vc-text-on-ink); font-size: 17px; line-height: 32px; font-weight: var(--vc-fw-head); text-align: center; font-variant-numeric: tabular-nums; }
.vc-steps > li > * { flex: 1 1 auto; min-width: 0; }
.vc-steps__body { display: flex; flex-direction: column; gap: 12px; }
.vc-steps .vc-steps__title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: var(--vc-fw-head); }
/* A worked formula, one line per span, notes in secondary text. Barlow with
   tabular figures: the system has no monospace face. */
.vc-formula { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--vc-tint); border-radius: 12px; font-size: 16px; line-height: 1.55; font-weight: var(--vc-fw-label); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vc-formula__note { font-weight: var(--vc-fw-body); color: var(--vc-text-secondary); }

/* Added for the EV guides (Phase 2). */
/* A large figure in a card: one amount the copy states, with its note under it and an
   optional label above. A plain number, so no gauge and no colour. Two or more side by
   side go in .vc-figboxes (before and after). */
.vc-figbox { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); padding: 22px 26px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 600px) { .vc-figbox { padding: 18px 16px; } }
.vc-figbox .vc-figbox__label { margin: 0; font-size: 14px; line-height: 1.4; font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); max-width: none; }
.vc-figbox .vc-figbox__value { margin: 0; font-size: 52px; line-height: 1.05; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); font-variant-numeric: tabular-nums; max-width: none; }
.vc-figbox .vc-figbox__note { margin: 0; font-size: var(--vc-fs-base); line-height: 1.5; color: var(--vc-text-secondary); max-width: 34em; }
@media (max-width: 600px) { .vc-figbox .vc-figbox__value { font-size: 40px; } }
.vc-figboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--vc-sp-4); }
/* A worked example's verdict: paragraphs under its table, in the same card. */
.vc-card > .vc-table-wrap + p, .vc-card > p + p { margin-top: var(--vc-sp-4); }
/* An empty corner cell over the row labels, when the columns have headings. */
.vc-table thead td { border-top: 0; padding: 0; }

/* Added for the car finance guides (Phase 2). */
/* Points for and against: each item keeps the page's own ✓ or ✗ (.vc-list__mark), in
   ink, where the square bullet would be (ul.vc-list.vc-list--marks). The marks are
   text, so screen readers hear them. No colour. */
.vc-prose ul.vc-list--marks li::before { content: none; }
.vc-list__mark { flex: none; width: 1em; text-align: center; font-weight: var(--vc-fw-head); }

/* Guide layout: article column and a right rail. The rail stacks after the
   article once they no longer fit side by side (620 + 56 + 300 px). */
.vc-guide { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--vc-sp-9); padding-top: 36px; }
.vc-guide__main { flex: 1 1 620px; max-width: 760px; min-width: 0; }
.vc-rail { flex: 0 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 28px; padding-top: var(--vc-sp-2); }
@media (max-width: 1039px) { .vc-rail { flex-basis: 100%; } }
/* Side by side, the rail stays in view as the page scrolls. A rail taller than the
   window scrolls inside itself, so nothing in it is out of reach. The 6px side and
   bottom padding stops the scroll box clipping focus rings; the negative margins and
   the 12px wider basis keep the content 300px wide and lined up as before. */
@media (min-width: 1040px) {
  .vc-rail {
    position: sticky; top: var(--vc-sp-6); max-height: calc(100vh - 2 * var(--vc-sp-6));
    overflow-y: auto; scrollbar-width: thin;
    flex-basis: 312px; min-width: 272px; margin: 0 -6px; padding: var(--vc-sp-2) 6px 6px;
  }
}
.vc-rail__block { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--vc-ink); padding-top: 14px; }
.vc-rail__title { margin: 0; font-size: 16px; line-height: 1.3; font-weight: var(--vc-fw-head); }
.vc-rail__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.45; }
.vc-rail__block--toc a { text-decoration: none; }
.vc-rail__block--toc a:hover { text-decoration: underline; }

/* Explorer: one slider driving a set of readings, inside a card. */
.vc-explorer { display: flex; flex-direction: column; gap: 18px; padding: 26px 28px; }
@media (max-width: 600px) { .vc-explorer { padding: 20px 16px; } }
.vc-explorer__head { display: flex; flex-direction: column; gap: var(--vc-sp-1); }
.vc-explorer .vc-explorer__title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); }
.vc-explorer .vc-explorer__intro { margin: 0; font-size: var(--vc-fs-sm); line-height: 1.45; color: var(--vc-text-secondary); max-width: none; }
.vc-explorer__control { display: flex; flex-direction: column; gap: 6px; }
.vc-explorer__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-3); }
.vc-explorer__row label { font-size: 18px; font-weight: var(--vc-fw-head); }
.vc-explorer__readout { font-size: 22px; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
.vc-explorer__ends { display: flex; justify-content: space-between; gap: var(--vc-sp-3); font-size: var(--vc-fs-xs); font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-explorer .vc-explorer__foot { margin: 0; font-size: 14px; line-height: 1.5; color: var(--vc-text-secondary); border-top: 1px solid var(--vc-line); padding-top: var(--vc-sp-3); max-width: none; }
/* Readings two per row, one per row when narrow. */
.vc-readings { display: flex; flex-wrap: wrap; column-gap: var(--vc-sp-6); }
.vc-readings > .vc-reading { flex: 1 1 calc(50% - 12px); min-width: 200px; }
.vc-reading__spacer { flex: none; width: 16px; } /* lines up readings that have no gauge */

/* ── Feedback widget ─────────────────────────────────────────────────── */
/* Open/closed is set by the page script (style.display), so the floating
   versions start hidden here. */
.vc-fb { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); width: 320px; max-width: 100%; overflow: hidden; }
.vc-fb__head { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-3); padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--vc-line); }
.vc-fb__title { margin: 0; font-size: var(--vc-fs-base); font-weight: var(--vc-fw-head); }
.vc-fb__close { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--vc-r-md); background: transparent; color: var(--vc-ink); font: var(--vc-fw-head) 16px/1 var(--vc-font); cursor: pointer; }
.vc-fb__close:hover { background: var(--vc-tint); }
.vc-fb__form { display: flex; flex-direction: column; gap: var(--vc-sp-3); padding: var(--vc-sp-4); }
.vc-fb__types { margin: 0; padding: 0; border: 0; min-width: 0; }
.vc-fb__types legend { padding: 0; margin-bottom: 6px; font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-fb__options { display: flex; flex-wrap: wrap; gap: var(--vc-sp-1) var(--vc-sp-4); }
.vc-fb__options label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--vc-fs-sm); cursor: pointer; }
.vc-fb__options input { accent-color: var(--vc-ink); width: 18px; height: 18px; margin: 0; }
.vc-input--area { align-items: stretch; padding: 8px 12px; }
.vc-input--area textarea { border: 0; outline: none; background: transparent; width: 100%; resize: none; font: inherit; font-weight: var(--vc-fw-body); color: var(--vc-text); line-height: 1.45; }
.vc-input input::placeholder, .vc-input textarea::placeholder { color: var(--vc-text-secondary); font-weight: var(--vc-fw-body); }
.vc-fb__thanks { padding: 28px 18px; text-align: center; }
.vc-fb__thanks > * { display: block; }
.vc-fb__thanks strong { font-size: var(--vc-fs-base); margin-bottom: var(--vc-sp-1); }
.vc-fb--float { display: none; position: fixed; bottom: 80px; right: var(--vc-sp-6); width: min(320px, calc(100vw - 32px)); z-index: 9999; }
.vc-fb--float .vc-fb__thanks { display: none; }
.vc-fb-backdrop { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(22, 24, 27, 0.35); }
.vc-fb-fab { position: fixed; bottom: var(--vc-sp-6); right: var(--vc-sp-6); z-index: 9997; }
@media (max-width: 600px) { .vc-fb--float { right: var(--vc-sp-4); } .vc-fb-fab { right: var(--vc-sp-4); bottom: var(--vc-sp-4); } }

/* ── Calculator pages (Phase 3) ──────────────────────────────────────── */
/* From the "Novated lease calculator" mockup. Engine output (classes the
   calculation scripts set or write) is styled in calculators.css, not here. */
/* Head: breadcrumb, H1 and intro over the calculator. */
.vc-calc-head { display: flex; flex-direction: column; gap: 14px; padding: 36px 0 28px; }
.vc-calc-head > * { margin: 0; }
/* Inputs card beside a results column. The results drop under the card once the
   two no longer fit side by side (340 + 32 + 560 px). */
.vc-calc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--vc-sp-7); }
.vc-calc__inputs { flex: 1 1 340px; max-width: 430px; min-width: 0; padding: var(--vc-sp-1) var(--vc-sp-6) var(--vc-sp-6); }
@media (max-width: 600px) { .vc-calc__inputs { padding: 0 16px 18px; } }
.vc-calc__results { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
/* Guide-width content after the calculator (Common questions). */
.vc-calc ~ .vc-prose { margin-top: var(--vc-sp-9); }
/* The inputs card's groups, divided by rules. */
.vc-form__section { display: flex; flex-direction: column; gap: 14px; padding: 22px 0; border-top: 1px solid var(--vc-line); }
.vc-form__section:first-child { border-top: 0; }
.vc-form__section > .vc-btn { align-self: flex-start; }
/* Fields side by side, one a row when narrow. */
.vc-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.vc-fields > .vc-field { flex: 1 1 140px; }
/* A result card: the headline row (label, odometer, note, and a chip on the
   right), then the detail under it. */
.vc-result { display: flex; flex-direction: column; gap: var(--vc-sp-6); }
.vc-result__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--vc-sp-5); }
.vc-result__headline { display: flex; flex-direction: column; gap: var(--vc-sp-2); min-width: 0; }
.vc-result__headline > * { margin: 0; }
.vc-result__note { font-size: var(--vc-fs-sm); line-height: 1.45; color: var(--vc-text-secondary); max-width: 360px; }
/* A block in the results column: a heading and a line of text over a table,
   readings, asides or a button. */
.vc-calc__block { display: flex; flex-direction: column; gap: var(--vc-sp-4); }
.vc-calc__block > h2, .vc-calc__block > p { margin: 0; }
.vc-calc__block > p { max-width: 34em; }
.vc-calc__block > .vc-btn { align-self: flex-start; }

/* Added for end of term (Phase 3 batch B). */
/* A titled group in the inputs card (the mockup's "You", "The car"), with an
   optional line of text under the title. */
.vc-form__head { display: flex; flex-direction: column; gap: 2px; }
.vc-form__head > * { margin: 0; }
.vc-form__title { font-size: 18px; line-height: 1.3; font-weight: var(--vc-fw-head); }
/* A meter reading beside the headline in a result card. */
.vc-result__head > .vc-reading { flex: 0 1 320px; border-top: 0; padding: 0; }
/* The engine's sentence about the result, at the foot of a result card. */
.vc-result__message { margin: 0; font-size: var(--vc-fs-base); line-height: 1.55; max-width: 36em; }
/* Three readings a row, one a row when narrow. */
.vc-readings--three > .vc-reading { flex-basis: calc(33.333% - 16px); min-width: 140px; }
/* Blocks in the results column that show and hide together. */
.vc-calc__group { display: flex; flex-direction: column; gap: 28px; }
.vc-calc__group > .vc-btn { align-self: flex-start; }
/* Option cards: two a row when there is room, one when narrow. A --wide card
   takes the whole row. Each card: a head (title, chip), a figure with its label,
   rows, an aside and an optional button, kept at the foot of the card. */
.vc-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--vc-sp-4); }
.vc-options > .vc-option--wide { grid-column: 1 / -1; }
.vc-option { display: flex; flex-direction: column; gap: var(--vc-sp-4); padding: 22px 24px; }
@media (max-width: 600px) { .vc-option { padding: 18px 16px; } }
.vc-option__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--vc-sp-2) var(--vc-sp-3); }
.vc-option .vc-option__title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: var(--vc-fw-head); }
.vc-option__figure { display: flex; flex-direction: column; gap: var(--vc-sp-1); }
.vc-option__figure > * { margin: 0; }
.vc-option > .vc-btn { align-self: flex-start; margin-top: auto; }

/* Added for novated (Phase 3 batch C). */
/* A dark band's text, between its chip and its accent button (the EV rules band). */
.vc-band__text { flex: 1 1 400px; margin: 0; font-size: 16px; line-height: 1.45; }
/* A label with a readout on the right (a slider's value), and a short field. */
.vc-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-3); }
.vc-input--short { max-width: 140px; }
/* A checkbox with its label and hint. */
.vc-check { display: flex; gap: var(--vc-sp-3); align-items: flex-start; }
.vc-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--vc-ink); cursor: pointer; }
.vc-check__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vc-check__body label { font-weight: var(--vc-fw-label); font-size: var(--vc-fs-sm); cursor: pointer; }
/* A ruled part inside a result card (the comparison under the headline). */
.vc-result__part { display: flex; flex-direction: column; gap: var(--vc-sp-4); border-top: 1px solid var(--vc-line); padding-top: 22px; }
.vc-result__part > * { margin: 0; }
/* Two blocks side by side in the results column, one a row when narrow. */
.vc-calc__pair { display: flex; flex-wrap: wrap; gap: var(--vc-sp-6) var(--vc-sp-7); }
.vc-calc__pair > * { flex: 1 1 300px; min-width: 0; }
/* A chip at the top of a reading (the EV rule change). */
.vc-reading__body > .vc-chip { align-self: flex-start; margin-bottom: var(--vc-sp-1); }
/* A step with its figure on the right (the FBT working). */
.vc-steps__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-1) var(--vc-sp-4); }
.vc-steps__value { font-size: 20px; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
.vc-steps__body > p { margin: 0; }
/* An option card that is a link (another Veercal tool). */
a.vc-option { text-decoration: none; color: inherit; }
a.vc-option:hover { border-color: var(--vc-ink); }

/* ── React calculator and Quick Compare (Phase 4) ────────────────────── */
/* /calculator and /compare. Live examples: the style guide, "React calculator". */
/* Text for screen readers only: the plain figure behind odometer digits. */
.vc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vc-odo-wrap { display: inline-flex; max-width: 100%; }
.vc-odo-wrap .vc-odo { flex-wrap: wrap; row-gap: 4px; }
/* A close button (✕), as on the feedback widget. */
.vc-close { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: var(--vc-r-md); background: transparent; color: var(--vc-ink); font: var(--vc-fw-head) 16px/1 var(--vc-font); cursor: pointer; }
.vc-close:hover { background: var(--vc-tint); }
/* A button that reads as a link, inside a line of text. */
.vc-link { display: inline; border: 0; padding: 0; background: none; font: inherit; font-weight: var(--vc-fw-label); color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* "?" beside a label: opens the explainer for it. Blue: information. The hit area
   is 44px though the circle is 24px. */
.vc-info { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid var(--vc-blue); border-radius: 50%; background: var(--vc-surface); color: var(--vc-blue); font: var(--vc-fw-head) 14px/1 var(--vc-font); cursor: pointer; vertical-align: middle; }
.vc-info::after { content: ""; position: absolute; inset: -10px; }
.vc-info:hover { background: var(--vc-blue); color: #FFFFFF; }
/* An error under a group of fields. Red: errors. */
.vc-error { margin: 0; color: var(--vc-red); font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-label); line-height: 1.45; }
/* Compact table rows inside cards, asides and the inputs panel. */
.vc-table--compact { font-size: var(--vc-fs-sm); line-height: 1.4; }
.vc-table--compact th, .vc-table--compact td { padding: 7px 0; }
.vc-table--compact tr:first-child th, .vc-table--compact tr:first-child td { border-top: 0; }
/* A plain chip, ink on tint (no colour). */
.vc-chip--plain { background: var(--vc-tint); color: var(--vc-ink); }
/* The best option among cards: a 2px ink border (as end of term's .best-option). */
.vc-card--best { border-color: var(--vc-ink); box-shadow: inset 0 0 0 1px var(--vc-ink); }

/* Notices: full-width strips under the header (the disclaimer, a link from an older
   version, what's new). Tint, no colour. --ink is the privacy notice. */
.vc-notice { background: var(--vc-tint); border-bottom: 1px solid var(--vc-line); }
.vc-notice__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vc-sp-3) var(--vc-sp-5); padding-top: var(--vc-sp-3); padding-bottom: var(--vc-sp-3); font-size: var(--vc-fs-sm); line-height: 1.55; }
.vc-notice__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--vc-sp-2); }
.vc-notice__body > * { margin: 0; }
.vc-notice__body p { max-width: 70em; }
.vc-notice__title { font-size: var(--vc-fs-base); font-weight: var(--vc-fw-head); }
.vc-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2) var(--vc-sp-3); }
.vc-notice--ink { background: var(--vc-ink); color: var(--vc-text-on-ink); border-bottom: 0; }

/* Calculator head: the H1, and on phones the button that opens the inputs. */
.vc-app-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vc-sp-3) var(--vc-sp-5); padding: 32px 0 8px; }
.vc-app-head > * { margin: 0; }
/* Actions over the calculator; the rates line on the right. */
.vc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2) var(--vc-sp-3); padding: var(--vc-sp-3) 0 var(--vc-sp-5); }
.vc-toolbar__end { margin: 0 0 0 auto; }
.vc-toolbar__save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2); }
.vc-toolbar__save .vc-input { width: 220px; max-width: 100%; }
/* Saved scenarios: one card each. */
.vc-saved { display: flex; flex-wrap: wrap; gap: var(--vc-sp-3); margin: 0 0 var(--vc-sp-5); padding: 0; list-style: none; }
.vc-saved__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2) var(--vc-sp-4); padding: 12px 8px 12px 16px; }
.vc-saved__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2); font-weight: var(--vc-fw-head); }

/* Inputs panel beside the results. On phones (768px and narrower) it is a drawer
   from the left, opened by .vc-app__open and closed by .vc-app__close or the backdrop. */
.vc-app { display: flex; align-items: flex-start; gap: var(--vc-sp-7); }
.vc-app__inputs { flex: 0 0 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vc-card.vc-app__inputs { padding: 20px; }
.vc-app__results { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--vc-sp-5); }
.vc-app__results > * { margin: 0; }
/* The tab panel: every result block, one under the other. The depth control is a
   direct child, so it has the whole panel to stick within on phones. */
.vc-app__panel { display: flex; flex-direction: column; gap: var(--vc-sp-5); min-width: 0; }
.vc-app__panel > * { margin: 0; }
.vc-app__open, .vc-app__close, .vc-app__backdrop { display: none; }
@media (max-width: 768px) {
  .vc-app { display: block; }
  .vc-app__inputs { display: none; }
  .vc-app__inputs.is-open { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; width: min(340px, 88vw); overflow-y: auto; border-radius: 0 var(--vc-r-lg) var(--vc-r-lg) 0; }
  .vc-app__backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(22, 24, 27, 0.35); }
  .vc-app__open { display: inline-flex; }
  .vc-app__close { display: inline-flex; align-self: flex-end; margin: -10px -10px 0 0; }
}
/* A heading between groups in the inputs panel. */
.vc-inputs__head { display: flex; align-items: center; gap: var(--vc-sp-2); margin: var(--vc-sp-2) 0 0; padding-top: var(--vc-sp-4); border-top: 1px solid var(--vc-line); font-size: 17px; line-height: 1.3; font-weight: var(--vc-fw-head); }
.vc-inputs__head:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* A label with its "?" beside it. */
.vc-field__labelline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2); }
.vc-app__inputs .vc-seg button { padding: 8px 10px; }
.vc-app__inputs .vc-aside { padding: 12px 14px; gap: 4px; font-size: var(--vc-fs-sm); }
/* The methods to compare: a checkbox each, with its "?". */
.vc-methods { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vc-methods li { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-3); }
.vc-methods .vc-check { align-items: center; }
.vc-methods .vc-check input { margin: 0; }
.vc-methods .vc-check label { font-size: var(--vc-fs-base); }

/* Tabs: the current one underlined in amber, as in the nav. */
.vc-tabs { display: flex; gap: var(--vc-sp-6); border-bottom: 1px solid var(--vc-line); overflow-x: auto; }
.vc-tabs button { min-height: 44px; margin-bottom: -1px; padding: 10px 2px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--vc-text-secondary); font: var(--vc-fw-label) 17px/1.2 var(--vc-font); white-space: nowrap; cursor: pointer; }
.vc-tabs button[aria-selected="true"] { color: var(--vc-ink); border-bottom-color: var(--vc-amber); }

/* Detail level: three segments. On phones it stays at the top of the screen as the
   results scroll (sticky, never fixed), with shorter labels from 520px down. */
.vc-depth { display: flex; gap: var(--vc-sp-1); padding: var(--vc-sp-1); background: var(--vc-tint); border-radius: 12px; }
.vc-depth button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--vc-ink); font: var(--vc-fw-label) var(--vc-fs-sm)/1.2 var(--vc-font); white-space: nowrap; cursor: pointer; }
.vc-depth button[aria-pressed="true"] { background: var(--vc-ink); color: var(--vc-text-on-ink); }
.vc-depth__trim { display: none; }
@media (max-width: 520px) { .vc-depth__full { display: none; } .vc-depth__trim { display: inline; } }
@media (max-width: 768px) { .vc-depth-wrap--sticky { position: sticky; top: 0; z-index: 20; margin: 0 -4px; padding: 8px 4px; background: var(--vc-cabin); } }

/* Bento: the hero and every band take the whole row; metric readings sit four,
   two or one a row. */
.vc-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vc-sp-4) var(--vc-sp-5); align-items: start; }
.vc-bento__cell { min-width: 0; }
.vc-bento__cell--band { grid-column: 1 / -1; }
.vc-bento__cell > .vc-reading { height: 100%; }
@media (max-width: 900px) { .vc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vc-bento { grid-template-columns: minmax(0, 1fr); } }

/* Progressive card: an option's total, then (depth 2 and up) its parts, each a row
   that opens to show its working (all open at depth 3). */
.vc-pcard { display: flex; flex-direction: column; gap: var(--vc-sp-5); }
.vc-pcard__title { margin: 0; font-size: var(--vc-fs-xl); line-height: 1.2; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); }
.vc-pcard__total { display: block; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vc-pcard__monthly { margin: 0; font-size: var(--vc-fs-base); font-weight: var(--vc-fw-label); }
.vc-pcard__hint { margin: 0; font-size: var(--vc-fs-sm); color: var(--vc-text-secondary); }
.vc-pcard__rows { display: flex; flex-direction: column; }
.vc-pcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-3); width: 100%; min-height: 44px; margin: 0; padding: 11px 0; border: 0; border-top: 1px solid var(--vc-line); background: none; color: var(--vc-ink); font: var(--vc-fw-body) var(--vc-fs-base)/1.4 var(--vc-font); text-align: left; }
button.vc-pcard__row { cursor: pointer; }
button.vc-pcard__row:hover .vc-pcard__label { text-decoration: underline; text-underline-offset: 3px; }
.vc-pcard__row--total { border-top: 2px solid var(--vc-ink); font-weight: var(--vc-fw-head); }
.vc-pcard__value { flex: none; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-pcard__working { margin: 0 0 var(--vc-sp-3); }
/* One line: an option's name, total and its gap to the best (Quick Compare runner-ups at depth 1). */
.vc-pcard--line { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-2) var(--vc-sp-4); padding: 16px 20px; }
.vc-pcard__end { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: var(--vc-sp-1) var(--vc-sp-3); }
.vc-pcard__name { font-size: var(--vc-fs-base); font-weight: var(--vc-fw-head); }
/* A runner-up row that opens every card (Quick Compare, depth 1). */
.vc-pcard-link { display: block; border-radius: var(--vc-r-lg); cursor: pointer; }
.vc-pcard-link:hover .vc-pcard__name { text-decoration: underline; text-underline-offset: 3px; }

/* Things to check: a heading per option over its meter readings. */
.vc-checks { display: flex; flex-direction: column; gap: var(--vc-sp-4); }
.vc-checks__option { margin: 0; font-size: 17px; line-height: 1.3; font-weight: var(--vc-fw-head); }

/* Charts (Recharts): a heading with its "?" and download button, an optional line
   under it, the chart, and for charts that tell ink options apart by pattern, a key
   drawn in those patterns (no colours). */
.vc-chart { display: flex; flex-direction: column; gap: var(--vc-sp-3); min-width: 0; }
.vc-chart__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-sp-2); }
.vc-chart__title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: var(--vc-fw-head); }
.vc-chart__download { margin-left: auto; }
.vc-chart__sub { margin: 0; font-size: var(--vc-fs-sm); line-height: 1.45; color: var(--vc-text-secondary); max-width: 46em; }
.vc-chart__plot { min-width: 0; }
.vc-chart__plot svg { overflow: visible; }
.vc-chart-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-label); }
.vc-chart-key li { display: inline-flex; align-items: center; gap: var(--vc-sp-2); }
.vc-chart-key svg { flex: none; display: block; }
.vc-chart-tip { background: var(--vc-surface); border: 1px solid var(--vc-line-strong); border-radius: var(--vc-r-md); padding: 10px 12px; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--vc-ink); }
.vc-chart-tip__title { font-weight: var(--vc-fw-head); }
/* Sensitivity: how far each input moves the total, down to the left, up to the right. */
.vc-tornado { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--vc-sp-3); align-items: center; font-variant-numeric: tabular-nums; }
.vc-tornado > div { padding: 10px 0; border-top: 1px solid var(--vc-line); min-width: 0; }
.vc-tornado__head { font-size: var(--vc-fs-xs); font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); border-top: 0 !important; padding-bottom: 6px !important; }
.vc-tornado__name { font-weight: var(--vc-fw-label); }
.vc-tornado__range { display: block; font-size: var(--vc-fs-xs); color: var(--vc-text-secondary); }
.vc-tornado__side { display: flex; align-items: center; gap: var(--vc-sp-2); font-size: 14px; }
.vc-tornado__side--lo { justify-content: flex-end; }
.vc-tornado__bar { height: 12px; max-width: 100%; border-radius: 2px; background: var(--vc-ink); }

/* Modal: an explainer or the change log over the page. */
.vc-modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--vc-sp-5); background: rgba(22, 24, 27, 0.35); }
.vc-modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 85vh; overflow: hidden; background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); }
.vc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-sp-3); padding: 10px 10px 10px 22px; border-bottom: 1px solid var(--vc-line); }
.vc-modal__title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); }
.vc-modal__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; overflow-y: auto; }
.vc-modal__body > * { margin: 0; }
.vc-modal__body p { line-height: 1.6; }
@media (max-width: 600px) { .vc-modal-backdrop { padding: var(--vc-sp-3); } .vc-modal__head { padding-left: 16px; } .vc-modal__body { padding: 16px; } }

/* Insight cards that turn over when tapped (Quick Compare). The back's text sizes the
   card (.vc-flip__size), so neither side overflows. */
.vc-flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--vc-sp-3); }
.vc-flip { position: relative; display: block; border-radius: var(--vc-r-lg); cursor: pointer; perspective: 800px; }
.vc-flip__size { visibility: hidden; display: flex; flex-direction: column; gap: var(--vc-sp-2); padding: 18px 20px; }
.vc-flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.4s ease; }
.vc-flip.is-flipped .vc-flip__inner { transform: rotateY(180deg); }
.vc-flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--vc-sp-2); padding: 18px 20px; overflow: hidden; background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.vc-flip__face--back { transform: rotateY(180deg); background: var(--vc-tint); border-color: var(--vc-tint); }
.vc-flip:hover .vc-flip__face { border-color: var(--vc-ink); }
.vc-flip__label { font-size: 14px; line-height: 1.35; font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-flip__face--back .vc-flip__label { color: var(--vc-ink); }
.vc-flip__value { font-size: 26px; line-height: 1.1; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
.vc-flip__text { font-size: var(--vc-fs-sm); line-height: 1.5; }
.vc-flip__hint { font-size: var(--vc-fs-xs); color: var(--vc-text-secondary); text-align: right; }
@media (prefers-reduced-motion: reduce) { .vc-flip__inner { transition: none; } }

/* Guided steps (Quick Compare): a progress bar (an amount: amber on tint), the steps
   (done ones go back), and the step card with its head, body and the buttons. */
.vc-progress { height: 6px; overflow: hidden; background: var(--vc-tint); border-radius: 3px; }
.vc-progress__bar { height: 100%; background: var(--vc-amber); border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .vc-progress__bar { transition: width 0.3s ease; } }
.vc-stepper { display: flex; gap: var(--vc-sp-2); overflow-x: auto; margin: 0; padding: 2px; list-style: none; }
@media (min-width: 601px) { .vc-stepper { flex-wrap: wrap; overflow-x: visible; } } /* phones scroll the strip */
.vc-stepper button { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--vc-line-strong); border-radius: var(--vc-r-md); background: var(--vc-surface); color: var(--vc-text-secondary); font: var(--vc-fw-label) var(--vc-fs-sm)/1.2 var(--vc-font); white-space: nowrap; }
.vc-stepper button.is-done { border-color: var(--vc-ink); color: var(--vc-ink); cursor: pointer; }
.vc-stepper button[aria-current="step"] { border-color: var(--vc-ink); background: var(--vc-ink); color: var(--vc-text-on-ink); }
.vc-wizard { max-width: 640px; margin: 0 auto; }
.vc-card.vc-wizard { padding: 0; }
.vc-wizard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vc-sp-3); padding: 22px 26px 18px; border-bottom: 1px solid var(--vc-line); }
.vc-wizard__head > div { display: flex; flex-direction: column; gap: var(--vc-sp-1); min-width: 0; }
.vc-wizard__head p, .vc-wizard__head h2 { margin: 0; }
.vc-wizard__body { display: flex; flex-direction: column; gap: 22px; padding: 24px 26px; }
.vc-wizard__body > * { margin: 0; }
.vc-wizard__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--vc-sp-3); padding: 16px 26px 22px; border-top: 1px solid var(--vc-line); }
@media (max-width: 600px) { .vc-wizard__head, .vc-wizard__body, .vc-wizard__foot { padding-left: 16px; padding-right: 16px; } }
.vc-btn:disabled { border-color: var(--vc-line-strong); background: var(--vc-tint); color: var(--vc-text-secondary); cursor: default; }

/* ── Homepage (Phase 5) ──────────────────────────────────────────────── */
/* From the "Homepage · Phase 5" board. Live examples: the style guide, "Homepage". */
/* Sections down the page, each under the one before. */
.vc-section { padding-top: var(--vc-sp-10); }
.vc-section > .vc-h2 { margin: 0 0 var(--vc-sp-5); }
@media (max-width: 600px) { .vc-section { padding-top: var(--vc-sp-9); } }
/* Hero: the H1, lead and situation doors beside the example card. The card drops
   under the text once the two no longer fit side by side (520 + 56 + 420 px). */
.vc-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--vc-sp-9); padding-top: var(--vc-sp-10); }
.vc-hero__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-top: var(--vc-sp-4); }
.vc-hero__text > * { margin: 0; }
.vc-hero__text .vc-lead { max-width: 560px; }
.vc-hero__start { display: flex; flex-direction: column; gap: 14px; padding-top: var(--vc-sp-2); }
.vc-hero__start > * { margin: 0; }
.vc-hero > .vc-example { flex: 1 1 420px; }
@media (max-width: 600px) { .vc-hero { gap: var(--vc-sp-8); padding-top: 36px; } .vc-hero__text { padding-top: 0; } }
/* The example card: a worked result. Title and a quiet "Example" label, the
   odometer and its note, chart tubes, meter readings, the inputs behind it and
   one button. */
.vc-example { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 30px; }
@media (max-width: 600px) { .vc-example { padding: 20px 16px; } }
.vc-example > * { margin: 0; }
.vc-example__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-3); }
.vc-example__head > * { margin: 0; }
.vc-example__title { font-size: var(--vc-fs-2xl); line-height: 1.2; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); }
.vc-example__tag { flex: none; font-size: 14px; font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-example__headline { display: flex; flex-direction: column; gap: 6px; }
.vc-example__headline > * { margin: 0; }
.vc-example__sub { font-size: 16px; line-height: 1.45; color: var(--vc-text-secondary); }
.vc-example__readings { display: flex; flex-direction: column; gap: 18px; }
.vc-example__readings > .vc-reading { border-top: 0; padding: 0; }
.vc-example__note { font-size: 14px; line-height: 1.5; color: var(--vc-text-secondary); }
/* Smaller chart tubes for a narrow card: closer together, smaller type. */
.vc-levels--sm { gap: var(--vc-sp-3); }
.vc-levels--sm .vc-levels__col { gap: var(--vc-sp-2); }
.vc-levels--sm .vc-levels__value { font-size: 17px; }
.vc-levels--sm .vc-levels__name { font-size: 14px; line-height: 1.2; font-weight: var(--vc-fw-label); }
/* Two instruments: an intro beside one example of each gauge, under a 2px ink rule. */
.vc-instruments { display: flex; flex-wrap: wrap; gap: var(--vc-sp-8) 64px; border-top: 2px solid var(--vc-ink); padding-top: 28px; }
.vc-instruments__intro { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.vc-instruments__intro > * { margin: 0; }
.vc-instruments__intro .vc-h2 { line-height: 1.1; }
.vc-instruments__intro p { font-size: var(--vc-fs-base); line-height: 1.55; color: var(--vc-text-secondary); }
.vc-instruments__item { flex: 1 1 300px; display: flex; gap: var(--vc-sp-5); align-items: flex-start; }
.vc-instruments__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vc-instruments__body > * { margin: 0; }
.vc-instruments__body p { font-size: 16px; line-height: 1.55; }
/* A dark band's countdown: the chip, the figure and the date it counts to. */
.vc-band__count { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vc-sp-2); }
.vc-band__count > * { margin: 0; }
.vc-band__figure { font-size: 44px; line-height: 1; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
/* On phones a --stack-sm band's button takes the whole width. */
@media (max-width: 600px) { .vc-band--stack-sm > .vc-btn { flex: 1 1 100%; } }
/* Tool rows: each tool a full-width link with its name, the question it answers
   and a › at the end. The question drops under the name when the row is narrow. */
.vc-toolrows { margin: 0; padding: 0; list-style: none; }
.vc-toolrow { display: flex; align-items: center; gap: var(--vc-sp-5); padding: 20px 4px; border-top: 1px solid var(--vc-line); text-decoration: none; color: inherit; }
.vc-toolrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--vc-sp-6); }
.vc-toolrow__name { min-width: 260px; font-size: 22px; line-height: 1.25; font-weight: var(--vc-fw-head); }
.vc-toolrow__question { font-size: var(--vc-fs-base); line-height: 1.45; color: var(--vc-text-secondary); }
.vc-toolrow__go { flex: none; font-size: 22px; line-height: 1; font-weight: var(--vc-fw-head); }
.vc-toolrow:hover .vc-toolrow__name { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .vc-toolrow { padding: 16px 0; } .vc-toolrow__name { min-width: 0; flex-basis: 100%; font-size: 20px; } }
/* Guide cards: a guide's tag, title, blurb and reading time under a 2px ink
   rule, the whole card one link. Three a row when there is room, one when narrow. */
.vc-guidecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--vc-sp-7); }
.vc-guidecard { display: flex; flex-direction: column; gap: var(--vc-sp-2); padding: 20px 0; border-top: 2px solid var(--vc-ink); text-decoration: none; color: inherit; }
.vc-guidecard > * { margin: 0; }
.vc-guidecard__tag { font-size: 14px; font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-guidecard__title { font-size: var(--vc-fs-2xl); line-height: 1.15; font-weight: var(--vc-fw-head); letter-spacing: var(--vc-track-head); }
.vc-guidecard__blurb { font-size: 16px; line-height: 1.5; color: var(--vc-text-secondary); }
.vc-guidecard__time { font-size: 14px; font-weight: var(--vc-fw-label); }
.vc-guidecard:hover .vc-guidecard__title { text-decoration: underline; text-underline-offset: 3px; }
/* More guides: a label, then links in a wrapping line, under a rule. */
.vc-moreguides { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: var(--vc-sp-2); padding-top: 18px; border-top: 1px solid var(--vc-line); font-size: 16px; line-height: 1.45; }
.vc-moreguides__label { font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-label); color: var(--vc-text-secondary); }
.vc-moreguides__all { font-weight: var(--vc-fw-head); }
/* Columns with no rule over them (the trust points). */
.vc-cols--plain { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--vc-sp-7); }
.vc-cols--plain .vc-cols__item { border-top: 0; padding: 0; gap: var(--vc-sp-2); }
.vc-cols--plain .vc-cols__title { font-size: 22px; }
.vc-cols--plain .vc-cols__text { color: var(--vc-text-secondary); }

/* ── Guides hub (Phase 5) ────────────────────────────────────────────── */
/* From the "Guides hub · Phase 5" board. Live examples: the style guide, "Guides hub". */
/* Page head: the H1 and lead, no wider than 760 px. */
.vc-pagehead { display: flex; flex-direction: column; gap: 18px; max-width: 760px; padding-top: var(--vc-sp-9); }
.vc-pagehead > * { margin: 0; }
.vc-pagehead .vc-display { font-size: clamp(44px, 5vw, 64px); line-height: 1.02; }
.vc-pagehead .vc-lead { max-width: none; line-height: 1.55; }
@media (max-width: 600px) { .vc-pagehead { padding-top: 36px; } }
/* A filter: a .vc-seg row under the page head that shows one group at a time. */
.vc-filter { padding-top: 28px; }
/* A group of guides: its H2, then its cards. */
.vc-hubgroup { padding-top: var(--vc-sp-8); }
.vc-hubgroup > .vc-h2 { margin: 0 0 var(--vc-sp-3); }
/* Hub guide cards: three a row from 900 px, two from 601 px, one on phones. A
   group's "Start here" card (--start) spans two columns, with a larger title. */
.vc-guidecards--hub { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 601px) {
  .vc-guidecards--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-guidecards--hub > .vc-guidecard--start { grid-column: span 2; }
}
@media (min-width: 900px) { .vc-guidecards--hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vc-guidecard--start .vc-guidecard__title { font-size: 30px; }
.vc-guidecard--start .vc-guidecard__blurb { max-width: 34em; }

/* Print and PDF: the summary table prints; the inputs, toolbar, notices, header,
   footer and feedback button don't. */
.vc-print-only { display: none; }
@media print {
  .no-print, .vc-header, .vc-footer, .vc-fb-fab, .vc-fb, .vc-fb-backdrop, .vc-app__inputs, .vc-app__open { display: none !important; }
  .vc-print-only { display: block !important; }
  .vc-page { background: #FFFFFF; }
}