/* Secondary text is dimmed with two shared opacity tiers rather than
   per-element literals. The values are the lowest that still clear the
   WCAG AA 4.5:1 minimum against the *tightest* background in each theme
   (light: --highlight-bg #f4f4f0, dark: --card-bg #243241), so muted text
   stays as quiet as it can while remaining accessible. Dark mode needs
   higher values because its card background sits closer to its text color.
   Don't lower these without redoing the contrast math. */
:root {
    --bg-color: #f5f6f7;
    --text-color: #2a2a2a;
    --card-bg: #ffffff;
    --border-color: #e5e5e3;
    --accent-color: #3DB472;
    --highlight-bg: #f4f4f0;
    /* Chart series. Blue/amber survives red-green colour deficiency, which the
       old green/grey pair did not, and it fixes a real defect: the green line
       measured 2.63:1 on white and failed WCAG 1.4.11's 3:1 for graphics.
       Amber has to run darker in light mode (#D97706 is only 2.89:1). The fill
       between the lines stays brand green — it's the gap, i.e. blue+yellow. */
    --series-invested: #2563EB;  /* 4.69:1 */
    --series-spent: #C2620A;     /* 3.77:1 */
    /* Text variants of the series colours. Lines only need 3:1 (graphics) but
       the caption figures are small text at 4.5:1, and light-mode amber can't
       reach that at line weight — #C2620A is 4.16:1 on white. Blue is fine as
       is, so only amber is darkened. */
    --series-invested-text: #2563EB;
    --series-spent-text: #A8560A;
    /* Ink for text sitting on --accent-color. White measures only 2.63:1 on
       the accent green; this navy (the dark theme's --bg-color) gives 5.60:1. */
    --on-accent: #1D2936;
    /* The accent green is only 2.4-2.6:1 as *text* on the light backgrounds,
       so light mode uses a darkened green for text only (>=4.85:1 everywhere).
       --accent-color itself is untouched and still fills every graphic use:
       buttons, slider, chart lines, icons, borders. Dark mode needs no
       variant -- the green already measures 4.96:1 on --card-bg there. */
    --accent-text: #28794C;
    --op-muted: 0.82;   /* secondary body text  -> min 7.55:1 */
    --op-subtle: 0.70;  /* small/label text     -> min 5.14:1 */
    /* Card/badge system (redesign): soft depth via layered shadows rather than
       flat borders alone, plus a hairline border tuned per-theme so cards read
       as distinct surfaces without a heavy outline. */
    --card-border: rgba(20, 30, 25, 0.07);
    --shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.04), 0 1px 1px rgba(20, 30, 25, 0.03);
    --shadow-md: 0 1px 2px rgba(20, 30, 25, 0.04), 0 8px 20px -6px rgba(20, 30, 25, 0.10);
    --shadow-lg: 0 2px 4px rgba(20, 30, 25, 0.05), 0 16px 36px -10px rgba(20, 30, 25, 0.14);
}

html.dark-theme {
    --bg-color: #1D2936;
    --text-color: #A9B7C3;
    --card-bg: #243241;
    --border-color: #394758;
    --accent-color: #3DB472;
    --highlight-bg: #1D2936;
    --series-invested: #22D3EE;  /* cyan, 7.23:1 on --card-bg */
    --series-spent: #FBBF24;     /* 7.83:1 */
    --series-invested-text: #22D3EE;   /* dark has headroom; no variant needed */
    --series-spent-text: #FBBF24;
    --accent-text: var(--accent-color);
    --op-muted: 0.90;   /* -> min 5.50:1 */
    --op-subtle: 0.82;  /* -> min 4.83:1 */
    --card-border: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 24px -8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 44px -12px rgba(0, 0, 0, 0.55);
}

/* Reserves the vertical scrollbar's gutter on every page, whether or not that
   page actually scrolls. Without this, a browser that reserves scrollbar width
   in the layout (Windows/Linux by default, macOS when a mouse is connected)
   renders the short homepage a scrollbar-width wider than the much taller
   calculator pages, since only the latter ever needs to scroll — the card
   would sit at a genuinely different width depending on the page. */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 2rem 1rem;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* --- Independent Footer Greeting Typography --- */
