/* Kollaz Tools: shared calculator stylesheet.
   Canonical stylesheet: styles.v7.css (versioned name, Design Bible
   Ch. 21). v7 is the 2026-11-07 C-S2-6 closure: EVERY informational
   font-size declaration in the base layer is now at the 1rem (16px)
   floor itself, not only in the v6 override layer, so a sheet-wide
   census finds no sub-16px text anywhere. Rendered sizes are
   unchanged from v6 (the override layer already computed 1rem for
   every class below); only the base declarations moved.
   v6 is the 2026-11-06 bible fix wave: one canonical file
   serving both calculator pages, locked self-hosted fonts, input
   borders at 3:1 or better, 16px type floors, 48px menu targets,
   56px critical controls, inline error states, dark mode,
   forced-colors, prefers-contrast and print provisions. 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:1rem;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:1rem;min-height:44px}
.menu-group{margin:12px 16px 4px;font-size:1rem;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:1rem;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:1rem;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:1rem}

/* 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:1rem;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:1rem;margin-bottom:8px}
.hint{color:var(--body-dim);font-size:1rem;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:1rem;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:1rem;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:1rem}
.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:1rem;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:1rem;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:1rem;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 #2 (Know Your Date) additions ============================
   Everything above this marker is the shared Toolz v5 stylesheet,
   byte-identical to the file tool #1 ships. The rules below are this
   tool's own: debt rows, the date hero, the plan table, the warning
   box and the email capture card. Generic system tokens only. */

/* The result hero: the visitor's own date is the biggest type here. */
.result-label{display:block;color:var(--on-navy-mut);
  font-size:1rem;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}

/* Debt rows */
.debt-row{background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:16px;margin:0 0 16px}
.debt-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:8px}
.debt-title{font-weight:700;font-size:1rem}
.row-remove{background:none;border:none;cursor:pointer;min-height:48px;
  padding:12px 8px;color:var(--danger);font-weight:700;font-size:1rem;
  font-family:inherit;text-decoration:underline;
  -webkit-tap-highlight-color:transparent}
.row-remove:hover{text-decoration-thickness:2px}
.row-remove:focus:not(:focus-visible){outline:none}
.row-remove:focus-visible{outline:none;border-radius:8px;
  box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--focus)}
.debt-fields{display:grid;gap:16px}
@media (min-width:640px){
  .debt-fields{grid-template-columns:1fr 1fr 1fr}
  .debt-fields .field{margin-bottom:0}
  .debt-fields .field.wide{grid-column:1 / -1}
}
input[type="text"],input[type="email"]{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="text"]:focus,input[type="email"]:focus{border-color:var(--focus)}
.add-debt{margin-bottom:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* Warning box: the one red surface besides a losing verdict */
.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}

/* First move + minimums-only lines */
.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}
.mins-line{color:var(--body-dim);margin:0 0 16px}
.saved-note{font-weight:600;margin:0 0 16px}

/* Per-debt plan table */
.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:1rem}
.plan-table th{color:var(--label);font-size:1rem;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}

/* 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:1rem;color:var(--body-dim);margin:8px 0 0}
.capture form .field{max-width:480px}

/* Touch-target floor (independent QA fix, 2026-11-06): the shared
   stylesheet's menu sub-links (44px) and menu footer links (40px) sit
   below the 48px floor. Raised here for Tool #2; Tool #1's live copy
   carries the same inherited sizes and is flagged separately. */
.menu-panel a.menu-sub{min-height:48px}
.menu-foot a{min-height:48px}

/* ==== v6 bible fix wave (2026-11-06) ================================
   Audit findings B-01 to B-13 and F-06. Tokens first, then floors,
   states and preference media. Measured pairs are recorded in the
   build report; floors follow Design Bible Ch. 3, 7, 12, 13, 15. */

