/* =========================================================================
   ASHBORN PARTNERS — UTILITY BILL ANALYZER
   Stylesheet
   Sections:
     1. Tokens (light + dark)
     2. Reset & base
     3. Header / brand
     4. Layout panels
     5. Buttons & form fields
     6. Wizard progress + step nav
     7. Month count choices
     8. Month cards
     9. Results: summary tiles, driver bar, insight, charts, table
    10. Averages / detailed charges / accuracy
    11. CTA / disclaimer / footer
    12. Responsive
    13. Print
   ========================================================================= */

/* ---------- 1. TOKENS ----------
   Palette pulled from the Ashborn Partners website: warm cream neutrals,
   a near-black forest ink, and a single bright mint-green accent. */
:root{
  /* Text on filled buttons, badges and step dots. White on the light
     theme; near-black on the dark theme, where those fills are pale mint
     and bright green and white text would be hard to read. */
  --on-accent: #ffffff;
  --paper: #f7f6f1;
  --mist: #efede5;
  --mist-line: #e3e0d5;

  --navy-900: #13241c;
  --navy-700: #1e352a;
  --navy-600: #3a4f43;
  --navy-050: #e9ece7;

  --gold-600: #2fbe74;
  --gold-700: #178a54;
  --gold-100: #e3f6ec;

  --ink: #1a241d;
  --ink-muted: #5b6359;
  --ink-faint: #8b9186;

  --line: #e1ddd0;
  --line-strong: #cfc9b7;

  --good-600: #2e7d4f;
  --good-100: #e5f3ea;
  --bad-600: #b14343;
  --bad-100: #fbeaea;

  /* Always-dark surface (independent of theme) for chips that need to read
     as "dark" against either a light or a dark page: the skip link, help
     tooltips, and the hero summary tile. */
  --surface-dark: #13241c;
  --surface-dark-border: #13241c;

  --shadow-soft: 0 1px 2px rgba(19,36,28,0.04), 0 6px 20px rgba(19,36,28,0.06);
  --shadow-tight: 0 1px 3px rgba(19,36,28,0.08);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-md: 10px;
  --radius-lg: 16px;

  color-scheme: light;
}

/* Dark look for EVERY visitor on screen, whatever their computer's
   light/dark setting (decided 21 Sep 2026: one consistent look).
   Limited to "screen" so a printed or saved-as-PDF report still uses the
   light tokens above: dark ink on white paper. */
@media screen{
  :root:not([data-theme="light"]){
    --on-accent: #0b120e;
    --paper: #101a15;
    --mist: #0b120e;
    --mist-line: #1c2921;

    --navy-900: #eef3ea;
    --navy-700: #bcdac9;
    --navy-600: #8fac9b;
    --navy-050: #17251d;

    --gold-600: #3ecf85;
    --gold-700: #6fe0a4;
    --gold-100: #1a3324;

    --ink: #e7f0e9;
    --ink-muted: #a3b3a7;
    --ink-faint: #798a7e;

    --line: #24352b;
    --line-strong: #34493c;

    --good-600: #63c98a;
    --good-100: #143324;
    --bad-600: #e08585;
    --bad-100: #3a1c1c;

    --surface-dark: #0b120e;
    --surface-dark-border: #2c4436;

    --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.35);
    --shadow-tight: 0 1px 3px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --on-accent: #0b120e;
  --paper: #101a15;
  --mist: #0b120e;
  --mist-line: #1c2921;

  --navy-900: #eef3ea;
  --navy-700: #bcdac9;
  --navy-600: #8fac9b;
  --navy-050: #17251d;

  --gold-600: #3ecf85;
  --gold-700: #6fe0a4;
  --gold-100: #1a3324;

  --ink: #e7f0e9;
  --ink-muted: #a3b3a7;
  --ink-faint: #798a7e;

  --line: #24352b;
  --line-strong: #34493c;

  --good-600: #63c98a;
  --good-100: #143324;
  --bad-600: #e08585;
  --bad-100: #3a1c1c;

  --surface-dark: #0b120e;
  --surface-dark-border: #2c4436;

  --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.35);
  --shadow-tight: 0 1px 3px rgba(0,0,0,0.35);
  color-scheme: dark;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1{ font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 600; }