.dynamic-greeting-box {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    opacity: var(--op-muted);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.dynamic-greeting-box p {
    margin: 0;
}

.greeting-icon {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}


.container { width: 100%; max-width: 520px; }
.page-main { min-width: 0; }
/* Matches the homepage's own 0.85rem card-stack gap at every viewport, not
   just mobile, so the space under the header reads the same as the space
   between any two cards everywhere. Was 2.5rem — real, uncounted whitespace
   at desktop width in particular (measured: 40px margin here plus another
   32-34px from .calculator-card's own top padding, 74px combined). */
.site-header { margin-bottom: 0.85rem; }
/* Same h1 size on every page at desktop widths -- home and the calculator
   pages must land the card at the same Y position so navigating between them
   doesn't visibly shift the page. (A per-page desktop size was carried over
   from the mockup's demo, which never actually tested real navigation between
   separate documents; measured against the pre-redesign site, that override
   was the one thing that introduced a header-height mismatch that didn't
   exist before.) The mobile-only reduction below is unrelated and still
   needed -- "Subscriptions Cost" at the full 2rem wraps to 2 lines at 320px. */
.site-header h1 { font-size: 2rem; line-height: 1.1; margin: 0 0 0.35rem; font-weight: 800; letter-spacing: -0.025em; }
.tagline { font-size: 0.9375rem; line-height: 1.5; opacity: var(--op-muted); margin: 0; max-width: 46ch; }

/* Matches .theme-switch-wrapper's margin-bottom (the homepage's equivalent top
   bar) so .page-layout starts at the same Y on every page — otherwise the card
   lands 8px lower here than on the homepage. Mobile overrides this below. */
.navigation-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.theme-switch-wrapper { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.back-link { color: var(--accent-text); font-size: 0.8125rem; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.back-link:hover { text-decoration: underline; }

/* Icon-only pill switch, replacing the old text button ("🌙 Dark Mode"). Purely
   CSS-driven off html.dark-theme -- no per-instance JS state needed beyond the
   class toggle app.js already does. No visible text, so the accessible name
   comes entirely from aria-label (set in markup); both icon spans stay
   aria-hidden so they can't contribute a conflicting name. */
.theme-switch {
    position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    width: 52px; height: 28px; padding: 0 6px; border-radius: 9999px;
    background: var(--highlight-bg); border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm); cursor: pointer;
}
.theme-switch .ts-icon { font-size: 0.7rem; line-height: 1; position: relative; z-index: 1; opacity: 0.4; transition: opacity 0.18s ease; }
.theme-switch .ts-sun { opacity: 1; }
html.dark-theme .theme-switch .ts-sun { opacity: 0.4; }
html.dark-theme .theme-switch .ts-moon { opacity: 1; }
.theme-switch .ts-thumb {
    position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}
html.dark-theme .theme-switch .ts-thumb { transform: translateX(24px); }

/* Top padding is half the other three sides -- the header's own margin
   already provides separation above the card, so full 2rem here was a
   second, redundant gap stacking on top of it (measured: 74px combined at
   desktop before this). Left/right/bottom keep the full 2rem framing. */
.calculator-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 1rem 2rem 2rem; margin-bottom: 2rem; }
.input-group { margin-bottom: 2rem; }
/* Adjacent block margins collapse to the larger value, not the sum — so the
   slider's 2rem was winning over .spend-breakdown's own 1.25rem top margin
   regardless of that value. Scoped to the slider specifically (not the rate
   stepper below), which shares the same .input-group class but isn't followed
   by the breakdown. */
.input-group:has(#monthly-spend) { margin-bottom: 1rem; }
.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-weight: 500; }
.value-display { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-text); }

/* The input box IS the touch target, so it's 44px tall (Apple HIG) with the
   6px track painted by the track pseudo-element instead of the input itself.
   It was previously height:4px, which left a 4px-tall drag target on the app's
   primary control. The thumb is 24px to clear WCAG 2.2 AA 2.5.8.
   Both -webkit- and -moz- pseudo-elements are needed: `appearance: none`
   strips Firefox's default styling too, and only the -webkit- ones existed, so
   Firefox rendered an unstyled grey thumb. They can't be merged into one
   selector list — one unknown pseudo-element invalidates the whole rule.
   The gradient track (rather than a flat color) reads the filled portion at a
   glance; `--fill` is set from app.js on load and on every `input` event. */