@font-face{font-family:"Carlito";src:url("carlito-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Carlito";src:url("carlito-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@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{
  color-scheme:light;
  --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;
  --font-data:"Carlito","Noto Sans",system-ui,sans-serif;
  /* B-01: input boundary at rest. #5F7488 measures 4.84:1 on white
     and 4.49:1 on the slate panel ground, above the 3:1 floor. */
  --field-line:#5F7488;
}
body{font-family:var(--font-ui);font-size:1.125rem;line-height:1.7}
input,select,button{font-family:inherit}
.stat-value,.bar-amt,.plan-table td.num{font-family:var(--font-data);font-feature-settings:"tnum" 1}

/* Brand text lockup (Second Income header carries name and tagline
   beside the wordmark; Know Your Date carries the wordmark alone). */
.brand-text{min-width:0}
.brand-name{display:block;color:var(--on-navy);font-weight:700;font-size:1.125rem;line-height:1.25}
.brand-tag{display:block;color:var(--on-navy-mut);font-size:1rem;line-height:1.4}
@media (max-width:560px){.brand-tag{display:none}}

/* B-05: type floors. Nothing informational below 16px (Ch. 15.1).
   v7 (C-S2-6): the base layer now declares 1rem for every one of
   these classes too, so the floor holds sheet-wide, not only in
   this override layer. */
.stat-label,.result-label{font-size:1rem}
legend{font-size:1rem}
.field label{font-size:1rem}
.hint,.updated,.disclaimer,.consent-note,.capture .consent-line{font-size:1rem}
.menu-group{font-size:1rem}
.menu-panel a.menu-sub{font-size:1rem}
.menu-foot a{font-size:1rem}
.menu-btn{font-size:1rem}
.consent-link{font-size:1rem}
.consent-card p{font-size:1rem}
.site-footer .fine{font-size:1rem}
.plan-table th{font-size:1rem}
.plan-table th,.plan-table td{font-size:1rem}
.bar-top{font-size:1rem}
.row-remove{font-size:1rem}

/* B-04 and B-11: targets. Menu links at the 48px house floor;
   primary actions and calculator inputs at the 56px Ch. 15
   critical-control target. */
.menu-panel a.menu-sub{min-height:48px}
.menu-foot a{min-height:48px}
.btn{min-height:56px}
input[type="number"],input[type="text"],input[type="email"],select{min-height:56px}

/* B-02: inline error states (Ch. 7). Errors are text, beside the
   field, never colour alone; the invalid boundary is a 2px danger
   border plus the message. */
.field-error{color:var(--danger);font-weight:600;font-size:1rem;margin:8px 0 0}
input[aria-invalid="true"],select[aria-invalid="true"]{border:2px solid var(--danger)}
.calc-error{background:var(--red-tint);border:1px solid var(--red);
  border-left:6px solid var(--red);border-radius:12px;
  padding:16px 24px;margin-bottom:16px;font-weight:600}
.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}
.undo-row{margin-top:16px}

/* B-07: dark mode. A token set, never a filter (Ch. 3). Pairs
   measured: body #E8F0F6 on sheet #0E2A44 is 12.72:1; label and
   link #7FD1B9 on the sheet 8.18:1; muted #A9C0D4 on the sheet
   7.80:1; input text on the input ground 11.31:1; the input
   border #7FD1B9 on the input ground 7.27:1. */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0E2A44; --paper2:#081B2D;
    --body:#E8F0F6; --body-dim:#A9C0D4;
    --card-line:#2A435F; --field-line:#7FD1B9; --line:#2A435F;
    --label:#7FD1B9; --link:#7FD1B9;
  }
  input[type="number"],input[type="text"],input[type="email"],select{
    background:#0B2237;color:var(--body)}
  .track{background:rgba(232,240,246,.20)}
  .fill{background:#A9C0D4}
  .fill.keep{background:#2BAE8C}
  .warn{background:#2B1210}
  .calc-error{background:#2B1210}
  .capture{background:#0B2E26}
  .btn.secondary{color:var(--body)}
  .field.check{background:var(--paper)}
}

/* B-09 first half: prefers-contrast. Brand colour stays; pairs
   rise to the next passing step (Ch. 3). */
@media (prefers-contrast:more){
  :root{--field-line:#43586E;--body-dim:#2E4053;--line:#43586E}
  input[type="number"],input[type="text"],input[type="email"],select{
    border-width:2px}
  .btn,.menu-btn,fieldset,.stat,.verdict{border-width:2px}
}

/* B-08: forced-colors. Boundaries, focus and control states are
   drawn with system colours and real borders, so nothing vanishes
   when box-shadows and gradients are suppressed (Ch. 3, Ch. 12). */
@media (forced-colors:active){
  .btn,.menu-btn,.consent-link,input,select,fieldset,.stat,.verdict,
  .debt-row,.warn,.calc-error,.first-move,.definition,.capture{
    border:1px solid CanvasText}
  .btn,.menu-btn{border-color:ButtonText}
  :focus-visible{outline:3px solid Highlight;outline-offset:2px}
  .menu-btn:focus-visible,.btn:focus-visible,.consent-link:focus-visible,
  .row-remove:focus-visible{outline:3px solid Highlight;box-shadow:none}
  .track{border:1px solid CanvasText}
  .fill{background:CanvasText}
  .fill.keep{background:Highlight}
  input[aria-invalid="true"],select[aria-invalid="true"]{
    border:2px solid Mark;outline:2px solid Mark;outline-offset:1px}
}

/* B-09 second half: print. A calculator result is a plausible
   print artefact: content complete, screen chrome absent, black
   on white (Ch. 13). */
@media print{
  .site-header,.site-footer,.menu,.consent,.skip-link,.undo-row,
  #resetBtn,#addDebtBtn,.row-remove{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  main.wrap{box-shadow:none;border-radius:0;max-width:none;
    margin:0;padding:0;background:#fff}
  .calc,.upsell,.guides-bridge,.capture{background:#fff;color:#000;
    border:1px solid #000}
  .verdict{background:#fff !important;color:#000;border:2px solid #000}
  .verdict h3,.result-date{color:#000}
  a{color:#000;text-decoration:underline}
  .stat,.fieldset,fieldset{border:1px solid #000;background:#fff}
  h2,h3{break-after:avoid}
  .stat,.bar-row,.debt-row{break-inside:avoid}
}

/* AI Visibility Checker page additions (2026-11-07): classes the
   shared calculator sheet does not carry. Same tokens, same floors:
   no font-size below 1rem, 48px targets, visible focus inherited. */
.q-block{background:var(--paper);border:1px solid var(--card-line);
  border-radius:12px;padding:16px;margin-bottom:16px}
.q-block h3{margin-top:0}
.answers{margin-top:8px}
.answers summary{cursor:pointer;font-weight:700;color:var(--label);
  min-height:48px;display:flex;align-items:center}
.answer-text{white-space:pre-wrap;background:var(--paper2);
  border:1px solid var(--card-line);border-radius:8px;
  padding:12px 16px;margin:8px 0;font-size:1rem}
.sources-list{font-size:1rem;margin:8px 0 16px}
.progress-note{font-weight:600}
.threat{background:var(--red-tint);border:1px solid var(--danger);
  border-radius:12px;padding:16px 24px;margin-bottom:16px}
.threat h3{margin-top:0;color:var(--danger)}
.doors{display:grid;gap:16px;margin-top:16px}
@media (min-width:760px){.doors{grid-template-columns:1fr 1fr}}
.door{background:var(--paper);border:1px solid var(--card-line);
  border-radius:12px;padding:24px}
.door h3{margin-top:0}
.price-line{font-size:1.5rem;font-weight:800;line-height:1.2;margin:8px 0}
.nl-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:16px}
.nl-form .field{flex:1 1 260px;margin-bottom:0}
.nl-error{color:var(--danger);font-weight:600}
.used-up{background:var(--paper2);border:1px solid var(--card-line);
  border-radius:12px;padding:24px}
.check-list{margin:8px 0;padding-left:24px}
.check-list li{margin-bottom:8px}

/* Data-capture and commercial pass (2026-11-07): frontal pricing
   strip, the once-rule line, and the post-check offer panel. Same
   floors as the rest of the sheet: no font below 1rem, buttons
   inherit the 48px .btn base. */
.pricing-strip{background:var(--paper2);border:1px solid var(--card-line);
  border-radius:12px;padding:24px;margin-bottom:24px}
.pricing-strip h2{margin-top:0}
.strip-doors{display:grid;gap:16px;margin-top:16px}
@media (min-width:760px){.strip-doors{grid-template-columns:1fr 1fr}}
.strip-door{background:var(--paper);border:1px solid var(--card-line);
  border-radius:12px;padding:24px}
.strip-door h3{margin-top:0}
.strip-price{font-size:1.5rem;font-weight:800;line-height:1.2;margin:8px 0}
.once-line{font-size:1.125rem;margin:0 0 8px}
#offerPanel{background:var(--emerald-tint);border:1px solid var(--line);
  border-radius:12px;padding:24px;margin-top:16px}
#offerPanel h3{margin-top:0;font-size:1.5rem;line-height:1.2}
#alreadyBox{margin-top:16px}

/* ==== FONT PURGE 2026-11-07 (owner order: web readability) =====
   Headings: Noto Sans 700 via --font-display. Body: Noto Sans first,
   1.125rem (18px), line-height 1.7. Long-form paragraphs get about
   1em bottom spacing so text does not run wall to wall. No purged
   display face and no geometric display face remain on this surface. */
: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}
/* Atkinson Hyperlegible for raw AI answer text (Design Bible locked
   older-reader face). Files sourced from the canonical workspace copy
   in executors-first-30-days app fonts, verified wOF2. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("atkinson-hyperlegible-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("atkinson-hyperlegible-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
.answer-text{font-family:"Atkinson Hyperlegible","Noto Sans",system-ui,sans-serif;font-size:1.125rem;line-height:1.7}