/* Kollaz Tools: shared calculator stylesheet.
   Canonical stylesheet: styles.v5.css (versioned name, Design Bible
   Ch. 21). This remains THE calculator design system for every Kollaz
   web calculator: the next calculator reuses this file. Generic class
   names only, no tool-specific rules.
   System of record: the KOLLAZ Toolz blue branding, per the owner's
   order of Nov 6, 2026: every tool on kollaztoolz.com wears the Toolz
   blue scheme, with the approved wordmark LIGHT version in the header.
   Tokens are the V3 Toolz tokens, copied from php2shell-service/
   site-v3brief/styles.css :root: midnight navy structure, white
   reading surfaces, pale slate support, dark slate text, emerald
   action, red only for real warnings and errors. Display type is
   Noto Sans 700 (h1, h2, footer brand line), per owner order 2026-11-07 (web readability purge). Layout, spacing, geometry, and the type scale are
   unchanged from styles.v4.css; only the palette and the display
   font changed. The page-specific aliases under the V3 tokens keep
   the calculator's generic class system reading exactly as before. */


:root{
  --navy:#081B2D; --navy-2:#0E2A44; --navy-3:#12334F;
  --ink:#102239; --slate-bg:#F3F7FA; --white:#FFFFFF;
  --emerald:#087C61; --emerald-dark:#065C48; --emerald-tint:#E6F4F0;
  --red:#B3261E; --red-tint:#FBEBEA;
  --line:#C9D6E0; --line-dark:#2A435F; --mut:#43586E;
  --on-navy:#E8F0F6; --on-navy-mut:#A9C0D4;
  --focus:#087C61; --focus-on-navy:#7FD1B9;
  --radius:16px;
  --font-display:"Noto Sans","Carlito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Page aliases onto the V3 tokens (roles unchanged from v4). */
  --paper:var(--white); --paper2:var(--slate-bg);
  --body:var(--ink); --body-dim:var(--mut);
  --card-line:var(--line); --field-line:var(--line);
  --line-soft:rgba(232,240,246,.14);
  --label:#065C48; /* emerald-dark: 7.98:1 on --white, 7.41:1 on --slate-bg */
  --link:#065C48;  /* emerald-dark: 7.98:1 on --white */
  /* Deliberate single semantic exception, kept from the original tool:
     the Toolz red means one thing only, a verdict that loses money. */
  --danger:#B3261E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--body);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.65;
  background:linear-gradient(160deg,var(--navy-2),var(--navy) 78%) fixed,var(--navy)}
.wrap{max-width:1120px;margin:0 auto;padding-left:16px;padding-right:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:hover{color:var(--emerald)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.upsell :focus-visible,.guides-bridge :focus-visible,.verdict :focus-visible,
.site-footer :focus-visible,.consent-card :focus-visible,
.menu-panel :focus-visible{outline-color:var(--focus-on-navy)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--navy);color:#fff;font-weight:700;
  padding:12px 16px;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}

/* Header: sticky navy band, approved reversed (light) wordmark standing
   alone on the gradient, no glow behind it (owner order 2026-10-28),
   no hard pill (standing brand law). */
.site-header{position:sticky;top:0;z-index:50;
  background:linear-gradient(120deg,var(--navy),var(--navy-2) 70%,var(--navy));
  border-bottom:1px solid var(--line-dark)}
/* No vertical padding here (removed 2026-10-30, owner caught the logo
   shifting between the home page and this page): the site header has
   none, and the extra 8px top and bottom made this header taller and
   centred the wordmark 8px lower than on kollazmoney.com. Header height
   on both surfaces is now set by the brand alone, identically. */
.header-inner{display:flex;align-items:center;gap:16px;min-height:64px}
.brand-glow{display:inline-block;flex:none;padding:8px 28px}
/* Wordmark matched to the website header exactly (owner order
   2026-10-30): 222px desktop, 120px phone, same asset, same size on
   every Kollaz page. It was 132/84 here from the header build and the
   website's enlargement did not reach this separate stylesheet. */
.brand-mark{width:222px}
@media (max-width:560px){
  .header-inner{gap:8px;padding-left:12px;padding-right:12px}
  .brand-glow{padding:4px 12px}
  .brand-mark{width:120px}
}

/* Brand lockup is a link home (2026-10-28 nav overhaul): the wordmark
   takes the reader back to the Kollaz site. The "Kollaz Tools" name and
   tagline left the header on 2026-10-30 (owner order): they are the page
   title block now, see .tools-head below. */
.brand{display:flex;align-items:center;gap:16px;min-width:0;
  text-decoration:none;color:inherit}
@media (max-width:560px){
  .brand{gap:8px}
}

/* Burger menu: zero-JS details/summary inside the sticky header, so it is
   reachable at any scroll position. Identical component structure to the
   Kollaz site stylesheet; the panel is an overlay and never changes the
   header height. Panel contrast: links --on-navy on the panel gradient
   stops: 15.13:1 (--navy) to 12.72:1 (--navy-2); group heading
   --on-navy-mut: 9.28:1 worst stop; foot links --on-navy-mut: 9.28:1
   worst stop. Shop link --focus-on-navy (commercial intent, second in
   the panel by owner directive 2026-10-28): 9.73:1 (--navy) to 8.18:1
   (--navy-2). */
.menu{position:relative;flex:none;margin-left:auto}
.menu-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:12px 16px;border:1px solid var(--line-dark);border-radius:999px;line-height:1.2;
  color:var(--on-navy);font-weight:700;font-size:0.9375rem;background:rgba(255,255,255,.04)}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn:hover{color:#fff;border-color:var(--focus-on-navy)}
/* Designed interaction states (2026-10-28 menu-states parity with the
   Kollaz site stylesheet): the browser default tap highlight and pointer
   outline are off, keyboard focus gets a mint box-shadow ring that
   follows the pill shape, and the pressed and open states deepen the
   background and gain a soft mint glow. Box-shadow only: zero layout
   shift, header height unchanged. */
.menu-btn{-webkit-tap-highlight-color:transparent}
.menu-btn:focus:not(:focus-visible){outline:none}
.menu-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--focus-on-navy)}
.menu-btn:active{background:var(--navy-3);color:#fff;
  box-shadow:0 0 18px rgba(127,209,185,.30),inset 0 0 0 1px rgba(127,209,185,.45)}