input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; background: transparent; outline: none; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-color) var(--fill, 0%), var(--border-color) var(--fill, 0%)); }
input[type="range"]::-moz-range-track { height: 6px; background: var(--border-color); border-radius: 3px; }
input[type="range"]::-moz-range-progress { height: 6px; background: var(--accent-color); border-radius: 3px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: pointer; margin-top: -9px; }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: pointer; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-color); outline-offset: 2px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* Rate stepper. Deliberately not a native number input: its spinner arrows are
   ~10-15px, and on mobile it raises a keyboard that covers the chart, which
   kills the live feedback the whole tool depends on. Buttons are 44px. */
.rate-stepper { display: flex; align-items: center; gap: 0.75rem; }
.rate-step { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); color: var(--text-color); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.rate-step:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-text); }
.rate-step:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.rate-step:disabled { opacity: 0.35; cursor: default; }
.rate-value { flex: 1; text-align: center; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); }

.spend-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.25rem 0 2rem; padding: 1rem 0.75rem; background-color: var(--highlight-bg); border: 1px solid var(--card-border); border-radius: 12px; }
.spend-breakdown-item { text-align: center; }
.spend-breakdown-label { display: block; margin-bottom: 0.25rem; }
.spend-breakdown-value { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--series-spent-text); }

/* The gap gets weight from type scale, not from a filled box and four
   full-width label/value rows — that block was 203px introducing a 116px
   chart. The two supporting figures are the endpoints of the chart's own two
   lines, so they sit at caption scale rather than as headline rows. The annual
   cost row was dropped outright: it duplicated the breakdown's Yearly cell
   exactly, on all three pages. */
.results-display { position: relative; margin: 0 -0.75rem 1.25rem; padding: 0.5rem 0.75rem; }
/* A single label treatment for every field in the card — the hero eyebrow, the
   breakdown cell labels, and the slider/rate labels. `text-transform` doesn't
   affect the accessible name, so the slider's <label> still reads normally. */
.result-eyebrow,
.spend-breakdown-label,
.label-row label,
.label-row #rate-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; opacity: var(--op-subtle); }
.result-eyebrow { display: block; }
.result-hero { display: block; font-size: 2.25rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent-text); margin: 0.2rem 0 0.35rem; }
.result-caption { margin: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; opacity: 0.95; }
/* Unscoped from .result-caption so the chart tooltip's own figures can reuse
   the same classes -- one color meaning, wherever a spent/invested number
   appears. */
.figure-spent { color: var(--series-spent-text); font-weight: 700; }
.figure-invested { color: var(--series-invested-text); font-weight: 700; }
.figure-gap { color: var(--accent-text); font-weight: 700; }

[data-year] { cursor: pointer; border-radius: 6px; transition: background-color 0.1s ease; }
[data-year]:hover,
[data-year]:focus-visible,
[data-year].chart-linked { background-color: var(--highlight-bg); outline: none; }

/* --- Growth Chart (homepage) --- */
.growth-chart-wrap { position: relative; margin: 1.5rem 0 0.5rem 0; }

/* The zero-state prompt sits *over* the chart rather than replacing it. Anchored
   to the bottom of the wrap and given the SVG's own 600:220 aspect ratio, it
   covers exactly the plot area and not the legend above it — no extra wrapper
   element needed. `pointer-events: none` keeps chart hover unobstructed. */
#growth-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }

.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line-spent { stroke: var(--series-spent); }
/* Gradient fill (rather than a flat opacity wash) plus a soft glow on the
   invested line -- the "hero" series -- to draw the eye to the number the
   site is named for. Both are cheap: one <linearGradient> per page and a
   drop-shadow filter, no new network requests. */
