/* ═══ Calculator pages: type and surface pass (Oct 2026) ═══

   Peter, 15 Oct 2026: the calculators "feel kind of old ... mostly to do with
   the fonts", and the navy hero was "a bit too old looking". The cashflow
   calculator was restyled first and approved; this file carries that look to
   every standalone calculator page under public/ (the 17 "...-calculator"
   folders). Never write a slash-star path in this comment: it closes it.

   One typeface, Inter, self-hosted like the rest of the site. Larger, calmer
   type: 15px rows, sentence-case labels with no tracking, one tight-set
   heading size per card. Flat surfaces: hairlines and one soft shadow, no
   gradient caps or gradient buttons. The page is light from the header down;
   dark is kept only where it's the answer (the net row, the CTA, the footer)
   and uses the homepage tiles' lit dark, never a flat navy wall.

   Load this AFTER the page's own <style> blocks so order wins most fights.
   !important is used only where a page sets the same thing inline or with
   its own !important. Page-specific rules stay in each page's own block. */

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

:root{
  --navy:#1a2332; --navy-soft:#243044; --dark:#111820;
  --dark-lit:radial-gradient(120% 85% at 0% 0%, #243149 0%, rgba(36,49,73,0) 58%), #111820;
  --gold:#d4912a; --gold-hot:#e6a63a; --gold-ink:#9a6414;
  --ink:#1a2332; --text:#2d3436; --text-2:#4f5a60; --muted:#8a94a0;
  --line:#e8e4df; --line-soft:#f0ede8; --line-input:#dcd7cf; --cream:#faf9f6; --sand:#efece6;
  --green:#1f8f52; --green-soft:rgba(31,143,82,0.06);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --calc-max:1100px;
}

/* ── base ── */
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--font) !important; background:var(--cream) !important; color:var(--text) !important; font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,button,input,select,textarea,.header-title,.card-header,.hero-title,.section-title,.breakdown-header,.faq-heading,.faq-q,.panel-title,.card-head h2 { font-family:var(--font) !important; }
h2,h3,.section-title,.faq-heading,.panel-title,.card-head h2 { color:var(--ink); letter-spacing:-0.02em; font-weight:700; }
a { color:var(--gold-ink); }

/* ── the thin top bar is gone; the way back lives in the header ── */
.ape-topbar, .topbar, .nav-bar { display:none !important; }