.menu[open ] .menu-btn{background:var(--navy-3);color:#fff;
  box-shadow:0 0 18px rgba(127,209,185,.30),inset 0 0 0 1px rgba(127,209,185,.45)}
.menu-bars{display:inline-flex;flex-direction:column;gap:4px}
.menu-bars span{display:block;width:20px;height:2px;border-radius:2px;background:var(--focus-on-navy)}
.menu[open ] .menu-bars span{background:#fff}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow-y:auto;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));border:1px solid var(--line-dark);
  border-radius:12px;box-shadow:0 24px 48px -16px rgba(0,0,0,.6);padding:8px}
.menu-panel a{display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:8px;
  color:var(--on-navy);text-decoration:none;font-weight:600}
.menu-panel a:hover{background:var(--navy-3);color:#fff}
.menu-panel a.menu-shop{color:var(--focus-on-navy)}
.menu-panel a.menu-sub{padding-left:32px;font-weight:500;font-size:0.9375rem;min-height:44px}
.menu-group{margin:12px 16px 4px;font-size:0.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-navy-mut)}
.menu-foot{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:8px}
.menu-foot a{min-height:40px;font-size:0.875rem;font-weight:500;color:var(--on-navy-mut)}
.menu-foot a:hover{color:#fff}
@media (max-width:560px){.menu-btn{padding:12px 14px}}

/* Reading sheet: the calm white surface every calculator lives on. */
main.wrap{max-width:840px;background:var(--paper);border-radius:var(--radius);
  margin-top:24px;margin-bottom:32px;padding:32px 40px 40px;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.45)}
@media (max-width:560px){main.wrap{padding:24px 16px 32px;border-radius:12px;margin-top:16px}}

h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.875rem,5.2vw,2.75rem);line-height:1.12;letter-spacing:-.01em;margin:8px 0}
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4375rem,3.6vw,1.8125rem);line-height:1.2;margin:32px 0 8px}
h3{font-size:1.25rem;line-height:1.3;margin:24px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:24px}
li{margin-bottom:8px}

/* Page title block (owner order 2026-10-30): "Kollaz Tools" is the H1
   title above every calculator name; the calculator's own name heads its
   section one step down, as .calc-name. */
.tools-head{border-bottom:2px solid var(--emerald);padding-bottom:16px;margin-bottom:24px}
.tools-tag{font-size:1.125rem;line-height:1.5;color:var(--body-dim);margin:0}
.calc-name{font-size:clamp(1.625rem,4.4vw,2.25rem);line-height:1.15;letter-spacing:-.01em;margin:8px 0}