.chart-line-invested { stroke: var(--series-invested); filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--series-invested) 45%, transparent)); }
.chart-area-fill { fill: url(#areaGrad); stroke: none; }

.chart-gridline { stroke: var(--card-border); stroke-width: 1; }
.chart-axis-label { fill: var(--text-color); opacity: var(--op-subtle); font-size: 9px; font-family: inherit; }

#chart-hover[hidden] { display: none; }

.chart-crosshair { stroke: var(--card-border); stroke-width: 1; }
.chart-dot-ring { fill: var(--card-bg); }
.chart-dot-spent { fill: var(--series-spent); }
.chart-dot-invested { fill: var(--series-invested); }

.chart-tooltip { position: absolute; pointer-events: none; background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 0.5rem 0.6rem; font-size: 0.8rem; box-shadow: var(--shadow-md); width: 202px; box-sizing: border-box; z-index: 5; }
.chart-tooltip-year { font-weight: 600; margin-bottom: 0.4rem; opacity: var(--op-subtle); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.chart-tooltip-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0; }
.chart-tooltip-row span:last-of-type { flex: 1; opacity: var(--op-muted); }
.chart-tooltip-key { width: 10px; height: 2px; border-radius: 1px; display: inline-block; flex-shrink: 0; }
.chart-tooltip-key.key-spent { background-color: var(--series-spent); }
.chart-tooltip-key.key-invested { background-color: var(--series-invested); }
.chart-tooltip-row strong { font-variant-numeric: tabular-nums; }
.chart-tooltip-gap { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--card-border); }

/* Shared header treatment across all 4 pages: icon(s) to the left of the
   title/tagline, sitting in a tinted rounded-square badge, with a bottom
   border to close the header off from the card below. The homepage's icon is
   two strokes (its own brand mark); each calculator page reuses the single
   icon already drawn for its own directory card on the homepage, at the same
   size, so the same class works for both without any per-page-count CSS.
   `align-items: stretch` makes the badge automatically match whatever height
   the h1+tagline text block actually renders at (no hardcoded number to keep
   in sync across 1-line and 2-line taglines, or across breakpoints). */
.site-header {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.15rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--card-border);
}
.header-icons {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 0;
    width: 60px; min-height: 60px; border-radius: 16px;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--card-bg));
}
.header-icons svg { width: 26px; height: 26px; }
/* The droplet's own curve leaves more empty margin on its right than the
   arrow leaves on its left, so a flush `gap: 0` still reads as two icons
   further apart than they are -- this closes that gap without touching
   either path. Only the homepage header has two icons; harmless no-op
   elsewhere since the class is simply absent. */
.header-icons svg.icon-droplet { margin-right: -3px; }
.header-text { min-width: 0; }

/* --- Home: calculator directory (homepage only) --- */
#page-home .card-stack { display: flex; flex-direction: column; gap: 0.85rem; }
#page-home .calc-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
    min-height: 6.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.3rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#page-home .calc-card:hover { border-color: color-mix(in srgb, var(--accent-color) 35%, var(--card-border)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
#page-home .calc-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
/* Fixed size, not height-matched to the text block like the header badge is:
   real card titles ("Subscriptions Cost Calculator") wrap to 2 lines at
   narrow widths, which would stretch the badge into a tall, odd-looking pill
   rather than a square. Verified via Playwright at 320-375px -- this isn't
   a rare edge case here, it's the normal mobile rendering, so the badge
   stays a fixed square and the row just grows taller around it instead. */
#page-home .calc-icon {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--card-bg));
}
#page-home .calc-icon svg { width: 28px; height: 28px; }
#page-home .calc-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
#page-home .calc-text strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-color); }
#page-home .calc-text .desc { font-size: 0.85rem; line-height: 1.5; opacity: var(--op-muted); }
/* Replaces the old inline "&rarr;" glyph that used to live inside the title
   text -- on narrow phones that glyph pushed the longest titles ("Subscriptions
   Cost Calculator") onto a second line, which then stretched the icon badge
   (align-items: stretch, so the badge matches the text block's height) into
   an oddly tall pill. A separate arrow element keeps the title itself short
   enough to stay on one line at every width tested. */
#page-home .calc-arrow { align-self: center; margin-left: auto; flex-shrink: 0; opacity: 0.4; transition: transform 0.18s ease, opacity 0.18s ease; }
#page-home .calc-card:hover .calc-arrow { transform: translateX(3px); opacity: 0.9; color: var(--accent-text); }

.site-philosophy { margin-top: 2rem; padding: 1.25rem 1.35rem; border-top: none; border-radius: 12px; background-color: var(--highlight-bg); border: 1px solid var(--card-border); font-size: 0.88rem; opacity: 1; }
.site-philosophy h2 { font-size: 0.9375rem; margin: 0 0 0.5rem 0; font-weight: 700; }
.site-philosophy p { margin: 0; opacity: var(--op-muted); }