h2{ font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); font-weight: 600; }
h3{ font-size: 1.1rem; font-weight: 600; margin-bottom: 0.6em; }
p{ margin: 0 0 1em; color: var(--ink); }
strong{ font-weight: 600; }
a{ color: var(--navy-700); }
.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--surface-dark); color: #fff; padding: 0.6em 1em; z-index: 200;
}
.skip-link:focus{ left: 0.5rem; top: 0.5rem; border-radius: 6px; }

button{ font-family: inherit; }
:focus-visible{ outline: 3px solid var(--gold-600); outline-offset: 2px; }

.tabular{ font-variant-numeric: tabular-nums; }

/* ---------- 3. HEADER ---------- */
.site-header{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.brand-mark{
  grid-column: 1;
  justify-self: start;
  flex-shrink: 0;
  background: #f7f6f1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark img{ display: block; height: 38px; width: auto; }
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 0.25em;
}
.brand-copy{ grid-column: 2; text-align: center; }
.brand-copy h1{ margin-bottom: 0.15em; }
.brand-tagline{ color: var(--ink-muted); margin: 0; font-size: 0.98rem; }

/* ---------- 4. LAYOUT PANELS ---------- */
.panel{ padding: 2.75rem 1.5rem; }
.panel:nth-of-type(odd){ background: var(--paper); }
.panel-inner{ max-width: 800px; margin: 0 auto; }

.intro-panel .panel-inner{ max-width: 860px; }
.intro-panel h2{ text-align: center; }

.intro-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 1.75rem;
}
.intro-step-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-tight);
}
.intro-step-num{
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--navy-050);
  color: var(--navy-700);
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
}
.intro-step-card h3{ font-size: 1.05rem; margin-bottom: 0.4em; }
.intro-step-card p{ font-size: 0.92rem; color: var(--ink-muted); margin: 0; }

.intro-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin: 1.5rem 0 1.25rem; }
.privacy-note{ font-size: 0.85rem; color: var(--ink-faint); margin: 0; }

.step-kicker{
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-700); margin: 0 0 0.4em;
}
.step-help-text{ color: var(--ink-muted); }

/* ---------- 5. BUTTONS & FIELDS ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8em 1.5em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
  min-height: 46px;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--navy-700); color: var(--on-accent); border-color: var(--navy-700); }
.btn-primary:hover{ background: var(--navy-900); border-color: var(--navy-900); }
.btn-primary:disabled{ background: var(--line-strong); border-color: var(--line-strong); color: var(--ink-faint); cursor: not-allowed; }
.btn-secondary{ background: transparent; color: var(--navy-700); border-color: var(--line-strong); }
.btn-secondary:hover{ background: var(--navy-050); }
.btn-ghost{ background: transparent; color: var(--navy-700); border-color: transparent; text-decoration: underline; }
.btn-ghost:hover{ color: var(--navy-900); }
.btn-danger-ghost{ background: transparent; color: var(--bad-600); border-color: transparent; }
.btn-danger-ghost:hover{ text-decoration: underline; }
.btn-cta{
  background: var(--gold-600); color: var(--on-accent); border-color: var(--gold-600);
  text-decoration: none; font-weight: 700;
}
.btn-cta:hover{ background: var(--gold-700); border-color: var(--gold-700); }
.btn-cta[aria-disabled="true"]{ background: var(--line-strong); border-color: var(--line-strong); color: var(--ink-faint); pointer-events: none; }

.field-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.25rem;
  margin: 1.5rem 0;
}
.field{ display: flex; flex-direction: column; gap: 0.4rem; }
.field.field-wide{ grid-column: 1 / -1; }
.field label{ font-size: 0.88rem; font-weight: 600; color: var(--navy-900); display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.optional-tag{ font-weight: 500; color: var(--ink-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.required-tag{ font-weight: 600; color: var(--gold-700); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--gold-100); padding: 0.15em 0.5em; border-radius: 999px; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], select{
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.85em;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
  width: 100%;
}
input[type="number"]{ font-family: var(--font-mono); }
input:focus, select:focus{ border-color: var(--navy-700); }
input.field-invalid, select.field-invalid{ border-color: var(--bad-600); background: var(--bad-100); }

/* Step 1 consent checkbox (same wording pattern as the main homeowner form) */
.consent-row{
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.9rem 1rem; margin: 0 0 0.75rem;
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-muted); cursor: pointer;
}
.consent-row input[type="checkbox"]{ width: 20px; height: 20px; min-width: 20px; margin-top: 0.15rem; accent-color: var(--navy-700); cursor: pointer; }
.consent-row a{ color: var(--navy-700); text-decoration: underline; }
.consent-row.field-invalid{ border-color: var(--bad-600); background: var(--bad-100); }
#consent-error{ margin-bottom: 0.75rem; }
/* anti-bot field: off-screen, never seen or focused by people */
.uba-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Step 3 optional utility company field */
.utility-field{ margin: 1.25rem 0 1.5rem; max-width: 420px; }