/* Title and lede block */
.hero{margin-bottom:8px}
.lede{font-size:1.1875rem;line-height:1.6}
.updated{color:var(--body-dim);font-size:0.875rem;margin-top:-8px}
.definition{background:var(--paper2);border:1px solid var(--card-line);
  border-left:6px solid var(--emerald);border-radius:12px;padding:16px 24px}
.disclaimer{color:var(--body-dim);font-size:0.875rem}

/* Calculator card */
.calc{background:var(--paper2);border:1px solid var(--card-line);
  border-radius:var(--radius);padding:24px;margin-top:24px;scroll-margin-top:88px}
.calc>h2{margin-top:0}
@media (max-width:560px){.calc{padding:16px}}

/* Input panels: fieldsets as designed panels, emerald section legends */
fieldset{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin:0 0 16px;min-width:0}
legend{background:var(--paper2);color:var(--label);
  font-size:0.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;margin-left:8px}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-weight:600;font-size:0.9375rem;margin-bottom:8px}
.hint{color:var(--body-dim);font-size:0.875rem;margin:8px 0 0}
input[type="number"],select{width:100%;min-height:48px;
  font-size:1rem;font-family:inherit;color:var(--body);
  padding:10px 12px;background:#fff;
  border:1px solid var(--field-line);border-radius:8px}
input[type="number"]:focus,select:focus{border-color:var(--focus)}
.field.check{display:flex;align-items:center;gap:12px;
  background:var(--paper2);border:1px solid var(--card-line);
  border-radius:8px;padding:12px 16px}
.field.check input{width:26px;height:26px;flex:none;accent-color:var(--emerald);margin:0}
.field.check label{margin:0;font-weight:600}
.row{display:grid;gap:16px}
@media (min-width:560px){
  .row.cols2{grid-template-columns:1fr 1fr}
  .row.cols2 .field{margin-bottom:0}
}

/* Buttons: the Toolz button. Emerald gradient, white label, hover lift,
   per the V3 .btn treatment. The label is white in every context; the
   high-specificity guard at the end of this block keeps section link
   rules from ever restyling a button label (the R2-N1 lesson). */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:1rem;font-family:inherit;line-height:1.2;
  text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#0A8A6C 0%,var(--emerald) 100%);color:#fff;
  box-shadow:0 6px 16px rgba(8,124,97,.26);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(8,124,97,.3);color:#fff}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--white),0 0 0 5px var(--focus)}