/* ── header: one slim dark band, logo and a way back ── */
.header, .ape-pagehead { background:var(--dark) !important; padding:14px 24px !important; display:flex; align-items:center; justify-content:space-between; position:sticky !important; top:0; z-index:100; box-shadow:none !important; border:0 !important; }
.header-logo img, .ape-pagehead img { height:36px !important; width:auto; display:block; }
.header-title, .header-subtitle, .header-sub, .header-right > :not(.ape-back) { display:none !important; }
a.ape-back { color:rgba(255,255,255,0.72) !important; text-decoration:none; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:color .2s; }
a.ape-back:hover { color:#fff !important; }

/* ── hero: cream, ink, no wall ── */
.lt-hero, .hero, .ape-hero { background:var(--cream) !important; background-image:none !important; color:var(--text) !important; padding:48px 24px 18px !important; position:relative; box-shadow:none !important; }
.hero::before, .hero::after { content:none !important; display:none !important; }
.lt-hero-inner, .hero-inner, .ape-hero-inner { max-width:var(--calc-max) !important; margin:0 auto !important; padding:0 !important; }
.hero-eyebrow { display:none !important; }
.lt-hero .seo-h1, .seo-h1, .hero h1, .hero-title, .ape-hero-h1 { font-family:var(--font) !important; font-size:clamp(2.1rem,4.6vw,2.85rem) !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.08 !important; letter-spacing:-0.03em !important; margin:0 0 16px !important; text-wrap:balance; max-width:22ch; }
.lt-hero .seo-h1 span, .seo-h1 span, .hero h1 span, .hero-title span, .ape-hero-h1 span { color:inherit !important; font-weight:inherit !important; font-size:inherit !important; font-style:normal !important; background:none !important; display:inline !important; padding:0 !important; }
.lt-hero .seo-intro, .seo-intro, .hero p, .hero-sub, .ape-hero-sub { font-size:16.5px !important; color:var(--text-2) !important; line-height:1.6 !important; max-width:580px !important; margin:0 0 22px !important; text-wrap:pretty; font-weight:400 !important; }
.hero-note { font-size:13.5px !important; color:var(--muted) !important; margin:0 0 18px !important; max-width:580px; line-height:1.55 !important; }
.lt-hero-badges, .hero-chips, .ape-hero-badges { display:flex !important; flex-wrap:wrap; gap:6px 22px !important; margin:0 !important; padding:0; list-style:none; }
.lt-hero-badges span, .hero-chips .chip, .ape-hero-badges span { font-size:13.5px !important; font-weight:500 !important; color:var(--text-2) !important; background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; letter-spacing:0 !important; display:inline-flex !important; align-items:center; gap:9px; text-transform:none !important; }
.lt-hero-badges span::before, .hero-chips .chip::before, .ape-hero-badges span::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
.lt-hero a, .hero a { color:var(--gold-ink) !important; font-weight:600; text-decoration:none; }

/* ── page body ── */
.container { padding-top:20px !important; }

/* cards: white, one hairline, one soft shadow */
.input-panel, .comparison-table-wrap, .breakdown-card, .notes-card, .chart-wrap, .card, .panel, .results-card, .ape-card, .nt-message {
  background:#fff !important; border-radius:16px !important; border:1px solid var(--line) !important; box-shadow:0 1px 2px rgba(26,35,50,0.03) !important; }
.card-hover:hover { box-shadow:0 1px 2px rgba(26,35,50,0.03) !important; transform:none !important; }
.input-panel, .panel, .notes-card, .card-body, .ape-card { padding:28px !important; }
.ape-card { margin-bottom:16px; }
.card-header, .card-head, .breakdown-header, .section-title, .panel-title, .ape-card-h {
  background:none !important; color:var(--ink) !important; font-size:20px !important; font-weight:700 !important; letter-spacing:-0.02em !important; line-height:1.25 !important; text-transform:none !important; border:0 !important; }
.card-header, .card-head { padding:24px 28px 0 !important; display:flex; align-items:center; gap:10px; }
.card-head h2 { font-size:20px !important; margin:0 !important; }
.card-head-dot { display:none !important; }
.breakdown-header { padding:24px 28px 6px !important; border-radius:16px 16px 0 0 !important; }
.breakdown-body { padding:12px 28px 24px !important; }
.section-title { margin:28px 0 14px !important; }
.panel-sub, .card-sub, .ape-card-sub { font-size:13.5px !important; color:var(--muted) !important; margin:4px 0 18px !important; }

/* labels: sentence case, no tracking, readable size */
label, .q-label, .field label, .metric-label, .m-lbl, .state-info-label, .section-label, .ape-fld-lbl, .verdict-eyebrow, .panel-sub .lbl {
  text-transform:none !important; letter-spacing:0 !important; }
label, .field label, .q-label, .ape-fld-lbl { font-size:13.5px !important; font-weight:500 !important; color:var(--text-2) !important; margin-bottom:7px !important; line-height:1.4; }
.section-label { font-size:12.5px !important; font-weight:600 !important; color:var(--muted) !important; border-bottom:1px solid var(--line-soft) !important; padding-bottom:8px !important; }
.hint, .help, .fld-help, .ape-fld-help, .input-help, .field-help, .chart-note, .chart-subtitle { font-size:12.5px !important; color:var(--muted) !important; line-height:1.45 !important; }

/* the ? tip: quiet grey dot, gold on hover */
label .tip, .tip, .ape-tip-i { width:15px !important; height:15px !important; line-height:15px !important; font-size:9.5px !important; background:rgba(26,35,50,0.06) !important; color:var(--text-2) !important; border:0 !important; font-weight:600 !important; border-radius:50% !important; }
label .tip:hover, .tip:hover, .ape-tip-i:hover { background:rgba(212,145,42,0.18) !important; color:var(--gold-ink) !important; }
label .tip:hover::after, .tip:hover::after { font-family:var(--font); font-size:13px !important; border-radius:10px !important; background:var(--ink) !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important; line-height:1.5 !important; }
#tipbox { background:var(--ink) !important; font-size:13px !important; border-radius:10px !important; font-family:var(--font); }

/* inputs */
select, input[type="text"], input[type="number"], input[type="tel"], .box, .input-wrap input, .input-wrap select, .ape-fld-wrap, .ape-fld-sel, .ape-slider-val {
  font-family:var(--font) !important; font-size:15.5px !important; font-weight:500 !important; color:var(--ink) !important; background-color:#fff !important;
  border:1px solid var(--line-input) !important; border-radius:10px !important; font-variant-numeric:tabular-nums; transition:border-color .15s, box-shadow .15s; }
select:hover, input[type="text"]:hover, input[type="number"]:hover, .box:hover, .ape-fld-wrap:hover { border-color:#c9c2b7 !important; }
select:focus, input[type="text"]:focus, input[type="number"]:focus, .box:focus, .ape-fld-wrap:focus-within, .ape-slider-val:focus {
  outline:none !important; border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(212,145,42,0.14) !important; }
.input-prefix::before, .ape-fld-pre { color:var(--muted) !important; font-size:15px !important; font-weight:500; }
.input-suffix, .ape-fld-suf { color:var(--muted) !important; font-size:13.5px !important; }
/* iOS zooms the page when a focused field is under 16px */
@media (max-width:768px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea, .ape-fld-sel, .ape-fld-inp, .ape-fld-wrap, .box, .ape-slider-val, #ape-calc .ape-fld-sel, #ape-calc .ape-fld-inp { font-size:16px !important; }
}

/* sliders */
input[type=range] { height:6px !important; border-radius:3px !important; background:#e9e5dd !important; }
input[type=range]::-webkit-slider-thumb { width:20px !important; height:20px !important; background:#fff !important; border:2px solid var(--gold) !important; box-shadow:0 1px 4px rgba(26,35,50,0.18) !important; }
input[type=range]::-moz-range-thumb { width:20px !important; height:20px !important; background:#fff !important; border:2px solid var(--gold) !important; box-shadow:0 1px 4px rgba(26,35,50,0.18) !important; }
.ape-slider-bg { height:6px; border-radius:3px; background:#e9e5dd; }
.ape-slider-fill { background:var(--gold); border-radius:3px; }
.ape-slider-thb { width:20px; height:20px; border:2px solid var(--gold); background:#fff; box-shadow:0 1px 4px rgba(26,35,50,0.18); }

/* toggles and segments: the active state is ink, never a gradient */
.toggle input:checked + .toggle-slider { background:var(--dark) !important; }
.toggle-label { font-size:14px !important; color:var(--text) !important; }
.chipbtn, .tab-btn, .ape-seg button, .seg button, .ape-tab { font-family:var(--font) !important; font-weight:500 !important; }
.chipbtn { font-size:14px !important; color:var(--text-2) !important; border:1px solid var(--line-input) !important; border-radius:10px !important; background:#fff !important; }
.chipbtn:hover { border-color:#c9c2b7 !important; }
.chipbtn.active { background:var(--dark) !important; border-color:var(--dark) !important; color:#fff !important; font-weight:600 !important; }
.ape-seg { border:1px solid var(--line-input); border-radius:10px; overflow:hidden; display:flex; }
.ape-seg button { flex:1; padding:11px 16px; font-size:14px; border:none; cursor:pointer; transition:background .18s, color .18s; background:#fff; color:var(--text-2); }
.ape-seg button + button { border-left:1px solid var(--line-input); }
.ape-seg button.on { background:var(--dark); color:#fff; font-weight:600; }

/* tabs: a quiet segmented control */
.ape-tab-bar, .tab-bar, .tabs-nav { display:flex; gap:4px; background:var(--sand) !important; border-radius:12px !important; padding:4px !important; margin-bottom:16px; border:0 !important; box-shadow:none !important; }
.ape-card.ape-tab-bar { background:var(--sand) !important; border:0 !important; box-shadow:none !important; padding:4px !important; }
.ape-tab, .tab-btn { flex:1; padding:10px 8px !important; border:none !important; border-radius:9px !important; font-size:14px !important; cursor:pointer; transition:background .18s, color .18s, box-shadow .18s; white-space:nowrap; background:transparent !important; color:var(--text-2) !important; letter-spacing:-0.005em; }
.ape-tab:hover, .tab-btn:hover { color:var(--ink) !important; }
.ape-tab.on, .tab-btn.active { background:#fff !important; color:var(--ink) !important; font-weight:600 !important; box-shadow:0 1px 2px rgba(26,35,50,0.08), 0 0 0 1px rgba(26,35,50,0.05) !important; }

/* tables: 15px rows, sentence-case column heads, ink totals */
table { font-family:var(--font); }
.comparison-table, .breakdown-table, .results-table, .data-table, table.tbl { font-size:15px !important; }
.comparison-table th, .breakdown-table th, .results-table th, .data-table th, thead th {
  font-size:12.5px !important; font-weight:500 !important; color:var(--muted) !important; text-transform:none !important; letter-spacing:0 !important; background:none !important; border-bottom:1px solid var(--line) !important; padding:0 14px 10px !important; }
.comparison-table td, .breakdown-table td, .results-table td, .data-table td { padding:11px 14px !important; border-bottom:1px solid var(--line-soft) !important; font-size:15px !important; color:var(--text); }
.comparison-table td.num, .breakdown-table td.num, td.tax-amount, td.amount, td.val { font-variant-numeric:tabular-nums; }
.comparison-table tr:last-child td, .breakdown-table tr:last-child td { border-bottom:0 !important; }
.comparison-table .entity-label, td.lbl, td strong { color:var(--ink) !important; font-weight:600 !important; }
.tax-amount { font-weight:600 !important; color:var(--ink) !important; }
.tax-amount.zero, .pos, .metric-green, .green { color:var(--green) !important; }
.tax-amount.payable { color:var(--ink) !important; }
.tax-effective-rate { font-size:12.5px !important; color:var(--muted) !important; }
.breakdown-table .total-row td, tr.total td, .total-row td { border-top:1px solid var(--ink) !important; font-weight:600 !important; color:var(--ink) !important; font-size:15.5px !important; padding-top:14px !important; }
.breakdown-table .total-row .tax-amount { font-size:17px !important; }
.lowest-badge, .highest-badge, .badge { font-size:11.5px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; border-radius:6px !important; padding:3px 8px !important; }
.lowest-badge { background:var(--green-soft) !important; color:var(--green) !important; }
.highest-badge { background:rgba(212,145,42,0.10) !important; color:var(--gold-ink) !important; }
.scroll-hint { font-size:12px !important; color:var(--muted) !important; }

/* metric tiles: one white card, hairline cells, big tabular figures */
.metrics-bar, .metrics-row, .ape-metrics { background:#fff !important; background-image:none !important; border:1px solid var(--line) !important; border-radius:16px !important; box-shadow:0 10px 30px -14px rgba(26,35,50,0.16) !important; color:var(--text) !important; }
.metrics-bar::before, .metrics-bar::after { content:none !important; }
.metric-item, .metric-cell, .m-tile { text-align:left !important; padding:18px 16px 16px !important; border-right:0 !important; border-left:1px solid var(--line-soft); min-width:0; }
.metric-item:first-child, .metric-cell:first-child, .m-tile:first-child { border-left:0; }
.metric-label, .m-lbl { font-size:12.5px !important; font-weight:500 !important; color:var(--muted) !important; margin-bottom:6px !important; }
.metric-value, .m-val { font-size:clamp(22px,2.4vw,27px) !important; font-weight:700 !important; letter-spacing:-0.025em !important; line-height:1 !important; color:var(--ink) !important; font-variant-numeric:tabular-nums; }
.metric-sub, .m-sub { font-size:12px !important; color:var(--muted) !important; margin-top:6px !important; line-height:1.3; }
.metric-white { color:var(--ink) !important; }
.metric-orange { color:var(--gold) !important; }
.metric-green { color:var(--green) !important; }
.metric-value.green { color:var(--green) !important; }
.metric-value.orange, .metric-value.neg { color:var(--gold) !important; }

/* the sticky figures sit under the 64px header */
.ape-metrics-wrap { position:sticky; top:64px; z-index:50; margin:0 -16px 20px !important; padding:0 16px 8px !important; background:transparent !important; border-radius:0 !important; transition:background .2s, box-shadow .2s; }
.ape-metrics-wrap.stuck { background:var(--cream) !important; box-shadow:0 10px 24px -14px rgba(26,35,50,0.25); padding-top:8px !important; }
.ape-metrics { display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; }
#m-addr { font-size:13.5px; font-weight:500; color:var(--text-2); padding:10px 0 0; text-align:center; }

/* the one dark surface: the answer. Lit from the top-left like the homepage tiles. */
.verdict, .ape-rrow.hl, .ape-cta, .cta-card, .cta-block, .answer, .result-hero, .verdict-card, .insight {
  background:var(--dark-lit) !important; color:#fff !important; border-radius:16px !important; border:0 !important; box-shadow:none !important; }
/* small facts strip (assessment date, surcharge): a quiet panel, not a dark band */
.state-info { background:var(--sand) !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:12px !important; padding:14px 20px !important; font-size:14px !important; gap:8px 28px !important; }
.state-info-label { font-size:12.5px !important; color:var(--muted) !important; opacity:1 !important; }
.state-info-value { font-weight:600 !important; color:var(--ink) !important; font-variant-numeric:tabular-nums; }
.verdict { padding:28px 28px !important; }
.verdict-eyebrow { font-size:12.5px !important; font-weight:500 !important; color:rgba(255,255,255,0.55) !important; margin-bottom:8px !important; }
.verdict-line { font-size:20px !important; font-weight:600 !important; line-height:1.4 !important; letter-spacing:-0.015em; }
.verdict-line b { color:var(--gold-hot) !important; font-weight:700; }
.verdict-sub { font-size:14.5px !important; color:rgba(255,255,255,0.62) !important; line-height:1.6 !important; }
.cta-card, .cta-block, .ape-cta { padding:32px 28px !important; text-align:center; margin:16px 0 !important; }
.cta-card h3, .cta-block h3, .ape-cta h3 { font-size:20px !important; font-weight:700 !important; color:#fff !important; margin:0 0 6px !important; letter-spacing:-0.02em; }
.cta-card p, .cta-block p, .ape-cta p { font-size:14.5px !important; color:rgba(255,255,255,0.62) !important; margin:0 auto 20px !important; }
/* the "Email me this report" card that tool-report.js injects at the foot of every calculator */
.ape-report__card { background:#fff !important; border:1px solid var(--line) !important; border-radius:16px !important; padding:18px 24px !important; font-family:var(--font); box-shadow:0 1px 2px rgba(26,35,50,0.03); }
.ape-report__card-copy { font-family:var(--font) !important; font-size:15px !important; font-weight:600 !important; color:var(--ink) !important; }
.ape-report__card-btn { font-family:var(--font) !important; font-size:14.5px !important; font-weight:600 !important; border-radius:10px !important; padding:11px 18px !important; }
.ape-report__panel, .ape-report__title, .ape-report__sub, .ape-report__label, .ape-report__input, .ape-report__submit, .ape-report__fine, .ape-report__done { font-family:var(--font) !important; }
.ape-report__label { font-size:13px !important; font-weight:500 !important; color:var(--text-2) !important; }
.ape-report__input { border-radius:10px !important; border-color:var(--line-input) !important; }
.ape-report__submit { border-radius:10px !important; font-weight:600 !important; }
@media (max-width:640px) { .ape-report__card { margin-left:16px !important; margin-right:16px !important; } }

/* buttons: solid gold answer button, dark secondary, hairline reset. No gradients, no lift. */
.btn, .cta-btn, .btn-cta, .ape-share-btn, .ape-cta-btn, button.primary, .btn-primary {
  font-family:var(--font) !important; font-size:14.5px !important; font-weight:600 !important; border-radius:10px !important; padding:12px 20px !important; min-height:0 !important;
  background:var(--gold) !important; background-image:none !important; color:#fff !important; border:0 !important; box-shadow:none !important; transition:background .18s !important; transform:none !important; letter-spacing:0 !important; text-transform:none !important; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.btn:hover, .cta-btn:hover, .btn-cta:hover, .ape-share-btn:hover, .ape-cta-btn:hover, .btn-primary:hover { background:#c07f1e !important; transform:none !important; box-shadow:none !important; }
.ape-share-btn.navy, .btn.navy, .btn-dark { background:var(--dark) !important; }
.ape-share-btn.navy:hover, .btn.navy:hover, .btn-dark:hover { background:var(--navy-soft) !important; }
.ape-share-btn.copied { background:var(--green) !important; }
.btn-outline, .ape-reset, .btn.secondary, .btn-ghost { background:#fff !important; color:var(--text-2) !important; border:1px solid var(--line-input) !important; font-weight:500 !important; }
.btn-outline:hover, .ape-reset:hover, .btn.secondary:hover, .btn-ghost:hover { background:#fff !important; border-color:var(--ink) !important; color:var(--ink) !important; }
.actions-bar, .ape-actions { gap:8px !important; }

/* notes and callouts: soft tints and a hairline, no coloured left bars */
.disclaimer, .note, .callout, .ape-callout, .nt-message, #ape-carry-note {
  border-radius:12px !important; border:1px solid rgba(212,145,42,0.28) !important; border-left-width:1px !important; background:rgba(212,145,42,0.07) !important;
  font-size:14px !important; line-height:1.55 !important; color:var(--text-2) !important; padding:14px 16px !important; }
.disclaimer strong, .callout strong, .ape-callout strong.gold { color:var(--gold-ink) !important; }
.ape-callout.green, .callout.green { background:var(--green-soft) !important; border-color:rgba(31,143,82,0.25) !important; }
.ape-callout strong.green { color:var(--green); }
.ape-callout a, .disclaimer a, .callout a { color:var(--gold-ink) !important; font-weight:600; text-decoration:none; }
.notes-card .note-item { font-size:14.5px !important; color:var(--text-2) !important; line-height:1.55 !important; }
.note-bullet { color:var(--gold) !important; }
.ape-panel { background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:8px; }
.ape-panel-lbl { font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:12px; letter-spacing:0; }
.ape-panel-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:14px; color:var(--text-2); }
.ape-panel-row strong { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.ape-chip { padding:6px 11px; border-radius:8px; font-size:12.5px; font-weight:500; color:var(--muted); border:1px solid transparent; transition:all .2s; font-variant-numeric:tabular-nums; }
.ape-chip.on { background:rgba(212,145,42,0.10); color:var(--gold-ink); border-color:rgba(212,145,42,0.3); font-weight:600; }
.ape-chip span { font-weight:400; opacity:.85; }

/* the cashflow-style results rows (negative gearing, rental yield, cashflow) */
.ape-col-heads { display:grid; grid-template-columns:1.9fr repeat(3,1fr); padding:0 14px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.ape-col-heads span { font-size:12.5px; font-weight:500; color:var(--muted); text-align:right; }
.ape-sec-lbl { padding:14px 14px 6px; font-size:12.5px; font-weight:600; color:var(--muted); }
.ape-rrow { display:grid; grid-template-columns:1.9fr repeat(3,1fr); column-gap:8px; font-size:15px; padding:8px 14px; color:var(--text); align-items:baseline; line-height:1.4; }
.ape-rrow span + span { font-variant-numeric:tabular-nums; }
.ape-rrow span + span { text-align:right; }
.ape-rrow.sub { padding-left:28px; color:var(--text-2); }
.ape-rrow > span:first-child { padding-right:12px; }
.ape-rrow.dim { color:var(--muted); font-size:13.5px; }
.ape-rrow.b { font-weight:600; color:var(--ink); padding:10px 14px; }
.ape-rrow.pos { color:var(--green); }
.ape-rrow.hl { padding:16px 16px !important; margin:12px 0 4px; font-size:16px; border-radius:12px !important; }
.ape-rrow.hl.pos span + span { color:#5fd48f; }
.ape-rrow.hl.neg span + span { color:var(--gold-hot); }
.ape-rrow.hl .ape-tip-i { background:rgba(255,255,255,0.14) !important; color:#fff !important; }
.ape-rule { height:1px; background:var(--line); margin:4px 0; }
.ape-trans { padding:8px 16px 2px; font-size:13.5px; color:var(--muted); }
.ape-trans strong.pos { color:var(--green); }
.ape-trans strong.neg { color:var(--gold-ink); }
.ape-actions { padding:16px 0 0; display:flex; justify-content:flex-end; flex-wrap:wrap; }
.ape-sum-row { font-size:14.5px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.ape-sum-row span { color:var(--text-2); }
.ape-sum-row strong { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
#summary-body { font-size:14.5px; }
.ape-cta-btn { padding:13px 26px !important; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.ape-reset { font-size:13px !important; padding:7px 16px !important; border-radius:9px !important; cursor:pointer; }
.ape-note { font-size:13.5px; color:var(--muted); }
.ape-check { font-size:14.5px; color:var(--text); }

/* cashflow-family inputs */
#ape-calc .ape-fld-lbl span { color:var(--muted) !important; }
#ape-calc .ape-fld-inp, #ape-calc .ape-fld-sel { font-size:15.5px; font-weight:500; color:var(--ink); padding:11px 14px; font-variant-numeric:tabular-nums; }
#ape-calc .ape-fld-inp, #ape-calc .ape-fld-wrap .ape-fld-sel { border:0 !important; box-shadow:none !important; }
#ape-calc .ape-fld { margin-bottom:18px; }
#ape-calc .ape-slider { margin-bottom:22px; }
#ape-calc .ape-slider-lbl { font-size:14.5px; font-weight:500; color:var(--text); }
#ape-calc .ape-slider-val { font-size:17px !important; font-weight:600 !important; border-radius:9px !important; padding:5px 11px; letter-spacing:-0.01em; }
#ape-calc .ape-tip-t { font-size:13px; border-radius:10px; }

/* FAQ and the written section */
.faq-section { max-width:720px !important; margin:0 auto !important; padding:48px 16px 8px !important; }
.ape-card .faq-section, .card .faq-section { padding:0 !important; }
.faq-heading { font-size:26px !important; font-weight:700 !important; letter-spacing:-0.025em !important; margin:0 0 8px !important; color:var(--ink) !important; }
.faq-item { border-bottom:1px solid var(--line) !important; background:none !important; box-shadow:none !important; border-radius:0 !important; }
.faq-q { font-size:16px !important; font-weight:600 !important; color:var(--ink) !important; padding:18px 0 !important; line-height:1.4; letter-spacing:-0.01em; background:none !important; }
.faq-q::after { color:var(--gold) !important; font-size:22px !important; font-weight:300 !important; }
.faq-a p { font-size:15px !important; line-height:1.65 !important; color:var(--text-2) !important; }
/* pages cap an open answer at 600px; the larger type outgrows it */
.faq-item.open .faq-a, .faq-item[open] .faq-a, details[open] .faq-a { max-height:4000px !important; }
.faq-a a { color:var(--gold-ink) !important; }
.seo-static, .seo-section, .edu-section { max-width:720px !important; margin:0 auto !important; padding:40px 16px 64px !important; color:var(--text-2) !important; line-height:1.65 !important; font-family:var(--font) !important; }
.seo-static > h2, .seo-section > h2, .edu-section > h2, .seo-static h2:not(summary h2) { font-size:26px !important; letter-spacing:-0.025em !important; margin:0 0 14px !important; color:var(--ink) !important; font-weight:700 !important; }
.seo-static h3, .seo-section h3, .edu-section h3 { font-size:18px !important; letter-spacing:-0.015em !important; margin:24px 0 8px !important; color:var(--ink) !important; line-height:1.3 !important; }
.seo-static h2, .seo-section h2, .edu-section h2, .faq-heading, .faq-q { line-height:1.25 !important; }
.seo-static summary h2 { line-height:1.35 !important; }
.seo-static p, .seo-section p, .edu-section p, .seo-static li, .edu-section li { font-size:15.5px !important; color:var(--text-2) !important; margin:0 0 14px !important; line-height:1.65 !important; }
.seo-static a, .seo-section a, .edu-section a { color:var(--gold-ink) !important; }
.seo-static details { border-bottom:1px solid var(--line); }
.seo-static summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:18px 0; }
.seo-static summary::-webkit-details-marker { display:none; }
.seo-static summary h2 { margin:0 !important; font-size:16.5px !important; font-weight:600 !important; letter-spacing:-0.01em !important; color:var(--ink) !important; }
.seo-static summary::after { content:'+'; font-size:22px; font-weight:300; color:var(--gold); margin-left:12px; flex-shrink:0; }
.seo-static details[open] summary::after { content:'\2212'; }
.seo-static details > div { padding:0 0 16px; }
.seo-static table, .edu-section table { font-size:14.5px !important; }

/* footer */
.site-footer, #ape-footer footer, footer[role="contentinfo"] { background:var(--dark) !important; padding:32px 24px !important; color:rgba(255,255,255,0.55) !important; font-family:var(--font) !important; }
.footer-brand, #ape-footer .f-brand { font-size:14px !important; font-weight:600 !important; color:#fff !important; margin-bottom:8px !important; }
.footer-meta, #ape-footer .f-basis { font-size:12.5px !important; color:rgba(255,255,255,0.55) !important; margin-bottom:12px !important; max-width:640px; margin-left:auto; margin-right:auto; line-height:1.55; }
.footer-disclaimer, #ape-footer p { font-size:12px !important; line-height:1.6 !important; max-width:600px; margin:0 auto; color:rgba(255,255,255,0.42) !important; }
footer a { color:rgba(255,255,255,0.72) !important; }

/* focus */
select:focus-visible, input:focus-visible, .btn:focus-visible, button:focus-visible { outline:2px solid var(--gold) !important; outline-offset:2px; }

@media print {
  .lt-hero, .hero, .ape-hero, .ape-pagehead, .ape-topbar, .topbar, .nav-bar, .ape-report__card, a.ape-back { display:none !important; }
  /* the slim header keeps the logo on the printout (the ape-* pages print their own report header) */
  .header { display:flex !important; position:static !important; background:var(--dark) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* the lit dark surfaces print white with a hairline; toner is not the answer.
     "html body" outranks the page blocks, which set these colours with !important after this file loads */
  html body .verdict, html body .ape-rrow.hl, html body .ape-cta, html body .cta, html body .cta-card, html body .cta-block, html body .answer, html body .result-hero, html body .verdict-card, html body .insight, html body .insight-box, html body .metrics-bar, html body .delta-box, html body .total-block, html body .pg-answer, html body #verdict, html body .mobile-sticky, html body div.footer, html body .footer { background:#fff !important; background-image:none !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
  html body .verdict *, html body .ape-rrow.hl *, html body .ape-cta *, html body .cta *, html body .cta-card *, html body .cta-block *, html body .answer *, html body .result-hero *, html body .insight *, html body .insight-box *, html body .metrics-bar *, html body .delta-box *, html body .total-block *, html body .pg-answer *, html body #verdict *, html body div.footer *, html body .footer *,
  html body .metrics-bar .metric-label, html body .metrics-bar .metric-value, html body .metrics-bar .metric-white, html body .metrics-bar .metric-sub, html body .metrics-bar .metric-item,
  html body .cta-card p.cta-title, html body .cta-card p.cta-sub, html body .cta h3, html body .cta p,
  html body .answer-eyebrow, html body .answer-because, html body .answer-close, html body .total-label, html body .total-sub, html body .total-context, html body .insight-label, html body .delta-label, html body .insight-text, html body .delta-text, html body .footer-brand, html body .footer-note { color:var(--ink) !important; }
  html body .metrics-bar .metric-item { border-left-color:var(--line) !important; border-top-color:var(--line) !important; }
  html body .cta a, html body .cta-card a, html body .cta-block a, html body .ape-cta a { color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .chipbtn.active, .ape-seg button.on, .cb-primary { background:#fff !important; color:var(--ink) !important; border:1px solid var(--ink) !important; }
  html body .site-footer, html body #ape-footer footer, html body footer[role="contentinfo"] { background:#fff !important; color:var(--text-2) !important; border-top:1px solid var(--line); }
  html body .site-footer *, html body #ape-footer footer *, html body footer[role="contentinfo"] *, html body footer[role="contentinfo"] > div > div:nth-child(2), html body footer[role="contentinfo"] > div > p { color:var(--text-2) !important; }
}

/* phones */
@media (max-width:640px) {
  .header, .ape-pagehead { padding:12px 18px !important; }
  .header-logo img, .ape-pagehead img { height:30px !important; }
  .lt-hero, .hero, .ape-hero { padding:32px 20px 12px !important; }
  .lt-hero .seo-h1, .seo-h1, .hero h1, .hero-title, .ape-hero-h1 { font-size:2rem !important; }
  .lt-hero .seo-intro, .seo-intro, .hero p, .hero-sub, .ape-hero-sub { font-size:15.5px !important; }
  .lt-hero-badges, .hero-chips, .ape-hero-badges { gap:6px 16px !important; }
  .lt-hero-badges span, .hero-chips .chip, .ape-hero-badges span { font-size:13px !important; }
  .input-panel, .panel, .notes-card, .card-body, .ape-card { padding:22px 18px !important; }
  .card-header, .card-head { padding:20px 18px 0 !important; }
  .breakdown-header { padding:20px 18px 4px !important; }
  .breakdown-body { padding:10px 18px 20px !important; }
  .input-panel, .comparison-table-wrap, .breakdown-card, .notes-card, .chart-wrap, .card, .panel, .results-card, .ape-card { border-radius:14px !important; }
  .ape-metrics, .metrics-grid, .metrics-row { grid-template-columns:1fr 1fr !important; }
  .m-tile, .metric-item, .metric-cell { padding:14px 14px 13px !important; }
  .m-tile:nth-child(3), .metric-item:nth-child(3), .metric-cell:nth-child(3) { border-left:0; }
  .m-tile:nth-child(n+3), .metric-item:nth-child(n+3), .metric-cell:nth-child(n+3) { border-top:1px solid var(--line-soft); }
  .m-val, .metric-value { font-size:22px !important; }
  .ape-tab-bar button, .tab-btn { font-size:13px !important; padding:9px 4px !important; white-space:normal !important; line-height:1.25 !important; min-width:0; }
  .ape-metrics-wrap { top:54px; }
  .ape-rrow { font-size:14px; padding:8px 10px; grid-template-columns:1.3fr repeat(3,1fr); column-gap:6px; }
  .ape-rrow span + span { white-space:nowrap; }
  .ape-rrow.sub { padding-left:20px; }
  .ape-rrow.hl { font-size:15px; padding:14px 12px !important; }
  .ape-col-heads, .ape-sec-lbl { padding-left:10px; padding-right:10px; }
  #summary-body { grid-template-columns:1fr !important; }
  .ape-actions { justify-content:stretch; }
  .ape-actions .ape-share-btn { flex:1 1 45%; justify-content:center; }
  .comparison-table th, .comparison-table td, .breakdown-table th, .breakdown-table td { padding:9px 10px !important; font-size:14px !important; }
  .faq-section { padding-top:36px !important; }
  .faq-heading, .seo-static > h2, .seo-section > h2, .edu-section > h2 { font-size:23px !important; }
  .verdict { padding:22px 20px !important; }
  .verdict-line { font-size:18px !important; }
  .cta-card, .cta-block, .ape-cta { padding:26px 20px !important; }
  .site-footer, #ape-footer footer, footer[role="contentinfo"] { padding:26px 18px !important; }
}

/* four or more tabs cannot share a phone-width bar: two rows of two */
@media (max-width:430px) {
  .ape-tab-bar:has(> :nth-child(4)), .tab-bar:has(> :nth-child(4)) { flex-wrap:wrap; }
  .ape-tab-bar:has(> :nth-child(4)) .ape-tab, .tab-bar:has(> :nth-child(4)) .tab-btn { flex:1 1 44%; }
}

/* narrow phones (iPhone SE and the 344px fold test): the three figure columns need every pixel */
@media (max-width:360px) {
  .ape-rrow { font-size:13px; padding:7px 8px; grid-template-columns:1.15fr repeat(3,1fr); column-gap:5px; }
  .ape-rrow.hl { font-size:13.5px; padding:12px 10px !important; }
  .ape-rrow.sub { padding-left:14px; }
  .ape-col-heads { grid-template-columns:1.15fr repeat(3,1fr); column-gap:5px; padding-left:8px; padding-right:8px; }
  .ape-col-heads span { font-size:11.5px; }
  .input-panel, .panel, .notes-card, .card-body, .ape-card { padding:18px 14px !important; }
  .comparison-table th, .comparison-table td, .breakdown-table th, .breakdown-table td { padding:8px 6px !important; font-size:13px !important; }
  .m-val, .metric-value { font-size:20px !important; }
  /* the net row carries the widest figures; the label can wrap, the figures must not */
  .ape-rrow.hl { grid-template-columns:0.85fr repeat(3,1fr); font-size:13px; padding:12px 8px !important; column-gap:4px; }
}