/* inline field-level error message (e.g. invalid ZIP Code format) */
.field-error{
  background: var(--bad-100); color: var(--bad-600); border-radius: 8px; padding: 0.5em 0.75em;
  font-size: 0.82rem; margin: 0;
}

/* field hints — always visible, plain-language help under every field.
   No click-to-discover popover: homeowners and reps should see exactly
   what to enter and where to find it without hunting for a "?" icon. */
.field-hint{
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: 0.1rem;
}
.field-required .field-hint{ color: var(--ink); }

/* ---------- 6. WIZARD PROGRESS + STEP NAV ---------- */
.wizard-progress{ background: var(--paper); border-bottom: 1px solid var(--line); }
.wizard-progress ol{
  list-style: none; margin: 0; padding: 1rem 1.5rem;
  max-width: 800px; margin-inline: auto;
  display: flex; gap: 0.5rem; justify-content: space-between;
}
.wizard-progress li{
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--ink-faint); font-weight: 600;
  flex: 1;
}
.step-dot{
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.78rem; flex-shrink: 0;
  color: var(--ink-faint);
}
.wizard-progress li.is-active .step-dot{ background: var(--navy-700); border-color: var(--navy-700); color: var(--on-accent); }
.wizard-progress li.is-active{ color: var(--navy-900); }
.wizard-progress li.is-done .step-dot{ background: var(--good-600); border-color: var(--good-600); color: var(--on-accent); }
.step-label{ display: none; }
@media (min-width: 620px){ .step-label{ display: inline; } }

.step-nav{ display: flex; justify-content: center; align-items: center; margin-top: 2rem; gap: 1rem; flex-wrap: wrap; }
.step-nav span:empty{ display: none; }

/* ---------- 7. MONTH COUNT CHOICES ---------- */
.month-count-choices{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.75rem 0; }
.count-choice{
  background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 1.5rem 0.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.count-choice:hover{ border-color: var(--navy-700); }
.count-choice.is-selected{ border-color: var(--navy-700); background: var(--navy-050); }
.count-num{ font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--navy-900); }
.count-word{ font-size: 0.8rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- 8. MONTH CARDS ---------- */
.order-notice{
  display: flex; align-items: flex-start; gap: 0.6em;
  background: var(--navy-050); color: var(--navy-900);
  border-radius: var(--radius-md); padding: 0.85em 1em;
  font-size: 0.92rem; margin-bottom: 1.5rem;
}
.notice-icon{ width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; color: var(--navy-700); }

.month-cards-container{ display: flex; flex-direction: column; gap: 1.25rem; }
.month-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-tight); margin: 0;
}
.month-card-legend{
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--navy-900);
}
.baseline-pill{
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--gold-100); color: var(--gold-700); padding: 0.25em 0.65em; border-radius: 999px;
}
.month-card-error{
  background: var(--bad-100); color: var(--bad-600); border-radius: 8px; padding: 0.6em 0.85em;
  font-size: 0.85rem; margin: 1rem 0 0;
}
.required-fields-note{ font-size: 0.85rem; color: var(--ink-faint); margin-top: 1.25rem; }
.validation-banner{
  background: var(--bad-100); color: var(--bad-600); border-radius: var(--radius-md);
  padding: 0.9em 1.1em; margin-top: 1rem; font-size: 0.92rem; font-weight: 600;
}