.btn:active{background:var(--emerald-dark);transform:translateY(1px)}
.btn.secondary{background:transparent;border-color:var(--field-line);color:var(--body);box-shadow:none}
.btn.secondary:hover{background:var(--paper2);transform:none;box-shadow:none}
.btn.inverted{background:linear-gradient(180deg,#0A8A6C 0%,var(--emerald) 100%);color:#fff}
.btn.inverted:hover{color:#fff}
.upsell .btn,.guides-bridge .btn,.consent-card .btn{color:#fff}
.upsell .btn:hover,.guides-bridge .btn:hover,.consent-card .btn:hover{color:#fff}
.upsell .btn:focus-visible,.guides-bridge .btn:focus-visible{box-shadow:0 0 0 2px var(--navy),0 0 0 5px var(--focus-on-navy)}

/* Results */
#results{margin-top:24px}
.verdict{border-radius:12px;padding:24px;margin-bottom:16px;color:var(--on-navy)}
.verdict h3{margin:0 0 8px;font-size:1.375rem;color:inherit}
.verdict p{margin:0}
.verdict.worth-it{background:linear-gradient(130deg,var(--navy-2),var(--navy))}
.verdict.marginal{background:var(--navy-3)}
.verdict.not-worth-it{background:var(--danger);color:#fff}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--paper);border:1px solid var(--card-line);
  border-radius:12px;padding:16px}
.stat-label{display:block;color:var(--label);
  font-size:0.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:4px}
.stat-value{display:block;font-size:1.5rem;font-weight:800;line-height:1.2}
.bars{margin-top:8px}
.bar-row{margin-bottom:16px}
.bar-top{display:flex;justify-content:space-between;gap:8px;
  font-size:0.9375rem;margin-bottom:8px}
.bar-amt{font-weight:700;white-space:nowrap}
.track{height:12px;background:rgba(16,34,57,.14);border-radius:999px;overflow:hidden}
.fill{height:100%;background:var(--navy-3);border-radius:999px;
  transition:width .45s ease}
.fill.keep{background:var(--emerald)}

/* Upsell band: navy band, emerald Toolz button, same language as the
   RRC pricing band */
.upsell{border-radius:12px;padding:32px;margin-top:32px;color:var(--on-navy);
  background:linear-gradient(130deg,var(--navy-2),var(--navy));border:1px solid var(--line-dark)}
.upsell h2{color:var(--on-navy);margin-top:0}
.upsell p{color:var(--on-navy)}
@media (max-width:560px){.upsell{padding:24px}}

/* Guides bridge: the road back to the content site, end of main content */
.guides-bridge{border-radius:12px;padding:32px;margin-top:32px;color:var(--on-navy);
  background:linear-gradient(130deg,var(--navy-3),var(--navy-2))}
.guides-bridge h2{color:var(--on-navy);margin-top:0}
.guides-bridge p{color:var(--on-navy)}
@media (max-width:560px){.guides-bridge{padding:24px}}

/* Guide and FAQ: article typography of the system */
.guide,.faq{margin-top:8px}
.sources a{word-break:break-word}
.qa{margin-bottom:16px}
.qa+.qa{border-top:1px solid var(--card-line);padding-top:8px}
.qa h3{margin-bottom:4px}
.qa p{margin-top:0}

/* Footer: full-bleed navy, on-navy links, support address always present */
.site-footer{margin-top:16px;color:var(--on-navy-mut);
  background:linear-gradient(140deg,var(--navy-2),var(--navy) 65%)}
.site-footer .wrap{padding-top:32px;padding-bottom:40px}
.site-footer hr{border:none;border-top:1px solid var(--line-soft);margin:0 0 16px}
.site-footer a{color:var(--on-navy)}
.site-footer a:hover{color:var(--focus-on-navy)}
.site-footer .fine{color:var(--on-navy-mut);font-size:0.84375rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 16px}
.foot-nav a{display:inline-flex;align-items:center;min-height:48px;
  font-weight:600;text-decoration:none}
.foot-contact{margin-bottom:8px}

/* KOLLAZ sites network block (footer, no-orphans wiring 2026-11-03):
   same words on every KOLLAZ property, styled to this footer's system */
.kollaz-sites{margin:0 0 16px}
.kollaz-sites-title{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--on-navy);margin:0 0 8px}
.kollaz-sites-list{list-style:none;margin:0;padding:0}
.kollaz-sites-list li{margin:0 0 4px}
.kollaz-sites .ks-self{color:var(--focus-on-navy);font-weight:600}
.kollaz-sites-plugins{margin:8px 0 0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

/* consent banner (calculator analytics phase 2, 2026-10-30): the
   website's first-party component, ported rule for rule from the site
   stylesheet. Fixed at the bottom, full-width sheet on phone,
   bottom-left card on desktop, zero layout shift; the page gains
   matching bottom padding from the banner script while it is visible.
   Targets stay >=48px. One adaptation: this stylesheet's .btn base is
   the emerald Toolz button and has no global .btn-ghost, so the ghost
   variant is declared in full under .consent-card. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px}
.consent[hidden]{display:none}
.consent-card{background:linear-gradient(150deg,var(--navy-2),var(--navy));color:var(--on-navy);
  border:1px solid var(--line-dark);border-radius:12px;padding:20px 24px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.65)}
.consent-card h2{color:var(--on-navy);font-size:1.1875rem;margin:0 0 8px;line-height:1.25}
.consent-card p{margin:0 0 8px;font-size:0.96875rem;color:var(--on-navy)}
.consent-btns{display:flex;gap:16px 12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.consent-card .btn-ghost{background:transparent;border:1px solid var(--line-dark);box-shadow:none;color:var(--on-navy)}
.consent-card .btn-ghost:hover{color:#fff;border-color:var(--focus-on-navy);background:transparent;box-shadow:none}
.consent-card .btn-ghost:active{background:var(--navy-3);color:#fff}
.consent-link{background:none;border:none;cursor:pointer;color:var(--focus-on-navy);
  font-weight:600;font-size:0.9375rem;text-decoration:underline;min-height:48px;padding:12px 8px}
.consent-link{-webkit-tap-highlight-color:transparent;
  transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}
.consent-link:hover{text-decoration-thickness:2px}
.consent-link:focus:not(:focus-visible){outline:none}
.consent-link:focus-visible{outline:none;border-radius:8px;box-shadow:0 0 0 2px var(--navy),0 0 0 5px var(--focus-on-navy)}
.consent-link:active{background:var(--navy-3);box-shadow:0 0 18px rgba(127,209,185,.30),inset 0 0 0 1px rgba(127,209,185,.45)}
.consent-settings{border-top:1px solid var(--line-soft);margin-top:16px;padding-top:8px}
.consent-settings[hidden]{display:none}
.consent-toggle{display:flex;gap:12px;align-items:center;min-height:48px;font-weight:600;cursor:pointer}
.consent-toggle input{width:24px;height:24px;flex:none;accent-color:var(--focus-on-navy)}
.consent-note{font-size:0.875rem;color:var(--on-navy-mut)}
@media (min-width:641px){
  .consent{right:auto;width:400px;padding:16px}
}
@media (max-width:640px){
  .consent{padding:8px}
  .consent-card{padding:12px 16px 16px}
  .consent-card h2{font-size:1.0625rem;margin-bottom:8px}
  .consent-body{display:none}
  .consent.expanded .consent-body{display:block}
  .consent-btns{margin-top:0;gap:16px 12px}
  .consent-btns .btn{flex:1 1 0;justify-content:center;padding-left:12px;padding-right:12px}
}
.consent-settings-title{font-size:1rem;font-weight:700;margin:4px 0 8px;color:var(--on-navy)}
.consent-settings .consent-btns{margin-top:16px}
.consent-settings:not([hidden]) + .consent-btns{margin-top:16px}
.consent.expanded #consent-customize{display:none}
/* There is deliberately NO floating cookies button: once a choice is
   stored, nothing floats (owner directive 2026-10-28, as on the site).
   The footer Cookie settings link is the only way back in. */

/* ==== Tool #3 (Know Your Break-Even) additions =====================
   Everything above this marker is the shared Toolz v5 stylesheet,
   byte-identical to the file tools #1 and #2 ship. The rules below
   are this tool's own: the break-even hero, the two claim cards,
   the lifetime and cumulative tables, the chart, the warning box
   and the email capture card. Generic system tokens only. */

/* The result hero: the visitor's own break-even age, biggest here. */
.result-label{display:block;color:var(--on-navy-mut);
  font-size:0.8125rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:4px}
.result-date{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.25rem,7vw,3.25rem);line-height:1.1;letter-spacing:-.01em}
.verdict .result-sub{margin-top:8px}

/* Warning box: equal ages and missing benefit land here */
.warn{background:var(--red-tint);border:1px solid var(--red);
  border-left:6px solid var(--red);border-radius:12px;
  padding:16px 24px;margin-bottom:16px}
.warn p{margin:0;font-weight:600}

/* The two claiming ages, side by side */
.claim-cards{display:grid;gap:16px;margin-bottom:16px}
@media (min-width:640px){
  .claim-cards{grid-template-columns:1fr 1fr}
}
.claim-card{background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:16px 24px}
.claim-card h3{margin:0 0 4px;font-size:1rem}
.claim-monthly{display:block;font-family:var(--font-display);
  font-weight:700;font-size:2rem;line-height:1.15;color:var(--ink)}
.claim-card p{margin:4px 0 0}
.claim-card .claim-note{color:var(--body-dim);font-size:0.9375rem}

/* Rules and scope boxes */
.first-move{background:var(--paper2);border:1px solid var(--card-line);
  border-left:6px solid var(--emerald);border-radius:12px;
  padding:16px 24px;margin-bottom:16px}
.first-move p{margin:0 0 8px}
.first-move p:last-child{margin-bottom:0}
.mins-line{color:var(--body-dim);margin:0 0 16px}

/* Lifetime and cumulative tables */
.table-scroll{overflow-x:auto;margin-bottom:8px}
.plan-table{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--card-line);border-radius:12px}
.plan-table th,.plan-table td{padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--card-line);font-size:0.9375rem}
.plan-table th{color:var(--label);font-size:0.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.plan-table td.num,.plan-table th.num{text-align:right;white-space:nowrap}
.plan-table tr:last-child td{border-bottom:none}
.plan-table tr.be-row td{font-weight:700;background:var(--emerald-tint)}

/* Cumulative chart (inline SVG built by app.js from engine data) */
.chart-wrap{background:var(--paper);border:1px solid var(--card-line);
  border-radius:12px;padding:16px;margin-bottom:16px}
.chart-wrap h3{margin-top:0}
svg.chart{width:100%;height:auto;display:block}
svg.chart .axis{stroke:var(--line);stroke-width:1}
svg.chart .gridline{stroke:var(--line-soft);stroke-width:1}
svg.chart .line-earlier{fill:none;stroke:var(--emerald);stroke-width:3}
svg.chart .line-later{fill:none;stroke:var(--navy-2);stroke-width:3}
svg.chart .be-dot{fill:var(--red);stroke:var(--paper);stroke-width:2}
svg.chart text{font-family:inherit;font-size:12px;fill:var(--body)}
svg.chart .axis-label{font-size:11px;fill:var(--body-dim)}
svg.chart .be-label{font-weight:700;fill:var(--red)}
.chart-legend{display:flex;gap:24px;flex-wrap:wrap;margin:8px 0 0;
  font-size:0.9375rem}
.chart-legend .swatch{display:inline-block;width:24px;height:4px;
  border-radius:2px;margin-right:8px;vertical-align:middle}
.chart-legend .sw-earlier{background:var(--emerald)}
.chart-legend .sw-later{background:var(--navy-2)}

/* Email capture card: in the page flow, never a popup */
.capture{background:var(--emerald-tint);border:1px solid var(--line);
  border-left:6px solid var(--emerald);border-radius:12px;
  padding:24px;margin-top:32px}
.capture h2{margin-top:0}
.capture .consent-line{font-size:0.875rem;color:var(--body-dim);margin:8px 0 0}
.capture form .field{max-width:480px}

/* Touch-target floor (independent QA fix on Tool #2, 2026-11-06,
   carried here from the start): the shared stylesheet's menu
   sub-links (44px) and menu footer links (40px) sit below the
   48px floor. */
.menu-panel a.menu-sub{min-height:48px}
.menu-foot a{min-height:48px}

/* QA round 1 fixes (2026-11-06, design seat): Design Bible Ch. 15
   older-reader type floors on this page. Nothing informational
   under 16px; chart text raised in SVG units; the break-even label
   gets a halo so the lines never strike through it (placement is
   also offset in app.js). Footer network links become real 44px
   targets. Header brought inside the 64 to 80px checklist budget
   by capping the wordmark slot at 60px tall on this page. */
.hint{font-size:16px}
.plan-table th{font-size:16px;letter-spacing:.05em}
.plan-table td{font-size:16px}
svg.chart .axis-label{font-size:17px}
svg.chart .be-label{font-size:19px;paint-order:stroke;stroke:#F3F7FA;stroke-width:5px;stroke-linejoin:round}
.result-label{font-size:16px}
.claim-card p{font-size:16px}
.mins-line{font-size:16px}
.chart-legend{font-size:16px}
.capture .consent-line,.consent-line{font-size:16px}
.guide .updated{font-size:16px}
.disclaimer{font-size:16px}
.menu-panel a.menu-sub{font-size:16px}
.menu-panel .menu-foot a{font-size:16px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
.kollaz-sites-list a{display:inline-flex;align-items:center;min-height:44px}
.brand-mark{height:60px;width:auto}
.claim-card .claim-note{font-size:16px}
.site-footer .fine{font-size:16px}
.consent-note{font-size:16px}

/* QA round 2 fixes (2026-11-06, independent re-verification of the
   round 1 fixes): five rendered sizes still sat under the 16px
   floor on this page. Form legends rendered 13px and the four form
   labels 15px (shared base values, overridden here only); the
   Menu button text rendered 15px and the menu group heading 13px;
   the cookie banner body rendered 15.5px and its Cookie settings
   button 15px (the banner markup and its base styles are the
   shared consent component, so the raise is a page-scoped
   override in this additions block, which loads after and wins
   on this page only). The chart fix is the last pair: at phone
   widths the desktop viewBox scales to about 0.43, so app.js now
   draws a compact viewBox (class chart-m) whose text units are
   raised here to keep rendered chart text at desktop size. */
legend{font-size:16px}
.field label{font-size:16px}
.menu-btn{font-size:16px}
.menu-group{font-size:16px}
.consent-card p{font-size:16px}
.consent-link{font-size:16px}
svg.chart.chart-m .axis-label{font-size:21px}
svg.chart.chart-m .be-label{font-size:24px}
/* ==== FONT PURGE 2026-11-07 (owner order: web readability) ===== */
@font-face{font-family:"Noto Sans";src:url("noto-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("noto-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--font-display:"Noto Sans","Carlito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-ui:"Noto Sans","Carlito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{font-family:var(--font-ui);font-size:1.125rem;line-height:1.7}
h1,h2{font-family:var(--font-display)}
.guide p,.faq p,.qa p{margin-bottom:1em}