/* Wide viewport: single centered column (no sponsor sidebar for this initial
   release — see the "no sponsor yet" note in the project handoff. When a real
   sponsor exists, reintroduce it as its own commit rather than un-hiding this
   one; git history already has the prior sidebar layout if it's ever useful
   as a reference). */
@media (min-width: 760px) {
    .container { max-width: 620px; }
    .result-hero { font-size: 2.5rem; }
    .page-layout {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "header" "main";
    }
    .page-layout > .site-header { grid-area: header; }
    .page-layout > .page-main { grid-area: main; }
}

/* Phones lose 96px of width to body + card padding, which also shortens the
   chart (its height is width x 220/600). Trimming the card padding gives the
   chart back ~24px of width. A genuinely taller mobile chart needs a
   responsive viewBox — deferred, see handoff. */
/* Mobile-first fold budget: the goal is hero + chart + slider visible without
   scrolling on a 375px phone (~553px of usable height in iOS Safari). Every
   value here was chosen against that budget — see the handoff. */
@media (max-width: 759px) {
    body { padding: 0.75rem; }
    /* Top padding halved again on top of the base rule's own halving (same
       reasoning: the header's margin-bottom already separates the card from
       the header, so full top padding here doubled up on it). */
    .calculator-card { padding: 0.5rem 1rem 1rem; }
    /* Tightened purely to buy fold budget on a 375px phone; each of these was
       measured, not guessed. Together they reclaim ~34px. */
    .results-display { margin: 0 -0.75rem 0.75rem; }
    .result-hero { margin: 0.1rem 0 0.2rem; }
    .label-row { margin-bottom: 0.5rem; }
    /* The page title repeats the homepage card the user just tapped, so on a
       phone it's pure cost. Kept on the homepage, which needs its value prop. */
    main:not(#page-home) .site-header h1 { font-size: 1.35rem; }
    main:not(#page-home) .tagline { display: none; }
    #page-home .site-header h1 { font-size: 1.1rem; }
    .navigation-bar { margin-bottom: 0.5rem; }
}

/* Older/smaller phones (original iPhone SE and similar, ~320px) used to need
   a further icon+title shrink tier here. Re-measured via Playwright for the
   redesign's smaller 26px header icon(s) (was 48px): at 320px, neither
   "Leaking Opportunity" nor "Subscriptions Cost" (the longest calculator
   title) wraps even at the 759px tier's larger sizes above, so the old
   357px tier is dead weight with the smaller icon and has been removed
   rather than carried forward unverified. */

/* --- Long-Form Editorial Content --- */
.content-section { margin-top: 2.5rem; }
.content-section h2 { font-size: 1.3rem; margin: 0 0 1rem 0; font-weight: 800; letter-spacing: -0.01em; }
.content-section p { margin: 0 0 1rem 0; opacity: var(--op-muted); }
.content-section p:last-child { margin-bottom: 0; }

/* --- Native FAQ Accordion (details/summary, zero JS) --- */
.faq-section { margin-top: 2.5rem; }
.faq-section h2 { font-size: 1.15rem; margin: 0 0 1rem 0; font-weight: 800; letter-spacing: -0.01em; }
.faq-item { border-bottom: 1px solid var(--card-border); padding: 0.9rem 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
/* A small circular +/x badge (matching the icon-badge language used
   elsewhere) instead of a bare character -- rotates open rather than
   swapping glyphs, so it animates instead of popping. */
.faq-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 12%, transparent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; transition: transform 0.2s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { margin: 0.75rem 0 0 0; opacity: var(--op-muted); font-size: 0.92rem; }

/* --- Related Calculators (internal cross-links) --- */
.related-section { margin-top: 2.5rem; }
.related-section h2 { font-size: 1.15rem; margin: 0 0 1rem 0; font-weight: 800; letter-spacing: -0.01em; }
.related-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.related-links a { color: var(--accent-text); text-decoration: none; font-weight: 700; }
.related-links a:hover { text-decoration: underline; }
.related-links span { opacity: var(--op-muted); }