/* ---------- 9. RESULTS ---------- */
.results-header{ margin-bottom: 1.75rem; position: relative; }
.results-subhead{ color: var(--ink-muted); margin-bottom: 0.75rem; }
.accuracy-badge{
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--navy-050); color: var(--navy-700); padding: 0.3em 0.8em; border-radius: 999px;
}

.notice-banner{
  background: var(--navy-050); color: var(--navy-900); border-radius: var(--radius-md);
  padding: 0.9em 1.1em; font-size: 0.9rem; margin-bottom: 1.5rem;
}
.notice-warning{ background: var(--gold-100); color: var(--gold-700); }

.summary-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-bottom: 1.75rem;
}
/* The old fixed summary tile grid is superseded by .main-result-card
   (see PART 5/7) and is left hidden in the DOM rather than deleted.
   Needs its own [hidden] rule since a plain class selector's
   `display: grid` above would otherwise outrank the browser's default
   [hidden]{display:none} rule (author styles beat user-agent styles
   at equal specificity, regardless of source order). */
.summary-grid[hidden]{ display: none; margin-bottom: 0; }
.summary-tile{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow-tight);
}
.summary-tile.tile-hero{ grid-column: 1 / -1; background: var(--surface-dark); border-color: var(--surface-dark-border); }
.summary-tile.tile-hero .tile-label{ color: rgba(255,255,255,0.65); }
.summary-tile.tile-hero .tile-value{ color: #fff; font-size: 2.1rem; }
.summary-tile.tile-hero .tile-sub{ color: rgba(255,255,255,0.8); }
.tile-label{ font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 0.4em; }
.tile-value{ font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--navy-900); }
.tile-value.is-good{ color: var(--good-600); }
.tile-value.is-bad{ color: var(--bad-600); }
.tile-sub{ font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.3em; }

.driver-card, .insight-card, .table-card, .averages-card, .detail-charges-card, .accuracy-explain-card, .cta-card, .trend-card, .projection-section{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-tight); margin-bottom: 1.5rem;
}
.driver-bar-track{
  display: flex; width: 100%; height: 1.6rem; border-radius: 999px; overflow: hidden;
  background: var(--mist); margin-bottom: 0.9rem;
}
.driver-bar-segment{ height: 100%; transition: width 0.3s ease; }
.driver-segment-usage{ background: var(--navy-600); }
.driver-segment-pricing{ background: var(--gold-600); }
.driver-legend{ display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.legend-item{ display: flex; align-items: center; gap: 0.5em; }
.legend-swatch{ width: 0.85em; height: 0.85em; border-radius: 3px; display: inline-block; }
.swatch-usage{ background: var(--navy-600); }
.swatch-pricing{ background: var(--gold-600); }

.insight-card p{ color: var(--ink); font-size: 1rem; margin: 0; }

.charts-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.chart-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow-tight);
}
.chart-card-wide{ grid-column: 1 / -1; }
.chart-wrap{ position: relative; height: 240px; }
.chart-fallback{ display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--ink-faint); font-size: 0.85rem; margin: 0; padding: 0 1rem; }

.table-scroll{ overflow-x: auto; }
/* Base state: hidden on desktop/tablet — the mobile media query below
   (max-width: 760px) overrides this to display:block. This rule MUST
   stay before that media query in source order, or an identically-
   specific rule declared after it would win the cascade regardless of
   the query matching (this bit the project once already — see PART 9
   notes in README.txt if this ever needs touching again). */
.monthly-cards-mobile{ display: none; }
#monthly-table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 720px; }
#monthly-table th, #monthly-table td{
  text-align: right; padding: 0.65em 0.75em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
#monthly-table th:first-child, #monthly-table td:first-child{ text-align: left; }
#monthly-table thead th{
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint);
  font-weight: 600; border-bottom: 2px solid var(--line-strong);
}
#monthly-table tbody td{ font-family: var(--font-mono); color: var(--ink); }
#monthly-table tbody td:first-child{ font-family: var(--font-body); font-weight: 600; color: var(--navy-900); }
.cell-good{ color: var(--good-600); }
.cell-bad{ color: var(--bad-600); }
.baseline-row td{ background: var(--navy-050); }

/* ---------- 10. AVERAGES / DETAIL / ACCURACY ---------- */
.averages-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.avg-tile{ background: var(--mist); border-radius: var(--radius-md); padding: 1rem; }
.avg-tile .tile-label{ margin-bottom: 0.3em; }
.avg-tile .tile-value{ font-size: 1.15rem; }
.half-compare{ border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink); }
.half-compare h4{ font-size: 0.95rem; margin: 0 0 0.5em; color: var(--navy-900); font-family: var(--font-body); font-weight: 700; }

.detail-charges-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.charge-row{ display: flex; justify-content: space-between; background: var(--mist); border-radius: 8px; padding: 0.7em 0.9em; font-size: 0.9rem; }
.charge-row .charge-label{ color: var(--ink-muted); }
.charge-row .charge-value{ font-family: var(--font-mono); font-weight: 600; }
.section-note{ font-size: 0.82rem; color: var(--ink-faint); margin: 0; }

/* ---------- 10b. NATIONAL TREND / PROJECTION ---------- */
.section-kicker{
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-700); margin: 0 0 0.4em;
}
.trend-card p{ color: var(--ink); margin: 0 0 0.75em; }
.trend-card .source-line{ font-size: 0.8rem; color: var(--ink-faint); margin: 0; }
.trend-card .source-line a{ color: var(--navy-700); }

.projection-intro{ color: var(--ink); max-width: 720px; }

.projection-cards{
  display: flex; align-items: stretch; gap: 0.75rem; margin: 1.5rem 0 1rem;
}
.projection-card{
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.1rem 0.75rem;
}
.projection-card-label{ font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.projection-card-value{ font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: var(--navy-900); }
.projection-card-delta{ font-size: 0.82rem; font-weight: 600; color: var(--gold-700); }
.projection-arrow{ display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 1.2rem; flex-shrink: 0; }
.projection-caption{ text-align: center; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 0 0 1.25rem; }

.chart-subtitle{ font-size: 0.82rem; color: var(--ink-muted); margin: -0.5em 0 0.75em; }

.projection-disclaimer{ margin-top: 1.25rem; max-width: 100%; }

/* ---------- 11. CTA / DISCLAIMER / FOOTER ---------- */
.disclaimer{ font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; max-width: 680px; }
.cta-card{ text-align: center; border-color: var(--gold-600); background: var(--gold-100); }
.cta-card h3{ color: var(--navy-900); }
.cta-fallback-message{ font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.75rem; }

.report-actions{ display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }

/* Terms of Use — a quiet, collapsed disclosure that sits at the bottom
   of every page state (intro, wizard steps, and results). */
.terms-section{ background: var(--mist); border-top: 1px solid var(--line); padding: 1.5rem; }
.terms-details{ max-width: 800px; margin: 0 auto; }
.terms-details summary{
  cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--navy-700);
  list-style: none; display: inline-flex; align-items: center; gap: 0.4em;
}
.terms-details summary::-webkit-details-marker{ display: none; }
.terms-details summary::before{
  content: "›"; display: inline-block; font-size: 1.1em; transition: transform 0.15s ease;
}
.terms-details[open] summary::before{ transform: rotate(90deg); }
.terms-content{ margin-top: 1rem; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.6; }
.terms-content h3{ font-size: 0.95rem; color: var(--navy-900); margin-bottom: 0.5em; }
.terms-content p{ margin: 0 0 0.9em; color: var(--ink-muted); }
.terms-content p:last-child{ margin-bottom: 0; }

.site-footer{ text-align: center; padding: 2rem 1.5rem; color: var(--ink-faint); font-size: 0.82rem; }
.footer-copyright{ font-weight: 600; color: var(--ink-muted); margin: 0 0 0.5em; }

/* Legal footer links — same set and order as the main Ashborn site footer,
   drawn with this stylesheet's own tokens because this page intentionally
   never loads the site's styles.css (see the README note about the two
   stylesheets sharing class names). */
.footer-links{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem 1.75rem; margin: 0 0 1.25rem; padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.footer-links a{
  color: var(--ink-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500;
}
.footer-links a:hover, .footer-links a:focus-visible{ color: var(--gold-700); text-decoration: underline; }
@media (max-width: 760px){
  .footer-links{ gap: 0.6rem 1.1rem; }
}
.footer-legal{ max-width: 640px; margin: 0 auto 0.75em; line-height: 1.5; }
.footer-version{ font-size: 0.76rem; color: var(--ink-faint); margin: 0; }

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width: 760px){
  .field-grid{ grid-template-columns: 1fr; }
  .intro-steps{ grid-template-columns: 1fr; }
  .month-count-group-row{ grid-template-columns: 1fr; }
  .summary-grid{ grid-template-columns: 1fr; }
  .summary-tile.tile-hero .tile-value{ font-size: 1.8rem; }
  .charts-grid{ grid-template-columns: 1fr; }
  .averages-grid{ grid-template-columns: 1fr; }
  .detail-charges-grid{ grid-template-columns: 1fr; }
  .projection-cards{ flex-direction: column; }
  .projection-arrow{ transform: rotate(90deg); padding: 0.15rem 0; }
  .header-inner{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .brand-mark{ grid-column: 1; justify-self: center; }
  .brand-copy{ grid-column: 1; }
  .panel{ padding: 2rem 1.1rem; }
  .step-nav{ flex-direction: column-reverse; align-items: stretch; }
  .step-nav .btn{ width: 100%; }

  /* Month-by-month: table becomes horizontally-scrollable-and-cramped on
     small screens, so it's replaced with one card per month instead —
     see renderMonthlyCardsMobile() in the JS (PART 9). */
  .table-card > .table-scroll{ display: none; }
  .monthly-cards-mobile{ display: block; }

  #offset-comparison-table{ min-width: 0; font-size: 0.82rem; }
  #offset-comparison-table th, #offset-comparison-table td{ padding: 0.5em 0.4em; white-space: normal; }

  .main-result-card, .offset-25yr-card{ padding: 1.5rem 1.15rem; }
  .recommended-badge{ font-size: 0.6rem; padding: 0.2em 0.6em; }
}

/* ---------- 12. NEW REPORT SECTIONS ---------- */

/* intro description line under the opening headline */
.intro-description{ color: var(--ink-muted); font-size: 1.02rem; max-width: 640px; margin: -0.5rem auto 1.5rem; text-align: center; line-height: 1.5; }

/* ---- Step 2: Quick Comparison / Detailed Analysis month groups ---- */
.month-count-choices{ display: block; margin: 1.75rem 0; }
.month-count-group{ margin-bottom: 1.5rem; }
.month-count-group:last-child{ margin-bottom: 0; }
.month-count-group-label{
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin: 0 0 0.6rem;
}
.month-count-group-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.count-choice-recommended{ position: relative; border-color: var(--gold-600); }
.recommended-badge{
  position: absolute; top: -0.65rem; left: 50%; transform: translateX(-50%);
  background: var(--gold-600); color: var(--on-accent); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25em 0.75em; border-radius: 999px;
  white-space: nowrap;
}
.count-best-for{ font-size: 0.78rem; color: var(--ink-muted); text-align: center; margin-top: 0.3rem; line-height: 1.4; }
.count-best-for-group{ margin-top: 0.75rem; }

/* ---- Step 3: collapsible optional bill fields ---- */
.month-card-optional{ margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.month-card-optional summary{
  cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--navy-700); list-style: none; display: flex; align-items: center; gap: 0.5em;
  padding: 0.3em 0;
}
.month-card-optional summary::-webkit-details-marker{ display: none; }
.month-card-optional summary::before{
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.3em; height: 1.3em; border-radius: 50%; border: 1.5px solid var(--navy-700);
  font-size: 0.9em; flex-shrink: 0; transition: transform 0.15s ease;
}
.month-card-optional[open] summary::before{ content: "–"; }
.month-card-optional summary:hover{ color: var(--navy-900); }
.month-card-optional-grid{ margin-top: 1rem; }

/* ---- Main Result card (PART 5) ---- */
.main-result-card{
  background: var(--surface-dark); border: 1px solid var(--surface-dark-border);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem; margin-bottom: 1.5rem;
  text-align: center; color: #fff;
}
.main-result-eyebrow{
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold-400, var(--gold-600)); margin: 0 0 0.6rem;
}
.main-result-card h3{
  font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600;
  color: #fff; margin: 0 0 0.5rem; line-height: 1.2;
}
.main-result-sub{ color: rgba(255,255,255,0.78); font-size: 1rem; margin: 0 0 1.1rem; }
.main-result-line{ color: rgba(255,255,255,0.9); font-size: 0.98rem; margin: 0 0 0.4rem; max-width: 46ch; margin-inline: auto; }
.main-result-driver{
  font-weight: 700; color: #fff; margin: 1rem 0 0.5rem; font-size: 1rem;
  padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.18);
}
.main-result-qualifier{ font-size: 0.76rem; color: rgba(255,255,255,0.55); margin: 0.5rem 0 0; }

/* ---- Three Important Observations (PART 6) ---- */
.observations-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-tight); margin-bottom: 1.5rem;
}
.observations-list{ list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.observations-list li{
  position: relative; padding-left: 1.6rem; font-size: 0.95rem; color: var(--ink); line-height: 1.5;
}
.observations-list li::before{
  content: ""; position: absolute; left: 0; top: 0.35em; width: 0.7rem; height: 0.7rem;
  border-radius: 50%; background: var(--gold-600);
}

/* ---- CTA no-obligation line + second CTA ---- */
.cta-no-obligation{ font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.75rem; }
.cta-card-secondary{ margin-top: 0; }

/* ---- Month-by-month mobile cards (PART 9) ---- */
.month-summary-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1rem 1.1rem; margin-bottom: 0.85rem;
}
.month-summary-card:last-child{ margin-bottom: 0; }
.month-summary-card.is-baseline{ background: var(--navy-050); }
.mcard-title{
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--navy-900);
  margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem;
}
.mcard-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.88rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--line);
}
.mcard-row:last-child{ border-bottom: none; }
.mcard-row span:first-child{ color: var(--ink-muted); }
.mcard-row span:last-child{ font-family: var(--font-mono); font-weight: 600; color: var(--ink); text-align: right; }

/* ---- Extended projection cards (5 / 10 / 25 years + cumulative cost) ---- */
.projection-cards{ flex-wrap: wrap; }
.projection-card-sub{ font-size: 0.72rem; color: var(--ink-faint); line-height: 1.3; }
.projection-card-cumulative{
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--gold-700);
  margin-top: 0.5rem;
}
.trend-data-period{ font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); margin: 0 0 0.75em; }

/* ---- Illustrative 80% Utility Cost Offset Comparison (PART 12-15) ---- */
.offset-section{ margin-bottom: 0; }
.offset-intro{ color: var(--ink); max-width: 720px; margin: 0 0 0.75rem; }
.offset-assumption{ font-size: 0.95rem; color: var(--navy-900); margin: 0 0 1.5rem; }
.offset-table-card{ margin-bottom: 1.5rem; }
#offset-comparison-table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 620px; }
#offset-comparison-table th, #offset-comparison-table td{
  text-align: right; padding: 0.65em 0.75em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
#offset-comparison-table th:first-child, #offset-comparison-table td:first-child{ text-align: left; }
#offset-comparison-table thead th{
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint);
  font-weight: 600; border-bottom: 2px solid var(--line-strong); white-space: normal;
}
#offset-comparison-table tbody td{ font-family: var(--font-mono); color: var(--ink); }
#offset-comparison-table tbody td:first-child{ font-family: var(--font-body); font-weight: 600; color: var(--navy-900); }

.offset-25yr-card{
  background: var(--surface-dark); border: 1px solid var(--surface-dark-border);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem; margin-bottom: 1.5rem; color: #fff; text-align: center;
}
.offset-25yr-card h3{ font-family: var(--font-display); font-size: 1.4rem; color: #fff; margin: 0 0 1rem; }
.offset-25yr-card p{ color: rgba(255,255,255,0.85); font-size: 0.98rem; max-width: 52ch; margin: 0 auto 0.65rem; line-height: 1.55; }
.offset-25yr-avoided{ font-weight: 700; color: #fff !important; font-size: 1.05rem !important; }

.offset-disclosure{
  font-size: 0.85rem; color: var(--ink); line-height: 1.55; background: var(--mist);
  border-radius: var(--radius-md); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
}


.print-letterhead{ display: none; }
@media print{
  body{ background: #fff; }
  .site-header, .wizard-progress, .intro-panel, .step-panel, .site-footer{ display: none !important; }
  .no-print{ display: none !important; }
  .print-letterhead{ display: flex; justify-content: center; margin-bottom: 1.5rem; }
  .print-letterhead img{ height: 34px; width: auto; }
  .results-panel{ padding: 0; }
  .panel-inner{ max-width: 100%; }
  .summary-tile, .driver-card, .insight-card, .chart-card, .table-card, .averages-card, .detail-charges-card, .accuracy-explain-card, .cta-card, .trend-card, .projection-section,
  .main-result-card, .observations-card, .offset-section, .offset-table-card, .offset-25yr-card{
    box-shadow: none; border: 1px solid #ccc; break-inside: avoid;
  }
  .summary-tile.tile-hero, .main-result-card, .offset-25yr-card{ background: #13241c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .charts-grid{ break-inside: avoid; }
  /* On paper, the desktop table is what should print, never the mobile
     card list, regardless of the paper size / print preview width. */
  .table-card > .table-scroll{ display: block !important; }
  .monthly-cards-mobile{ display: none !important; }
  a[href]::after{ content: ""; }
}


/* ---------- 14. "YOU COULD BE SAVING" SAVINGS CARDS ----------
   Deliberately understated: brand tokens only, no gradients, no badges,
   no exclamation points. It reads as prominent because of its position,
   its accent border, and the weight of the longest-period card — not
   because it shouts. */
.savings-section{
  background: var(--gold-100);
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.savings-section > .section-kicker{ color: var(--gold-700); }
.savings-section h3{
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 600;
  color: var(--navy-900);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.savings-intro{
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 1.4rem;
}
.savings-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  align-items: stretch;
}
.savings-card{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.4rem 0.9rem;
  box-shadow: var(--shadow-tight);
}
.savings-card-label{
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.savings-card-value{
  font-family: var(--font-mono); font-size: 1.65rem; font-weight: 600;
  color: var(--navy-900); line-height: 1.15;
}
.savings-card-sub{ font-size: 0.8rem; color: var(--ink-muted); }

/* The longest period carries the most weight — it is the point of the
   section. Same card, darker surface, larger figure. */
.savings-card.is-featured{
  background: var(--surface-dark);
  border-color: var(--surface-dark-border);
  box-shadow: var(--shadow-soft);
  padding: 1.7rem 0.9rem;
}
.savings-card.is-featured .savings-card-label{ color: var(--gold-600); }
.savings-card.is-featured .savings-card-value{ color: #fff; font-size: 2.05rem; }
.savings-card.is-featured .savings-card-sub{ color: rgba(255,255,255,0.8); }

.savings-assumption-note{
  font-size: 0.85rem; color: var(--ink-muted); line-height: 1.5;
  margin: 1.2rem 0 0; max-width: 68ch;
}
.savings-unavailable{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1rem 1.15rem; font-size: 0.92rem; color: var(--ink);
  line-height: 1.55; margin: 0 0 1rem;
}
.savings-disclaimer{
  font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5;
  margin: 1rem 0 0; max-width: 80ch;
}

@media (max-width: 760px){
  .savings-section{ padding: 1.4rem 1.1rem; }
  .savings-cards{ grid-template-columns: 1fr; }
  .savings-card{ padding: 1.15rem 0.9rem; }
  .savings-card.is-featured .savings-card-value{ font-size: 1.9rem; }
}

@media print{
  .savings-section{ break-inside: avoid; page-break-inside: avoid; }
  .savings-card.is-featured{
    background: #13241c !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* "Read more" toggle for the legal notes on the savings and offset
   examples (added 2026-09-22). Same look as the Terms of Use toggle. */
.legal-more summary{
  cursor: pointer; font-weight: 600; color: var(--navy-700);
  list-style: none; display: inline-flex; align-items: center; gap: 0.4em;
}
.legal-more summary::-webkit-details-marker{ display: none; }
.legal-more summary::before{ content: "\203A"; display: inline-block; font-size: 1.1em; transition: transform 0.15s ease; }
.legal-more[open] summary::before{ transform: rotate(90deg); }
.legal-more p{ margin: 0.6rem 0 0; }
.offset-more{ font-size: 0.82rem; color: var(--ink-muted); line-height: 1.55; margin: -0.75rem 0 1.5rem; }
@media print{ .legal-more summary{ display: none; } }