/* =====================================================================================================================
   THE PALETTE  —  SAPPHIRE & GRAPHITE

   The domain's colours, declared twice: once on :root for light, once on [data-theme="dark"] for dark. Every rule
   below this block reaches for a variable and never a literal, so a calculator restyles by naming the accent family
   in tools/<slug>/theme.css and nothing else.

   -------------------------------------------------------------------------------------------------------------------
   WHY BLUE, AND WHY GREEN IS NO LONGER THE BRAND

   These are financial calculators. A visitor arrives to be told a number they will make a real decision on, so the
   page has one job before it has any other: look like it can be believed. Deep blue is the colour finance has used
   for that for a century — banks, ratings agencies, custodians, regulators — and it reads the same way in every
   market, which matters because the shell is shared by every calculator on the domain and none of them get to pick
   a culturally local accent. Blue is also the safest hue on earth for this: it carries no warning, no celebration
   and no market-specific superstition, and it is the one saturated family that stays legible to the ~8% of men with
   a red/green deficiency.

   The shell used to be teal-green throughout, which cost it the one thing a money page cannot afford to spend:
   green had to mean "the brand" AND "you are up" at the same time, and the reader had no way to tell which a green
   number was. Moving the brand to sapphire hands green back to the figures. Now the chrome is blue, and colour on a
   NUMBER means exactly one thing —

       green  = money gained            (--success / --success-bright, unchanged from the teal era on purpose)
       red    = money lost              (--error / --error-bright, likewise unchanged)
       amber  = a caveat on the figure  (--warning)
       blue   = the interface talking, never the result

   Semantic greens and reds are therefore deliberately NOT harmonised toward the new blue. They are the reader's
   only cue for gain and loss and they are worth more held constant than made prettier.

   -------------------------------------------------------------------------------------------------------------------
   THE NEUTRALS ARE NOT GREY

   Every neutral here is a desaturated navy rather than a true grey: the light page sits at #F3F6FD rather than
   #FFFFFF, and the dark page at #0A1020 rather than #000000. A page of pure grey under a blue accent looks like the
   accent was dropped onto a template. Tinting the whole neutral ramp a few degrees toward the accent is what makes
   a palette read as one considered object, and it costs nothing in contrast — the light body text still clears 16:1
   and the dark 16:1, both far past WCAG AA.

   Contrast was measured, not eyeballed. Every text/background pair below clears AA at its size, and the accent
   clears 5.7:1 on white in light and 7.2:1 on the card in dark, and every one of the three accents is carried at
   78-95% saturation rather than the muted 48-68% the first pass shipped.
   ===================================================================================================================== */

:root {
    /* ---- THE ACCENT FAMILY  —  light ----------------------------------------------------------------------------
       Historically named "gold". The name is now wrong twice over and is kept anyway: it is spoken by several
       thousand declarations below and by every tools/<slug>/theme.css on the domain, and renaming it buys nothing a
       comment does not. Read it as "the accent". ------------------------------------------------------------------ */
    --gold: #1E5FD8;                              /* royal sapphire — the brand, 5.7:1 on white, S76             */
    --gold-bright: #3B82F6;                       /* royal — hovers, the live end of the gradient                 */
    --gold-light: #8FBAFF;                        /* azure — glows, ambient wash, scrollbar hover                 */
    --gold-text: #1A4BB0;                         /* deeper, for accent-coloured TEXT — 7.8:1 on white           */
    --gold-tint: rgba(30, 95, 216, 0.13);
    --gold-tint-line: rgba(30, 95, 216, 0.32);
    --champagne: #E6EEFE;                         /* ice — accent text sitting on a dark panel                    */
    --primary: #1E5FD8;
    --accent: #1E5FD8;
    --accent-cyan: #3B82F6;
    --accent-glow: rgba(30, 95, 216, 0.32);

    /* ---- THE SUPPORTING HUES  —  light --------------------------------------------------------------------------
       Sapphire alone is trustworthy and, on a page this long, monotonous: every chip, tile, step marker and badge
       came out the same blue, so nothing on the page had a shape you could remember.

       These two give the interface somewhere else to go WITHOUT touching the verdict colours. The whole safe band
       ONE FAMILY, THREE STEPS. An earlier pass ran sapphire / violet / cyan, and the violet was wrong: three
       unrelated hues appearing in sequence read as random rather than as a system, which is the worst thing a
       colour can do on a page about money.

       So these are not three hues, they are one ramp — deep blue 222°, royal 219°, cyan 196° — separated as much
       by VALUE as by hue (luminance 0.065 / 0.134 / 0.246). Three steps of the same idea look deliberate in a way
       three different ideas never will, and the eye reads a ramp as depth rather than as decoration.

       The band is also narrower than it looks. Green (100-160°) is gain, amber (35-50°) is a caveat and red
       (0-20°) is loss, so they are unavailable to the interface at any strength; lime reads as a weak green and
       magenta as a weak red, so they are out too. What is genuinely left is 160-260°, teal-cyan through blue —
       and the teal end has to stay clear of --success at 160°, which is why cyan stops at 196° rather than
       carrying on down. Each step clears 4.5:1 on white in its -text form.

       They are DOMAIN WIDE and are not overridden per calculator, exactly like chart slots 2-7. A tool picks its
       own --gold; the supporting pair stays constant so the family reads as one system across every calculator.
       Use them for rhythm — alternating tiles, step markers, section numbers — never to encode meaning. Nothing on
       this site may mean something because it is the deep step rather than the bright one. --------------------- */
    --accent-2: #123FA8;                          /* deep blue — the dark step, 9.1:1 on white, S80              */
    --accent-2-bright: #2952C9;
    --accent-2-text: #0F348B;                     /* 8.7:1                                                        */
    --accent-2-tint: rgba(18, 63, 168, 0.13);
    --accent-2-line: rgba(18, 63, 168, 0.32);
    --accent-2-glow: rgba(18, 63, 168, 0.32);
    --accent-3: #0592C4;                          /* cyan — S95; -text form is 5.8:1, 36° clear of --success      */
    --accent-3-bright: #22B3E0;
    --accent-3-text: #046D93;                     /* 7.4:1                                                        */
    --accent-3-tint: rgba(5, 146, 196, 0.13);
    --accent-3-line: rgba(5, 146, 196, 0.32);
    --accent-3-glow: rgba(5, 146, 196, 0.32);

    /* Deep blue through royal into cyan — the ramp itself, rather than one blue lightened and darkened. Every stop clears
       4.5:1 against --on-accent, because ten components put text or an icon directly on this. --gradient-vivid is
       the three-hue version for the few large surfaces that can carry it. */
    --gradient-primary: linear-gradient(115deg, #123FA8 0%, #1E5FD8 46%, #2F70E8 100%);
    --gradient-vivid: linear-gradient(115deg, #0D3278 0%, #1E5FD8 46%, #2F70E8 100%);

    /* ---- THE SECONDARY BUTTON'S FILL  —  light --------------------------------------------------------------------
       A SOLID slab, same as primary, because the two are meant to look like one control at two weights. Primary is
       --ink; this is the same navy family lifted a few steps so it recedes.

       The number that matters is contrast against the PAGE, because that is what decides which button the eye goes
       to first: primary 16.6:1, this 7.4:1. Primary reads 2.2x harder. Any replacement value has to keep that gap
       — a secondary that creeps darker is a second primary. */
    /* ---- THE BUTTONS  —  light --------------------------------------------------------------------------------
       THE BUTTONS ARE MIXED FROM var(--gold). They are not picked, and they are not written down as blues.

       This block was re-picked five or six times and was wrong every time for the same reason, which is worth
       stating plainly: shell.css's --gold is #1E5FD8, a sapphire, but EVERY CALCULATOR OVERRIDES IT. The aged
       care tool sets it to #0A7AAF, a deep teal-blue. So the running site has teal-blue links, teal-blue focus
       rings, a teal-blue scrollbar — and had sapphire buttons, because the buttons were hard-coded here against
       a default no live page ever uses. Every "the blues are ugly" was that mismatch, and nudging the hard-coded
       hue could never fix it because the hue was in the wrong file.

       So the fills are derived. --gold, darkened or lightened by fixed amounts:

           primary rest      gold at 48% / 64% / 80% toward #03151F
           primary reveal    gold at 80% / 90% / 100%      <- the last stop IS --gold, exactly
           secondary         gold at 62% mixed with a slate, so it stays the same colour, quieter
           bar               gold at 28% toward white

       Hover therefore DEEPENS toward the accent and lands on it. It does not brighten: --gold on this tool is
       only 4.8:1 under white already, so lightening it would break the label. Deepening improves contrast as the
       reveal rises, which is why the numbers below get better on hover rather than worse.

       Each declaration is written TWICE. The first is a static fallback for browsers without color-mix; the
       second wins wherever it is supported. The fallback values are this tool's teal resolved by hand, so an old
       browser gets a coherent button rather than a transparent one.

       A calculator that picks a green or a red --gold will get green or red buttons, and should not — see the
       note in tools/_template/theme.css. */
    --btn-primary-bg: linear-gradient(135deg, #064564 0%, #07567B 50%, #096692 100%);
    --btn-primary-bg: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 48%, #03151F) 0%,
        color-mix(in srgb, var(--gold) 64%, #03151F) 50%,
        color-mix(in srgb, var(--gold) 80%, #03151F) 100%);
    --btn-primary-hover: linear-gradient(135deg, #096692 0%, #0970A1 50%, #0A7AAF 100%);
    --btn-primary-hover: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 80%, #03151F) 0%,
        color-mix(in srgb, var(--gold) 90%, #03151F) 50%,
        var(--gold) 100%);
    --btn-primary-ink: #FFFFFF;
    --btn-primary-bar: #BADAE9;
    --btn-primary-bar: color-mix(in srgb, var(--gold) 28%, #FFFFFF);

    --btn-secondary-bg: #2A749A;
    --btn-secondary-bg: color-mix(in srgb, var(--gold) 62%, #5E6B78);
    --btn-secondary-ink: #FFFFFF;
    --ink: #0B1728;                               /* navy-black — the footer, the darkest surface                 */
    --bone: #FFFFFF;
    --bg-primary: #F3F6FD;                        /* cool paper, not white — white is reserved for cards          */
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E4ECFA;
    --bg-card: rgba(255, 255, 255, 0.86);
    --bg-glass: rgba(243, 246, 253, 0.82);
    --text-primary: #0B1728;                      /* 16.6:1 on --bg-primary                                       */
    --text-secondary: #4B5A70;                    /* 6.5:1                                                        */
    --text-muted: #7C8CA4;                        /* 3.2:1 — micro-copy and disabled only, never body text        */
    --border: rgba(11, 23, 40, 0.10);
    --border-hover: rgba(30, 95, 216, 0.52);
    --rule: rgba(11, 23, 40, 0.09);
    --shadow-sm: 0 2px 10px rgba(11, 23, 40, 0.06);
    --shadow-md: 0 24px 56px -32px rgba(11, 23, 40, 0.34);
    --shadow-lg: 0 46px 100px -48px rgba(11, 23, 40, 0.44);
    --phone-screen: #060D18;
    --input-bg: #FFFFFF;
    --input-border: rgba(11, 23, 40, 0.14);
    --input-focus-glow: rgba(30, 95, 216, 0.18);

    /* ---- THE VERDICT COLOURS  —  light --------------------------------------------------------------------------
       Deliberately unchanged. See the note at the top of the file: these are the reader's only cue for gain and
       loss, and they are worth more held constant than harmonised. ------------------------------------------------ */
    --success: #17835F;                           /* money gained                                                 */
    --success-bright: #22C39C;                    /* the live end of the gain gradient                            */
    --success-glow: rgba(23, 131, 95, 0.34);      /* the halo under a big green figure                            */
    --error: #C0392B;                             /* money lost                                                   */
    --error-bright: #E74C3C;
    --error-glow: rgba(192, 57, 43, 0.38);
    --warning: #B5811F;                           /* a caveat on the figure, never a verdict                      */

    /* ---- CHART SERIES  —  light -------------------------------------------------------------------------------
       Seven slots, assigned in fixed order and never cycled. Seven is the whole set, not a truncation: the fee
       breakdown pie tops out at six slices, and slot 7 is the non-leading bars in the option ranking. There is
       no eighth series anywhere in the report, so there is no eighth colour.

       Slot 1 is the brand accent and is overridden per calculator in tools/<slug>/theme.css. Slots 2-7 are
       domain wide and shared by every calculator.

       All seven were re-cut for the vibrant palette, and they were SOLVED rather than picked. The old set was
       chosen by eye and its luminance ladder had rungs 0.007 apart — two series that looked different on screen
       came out the same grey in a printed report, and the report has a print path.

       So each slot was given a hue and a target luminance, and the value below is the most saturated colour that
       hits that luminance at that hue. The ladder is now even at ~0.038 per rung and every slot clears 3:1 against
       the card, which is the floor for a graphical object under WCAG 1.4.11. That is what buys vividness AND a
       readable greyscale print at the same time — the two are only in conflict if you pick by eye.

       Slot 5 is deliberately the low saturation one: it is the reference mark, and a reference mark that competes
       with the data is a reference mark in the way. -------------------------------------------------------------- */
    --chart-1: #1753d2;     /* primary — "your figures", the leading bar                */
    --chart-2: #129288;     /* Age Pension received                                     */
    --chart-3: #d28315;     /* out of pocket / the daily-payment line                   */
    --chart-4: #4a851f;     /* asset tested                                             */
    --chart-5: #728eb3;     /* the supported-resident line, and other reference marks   */
    --chart-6: #6f4020;     /* sixth pie slice                                          */
    --chart-7: #c72f43;     /* not the leader — the trailing bars and the shortfall     */

    --on-accent: #FFFFFF;

    --scrim: rgba(8, 18, 33, 0.48);

    /* ---- THE AMBIENT WASH  —  light -----------------------------------------------------------------------------
       The soft colour behind the page: three radial lobes on .ambient-bg plus three blurred orbs drifting over
       them. It exists to keep a very long white page from reading as a spreadsheet, and that is ALL it is for.

       It has now been too strong twice. The failure mode is specific and worth naming: the moment a lobe is dense
       enough that you can see where it ends, it stops being light and becomes an object — a big soft circle parked
       behind the copy, competing with the numbers the visitor came to read. On a page about money that is the
       worst thing the decoration can do.

       So the ceiling is: visible as a tint, never resolvable as a shape. These four values are the whole control
       surface for that, and they are deliberately the only place the strength is set.

           want it fainter   lower them
           want it gone      set the three to transparent and --ambient-orb to 0
           want it back      nothing above 0.14 has ever looked right

       Do not reintroduce the strength by raising the orb count, the orb size or the blend mode. -------------- */
    --ambient-1: rgba(30, 95, 216, 0.10);
    --ambient-2: rgba(18, 63, 168, 0.09);
    --ambient-3: rgba(5, 146, 196, 0.08);
    --ambient-orb: 0.11;

    /* ---- THE FIXED DARK PANELS' GLOWS ---------------------------------------------------------------------------
       The blooms inside .rp-cover, and — through --dash-hero-glow, which defaults to the first of them — inside
       .dash-hero. Those two panels are dark in BOTH themes, so unlike everything else in this block these are
       declared once on :root and never overridden in dark: a per-theme value would change a surface whose
       background does not change. Same class of theme-independent token as --radius-lg.

       A tool re-tinting both panels overrides these two and gets both blooms; --dash-hero-glow exists only for the
       case where the welcome panel and the report cover need to diverge.

       They are the last two big soft circles on the site and they were the last two to be turned down: 0.38/0.34
       is a visible disc on a panel that size, which is the same mistake as the ambient orbs made in a smaller
       frame. Same ceiling applies — light, not shape. */
    --panel-glow-a: rgba(56, 189, 248, 0.20);     /* cyan, bottom right of both panels                            */
    --panel-glow-b: rgba(79, 134, 255, 0.17);     /* blue, top left of the report cover                           */

    /* ---- THE WELCOME PANEL'S GRADIENT ----------------------------------------------------------------------------
       .dash-hero, the member home's welcome panel. Declared here rather than written into the rule so a calculator
       can put its OWN accent on it from tools/<slug>/theme.css, which is custom properties only and cannot reach a
       background written as a literal inside the component.

       Theme-independent, like --panel-glow-a/b above and for the same reason: the panel is dark in BOTH themes, so
       its text stays a fixed near-white and its gradient must stay dark enough to carry that text in both. A tool
       overriding these keeps them dark; it does not swap in the theme's --gradient-primary, which is a mid-tone in
       light and a LIGHT tint in dark and would strand #E9EFF9 on a lavender panel.

       --dash-hero-accent must clear 4.5:1 against the LIGHTEST stop of --dash-hero-gradient: it carries the eyebrow
       and the meter value, and both are small text. The default pair below is 5.7:1. */
    --dash-hero-gradient: linear-gradient(150deg, #08142C 0%, #14417F 46%, #0A4C74 100%);
    --dash-hero-accent: #9CC5FF;
    --dash-hero-glow: var(--panel-glow-a);

    /* ---- THE REPORT COVER'S GRADIENT -----------------------------------------------------------------------------
       .rp-cover, page one of the report. Same arrangement, same constraints and the same 4.5:1 rule as the welcome
       panel above: --rp-cover-accent carries the accented word in the cover title, on the lightest stop of
       --rp-cover-gradient. The default pair is 5.7:1. Its blooms are --panel-glow-a/b. */
    --rp-cover-gradient: linear-gradient(150deg, #08142C 0%, #14417F 38%, #0A4C74 76%, #071A2E 100%);
    --rp-cover-accent: #9CC5FF;

    /* ---- THE INK SURFACES' TEXT --------------------------------------------------------------------------------
       The footer sits on --ink in both themes, which makes it the third surface on the site whose text cannot come
       from --text-primary. It carried four different near-whites — #EEF3FB, two alphas of it, and two of plain
       white — for what is one colour at four strengths. This is that colour; the alphas mix from it. Theme-
       independent for the same reason as the panel tokens above: --ink does not change between themes. */
    --on-ink: #EEF3FB;

    --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-lg: 26px;
}

/* ---------------------------------------------------------------------------------------------------------------
   DARK

   Not the light palette inverted. The dark accent is a LUMINOUS azure rather than the light sapphire, because
   #1E5FD8 on a near-black page is a smudge — a deep hue needs to come up, not just flip sides. The neutrals are
   navy-charcoal rather than black for the same reason the light ones are not white: an unlit black behind a blue
   accent looks like an oversight, and a page of true black is where the eye finds the halation that makes long
   figures hard to read.

   Both blocks are specificity 0-1-0, so this one wins in dark purely by coming later in the file. That is also why
   tools/<slug>/theme.css must declare every variable it touches in BOTH of its blocks — a name written on :root in
   a file that loads after this one beats this block's dark value and strands that colour on the light theme.
   --------------------------------------------------------------------------------------------------------------- */

[data-theme="dark"] {
    --gold: #6BA8FF;                              /* luminous azure — 7.2:1 on the card, S100                    */
    --gold-bright: #9CC5FF;                       /* 9.8:1 — hovers and the live end of the gradient              */
    --gold-light: #C2DBFF;
    --gold-text: #9CC5FF;
    --gold-tint: rgba(107, 168, 255, 0.16);
    --gold-tint-line: rgba(107, 168, 255, 0.36);
    --champagne: #E2EDFF;
    --primary: #6BA8FF;
    --accent: #6BA8FF;
    --accent-cyan: #9CC5FF;
    --accent-glow: rgba(107, 168, 255, 0.34);

    /* The supporting pair, lifted for the dark surface rather than reused from light. Same roles, same rule: they
       are rhythm, never meaning. */
    --accent-2: #4F86FF;                          /* deep blue — the dark step, 5.1:1 on the card, S100          */
    --accent-2-bright: #86ADFF;
    --accent-2-text: #86ADFF;
    --accent-2-tint: rgba(79, 134, 255, 0.17);
    --accent-2-line: rgba(79, 134, 255, 0.36);
    --accent-2-glow: rgba(79, 134, 255, 0.34);
    --accent-3: #38BDF8;                          /* cyan — 8.1:1 on the card, S93                                */
    --accent-3-bright: #7DD8FF;
    --accent-3-text: #7DD8FF;
    --accent-3-tint: rgba(56, 189, 248, 0.17);
    --accent-3-line: rgba(56, 189, 248, 0.36);
    --accent-3-glow: rgba(56, 189, 248, 0.34);

    /* Deep blue into cyan. --on-accent is near-black here, so every stop is checked against it rather than against
       white — an earlier #2C6BC4 start only reached 3.6:1 and made the icon inside a gradient tile mud. */
    --gradient-primary: linear-gradient(115deg, #4F86FF 0%, #6BA8FF 46%, #B6D2FC 100%);
    --gradient-vivid: linear-gradient(115deg, #5295F8 0%, #6BA8FF 46%, #B6D2FC 100%);

    /* ---- THE SECONDARY BUTTON'S FILL  —  dark ---------------------------------------------------------------------
       This one is squeezed from both sides and the value is not free. On a near-black page a DARK secondary is
       invisible — every navy under about #446 fails to clear 3:1 against --bg-primary — so it has to be lighter
       than the page, not darker. But it also has to stay well under primary's bright #6BA8FF or it becomes the
       loudest thing on screen.

       That leaves a narrow window, and #4A6491 sits in the middle of it: 3.2:1 against the page (visible as a
       control), 5.2:1 for its label, and 2.5x quieter than primary. Going lighter buys visibility and spends
       label contrast; going darker does the reverse. Both run out within about three steps. */
    /* ---- THE BUTTONS  —  dark ---------------------------------------------------------------------------------
       Same derivation from var(--gold), mirrored. On near-black the dominant button is the brightest thing on
       screen, so the rest state climbs TO --gold and the reveal goes past it toward white — the opposite of
       light, where both deepen. The label flips accordingly: near-black here, white there.

       Saturation is not set anywhere in this block, and that is the point. Mixing --gold with a neutral keeps
       whatever saturation the calculator chose, so the buttons can never again be the one washed-out thing on a
       fully saturated page — which is exactly what happened when these were hand-picked at 64% next to a site
       running at 100%. */
    --btn-primary-bg: linear-gradient(135deg, #2DA2CA 0%, #33B3E0 50%, #38C5F5 100%);
    --btn-primary-bg: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 80%, #03151F) 0%,
        color-mix(in srgb, var(--gold) 90%, #03151F) 50%,
        var(--gold) 100%);
    --btn-primary-hover: linear-gradient(135deg, #38C5F5 0%, #60D1F7 50%, #84DBF9 100%);
    --btn-primary-hover: linear-gradient(135deg,
        var(--gold) 0%,
        color-mix(in srgb, var(--gold) 80%, #FFFFFF) 50%,
        color-mix(in srgb, var(--gold) 98%, #FFFFFF) 100%);
    --btn-primary-ink: #FFFFFF;
    --btn-primary-bar: #FFFFFF;

    --btn-secondary-bg: #2A728F;
    --btn-secondary-bg: color-mix(in srgb, var(--gold) 46%, #1F2B39);
    --btn-secondary-ink: #E9EFF9;
    --bg-primary: #0A1020;                        /* navy-charcoal, never #000                                    */
    --bg-secondary: #111A2E;
    --bg-tertiary: #1C2844;
    --bg-card: rgba(19, 29, 50, 0.74);
    --bg-glass: rgba(10, 16, 32, 0.78);
    --text-primary: #E9EFF9;                      /* 16.4:1 on --bg-primary                                       */
    --text-secondary: #A4B3C9;                    /* 9.2:1                                                        */
    --text-muted: #78879F;                        /* 4.8:1                                                        */
    --border: rgba(233, 239, 249, 0.13);
    --border-hover: rgba(107, 168, 255, 0.52);
    --rule: rgba(233, 239, 249, 0.10);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 24px 56px -32px rgba(0, 0, 0, 0.85);
    --shadow-lg: 0 46px 100px -48px rgba(0, 0, 0, 0.95);
    --phone-screen: #060B16;
    --input-bg: #151F36;
    --input-border: rgba(233, 239, 249, 0.16);
    --input-focus-glow: rgba(107, 168, 255, 0.20);
    --ink: #070D1A;
    --bone: #E9EFF9;

    /* Unchanged, exactly as in light: gain is green and loss is red on both themes, and a reader who switches
       theme mid-session must not have to relearn which is which. */
    --success: #35C48D;
    --success-bright: #6FE9C0;
    --success-glow: rgba(53, 196, 141, 0.34);
    --error: #E8695C;
    --error-bright: #FF9184;
    --error-glow: rgba(232, 105, 92, 0.34);
    --warning: #D9A441;

    /* ---- CHART SERIES  —  dark ---------------------------------------------------------------------------------
       Solved the same way as the light set and against the dark card, not lightened from it — same seven hues,
       same fixed order, same meanings, but their own luminance ladder because the surface underneath is different.
       Rungs are ~0.070 apart here and the tightest slot still clears 4:1 on the card. ----------------------------- */
    --chart-1: #739aef;
    --chart-2: #19ccbd;
    --chart-3: #f1bc73;
    --chart-4: #68bc2c;
    --chart-5: #c6d1e1;
    --chart-6: #b77a45;
    --chart-7: #d4485b;

    --on-accent: #06101F;
    --scrim: rgba(4, 8, 18, 0.70);

    /* The wash again, for the dark surface. Lower than light: a coloured lobe on near-black separates from the
       background far more readily than the same lobe on near-white, so the same number would read much stronger. */
    --ambient-1: rgba(107, 168, 255, 0.09);
    --ambient-2: rgba(79, 134, 255, 0.08);
    --ambient-3: rgba(56, 189, 248, 0.07);
    --ambient-orb: 0.09;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: -0.011em;
    line-height: 1.62;
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    transition: background 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

::selection {
    background: var(--gold);
    color: #FFFFFF;
}

*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 100px;
}

*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 100px;
    border: 3px solid var(--bg-primary);
}

    *::-webkit-scrollbar-thumb:hover,
    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        background: var(--gold-light);
    }

*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

html.signed-out .auth-only,
html.signed-in .guest-only {
    display: none;
}

/* "My report" in the nav. It appears once this device has a finished run to go back to, and disappears again when
   that run is cleared — which is what signing out does. html.has-run is set by markFinishedRun() in
   shared/js/action.js from the stored run rather than from a variable, so the link never promises a report the
   restore would refuse to produce.

   Hidden for a customer with live access on purpose. They already have "My reports", the saved list, and two
   links one letter apart in the same nav is a worse problem than a missing one — their route to a single report
   is the member home and the nav button, both of which already say it. */
html:not(.has-run) .run-only,
html.has-access.signed-in .run-only {
    display: none;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

    .row > * {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
    }

.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: layout paint style;
    /* Three lobes, one per step of the accent ramp, so the wash is lit rather than flatly tinted. Strength lives
       entirely in the --ambient-* variables above — there are no alpha values written into this rule on purpose,
       because the last two times this got too heavy it was because the numbers were scattered across the file. */
    background: radial-gradient(95% 62% at 10% -12%, var(--ambient-1), transparent 60%),
                radial-gradient(75% 58% at 95% 4%, var(--ambient-2), transparent 62%),
                radial-gradient(85% 62% at 50% 112%, var(--ambient-3), transparent 64%);
}

    .ambient-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
        opacity: 0.07;
        mix-blend-mode: overlay;
    }

[data-theme="dark"] .ambient-bg::after {
    mix-blend-mode: screen;
    opacity: 0.07;
}

/* blur(150px) rather than 100px. A tighter blur keeps a readable edge, and a readable edge is what makes one of
   these read as "a circle" instead of "some light" — which is the actual complaint every time this has been too
   much. Bigger blur on the same sized orb is strictly softer, so this costs nothing but a little GPU. */
.ambient-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(150px);
    opacity: var(--ambient-orb);
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: float-orb 26s ease-in-out infinite;
}

.orb-1 {
    width: 640px;
    height: 640px;
    background: var(--gold);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

/* One orb per hue. They were sapphire, pale sapphire and near-white, which at blur(100px) is one orb wearing three
   costumes. Giving each its own hue is what makes the drift behind the page visible at all. */

.orb-2 {
    width: 520px;
    height: 520px;
    background: var(--accent-2);
    bottom: -150px;
    left: -100px;
    animation-delay: -9s;
}

/* Anchored OFF the right edge, not floating in the middle of the page. orb-1 and orb-2 have always hung off the
   top-right and bottom-left corners, so they read as light spilling in from outside the frame. orb-3 sat at
   top:34% left:42% — dead centre — and got away with it only while it was --champagne, i.e. very nearly white.
   The moment it carried a real hue it became a big soft disc parked behind the copy, which is exactly what the
   other two are positioned to avoid. Same fix as theirs: push it past the edge so the viewport crops it. */
.orb-3 {
    width: 520px;
    height: 520px;
    background: var(--accent-3);
    top: 44%;
    right: -260px;
    left: auto;
    animation-delay: -17s;
}

/* Travel cut from 30px to 12px. Drift you can actually track is drift that pulls the eye off the page, and at
   blur(150px) nobody was ever going to see the difference between a 30px journey and a 12px one anyway. */
@keyframes float-orb {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(12px, -12px, 0);
    }

    50% {
        transform: translate3d(-8px, 8px, 0);
    }

    75% {
        transform: translate3d(8px, 12px, 0);
    }
}

@media (max-width: 900px) {
    .ambient-orb {
        animation: none;
        filter: blur(110px);
        will-change: auto;
    }

    .orb-3 {
        display: none;
    }
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 78px;
    padding: 0 clamp(18px, 4vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    transition: background 0.4s ease, border-color 0.4s ease;
}

    .nav::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        opacity: 0.4;
    }

.logo {
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 0;
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* NO DARK-MODE LOGO SWAP. Both themes use the same images/logo.png, served per tool as {{brand.logo}} in the
   nav and footer markup, so the file follows whichever slug the shell resolved.

   THIS SHEET CANNOT KNOW THE SLUG. It is one stylesheet shared by every calculator, so any url() written here is
   a fixed path. The rule that stood here pointed at a site-root /images/logo_dark.png, which does not exist, and
   content: url() fails silently — dark mode was showing a broken image where the logo should be. The <img src>
   already carries the right per-tool path in both themes, so there is nothing for this sheet to override. */

.logo:hover .logo-img {
    opacity: 0.72;
}

.nav-links {
    display: flex;
    gap: clamp(18px, 2.2vw, 32px);
    align-items: center;
}

    .nav-links a {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.88rem;
        letter-spacing: -0.01em;
        text-transform: none;
        transition: color 0.3s ease;
        position: relative;
        cursor: pointer;
    }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            border-radius: 2px;
            background: var(--gold);
            transition: width 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--text-primary);
        }

            .nav-links a:hover::after {
                width: 100%;
            }

        .nav-links a.active {
            color: var(--text-primary);
            font-weight: 600;
        }

            .nav-links a.active::after {
                width: 100%;
            }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
}

    .theme-toggle::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background: var(--gold);
        border-radius: 999px;
        top: 3px;
        left: 3px;
        box-shadow: none;
        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

[data-theme="dark"] .theme-toggle {
    background: transparent;
}

    [data-theme="dark"] .theme-toggle::before {
        transform: translateX(20px);
    }

.theme-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    font-size: 12px;
    pointer-events: none;
}

.sun-icon {
    opacity: 0.6;
    font-size: 12px;
}

.moon-icon {
    opacity: 0.3;
    font-size: 12px;
}

[data-theme="dark"] .sun-icon {
    opacity: 0.3;
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
}

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    transition: all 0.3s ease;
}

    .mobile-menu-toggle:hover {
        border-color: var(--border-hover);
    }

.hamburger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 14px;
}

    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

        .hamburger span:nth-child(1) {
            top: 0;
        }

        .hamburger span:nth-child(2) {
            top: 50%;
            transform: translateY(-50%);
        }

        .hamburger span:nth-child(3) {
            bottom: 0;
        }

.mobile-menu-toggle.active .hamburger span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85%;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--rule);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 80px 24px 40px;
    pointer-events: none;
}

    .mobile-menu.active {
        transform: translateX(0);
        pointer-events: auto;
    }

.mobile-menu-links {
    list-style: none;
    margin-bottom: 32px;
}

    .mobile-menu-links li {
        margin-bottom: 8px;
    }

    .mobile-menu-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 4px;
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.98rem;
        text-transform: none;
        letter-spacing: -0.01em;
        border-radius: 14px;
        border-bottom: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .mobile-menu-links a:hover,
        .mobile-menu-links a.active {
            background: var(--gold-tint);
            color: var(--text-primary);
        }

        .mobile-menu-links a .menu-icon {
            font-size: 1.2rem;
        }

.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

.mobile-menu-footer {
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    text-align: left;
}

    .mobile-menu-footer p {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .mobile-menu-footer .btn {
        width: 100%;
    }

#app {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    height: auto !important;
    overflow: visible !important;
}

.page {
    display: none;
    opacity: 0;
    min-height: 100vh;
    padding-top: 78px;
    position: relative;
}

    .page.active {
        display: block;
        opacity: 1;
        will-change: auto;
    }

    .page.entering {
        display: block;
        animation: pageEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        will-change: opacity, transform;
    }

    .page.leaving {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        animation: pageLeave 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        will-change: opacity, transform;
    }

@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes pageLeave {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -30px, 0) scale(0.98);
    }
}

.page.entering .dashboard-card,
.page.entering .form-card,
.page.entering .stat-card,
.page.entering .support-info,
.page.entering .support-form {
    opacity: 0;
    animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

    .page.entering .dashboard-card:nth-child(1),
    .page.entering .stat-card:nth-child(1),
    .page.entering .support-info {
        animation-delay: 0.1s;
    }

    .page.entering .dashboard-card:nth-child(2),
    .page.entering .stat-card:nth-child(2),
    .page.entering .support-form {
        animation-delay: 0.2s;
    }

    .page.entering .dashboard-card:nth-child(3),
    .page.entering .stat-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .page.entering .stat-card:nth-child(4) {
        animation-delay: 0.4s;
    }

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    height: 56px;
    padding: 0 34px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    animation: none;
    transform: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* Everything here except transform is a RESET, not a hover style: this rule exists to stop the button growing
       or shifting on hover, which an earlier version of the shell did. transform stays in the list so .btn-quiet
       and friends keep sitting still — the two filled buttons opt back in below. */
    .btn:hover,
    .btn:focus,
    .btn:active {
        transform: none;
        padding: 0 34px;
        height: 56px;
        letter-spacing: 0.14em;
        font-size: 0.72rem;
        box-shadow: none;
    }

    /* THE SWELL. 3%, on the same easing as everything else on these buttons.

       NOTHING AROUND IT MOVES, and that is a property of transform rather than of the number chosen: a transform
       is applied after layout, so the button's box keeps its original size and position as far as every sibling,
       the flex row it sits in, and the document flow are concerned. It paints bigger; it does not occupy more.
       A width/padding/font-size change would have done the opposite and shoved the row about.

       The only way this can be seen is if a button sits flush inside a container that clips. Every ancestor that
       clips — .pricing-card, .paywall, .quickcalc, .guide-card, .rp-cover, .dash-hero, .lx-hero, .credits-hero —
       carries at least 22px of padding, and 3% of even the widest button in the shell grows it about 9px per
       side, so there is clearance everywhere it is used. Going much past 1.04 starts spending that margin.

       It has to be restated here because .btn:hover above zeroes transform at the same specificity; this rule
       wins only by coming later. :focus-visible gets it too, so it is reachable from the keyboard and not just
       the mouse, and :active dips just under 1 so a press reads as the button being pushed in. */
    .btn-primary:hover,
    .btn-primary:focus-visible,
    .btn-secondary:hover,
    .btn-secondary:focus-visible {
        transform: scale(1.03);
    }

    .btn-primary:active,
    .btn-secondary:active {
        transform: scale(0.99);
        transition-duration: 0.12s;
    }

    .btn:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 4px;
    }

/* THE PRIMARY BUTTON

   A gradient at rest, and on hover a SECOND gradient rises over it and the sheen then flashes across. Two events,
   in that order, on one control.

   The old version revealed flat white and grew a 4px gold bar. White was the problem: it forced the label to flip
   to #222222 mid-interaction, so the button changed colour, changed text colour, and moved a bar all at once, and
   the white bore no relation to the palette. Now the reveal is blue, which means the LABEL NEVER CHANGES — one
   token, --btn-primary-ink, covers rest and hover in each theme.

   THE ORDER MATTERS. The reveal takes 0.62s; the sheen waits 0.22s before its own 0.5s run, so it crosses a
   button that is already blue rather than one still half navy. Without the delay the flash fires against the
   resting fill and reads as a glitch.

   ::before is the reveal, ::after is the sheen. Both sit at z-index -1 inside the button's own stacking context
   (.btn sets isolation: isolate), so they stack in source order: reveal, sheen over it, label above both.

   AGAINST SECONDARY. Primary leads at rest by contrast with the page — 13.9:1 vs 7.4:1 in light, 8.7:1 vs 3.2:1
   in dark. Secondary is a flat slab with only the sheen; primary is a gradient that becomes another gradient and
   then flashes. Heavier, and more happens. */

.btn-primary {
    background: var(--btn-primary-bg);
    border-color: transparent;
    color: var(--btn-primary-ink);
}

    /* THE REVEAL, AND THE FLASH ON TOP OF IT — one element, two background layers.

       The flash used to have ::after to itself, but ::after is the bottom bar's and the bar was here first. There
       is no third pseudo-element, so the flash moved onto the reveal as a second background layer: a white band
       over --btn-primary-hover, swept by animating background-position rather than left.

       That is the same construction .money-shine uses for the big figures — a 220% wide band moved by
       background-position — so the sweep is one technique on this site rather than two that happen to look
       alike. The ENDS differ, and deliberately: .money-shine runs 210% to -110% because it is a periodic
       keyframe animation that wants long dark gaps between passes, whereas this one fires on hover and has to
       be over the button immediately. See the timing note below. It also lands the flash ON the revealed
       gradient by construction: the band is painted on the same layer it is sweeping across, so it cannot
       outrun the reveal no matter how the timings drift.

       TIMING, AND WHY THE TRAVEL IS SHORT.

       There is no transition-delay here and there never was — the flash used to LOOK delayed for a geometric
       reason instead. It swept 210% to -110%, and at 220% wide those two ends put the band completely outside
       the button in both directions: the bright core sat 142 units left of the leading edge at rest and finished
       142 units past the trailing one. Of 384 units of travel only 130 were over the button at all, so at 2s the
       core did not reach the left edge until 0.74s after the pointer arrived and was gone again by 1.26s. The
       first three quarters of the animation was the band crossing empty space, and the eye read that as lag.

       So the ends are pulled in to where the band actually does something: 112% puts the trailing edge of the
       core ramp exactly on the left edge of the button (alpha 0.012 there, invisible), and -15% puts the leading
       edge just past the right. Light now builds at the left edge from the first frame, the core is on the button
       at 0.17s, and it clears the far side at 0.86s.

       Linear, not ease. Constant speed is what a sheen crossing a surface does, and ease is slow-in — which is
       the exact quality being removed. The 1.05s holds the on-button sweep at about 0.7s, the same unhurried
       pace as before; it is only the dead run-up that has gone.

       The reveal still takes 0.62s and the two now overlap, which is fine and was always safe: the band is a
       background layer OF the reveal, painted on the same element that is sliding up, so it cannot outrun it.

       Secondary keeps the quick 0.5s version with no delay. Same gesture, different tempo — which is most of what
       separates the two buttons now that they share a shape. */
    .btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(100deg,
                rgba(255, 255, 255, 0) 38%,
                rgba(255, 255, 255, 0.16) 50%,
                rgba(255, 255, 255, 0) 62%),
            var(--btn-primary-hover);
        background-size: 220% 100%, 100% 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: 112% 0, 0 0;
        transform: translateY(101%);
        transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
                    background-position 1.05s linear 0s;
    }

    /* THE BOTTOM BAR, restored. Grows left to right across the full width, on the same 0.62s curve as the reveal
       so the two read as one gesture. ::after comes after ::before in source order and both sit at z-index -1, so
       the bar paints over the revealed gradient rather than under it. --btn-primary-bar is checked against BOTH
       fills, because the bar is drawing while the reveal is still rising: bright cyan in light, deep blue in dark,
       each clearing 3:1 on the resting and the revealed gradient alike. */
    .btn-primary::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        z-index: -1;
        background: var(--btn-primary-bar);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    .btn-primary:hover {
        color: var(--btn-primary-ink);
        border-color: transparent;
    }

        .btn-primary:hover::before {
            transform: translateY(0);
            background-position: -15% 0, 0 0;
        }

        .btn-primary:hover::after {
            transform: scaleX(1);
        }

    .btn-primary:active::before {
        transform: translateY(0) scale(1.04);
        transition-duration: 0.15s;
    }

@media (prefers-reduced-motion: reduce) {
    .btn-primary::before,
    .btn-primary::after { transition: none; }
    .btn-primary:hover::before { background-position: -15% 0, 0 0; }
}

/* THE SECONDARY BUTTON

   SAME SHAPE AS PRIMARY, DIFFERENT WEIGHT, DIFFERENT HOVER.

   At rest it is built exactly like .btn-primary above — a solid slab, fill and border the same colour, light
   label. That is the point: the pair should read as one control offered at two strengths, not as two components
   that happen to sit next to each other. Earlier versions had it as a ghost box and then as a gradient, and both
   times it looked like it came from a different site than the button beside it.

   WHICH ONE WINS. Primary dominates purely by contrast with the page underneath, which is the only signal that
   survives both themes and any calculator's accent:

       light   primary --ink        16.6:1 against the page      secondary  7.4:1     2.2x
       dark    primary --gold        7.8:1 against the page      secondary  3.2:1     2.5x

   The fills invert between themes — on white the dominant button is the darkest thing on screen, on near-black it
   is the brightest — but the RATIO holds, so primary leads in both. Changing either fill means re-checking that
   gap; it is the whole hierarchy.

   THE HOVER IS DELIBERATELY NOT PRIMARY'S. Primary fills VERTICALLY: white rises from the bottom edge and a gold
   bar grows along it. This one flashes HORIZONTALLY: a sheen sweeps left to right, the same one
   .sidebar-nav a.active::before uses, over a slight lift. Two different axes, so the two buttons are told apart by
   how they behave as well as by how heavy they are — which is what you want when they are this similar at rest.

   Both pseudo-elements sit at z-index -1 inside the button's own stacking context (.btn sets isolation: isolate),
   so they stack in source order: lift first, sheen over it, label above both. */

.btn-secondary {
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-ink);
    backdrop-filter: none;
}

    /* A hover lift, not a hover fill. The slab is permanent, so all this does is lighten it a step so the press
       still has feedback. rgba white rather than a filter: a filter on .btn would create a stacking context and
       the sheen below lives at z-index -1.

       0.06, with the sheen at 0.16 below. Those two numbers are set TOGETHER: they stack where the sheen band
       crosses the label, and at the strengths first tried (0.12 + 0.28) the combined white took the label down to
       2.4:1 for the moment it passed. At 0.06 + 0.16 the worst trough is 3.2:1 in dark and 4.0:1 in light, which
       is where .sidebar-nav's own sheen already sits. Raise one and the other has to come down. */
    .btn-secondary::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, 0.06);
        opacity: 0;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* The sheen, lifted from .sidebar-nav a.active::before — same 90deg white band, same 0.5s travel. */
    .btn-secondary::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
        transition: left 0.5s ease;
        pointer-events: none;
    }

    .btn-secondary:hover {
        color: var(--btn-secondary-ink);
        border-color: var(--btn-secondary-bg);
    }

        .btn-secondary:hover::before {
            opacity: 1;
        }

        .btn-secondary:hover::after {
            left: 100%;
        }

@media (prefers-reduced-motion: reduce) {
    .btn-secondary::before,
    .btn-secondary::after { transition: none; }
    .btn-secondary:hover::after { left: -100%; }
}

.btn-quiet {
    height: 56px;
    padding: 0 4px;
    border: none;
    overflow: visible;
    color: var(--text-secondary);
    letter-spacing: 0.16em;
}

    .btn-quiet:hover,
    .btn-quiet:focus,
    .btn-quiet:active {
        height: 56px;
        padding: 0 4px;
        letter-spacing: 0.16em;
    }

    .btn-quiet::after {
        content: '→';
        display: inline-block;
        font-size: 0.95rem;
        letter-spacing: 0;
        color: var(--gold);
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-quiet:hover {
        color: var(--gold);
    }

        .btn-quiet:hover::after {
            transform: translateX(7px);
        }

.btn-nav {
    height: 42px;
    padding: 12px 24px;
    font-size: 0.64rem;
}

    .btn-nav:hover,
    .btn-nav:focus,
    .btn-nav:active {
        height: 42px;
        padding: 12px 24px;
        font-size: 0.64rem;
    }

.btn-huge {
    width: auto;
    height: 64px;
    padding: 0 42px;
    font-size: 0.74rem;
}

    .btn-huge:hover,
    .btn-huge:focus,
    .btn-huge:active {
        height: 64px;
        padding: 0 42px;
        font-size: 0.74rem;
    }

.btn-small {
    height: 42px;
    padding: 0 22px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
}

    .btn-small:hover,
    .btn-small:focus,
    .btn-small:active {
        height: 42px;
        padding: 0 22px;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

.form-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 60px 40px;
}

.form-card,
.legal-copy,
.support-info,
.support-form,
.dashboard-card,
.dashboard-sidebar,
.checkout-panel,
.credits-hero,
.stat-card,
.checkout-reassure {
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    backdrop-filter: none;
    box-shadow: var(--shadow-sm);
}

.form-card {
    padding: 48px 40px;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
    color: var(--gold-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    box-shadow: none;
}

.form-title,
.dashboard-card-title,
.checkout-panel-title,
.support-info h3,
.support-form h3,
.success-account h3,
.legal-copy h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.form-title {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.form-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-group-hero {
    margin-bottom: 6px;
    position: relative;
}

.form-input,
textarea.form-input,
select.form-input {
    width: 100%;
    padding: 16px 20px;
    height: 56px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 16px;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    appearance: none;
}

textarea.form-input {
    height: auto;
    min-height: 120px;
    padding: 20px;
}

.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-input:focus::placeholder {
    opacity: 1;
}

.form-input:hover {
    border-color: var(--text-muted);
}

.form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--input-focus-glow);
}

.form-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    transform-origin: left top;
    background: transparent;
    padding: 0 2px;
    border-radius: 4px;
}

textarea ~ .form-label {
    top: 26px;
    transform: translateY(-50%);
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
textarea:focus ~ .form-label,
textarea:not(:placeholder-shown) ~ .form-label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    color: var(--text-muted);
    font-weight: 600;
    background: var(--input-bg);
    padding: 0 6px;
}

.form-input:focus ~ .form-label {
    color: var(--primary);
}

[data-theme="dark"] .form-input:focus ~ .form-label {
    color: var(--accent);
}

.form-input.input-error,
.form-group.has-error .form-input {
    border-color: var(--error);
    /* Was rgba(192, 68, 47) — a hand-typed copy of --error that had drifted a channel off it. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-footer {
    text-align: center;
    margin-top: 28px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

    .form-footer a,
.legal-copy a {
        color: var(--gold);
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
    }

        .form-footer a:hover {
            text-decoration: underline;
        }

.page-header {
    text-align: left;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 78px) clamp(20px, 4vw, 48px) 34px;
}

.page-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 12px;
}

/* =====================================================================================================================
   THE POSITIONING LINE  —  directly under a page heading

   Bigger than body copy and smaller than the h1, so it reads as the second thing on the page rather than competing
   with the first. The emphasised clause is the differentiator and carries the weight; the rest is deliberately
   quieter, because a sentence entirely in bold is a sentence with nothing emphasised.
   ===================================================================================================================== */
.page-claim {
    margin: 18px 0 0;
    max-width: 46ch;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--text-secondary);
}

    .page-claim strong {
        font-weight: 650;
        color: var(--text-primary);
        /* A hairline under the claim itself, in the accent, so the eye lands on it without a highlighter. */
        box-shadow: inset 0 -0.42em 0 var(--gold-tint);
    }

@media (max-width: 640px) {
    .page-claim { font-size: 1.1rem; max-width: none; }
}

.page-subtitle {
    margin: 14px 0 0;
    max-width: 56ch;
    font-size: 0.98rem;
    color: var(--text-secondary);
}

.lx-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

.home-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 80px;
    padding-top: clamp(28px, 4vw, 44px);
}

.section-spacer {
    margin-top: clamp(64px, 9vw, 118px);
}

.section-header {
    text-align: left;
    margin-bottom: clamp(34px, 4vw, 52px);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    letter-spacing: -0.04em;
    margin: 16px 0 14px;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 0.97rem;
    max-width: 58ch;
}

.lx-sectionmark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    width: fit-content;
}

    .lx-sectionmark::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
    }

.lx-hero {
    position: relative;
    padding: clamp(24px, 5vw, 62px) 0 clamp(24px, 5vw, 120px);
    overflow: hidden;
}

.lx-hero-aura {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    z-index: 0;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
}

/* THE HOME PAGE'S OWN ORBS, and the reason "the background is lighter now" was only true on four pages out of five.

   These are a second aura, local to the hero, and they are the biggest coloured objects anywhere on the site —
   42vw is close to half the window. They sat at opacity 0.26/0.22 with blur(100px) while the shared .ambient-orb
   set had already been taken down to 0.11, so the home page carried more than twice the wash of every other page.
   Worse, they were painted in --gold / --gold-light / --champagne, so raising the palette's saturation made THEM
   heavier at the same time, which is exactly how a hero ends up with visible discs behind the headline.

   They now read from --ambient-orb like the shared set, so there is ONE number for the strength of background
   colour on this site and it is in the palette block. Turning the wash down turns it down everywhere. The three
   hues are the accent ramp rather than gold-and-near-white, so the aura is the same idea as the rest of the page
   instead of a paler private version of it. */

    .lx-hero-aura span {
        position: absolute;
        border-radius: 50%;
        filter: blur(160px);
        opacity: var(--ambient-orb);
        animation: none;
    }

        .lx-hero-aura span:nth-child(1) {
            width: 42vw;
            height: 42vw;
            left: 4%;
            top: 2%;
            background: var(--gold);
        }

        .lx-hero-aura span:nth-child(2) {
            width: 34vw;
            height: 34vw;
            right: 6%;
            top: 12%;
            background: var(--accent-3);
        }

        .lx-hero-aura span:nth-child(3) {
            width: 30vw;
            height: 30vw;
            right: 28%;
            bottom: 2%;
            background: var(--accent-2);
        }

.lx-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}

.lx-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin-bottom: 26px;
    padding: 8px 18px 8px 14px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-text);
}

.lx-kicker-rule {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: kickPulse 2.8s ease-in-out infinite;
}

@keyframes kickPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.55;
    }
}

.lx-display {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 5vw, 3.8rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    margin-bottom: 26px;
}

    .lx-display em {
        font-style: normal;
        color: var(--gold-text);
    }

/* ---------------------------------------------------------------------------------------------------------------
   THE LOSS FIGURE IN THE HOME PAGE H1

   Every calculator opens with "Don't lose over $X. We'll show you your <topic> options.", and the $X is a link down
   to the HomeProof block that substantiates it. It has to read as the most urgent thing on the page without
   turning the headline into a shout.

   SO THE EMPHASIS IS ALL IN THE RULE UNDER IT, and the figure keeps the heading's own colour. The site's palette
   reserves red for money lost, which is exactly what this figure is — but a red figure in a 3.8rem display face,
   over a red underline, is two shouts where one carries further. The underline is the loss colour; the number is
   not.

   Drawn as a pseudo-element rather than with text-decoration for two reasons: text-decoration cannot carry a
   gradient or a glow, and it cannot be animated. This one sweeps out from the left as the page settles, then
   breathes very slightly so the eye comes back to it — and both stop dead under prefers-reduced-motion, where the
   bar is simply present at full width.

   .lx-display sets line-height 0.96, so every dimension here is in em and scales with the clamp on the heading
   rather than being pinned to one breakpoint. */
/* THE LOSS FIGURE IN THE HOME PAGE H1

   Every calculator opens with "Don't lose over $X. We'll show you your <topic> options.", and the $X is a link down
   to the HomeProof block that substantiates it. It has to be the thing the eye lands on first.

   IT IS A HIGHLIGHTER SWIPE, NOT AN UNDERLINE. The band sits behind the bottom half of the figure the way a marker
   does when somebody goes over a number on a printed page — through the descenders, up to about the middle of the
   digits, so the text reads straight through it. An underline sits under a word and can be mistaken for a border;
   a highlight is unmistakably somebody marking something.

   IT IS THE ELEMENT'S OWN BACKGROUND, and that is the only construction that works here. Putting the band on a
   pseudo-element means putting it behind the text with z-index: -1, which drops it below every positioned element
   in the hero — including .lx-hero-aura, the decorative wash across the whole band — so it comes out invisible or
   muddy depending on the calculator's palette. An element's own background is always painted behind its own text,
   with no stacking games at all.

   TWO LAYERS OF THE SAME TOKEN, not two colours. --error-glow is already a translucent loss red with a value for
   each theme, so the shorter lower band doubles the alpha where it overlaps the taller one and the swipe comes out
   denser along the bottom, the way a marker loads more ink where the nib drags. Nothing here needs color-mix, and
   nothing here is a literal — it follows --error into dark mode and into whatever a calculator's theme.css sets.

   Both ends fade rather than stopping square: a marker is put down and lifted, it does not begin and end on a
   ruled line.

   Sized in em throughout so it tracks the clamp on .lx-display instead of needing a breakpoint of its own. */
.h1-loss {
    color: inherit;
    text-decoration: none;

    /* The figure never breaks across a line. "$300," on one line and "000." on the next is not a number. */
    white-space: nowrap;

    background-image:
        linear-gradient(100deg, transparent 0%, var(--gold-tint-line) 3%, var(--gold-tint-line) 96%, transparent 100%),
        linear-gradient(100deg, transparent 0%, var(--gold-tint-line) 5%, var(--gold-tint-line) 93%, transparent 100%);
    background-repeat: no-repeat;

    /* The taller band covers the bottom half of the glyphs; the shorter one sits inside it along the baseline. */
    background-size: 0% 0.26em, 0% 0.11em;
    background-position: 0 calc(100% - 0.05em), 0 calc(100% - 0.05em);

    /* Streaked across rather than faded in. Width is what animates, so it reads as a stroke being drawn left to
       right — the same gesture the reader would have made themselves.

       IT WAITS FOR .is-marked RATHER THAN RUNNING ON A DELAY. The figure counts up from nothing first, and
       paintLossHeadline() in shared/js/action.js adds the class on the last frame of that count — so the mark
       lands on a settled number instead of racing it. A CSS delay would have had to guess its duration and
       would drift out of step with it the first time either changed.

       A transition rather than a keyframe animation, because the end state has to be a property the hover rule
       below can then take further. Two transitions on one property cannot both win; one property with two states
       can. */
    transition: background-size 0.72s cubic-bezier(0.33, 0.9, 0.35, 1);
}

    .h1-loss.is-marked {
        background-size: 100% 0.26em, 100% 0.11em;
    }

    /* Hover carries it up over more of the figure rather than changing its colour: the same mark, pressed harder.
       Only once it has been made — hovering mid-count would otherwise draw the highlight early and undo the
       sequence the count exists to set up. */
    .h1-loss.is-marked:hover,
    .h1-loss.is-marked:focus-visible {
        background-size: 100% 0.62em, 100% 0.3em;
    }

    /* The keyboard route gets a real ring as well — a hover state borrowed for focus is not a focus indicator. */
    .h1-loss:focus-visible {
        outline: 2px solid var(--error-bright);
        outline-offset: 0.1em;
        border-radius: 0.05em;
    }


/* THE SECOND SENTENCE OF THE H1, SET AS A SUBHEADING.

   "We'll show you your <topic> options." is where the search terms live, so it has to stay inside the <h1> — a
   heading's weight in search comes from its whole text content, and moving this to a sibling <p> would take the
   only keywords in the headline out of the heading. It is a <span> for that reason and no other.

   Everything that makes it READ as a subheading is done here instead: its own line, the secondary text colour,
   and about four tenths of the display size. Sized in em rather than rem so it tracks the clamp on .lx-display
   through every breakpoint instead of needing its own — at the 3.8rem ceiling it lands near 1.5rem, and on a
   phone's 2.4rem near 0.96rem, which is the same relationship at both ends.

   The display face is set at -0.045em and line-height 0.96, which is right for a 3.8rem line and far too tight
   for a 1.5rem one, so both are relaxed back to something a sentence can be read at. */
.h1-sub {
    display: block;
    margin-top: 0.45em;
    font-size: 0.4em;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.012em;
    color: var(--text-secondary);
}

/* The swipe is the emphasis and it has to survive motion being switched off. paintLossHeadline() skips the count
   under the same query and adds .is-marked straight away, so the class is already there; killing the transition
   here is what stops it sliding in. The figure is simply marked, from the first paint. */
@media (prefers-reduced-motion: reduce) {
    .h1-loss { transition: none; }
}

.lx-lede {
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.72;
    max-width: 52ch;
    margin-bottom: 32px;
}

.lx-hero-copy .lx-lede { margin-bottom: 15px; }

.lx-hero-copy .lx-lede-punch {
    margin-bottom: 30px;
    color: var(--text-primary);
}

    .lx-hero-copy .lx-lede-punch strong { color: var(--gold-text); }

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.lx-assurances {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
}

.lx-assurances li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

    .lx-assurances li::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold);
        opacity: 0.9;
    }

.lx-step {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    padding: clamp(26px, 3vw, 40px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
}

    .lx-step:hover {
        transform: translateY(-6px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.lx-step p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
}

.lx-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 22px);
}

/* THE STEP NUMBER IN THE WIZARD'S HEADINGS, which had no rule and rendered as plain text.

   Every other numbered badge on this domain gets a treatment — .lx-step-no below, .rp-section-num on the report,
   .deadline-num on the home page — and this one is the most looked at of the four: it is in front of somebody
   working through seven screens of their own finances, and it is how they keep their place.

   shared/js/action.js writes into it by selector, so it is a hook as well as a mark. Sized smaller than
   .lx-step-no because it sits inline in an <h2> rather than at the head of a card. */
.cs-num {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 10px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    vertical-align: middle;
}

.lx-step-no {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-text);
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
}

.lx-step h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: -0.03em;
    margin: 16px 0 10px;
}

.mid-cta {
    margin-top: clamp(34px, 5vw, 56px);
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(135deg, var(--gold-tint) 0%, transparent 70%), var(--bg-secondary);
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    align-items: stretch;
}

.pricing-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(30px, 3.4vw, 46px) clamp(22px, 2.6vw, 34px);
    text-align: center;
    transform: none;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, border-color 0.3s ease;
}

    .pricing-card:hover {
        transform: translateY(-10px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-lg);
        z-index: 3;
    }

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 15px 7px;
    border-radius: 999px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 22px -12px var(--accent-glow);
}

[data-theme="dark"] .popular-badge {
    color: var(--on-accent);
}

.pack-name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.pack-tagline {
    color: var(--gold-text);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.01em;
    min-height: 22px;
}

    .credits-hero-value,
.stat-value {
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--gold-text);
    }

.pack-per-credit {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}

.price-amount {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 4.4vw, 3.6rem);
    color: var(--text-primary);
    margin: 22px 0 6px;
}

.price-currency {
    font-size: 1rem;
    margin-top: 10px;
    margin-right: 4px;
}

.price-period {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* "THE REPORT IS YOURS TO KEEP" */

.keep-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    margin: 20px 0 4px;
    padding: 15px 16px;
    border-radius: 15px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
    text-align: left;
}

.keep-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--gold-text);
    font-size: 0.95rem;
}

.keep-body strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.keep-body > span {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.keep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.keep-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--gold-tint-line);
    background: var(--bg-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

    .keep-chip i { color: var(--gold-text); }

.keep-compact {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .keep-compact > i {
        margin-top: 2px;
        color: var(--gold-text);
    }

    .keep-compact strong { color: var(--text-primary); }

/* THE COMPARISON INSIDE THE PRICING CARD

   ONE BOX, SPLIT DOWN THE MIDDLE. The first version of this was a stacked table with a red alert above it and a
   gold callout below it, sitting inside a card that already had a border — three tinted boxes and four headings
   deep before the reader reached a price. It read as a wall. A comparison is two things next to each other, so
   this is literally that: a single bordered container divided by one rule, the losing side left plain and the
   winning side tinted. Nothing nests, and the contrast between the halves does the work that three borders were
   failing to do.

   THE CARD'S OWN FURNITURE STANDS DOWN. When a pass declares a comparison, renderPasses drops .pack-name,
   .pack-tagline, .price-amount and .pack-per-credit, because the right hand panel already IS the name, the price
   and the terms. Printing them twice was most of why the card felt endless.

   THE HONEST ROW IS A MINUS, ON BOTH SIDES. The adviser's licence is listed as their win, and "not a personal
   recommendation" is listed as our limitation, each in muted type with a minus rather than a tick. Five ticks and
   one blank is a comparison; six ticks is an advertisement, and nobody believes an advertisement. */

/* The badge is absolutely positioned at top:-12px and used to hang over .pack-name, which had the card's full
   top padding under it. The comparison starts higher, so the versus card buys back the clearance. */
.pricing-card.pricing-versus {
    padding-top: clamp(44px, 4.2vw, 60px);
}

.pack-versus {
    text-align: left;
    margin: 0 0 30px;
}

.pv-intro {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 24px;
}

.pv-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--text-primary);
}

.pv-lede {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

    .pv-lede strong { color: var(--text-primary); }

/* The split. One border, one rule down the middle, and the two halves stretch to match so the prices sit on the
   same line whatever the copy underneath does. */
.pv-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.pv-panel {
    padding: clamp(20px, 2.4vw, 30px);
}

.pv-them {
    border-right: 1px solid var(--rule);
}

.pv-us {
    background: var(--gold-tint);
}

.pv-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pv-us .pv-eyebrow { color: var(--gold-text); }

.pv-name {
    display: block;
    margin-top: 7px;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* The adviser's range and our price are set at the same size on purpose. Shrinking theirs would be the kind of
   thumb on the scale that makes a reader distrust the rest of the panel. */
.pv-price {
    display: block;
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.9vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--text-secondary);
}

.pv-us .pv-price { color: var(--gold-text); }

.pv-unit {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pv-list {
    list-style: none;
    margin: 18px 0 0;
    display: grid;
    gap: 11px;
}

    .pv-list li {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        font-size: 0.86rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .pv-list i {
        margin-top: 3px;
        font-size: 0.82rem;
        color: var(--text-muted);
    }

.pv-us .pv-list li { color: var(--text-primary); }
.pv-us .pv-list i { color: var(--gold); }

/* The concession, whichever side it falls on. Muted, and a minus rather than a tick, so it reads as a limitation
   being admitted rather than a benefit being dressed down. */
.pv-list li.pv-minus,
.pv-us .pv-list li.pv-minus { color: var(--text-muted); }

.pv-list li.pv-minus i,
.pv-us .pv-list li.pv-minus i { color: var(--text-muted); }

/* The one line that closes the comparison, in place of the priced gap and the closing paragraph that used to
   follow it. It is doing the work of both, so it is set on the display face and a shade larger than body copy —
   after two panels of lists the eye needs somewhere to land. */
.pv-vow {
    max-width: 58ch;
    margin: 22px auto 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 700px) {
    /* Stacked, and the rule moves from the side to the bottom so the two halves stay one object rather than
       becoming two cards that happen to be near each other. */
    .pv-pair { grid-template-columns: 1fr; }

    .pv-them {
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
}

/* WHAT IS IN THE REPORT

   Fourteen items in one left aligned column left two thirds of a full width card empty and read as a receipt
   rather than as what somebody is about to buy. It is a grid now: auto-fit columns at a 268px minimum, so it is
   three across on a wide card, two on a tablet and one on a phone without a media query deciding any of it.

   THE BOTTOM BORDERS HAD TO GO WITH THE SINGLE COLUMN. A rule under every row works when the rows are stacked;
   across three columns it draws a broken grid whose last row is ragged, and :last-child can only tidy one cell of
   it. Whitespace separates them instead, and the tick carries the rhythm the rule used to.

   The tick is a filled disc rather than a bare glyph. At this density fourteen loose icons read as speckle — the
   disc gives each line one solid anchor at a fixed 22px, which is also what keeps the text column aligned when a
   feature wraps to two lines.

   min(100%, 268px) rather than a plain 268px: on a viewport narrower than the track minimum, a plain value makes
   the grid overflow its container rather than collapsing to one column. */

.pack-includes {
    margin: clamp(26px, 3vw, 36px) 0 0;
    text-align: left;
}

.pi-label {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
    gap: 4px 30px;
    margin: 14px 0 0;
    text-align: left;
}

    .pricing-features li {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 9px 0;
        font-size: 0.87rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .pricing-features i {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        margin-top: 1px;
        border-radius: 50%;
        background: var(--gold-tint);
        color: var(--gold);
        font-size: 0.62rem;
    }

.faq-section h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    letter-spacing: -0.04em;
    margin: 34px 0 12px;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    transition: border-color 0.4s ease, background 0.4s ease;
}

    .faq-item.faq-open {
        border-color: var(--border-hover);
    }

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: opacity 0.2s ease;
}

    .faq-trigger:hover {
        opacity: 0.8;
    }

.faq-question {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
    transition: color 0.3s ease;
}

.faq-item.faq-open .faq-question {
    color: var(--gold-text);
    font-style: normal;
}

.faq-icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    transition: background 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-item.faq-open .faq-icon {
    background: var(--gold);
    border-color: var(--gold);
    transform: rotate(90deg);
}

.faq-icon-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-icon-horizontal {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-icon-vertical {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.faq-item.faq-open .faq-icon-bar {
    background: var(--on-accent);
}

.faq-item.faq-open .faq-icon-vertical {
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq-answer {
    padding: 0 24px 26px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 68ch;
}

.checkout-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1080px);
    gap: 28px;
    align-items: start;
    justify-content: center;
}

/* TWO THIRDS PAYMENT, ONE THIRD REASSURANCE */

.checkout-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.checkout-panel {
    padding: 32px;
    min-width: 0;
}

.checkout-split > .assure {
    margin-top: 0;
    min-width: 0;
}

    .checkout-split > .assure .assure-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

@media (max-width: 900px) {
    .checkout-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-split > .assure {
        margin-top: 0;
    }

    .checkout-split > .assure .assure-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.checkout-panel-title {
    font-size: 1.15rem;
    margin-bottom: 20px;
}

.checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.checkout-line-info strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.checkout-line-info span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.checkout-line-price {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

    .checkout-line-price s {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration-color: var(--error);
        color: var(--text-muted);
    }

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 12px;
    font-size: 1.05rem;
    color: var(--text-secondary);
}

    .checkout-total-row strong {
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--text-primary);
    }

.checkout-reassure {
    list-style: none;
    margin: 0 0 24px;
    padding: 20px 22px;
    text-align: center;
}

    .checkout-reassure li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 7px 0;
        color: var(--text-secondary);
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .checkout-reassure i {
        color: var(--gold);
        margin-top: 4px;
        flex-shrink: 0;
    }

.checkout-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0px 0 24px;
}

.paypal-buttons-holder {
    min-height: 52px;
    max-width: 340px;
    margin-inline: auto;
}

.checkout-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* Was a literal amber under a border already set from --warning. Same colour for both now. */
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid var(--warning);
    border-radius: 14px;
    padding: 16px 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

    .checkout-notice i {
        color: var(--warning);
        margin-top: 2px;
    }

    .checkout-notice code {
        font-family: 'Space Mono', monospace;
        font-size: 0.85em;
        color: var(--text-primary);
    }

.checkout-secure {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 20px;
    line-height: 1.5;
}

    .checkout-secure i {
        color: var(--success);
        margin-right: 4px;
    }

.checkout-success {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    text-align: center;
}

.checkout-success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    /* Was the domain's sapphire as a literal, under a background the accent rotation sets to --gradient-vivid —
       so on any calculator that is not sapphire the halo was a different colour from the disc casting it. */
    box-shadow: 0 14px 44px var(--accent-glow);
    animation: successPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: auto;
    margin-right: auto;
}

@keyframes successPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

    .success-meta span {
        display: block;
        color: var(--text-muted);
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    .success-meta strong {
        font-weight: 700;
        font-size: 0.98rem;
        word-break: break-word;
    }

.success-account {
    background: var(--gold-tint);
    border: 1px solid var(--success);
    border-radius: 18px;
    padding: 24px;
    text-align: left;
    margin-bottom: 28px;
    border-color: var(--gold-tint-line);
}

.sa-lead {
    display: block;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.sa-cred {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    margin-bottom: 7px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

    .sa-cred em {
        flex: 0 0 74px;
        font-style: normal;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-muted);
    }

    .sa-cred strong {
        min-width: 0;
        font-size: 0.92rem;
        color: var(--text-primary);
        overflow-wrap: anywhere;
    }

.sa-pass {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    letter-spacing: 0.04em;
    color: var(--gold-text) !important;
}

.sa-note {
    display: block;
    margin-top: 11px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .sa-note a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .success-account h3 {
        font-size: 1.05rem;
        margin-bottom: 8px;
    }

        .success-account h3 i {
            color: var(--success);
            margin-right: 6px;
        }

    .success-account p {
        color: var(--text-secondary);
        font-size: 0.93rem;
        line-height: 1.6;
    }

.success-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.dashboard-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding-top: clamp(34px, 5vw, 56px);
}

.dashboard-sidebar {
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 96px;
}

.sidebar-nav {
    list-style: none;
}

    .sidebar-nav li {
        margin-bottom: 8px;
    }

    .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-radius: 14px;
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.94rem;
        text-transform: none;
        letter-spacing: -0.01em;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, background 0.3s ease;
        cursor: pointer;
        position: relative;
    }

        .sidebar-nav a:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            box-shadow: inset 3px 0 0 0 var(--text-muted);
        }

        .sidebar-nav a.active {
            background: var(--gold);
            color: #FFFFFF;
            box-shadow: 0 12px 26px -14px var(--accent-glow);
            overflow: hidden;
            animation: none;
        }

            .sidebar-nav a.active::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
                transition: left 0.5s ease;
            }

            .sidebar-nav a.active:hover::before {
                left: 100%;
            }

            .sidebar-nav a.active:hover {
                transform: none;
                box-shadow: none;
            }

    .sidebar-nav .nav-icon {
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .sidebar-nav a:hover .nav-icon {
        transform: scale(1.15);
    }

/* .sidebar-credits, -label and -value were the "Report access / Unlimited" panel above the sidebar navigation.
   The panel is gone — it restated on every signed-in page what the member home's welcome panel says once — and
   these went with it rather than being left behind for somebody to wonder about. */

.dashboard-main {
    min-width: 0;
}

    .dashboard-main:only-child {
        grid-column: 1 / -1;
    }

.dashboard-card {
    padding: 32px;
    margin-bottom: 24px;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.dashboard-card-title {
    font-size: 1.3rem;
}

.dashboard-card,
.stat-card,
.credits-hero,
.support-item {
    transition: border-color 0.4s ease, box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}

    .dashboard-card:hover,
.stat-card:hover,
.credits-hero:hover {
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
        transform: none;
    }

/* THE FREE REPORT'S HEADLINE CARDS */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 20px;
    text-align: left;
}

.stat-label {
    display: block;
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--text-muted);
}

.stat-value {
    display: block;
    min-width: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.credits-hero {
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

    .credits-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gold);
        opacity: 0.85;
    }

/* Both of these are <span>s, and both MUST be blocks. Left inline they sat on one line together and the value's
   margins were silently dropped — vertical margin has no effect on an inline box — so the eyebrow and a 4rem
   figure ran into each other with no space between them. */
.credits-hero-label {
    display: block;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
}

/* The value is a FIGURE on a paid pass ("14 days left") and a PHRASE on a free one ("Free view"). At a fixed 4rem
   the phrase wrapped mid word on a phone and overflowed the card, so it scales with the viewport and is allowed
   to wrap on whitespace rather than inside a word. */
.credits-hero-value {
    display: block;
    font-size: clamp(2.25rem, 7vw, 4rem);
    line-height: 1.08;
    margin: 10px 0 14px;
    overflow-wrap: break-word;
}

/* The explanation under the figure. Held to a readable measure and centred with the rest of the card — it was
   an unstyled <p>, so it ran the full width of the container and collided with the button beneath it. */
.credits-hero-sub {
    max-width: 46ch;
    margin: 0 auto 24px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.usage-table {
    width: 100%;
    border-collapse: collapse;
}

    .usage-table th,
    .usage-table td {
        padding: 16px 20px;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .usage-table th {
        font-family: var(--font-sans);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.76rem;
        text-transform: none;
        letter-spacing: 0.02em;
    }

    .usage-table td {
        font-size: 0.95rem;
    }

    .usage-table tr:last-child td {
        border-bottom: none;
    }

    .usage-table tr:hover td {
        background: var(--gold-tint);
    }

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px !important;
}

.status-badge {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
}

/* Each of these three set its TEXT from the domain token and its WASH from a different colour entirely — an
   emerald, an amber and a red that appear nowhere else in the file and belong to no palette here. The pill was
   therefore tinted a slightly different hue from the word inside it, and the tint did not move when the theme
   did. Same token for both halves now, mixed down for the wash. */
.status-success {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.status-pending {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
}

.status-error {
    background: color-mix(in srgb, var(--error) 15%, transparent);
    color: var(--error);
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
}

    .empty-state i {
        font-size: 2.4rem;
        color: var(--text-muted);
        margin-bottom: 16px;
        display: block;
    }

    .empty-state p {
        color: var(--text-secondary);
        margin-bottom: 20px;
    }

.support-info,
.support-form {
    padding: 40px;
}

.support-info {
    margin-bottom: 28px;
}

    .support-info h3,
    .support-form h3 {
        font-size: 1.3rem;
        margin-bottom: 24px;
    }

.support-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.support-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.support-item-text strong {
    display: block;
    margin-bottom: 4px;
}

.support-item-text span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.legal-copy {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px;
}

    .legal-copy h3 {
        font-size: 1.15rem;
        margin: 32px 0 10px;
    }

        .legal-copy h3:first-child {
            margin-top: 0;
        }

    .legal-copy p {
        color: var(--text-secondary);
        line-height: 1.75;
    }

.footer {
    position: relative;
    background: var(--ink);
    border-top: none;
    padding: clamp(50px, 7vw, 86px) clamp(20px, 4vw, 48px) 34px;
    text-align: left;
}

    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        opacity: 0.9;
    }

.footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    justify-content: space-between;
    align-items: start;
    gap: clamp(30px, 5vw, 64px);
    flex-wrap: wrap;
    padding-bottom: 34px;
    border-bottom: 1px solid color-mix(in srgb, var(--on-ink) 12%, transparent);
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
}

.footer-logo {
    display: block;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    line-height: 0;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--on-ink);
}

    .footer-logo .logo-img {
    height: 44px;
    width: auto;
}

.footer-line {
    color: color-mix(in srgb, var(--on-ink) 50%, transparent);
    font-size: 0.85rem;
    max-width: 36ch;
    line-height: 1.6;
}

.footer-links {
    display: grid;
    flex-direction: unset;
    align-items: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(22px, 3vw, 40px);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

    .footer-links a {
        color: color-mix(in srgb, var(--on-ink) 60%, transparent);
        text-decoration: none;
        font-size: 0.86rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: var(--on-ink);
        }

.footer-copy {
    max-width: 1240px;
    margin: 26px auto 0;
    color: color-mix(in srgb, var(--on-ink) 32%, transparent);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.buy-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    justify-content: center;
    /* 8px, not 12px. The bar follows the reader down every page, so its height is a tax on every screen it
       appears over — and with the strapline gone there is one line of content in it. The mobile block already
       used 8px; this brings the wide layout down to the same rhythm. */
    padding: 8px clamp(16px, 4vw, 40px) calc(8px + env(safe-area-inset-bottom));
    /* Fixed dark in both themes, like the footer and the two panels, so the BAR stays a literal — it is a scrim
       over whatever the page is, not a themed surface. The HAIRLINE is different: it was the domain's pale blue
       written out, which is a brand colour, so it now mixes from --gold-light. That token is a light tint in both
       themes on every calculator, which is what a hairline on a dark bar needs. */
    background: linear-gradient(180deg, rgba(8, 20, 40, 0.94) 0%, rgba(5, 12, 26, 0.97) 100%);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-top: 1px solid color-mix(in srgb, var(--gold-light) 26%, transparent);
    box-shadow: 0 -18px 50px -30px rgba(0, 0, 0, 0.7);
}

/* THE HEADLINE ON THE BUY BAR, AND THE TWO RULES IT USED TO BREAK.

   The line says "You could lose up to $47,000".

   It was declared here with --gradient-primary, the accent family — the colour of buttons and links, meaning
   "act", not "this is what it costs you" — and then overridden further down the file by the BIG MONEY NUMBERS
   group, which paints in --success. Green. The site's own palette says green is money GAINED and red is money
   lost, so the one figure whose colour mattered most was saying the opposite of its sentence, and the accent
   declaration up here never even reached the screen.

   Now: the statement in white, at full contrast on a bar that is dark in both themes, and the figure carrying
   money-shine money-shine-loss — the same shine treatment every other loss figure on the site gets. Nothing here
   is a new colour; it is the existing loss vocabulary applied to a loss. */
.buy-bar-copy strong {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.1;
    color: #FFFFFF;
}

/* THE SENTENCE AND THE FIGURE ARE NOT THE SAME SIZE, and that is the whole point of splitting them.

   "You could lose up to $107,065" set as one run of text gives the number the same weight as the word "up". It
   is the single most persuasive figure on the site and it sits on a bar that follows the reader down every page,
   so it gets the display size and the loss colour, and the words around it shrink out of its way. */

.bb-lead {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.85);
}

.bb-figure {
    /* 1.65rem — twenty per cent down from 2.55rem. It is still by some distance the largest thing on the bar and
       still the only thing on it in the loss colour, which is what the hierarchy needed; at the old size it set
       the height of the whole bar on every page of the site. The two mobile blocks override this and are left
       alone: they were never the complaint. */
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* THE STRAPLINE, AND THE > IS LOAD BEARING.

   Written as `.buy-bar-copy span` this matched every span in the block — which was fine while the strapline was
   the only one. The headline is now two spans of its own, a small sentence and a large figure, and a descendant
   selector at specificity (0,1,1) beats both .bb-lead and .bb-figure at (0,1,0) whatever the source order. So the
   most important figure on the site was silently rendered at 0.72rem in strapline grey, and the mobile block's
   `display: none` — meant for the strapline alone — hid the entire headline on every phone.

   The child combinator scopes it back to what it was always for: the strapline is a direct child of
   .buy-bar-copy, the headline spans live inside the <strong>. */
.buy-bar-copy > span {
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);
}

.buy-bar .btn {
    /* Comes down with the figure. At 14px it was within a few pixels of the headline's height, so trimming only
       the figure would have left the button setting the height instead and saved nothing. */
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.loading-spinner {
    font-size: 1.5rem;
    color: var(--gold);
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
}

@keyframes revealIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

html.reveal-ready .reveal:not(.revealed) {
    opacity: 0;
    transform: translateY(24px);
}

html.reveal-ready .reveal.revealed {
    animation: revealIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

html.reveal-ready .reveal-stagger:not(.revealed) > * {
    opacity: 0;
    transform: translateY(20px);
}

html.reveal-ready .reveal-stagger.revealed > * {
    animation: revealIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(1) {
        animation-delay: 0.05s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(2) {
        animation-delay: 0.14s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(3) {
        animation-delay: 0.23s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(4) {
        animation-delay: 0.32s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(5) {
        animation-delay: 0.41s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(6) {
        animation-delay: 0.50s;
    }

@media (max-width: 1024px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
    }

    .lx-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .lx-process {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .lx-process {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px 24px;
    }
}

@media (max-width: 768px) {
    html {
        overflow-x: clip;
    }

    .nav {
        height: 64px;
        padding: 0 16px;
    }

    .nav-links,
    .btn-nav,
    #theme-toggle-desktop {
        display: none;
    }

    .logo-img {
        height: 34px;
    }

    .mobile-menu-toggle,
    .mobile-menu,
    .mobile-menu-overlay {
        display: block;
    }

    .dashboard-sidebar {
        display: none !important;
        position: static;
    }

    .dashboard-container {
        padding: 20px;
    }

    .dashboard-card {
        padding: 20px;
    }

    .page {
        padding-top: 64px;
    }

    .form-container {
        padding: 40px 20px;
    }

    .form-card {
        padding: 32px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .page-header {
        padding: 34px 20px 24px;
    }

    .home-container {
        padding: 0 20px 116px;
    }

    .lx-display {
        font-size: clamp(2.4rem, 11vw, 2.4rem);
    }

    .hero-cta-row {
        gap: 14px;
        width: 100%;
    }

        .hero-cta-row .btn-huge {
            width: 100%;
        }

    .lx-step {
        padding: 24px 22px;
    }

    .faq-icon {
        width: 24px;
        height: 24px;
    }

    .faq-icon-horizontal {
        width: 10px;
    }

    .faq-icon-vertical {
        height: 10px;
    }

    .legal-copy {
        padding: 32px 24px;
    }

    .checkout-panel {
        padding: 24px;
    }

    /* The size is handled by the clamp() on .credits-hero-value itself; only the padding needs easing in here,
       or a 40px inset leaves the figure almost no room on a narrow screen. */
    .credits-hero {
        padding: 32px 20px;
    }

    .footer-logo .logo-img {
        height: 42px;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .lx-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;

        align-items: stretch;
    }

    .lx-hero-copy {
        display: contents;
    }

    .lx-kicker {
        order: 1;
        margin-bottom: 14px;
    }

    .lx-display {
        order: 2;
        margin-bottom: 0;
    }

    .hero-stage {
        order: 3;

        width: 100vw;
        margin: 20px calc(50% - 50vw) 24px;
    }

    .lx-lede {
        order: 4;
        margin: 4px 0 26px;
        max-width: none;
    }

    .hero-cta-row {
        order: 5;
        margin-bottom: 22px;
    }

    .lx-assurances {
        order: 6;
        margin-bottom: 4px;
    }

    .lx-hero .quickcalc {
        width: 100%;
        margin-inline: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .lx-hero .quickcalc-head,
    .lx-hero .quickcalc-body,
    .lx-hero .quickcalc-result {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lx-hero .quickcalc-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

        .lx-hero .quickcalc-body .form-group:last-child {
            grid-column: 1 / -1;
        }

    .lx-hero .quickcalc .input-money { --field-h: 48px; }

    .lx-hero .quickcalc .form-input {
        height: 48px;
        padding: 10px 10px 10px 24px !important;
        font-size: 16px;
        border-radius: 12px;
    }

    .lx-hero .quickcalc .input-money > span {
        left: 10px;
        font-size: 0.85rem;
    }

    .lx-hero .quickcalc .money-slider { height: 24px; }

    .lx-hero .quick-label {
        font-size: 0.66rem;
        letter-spacing: -0.01em;
    }

        .lx-hero .quick-label em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.reveal-ready .reveal,
    html.reveal-ready .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .page.entering,
    .page.leaving {
        animation-duration: 0.01ms !important;
    }
}

/* components */

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

html.no-access .access-only {
    display: none !important;
}

/* MONEY AND PERCENT INPUTS */

.input-money,
.input-pct {
    position: relative;
    display: flex;
    align-items: center;
}

.input-money {
    --field-h: 56px;
    flex-wrap: wrap;
}

    .input-money > input[type="text"] { flex: 1 1 100%; }

/* TOUCH DEVICES */

@media (hover: none) {
    .form-input,
    textarea.form-input,
    select.form-input,
    .input-money > input[type="text"] {
        font-size: 16px;
    }
}

/* MONEY SLIDERS */

.money-slider {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    height: 14px;
    margin: -2px 0 0;
    padding: 0px 8px 0px 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

    .money-slider:focus { outline: none; }

@media (hover: none) {
    .money-slider {
        height: 26px;
        margin: 4px 0 0;
    }
}

.money-slider::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 999px;
    background: var(--input-border);
}

.money-slider::-moz-range-track {
    height: 2px;
    border-radius: 999px;
    background: var(--input-border);
}

.money-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -5px;
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 25%, transparent);
    opacity: 0.55;
    cursor: grab;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    appearance: none;
    -webkit-appearance: none;
}

.money-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 25%, transparent);
    opacity: 0.55;
    cursor: grab;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.input-money:hover .money-slider::-webkit-slider-thumb,
.input-money:focus-within .money-slider::-webkit-slider-thumb { opacity: 1; }

.input-money:hover .money-slider::-moz-range-thumb,
.input-money:focus-within .money-slider::-moz-range-thumb { opacity: 1; }

.money-slider:active::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px var(--accent-glow);
    cursor: grabbing;
}

.money-slider:active::-moz-range-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px var(--accent-glow);
    cursor: grabbing;
}

    .input-money > span {
        position: absolute;
        left: 16px;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        height: var(--field-h);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.4s ease;
    }

    .input-money > input[type="text"] {
        padding-left: 32px !important;
        font-variant-numeric: tabular-nums;
    }

    .input-money:focus-within > span {
        color: var(--gold-text);
    }

    .input-pct > span {
        position: absolute;
        right: 16px;
        z-index: 2;
        font-size: 0.78rem;
        color: var(--text-muted);
        pointer-events: none;
    }

    .input-pct > input {
        padding-right: 74px !important;
        font-variant-numeric: tabular-nums;
    }

/* HOME  —  the gap */

.gap-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: stretch;
}

.gap-card {
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

    .gap-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .gap-card h3 {
        margin: 12px 0 18px;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.gap-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gap-bad .gap-tag {
    background: rgba(192, 57, 43, 0.12);
    color: var(--error);
}

.gap-good .gap-tag {
    background: var(--gold-tint);
    color: var(--gold-text);
}

.gap-good {
    border-color: var(--gold-tint-line);
    box-shadow: var(--shadow-md), 0 0 70px -50px var(--accent-glow);
}

.gap-list {
    list-style: none;
    display: grid;
    gap: 11px;
}

    .gap-list li {
        display: flex;
        gap: 11px;
        font-size: 0.86rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .gap-list i {
        margin-top: 3px;
        flex-shrink: 0;
        font-size: 0.78rem;
    }

.gap-bad .gap-list i { color: var(--error); }
.gap-good .gap-list i { color: var(--success); }

.gap-figure {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

    .gap-figure span {
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .gap-figure strong {
        display: block;
        margin-top: 6px;
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

.gap-good .gap-figure strong { color: var(--gold-text); }

.gap-versus {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gap-versus span {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

.gap-note {
    margin-top: 22px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

    .gap-note a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--gold-tint-line);
        transition: text-decoration-color 0.35s ease;
    }

    .gap-note a:hover { text-decoration-color: var(--gold); }

/* HOME  —  the three way comparison */

.compare-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.compare-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

    .compare-table th,
    .compare-table td {
        padding: 17px 20px;
        text-align: left;
        font-size: 0.86rem;
        border-bottom: 1px solid var(--rule);
    }

    .compare-table thead th {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-primary);
        vertical-align: bottom;
    }

        .compare-table thead th span {
            display: block;
            margin-top: 4px;
            font-family: var(--font-sans);
            font-size: 0.68rem;
            font-weight: 400;
            color: var(--text-muted);
        }

    .compare-table tbody td:first-child {
        font-weight: 500;
        color: var(--text-primary);
    }

    .compare-table tbody td {
        color: var(--text-secondary);
    }

    .compare-table tbody tr:last-child td { border-bottom: 0; }

.compare-bad { color: var(--error) !important; }

.compare-hero {
    position: relative;
    background: var(--gold-tint);
    color: var(--text-primary) !important;
}

thead .compare-hero { color: var(--gold-text) !important; }
.compare-table tbody .compare-hero strong { color: var(--gold-text); }

/* HOME  —  mid page and closing calls to action */

    .mid-cta p {
        margin-bottom: 18px;
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 2.2vw, 1.35rem);
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

.final-cta {
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(150deg, var(--bg-tertiary) 0%, var(--bg-secondary) 62%);
    box-shadow: var(--shadow-md);
    text-align: center;
}

    .final-cta h2 {
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 4vw, 2.7rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text-primary);
    }

    .final-cta p {
        max-width: 640px;
        margin: 16px auto 28px;
        font-size: 0.96rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

.final-cta-sub {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
}

/* HOME  —  deadlines, what is included, trust */

.deadline-grid,
.whatsin-grid {
    display: grid;
    gap: 20px;
}

.deadline-grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.whatsin-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.deadline-card {
    padding: 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .deadline-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

    .deadline-card h3 {
        margin: 14px 0 10px;
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .deadline-card p {
        font-size: 0.83rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

    .deadline-card a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--gold-tint-line);
        transition: text-decoration-color 0.35s ease;
    }

    .deadline-card a:hover { text-decoration-color: var(--gold); }

.deadline-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--gold-text);
}

.whatsin-col {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.whatsin-paid {
    border-color: var(--gold-tint-line);
    background: linear-gradient(160deg, var(--gold-tint) 0%, transparent 58%), var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.whatsin-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}

    .whatsin-head i { color: var(--gold-text); }

.whatsin-list {
    list-style: none;
    display: grid;
    gap: 13px;
}

    .whatsin-list li {
    display: grid;
    gap: 11px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-secondary);
    grid-template-columns: 18px 1fr;
    align-items: start;
}

    .whatsin-list i {
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--gold);
    width: 18px;
    line-height: 1.4;
    text-align: center;
}

    .whatsin-free i {
    color: var(--success);
}

    .whatsin-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* The assistant line at the foot of the inline buy panel. Quiet: it is the last reassurance before the button,
   not a second offer competing with the one above it. */
.inline-buy-agent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    line-height: 1.55;
    text-align: left;
    color: var(--text-secondary);
}

    .inline-buy-agent i {
        margin-top: 3px;
        color: var(--gold-text);
    }

    .inline-buy-agent strong { color: var(--text-primary); }

.trust-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px;
    padding: clamp(30px, 4vw, 46px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}


/* =====================================================================================================================
   THE ASSISTANT SECTION  —  #HomeAgent

   A worked exchange on the left, the reasons on the right. The exchange does the selling: a claim that something
   answers questions in plain English is worth less than two lines of it doing so, and the reader can judge the
   second in a glance.

   Deliberately NOT styled like the live chat window. It is an illustration on a marketing page, and dressing it up
   as the real interface invites somebody to type into it.
   ===================================================================================================================== */

.agent-pitch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
}

@media (max-width: 900px) {
    .agent-pitch { grid-template-columns: minmax(0, 1fr); }
}

.agent-pitch-demo {
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.apd-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.apd-turn {
    display: flex;
    margin-bottom: 12px;
}

.apd-turn span {
    max-width: 88%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* The reader's own question sits right, the way it does in every chat they have ever used. */
.apd-you { justify-content: flex-end; }

    .apd-you span {
        border-bottom-right-radius: 5px;
        background: var(--accent-2-tint);
        color: var(--text-primary);
    }

.apd-it { justify-content: flex-start; }

    .apd-it span {
        border-bottom-left-radius: 5px;
        border: 1px solid var(--border);
        background: var(--bg-primary);
        color: var(--text-secondary);
    }

    .apd-it strong { color: var(--text-primary); }

.apd-fine {
    margin: 16px 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.agent-pitch-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.agent-pitch-points li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.agent-pitch-points i {
    margin-top: 3px;
    font-size: 1.05rem;
    color: var(--gold-text);
    text-align: center;
}

.agent-pitch-points strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
}

.agent-pitch-points span {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.agent-pitch-points a {
    color: var(--gold-text);
    text-decoration: underline;
    cursor: pointer;
}

.trust-item i {
    font-size: 1.25rem;
    color: var(--gold-text);
}

.trust-item h4 {
    margin: 13px 0 8px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trust-item p {
    font-size: 0.81rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

.pricing-note {
    margin-top: 22px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.pricing-featured {
    border-color: var(--gold-tint-line);
    box-shadow: var(--shadow-lg), 0 0 90px -54px var(--accent-glow);
}

/* THE CALCULATOR */

.calc-container,
.report-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 90px;
}

/* The row of buttons that picks which PATH through the calculator this visitor is on.

   .calc-variants is the name to use. .calc-caretype is the same rule under the first calculator's word for it,
   kept because that calculator's markup says it and there is no reason to make a working page change to suit a
   rename. A new calculator has no care types, so it should not have to write the word. */
.calc-caretype,
.calc-variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

/* "Figures as at <date>." on the calculator page, from RATES.effective. */
.calc-schedule {
    margin: -6px 0 22px;
    font-size: 13px;
    /* Was var(--muted), which is not a token anywhere on the site and had no fallback — so this line inherited the
       body colour and rendered as ordinary text rather than the aside it is. The token is --text-muted. */
    color: var(--text-muted);
}

.variant-btn {
    display: grid;
    gap: 5px;
    padding: 20px 18px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.5s ease;
}

    .variant-btn i {
        font-size: 1.1rem;
        color: var(--text-muted);
        transition: color 0.35s ease;
    }

    .variant-btn strong {
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .variant-btn span {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .variant-btn:hover {
        transform: translateY(-3px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-sm);
    }

    .variant-btn.active {
        border-color: var(--gold);
        background: var(--gold-tint);
        box-shadow: 0 0 0 1px var(--gold-tint-line) inset;
    }

        .variant-btn.active i { color: var(--gold-text); }

.calc-modebar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.calc-modes {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, box-shadow 0.4s ease;
}

    .mode-btn.active {
        background: var(--bg-secondary);
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
    }

.calc-modehint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* THE HOOK */

.calc-hook {
    margin-bottom: clamp(20px, 2.6vw, 26px);
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(192, 57, 43, 0.28);
    background:
        radial-gradient(130% 130% at 0% 0%, rgba(192, 57, 43, 0.11) 0%, transparent 58%),
        var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .calc-hook {
    border-color: rgba(232, 105, 92, 0.26);
    background:
        radial-gradient(130% 130% at 0% 0%, rgba(232, 105, 92, 0.12) 0%, transparent 58%),
        var(--bg-secondary);
}

.ch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(192, 57, 43, 0.13);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--error);
}

[data-theme="dark"] .ch-eyebrow { background: rgba(232, 105, 92, 0.16); }

.ch-title {
    margin: 13px 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.16;
    color: var(--text-primary);
}

    .ch-title em {
        font-style: normal;
        color: var(--error);
        font-variant-numeric: tabular-nums;
    }

.ch-lede {
    max-width: 720px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .ch-lede strong { color: var(--text-primary); }

.ch-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
}

.ch-stat {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
}

    .ch-stat strong {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .ch-stat span {
        font-size: 0.7rem;
        line-height: 1.4;
        color: var(--text-muted);
    }

.ch-close {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .ch-close i {
        margin-top: 3px;
        flex-shrink: 0;
        color: var(--gold-text);
    }

    .ch-close strong {
        font-weight: 700;
        color: var(--gold-text);
    }

.hook-slim {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .hook-slim i { color: var(--error); }

    .hook-slim strong {
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

/* One true thing per step */

.step-reality {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: -18px 0 22px;
    padding: 15px 17px;
    border-radius: 15px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
}

.sr-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 0.8rem;
    color: var(--gold-text);
}

.sr-body strong {
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.sr-body span {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Why careful people still get this wrong */

.calc-unfair {
    margin-bottom: 22px;
}

.cu-title {
    margin-bottom: 11px;
    font-family: var(--font-display);
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--text-primary);
}

.cu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 11px;
}

.cu-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.cu-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(192, 57, 43, 0.11);
    font-size: 0.85rem;
    color: var(--error);
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 11px;
}

    .cu-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

[data-theme="dark"] .cu-icon { background: rgba(232, 105, 92, 0.14); }

.cu-item strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.cu-item span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.cu-item a {
    display: inline-block;
    margin-top: 7px;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--gold-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--gold-tint-line);
}

    .cu-item a:hover { text-decoration-color: var(--gold); }

/* THE STEP METER */

/* WHAT THEY HAVE EARNED SO FAR */

.calc-known {
    margin-bottom: 24px;
    padding: clamp(16px, 2.4vw, 22px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(23, 131, 95, 0.28);
    background: linear-gradient(150deg, rgba(23, 131, 95, 0.07) 0%, transparent 60%), var(--bg-secondary);
}

.ck-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

    .ck-title i { color: var(--success); font-size: 0.85em; }

.ck-list {
    display: grid;
    gap: 9px;
    list-style: none;
}

.ck-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    opacity: 0.72;
}

    .ck-item i {
        margin-top: 3px;
        font-size: 0.75rem;
        color: var(--success);
    }

.ck-new {
    opacity: 1;
    animation: ckIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ckIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.ck-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ck-value {
    display: block;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.ck-note {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.ck-foot {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--rule);
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* An interrupted visit, offered back */

.calc-resume {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
}

.cr-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--bg-secondary);
    color: var(--gold-text);
    font-size: 0.85rem;
}

.cr-body {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .cr-body strong { display: block; color: var(--text-primary); }
    .cr-body em { font-style: normal; font-weight: 700; color: var(--gold-text); }

.cr-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .ck-new { animation: none; }
}

.calc-begin {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 2.5vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.3;
    color: var(--text-primary);
}

    .calc-begin i {
        flex-shrink: 0;
        font-size: 1.05em;
        color: var(--gold-text);
    }

.calc-steps {
    margin-bottom: clamp(20px, 2.6vw, 28px);
}

.cs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.cs-count {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.cs-pct {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gold-text);
}

.cs-meter {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.cs-meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-primary);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-list {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

    .cs-list::-webkit-scrollbar { display: none; }

.cs-item button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px 6px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .cs-item button:hover {
        border-color: var(--border);
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

.cs-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: background 0.3s ease, color 0.3s ease;
}

.cs-item.cs-done button { color: var(--text-secondary); }

.cs-item.cs-done .cs-dot {
    background: var(--gold-tint);
    color: var(--gold-text);
}

.cs-item.cs-on button {
    border-color: var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
}

.cs-item.cs-on .cs-dot {
    background: var(--gradient-primary);
    color: var(--on-accent);
}

@media (max-width: 620px) {
    .cs-item:not(.cs-on) .cs-name { display: none; }

    .cs-item:not(.cs-on) button { padding: 6px; }
}

/* Moving between them */

.calc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -12px;
}

.calc-nav-note {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.calc-next,
.calc-back {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .calc-nav {
        gap: 10px;
    }

    .calc-nav-note { display: none; }

    .calc-next { flex: 1 1 auto; justify-content: center; }
}

/* The last step: their own answers, read back */

.calc-review {
    display: grid;
    gap: 8px;
    margin-bottom: 4px;
}

.cr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}

    .cr-row:hover {
        border-color: var(--gold-tint-line);
        background: var(--gold-tint);
    }

.cr-label {
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.cr-value {
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cr-edit {
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--gold-text);
    opacity: 0;
    transition: opacity 0.25s ease;
}

    .cr-row:hover .cr-edit,
    .cr-row:focus-visible .cr-edit { opacity: 1; }

@media (max-width: 560px) {
    .cr-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
    }

    .cr-edit {
        grid-column: 1 / -1;
        text-align: left;
        opacity: 1;
    }
}

.calc-sublabel {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.calc-block {
    margin-bottom: 34px;
    padding: 28px clamp(20px, 3vw, 32px) 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.calc-step {
    animation: calcStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.calc-step .calc-caretype,
.calc-step .calc-variants { margin-bottom: 20px; }

.calc-step .calc-modebar {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: 0;
}

@keyframes calcStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .calc-step { animation: none; }
    .cs-meter-fill { transition: none; }
}

.calc-block-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

    .calc-block-title span {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--gold-tint);
        color: var(--gold-text);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0;
    }

.calc-block-lede {
    margin: -12px 0 20px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.calc-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

    .calc-label .opt {
        margin-left: 5px;
        font-size: 0.68rem;
        font-weight: 400;
        color: var(--text-muted);
    }

/* FIELD HELP  —  the "?" beside a label */

.fh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    flex-shrink: 0;
    vertical-align: -2px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    font-size: 0.53rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: help;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

    .fh-btn:hover,
    .fh-btn[aria-expanded="true"] {
        border-color: var(--gold-tint-line);
        background: var(--gold-tint);
        color: var(--gold-text);
    }

    .fh-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

@media (hover: none) {
    .fh-btn {
        position: relative;
        width: 18px;
        height: 18px;
        font-size: 0.58rem;
    }

        .fh-btn::after {
            content: '';
            position: absolute;
            top: -7px;
            right: -7px;
            bottom: -7px;
            left: -7px;
        }
}

/* The bubble */

.fh-pop {
    position: fixed;
    z-index: 9990;
    display: none;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-hover);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

    .fh-pop.fh-on {
        opacity: 1;
        transform: none;
    }

    .fh-pop.fh-on.fh-has-link { pointer-events: auto; }

.fh-pop,
.fh-pop p,
.fh-pop a {
    font-family: var(--font-sans);
}

.fh-arrow {
    position: absolute;
    top: -6px;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border-top: 1px solid var(--border-hover);
    border-left: 1px solid var(--border-hover);
    border-radius: 2px 0 0 0;
    background: var(--bg-secondary);
    transform: rotate(45deg);
}

    .fh-above .fh-arrow {
        top: auto;
        bottom: -6px;
        border-top: 0;
        border-left: 0;
        border-right: 1px solid var(--border-hover);
        border-bottom: 1px solid var(--border-hover);
        border-radius: 0 0 2px 0;
    }

.fh-title {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.fh-body {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.fh-note {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--rule);
    font-size: 0.73rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.fh-link {
    margin-top: 9px;
    font-size: 0.73rem;
}

    .fh-link a {
        color: var(--gold-text);
        cursor: pointer;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.fh-pop.fh-over { z-index: 9998; }

@media (prefers-reduced-motion: reduce) {
    .fh-pop { transition: none; transform: none; }
}

.calc-help {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .calc-help a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--gold-tint-line);
    }

    .calc-help a:hover { text-decoration-color: var(--gold); }

.mix-row {
    margin-bottom: 12px;
}

    .mix-row label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 0.76rem;
        color: var(--text-secondary);
    }

    .mix-row label span {
        font-weight: 600;
        color: var(--gold-text);
        font-variant-numeric: tabular-nums;
    }

    .mix-row input[type=range] {
        width: 100%;
        height: 4px;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 999px;
        background: var(--bg-tertiary);
        outline: none;
        cursor: pointer;
    }

        .mix-row input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: var(--gold);
            border: 2px solid var(--bg-secondary);
            box-shadow: 0 2px 8px -2px var(--accent-glow);
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .mix-row input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }

        .mix-row input[type=range]::-moz-range-thumb {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: var(--gold);
            border: 2px solid var(--bg-secondary);
            cursor: pointer;
        }

/* NAME THIS SCENARIO  —  the last step, above the run button.
   Quiet on purpose: it is pre-filled and optional, so it must read as something they may adjust rather than one
   more field standing between them and the answer they came for. */
.calc-savename {
    margin-top: 28px;
    padding: 18px 20px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-tertiary);
}

    .calc-savename label {
        display: block;
        margin-bottom: 8px;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

        .calc-savename label i { margin-right: 6px; color: var(--gold-text); }

    .calc-savename input[type="text"] {
        width: 100%;
        padding: 12px 14px;
        font: inherit;
        font-size: 0.95rem;
        color: var(--text-primary);
        background: var(--input-bg);
        border: 1px solid var(--input-border);
        border-radius: 10px;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

        .calc-savename input[type="text"]:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--input-focus-glow);
        }

    .calc-savename-note {
        margin-top: 10px;
        font-size: 0.76rem;
        line-height: 1.5;
        color: var(--text-muted);
    }

        .calc-savename-note a { color: var(--gold-text); }

.calc-submit {
    margin-top: 34px;
    text-align: center;
}

.calc-submit-note {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* THE FREE SUMMARY */

.status-block {
    display: flex;
    gap: 16px;
    padding: 22px 24px;
    margin-bottom: 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

    .status-block i {
        font-size: 1.3rem;
        margin-top: 2px;
    }

    .status-block strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .status-block p {
        margin-top: 7px;
        font-size: 0.85rem;
        line-height: 1.62;
        color: var(--text-secondary);
    }

.status-good {
    border-color: rgba(23, 131, 95, 0.34);
    background: linear-gradient(120deg, rgba(23, 131, 95, 0.09) 0%, transparent 60%), var(--bg-secondary);
}

    .status-good i { color: var(--success); }

.status-warn {
    border-color: rgba(181, 129, 31, 0.34);
    background: linear-gradient(120deg, rgba(181, 129, 31, 0.09) 0%, transparent 60%), var(--bg-secondary);
}

    .status-warn i { color: var(--warning); }

.stat-sub {
    display: block;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.stat-value small {
    margin-left: 5px;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

.stat-primary { border-color: var(--gold-tint-line); }
.stat-primary .stat-value { color: var(--gold-text); }
.stat-good .stat-value { color: var(--success); }
.stat-warn .stat-value { color: var(--warning); }
.stat-accent .stat-value { color: var(--gold-text); }

/* THE WITHHELD CARD, AND IT HAD NO RULE AT ALL.

   statCard() emits `stat-` plus the tone, so a locked card has carried .stat-locked since the free result was
   written — and .stat-accent was styled while this one never was. The padlock glyph in the label was doing the
   whole job on its own, on the one card the paywall's argument rests on: the figure the reader is being told
   exists and is not being shown.

   Withheld, not disabled. The card is not greyed out — a reader who reads "we have this and you cannot see it"
   as "this is switched off" has been told the opposite of the intended thing. So the value keeps its weight and
   the card gains a dashed edge and a wash of the accent, which reads as "reserved". */
.stat-locked {
    border-style: dashed;
    border-color: var(--gold-tint-line);
    background: var(--gold-tint);
}

    .stat-locked .stat-label i { color: var(--gold-text); }

    /* The figure itself is a band rather than a number, so it is set slightly quieter than an exact one — the
       difference between the two is the thing being sold, and it should be legible at a glance. */
    .stat-locked .stat-value {
        color: var(--gold-text);
        letter-spacing: -0.02em;
    }

.summary-h2 {
    margin: 38px 0 16px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.fee-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    margin-bottom: 10px;
    transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fee-row:hover {
        transform: translateX(3px);
        border-color: var(--border-hover);
    }

.fee-flag i { font-size: 1rem; }
.fee-on .fee-flag i { color: var(--success); }
.fee-off .fee-flag i { color: var(--text-muted); }
.fee-off { opacity: 0.66; }

.fee-body {
    flex: 1;
    min-width: 0;
}

    .fee-body strong {
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .fee-body span {
        display: block;
        margin-top: 3px;
        font-size: 0.76rem;
        line-height: 1.5;
        color: var(--text-muted);
    }

.fee-amount {
    flex-shrink: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .fee-amount i {
        margin-right: 4px;
        font-size: 0.7rem;
    }

.fee-off .fee-amount { color: var(--text-muted); }

.summary-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 34px;
}

/* THE PAYWALL */

.paywall {
    position: relative;
    margin-top: 40px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gold-tint-line);
    box-shadow: var(--shadow-lg), 0 0 120px -70px var(--accent-glow);
}

.paywall-panel {
    position: relative;
    padding: clamp(28px, 4vw, 44px);
    background: linear-gradient(165deg, var(--gold-tint) 0%, transparent 46%), var(--bg-secondary);
    border-top: 1px solid var(--gold-tint-line);
}

.paywall-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--on-accent);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.paywall-title {
    margin: 18px 0 12px;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.6vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.14;
    color: var(--text-primary);
}

    .paywall-title em {
        font-style: normal;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

.paywall-lede {
    max-width: 620px;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* THE LAST ASK  —  exit intent */

.exit-modal {
    position: fixed;
    inset: 0;
    z-index: 9980;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(7, 12, 22, 0.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

    .exit-modal.exit-on {
        opacity: 1;
        visibility: visible;
    }

.exit-card {
    position: relative;
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: clamp(24px, 4vw, 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-hover);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .exit-modal.exit-on .exit-card { transform: none; }

.exit-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}

    .exit-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.exit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(23, 131, 95, 0.14);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--success);
}

[data-theme="dark"] .exit-eyebrow { background: rgba(53, 196, 141, 0.17); }

.exit-title {
    margin: 13px 0 9px;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--text-primary);
}

.exit-lede {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.exit-fine {
    margin-top: 12px;
    font-size: 0.71rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* The link itself */

.share-box {
    display: flex;
    gap: 9px;
    margin-bottom: 4px;
}

    .share-box .form-input {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.8rem;
        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    }

    .share-box .btn { flex: 0 0 auto; }

/* A shared report, opened by somebody who has never been here before */

.share-head {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}

.share-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.share-meta {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

    .share-meta strong { color: var(--text-secondary); }

.share-foot {
    margin-top: 40px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: center;
}

    .share-foot p {
        margin-bottom: 18px;
        font-size: 0.82rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

    .share-foot strong { color: var(--text-primary); }

.exit-done {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px 0 8px;
    text-align: center;
}

    .exit-done i {
        font-size: 2rem;
        color: var(--success);
    }

    .exit-done p {
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

@media (prefers-reduced-motion: reduce) {
    .exit-modal,
    .exit-card { transition: none; }
}

/* THE LOSS, DECOMPOSED */

.paywall-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 18px;
}

.pb-item {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(192, 57, 43, 0.26);
    background: rgba(192, 57, 43, 0.06);
}

[data-theme="dark"] .pb-item {
    border-color: rgba(232, 105, 92, 0.26);
    background: rgba(232, 105, 92, 0.08);
}

.pb-value {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3.1vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--error);
    font-variant-numeric: tabular-nums;
}

.pb-label {
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.pb-total {
    border-color: var(--error);
}

@media (max-width: 560px) {
    .paywall-breakdown { grid-template-columns: minmax(0, 1fr); gap: 8px; }

    .pb-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: 10px;
        padding: 11px 14px;
    }
}

.paywall-proof {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .paywall-proof i {
        margin-top: 3px;
        color: var(--success);
    }

    .paywall-proof a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

/* THE TURN */

.paywall-solution {
    margin: 0 0 22px;
    padding: clamp(18px, 2.6vw, 24px);
    border-radius: 17px;
    border: 1px solid var(--gold);
    background:
        radial-gradient(120% 130% at 0% 0%, var(--gold-tint) 0%, transparent 62%),
        var(--bg-secondary);
    box-shadow: 0 0 60px -34px var(--accent-glow), inset 0 0 0 1px var(--gold-tint);
}

.pso-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.pso-title {
    margin: 12px 0 9px;
    font-family: var(--font-display);
    font-size: clamp(1.12rem, 2.7vw, 1.42rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--text-primary);
}

    .pso-title em {
        font-style: normal;
        color: var(--gold-text);
        font-variant-numeric: tabular-nums;
    }

.pso-body {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .pso-body strong { color: var(--text-primary); }

.pso-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 14px;
}

.pso-fig {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
}

.pso-value {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.9vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pso-label {
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.pso-fig-loss .pso-value { color: var(--error); }

.pso-fig-cost {
    border-color: var(--gold);
    background: var(--gold-tint);
}

    .pso-fig-cost .pso-value { color: var(--gold-text); }

.pso-fig-ratio .pso-value { color: var(--gold-text); }

.pso-close {
    padding-top: 13px;
    border-top: 1px solid var(--gold-tint-line);
    font-size: clamp(0.88rem, 2.2vw, 1rem);
    line-height: 1.55;
    color: var(--text-secondary);
}

    .pso-close strong { color: var(--text-primary); font-weight: 700; }

/* "Show me exactly what I get" */

.pso-reveal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 15px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--gold-text);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

    .pso-reveal:hover {
        border-color: var(--gold);
        background: var(--gold-tint);
    }

    .pso-reveal i {
        font-size: 0.68rem;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pso-reveal[aria-expanded="true"] i { transform: rotate(180deg); }

.paywall-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

    .paywall-reveal.reveal-open { opacity: 1; }

    .paywall-reveal .paywall-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 16px 0 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .paywall-reveal { transition: none; }
    .pso-reveal i { transition: none; }
}

@media (max-width: 560px) {
    .pso-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pso-fig-ratio { grid-column: 1 / -1; }
}

.paywall-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 11px 24px;
    margin: 26px 0 28px;
}

    .paywall-list li {
        display: flex;
        gap: 11px;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .paywall-list i {
        margin-top: 3px;
        flex-shrink: 0;
        font-size: 0.72rem;
        color: var(--gold);
    }

.paywall-anchor {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pa-item {
    flex: 1;
    min-width: 190px;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .pa-item span {
        display: block;
        font-size: 0.72rem;
        color: var(--text-muted);
    }

    .pa-item strong {
        display: block;
        margin-top: 5px;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

.pa-strike strong {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--error);
    color: var(--text-muted);
}

.pa-win {
    border-color: var(--gold);
    background: var(--gold-tint);
}

    .pa-win strong { color: var(--gold-text); }

/* THE INLINE BUY PANEL */

.inline-buy {
    margin-top: 22px;
    padding: 20px 20px 18px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 20px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.inline-buy-label {
    display: block;
    margin-bottom: 12px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tier-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg-tertiary);
}

.tier-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 11px 4px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

    .tier-tab:hover {
        background: var(--bg-secondary);
        border-color: var(--border-hover);
        transform: translateY(-1px);
    }

    .tier-tab .tier-name {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--text-secondary);
        transition: color 0.22s ease;
    }

    .tier-tab .tier-price {
        font-family: var(--font-display);
        font-size: 1.28rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
        transition: color 0.22s ease;
    }

.tier-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gradient-primary);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-accent);
}

.tier-on {
    background: var(--bg-secondary);
    border-color: var(--gold);
    box-shadow: 0 6px 18px -10px var(--accent-glow), inset 0 0 0 1px var(--gold-tint);
}

    .tier-on .tier-name { color: var(--gold-text); }

    .tier-on .tier-price { color: var(--gold-text); }

    .tier-on:hover { border-color: var(--gold); }

/* THE OFFER */

/* "IF THIS IS YOU" */

.pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.pain-card {
    padding: 26px 24px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

    .pain-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.pain-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    font-size: 1.05rem;
    color: var(--text-muted);
    transition: background 0.3s ease, color 0.3s ease;
}

    .pain-card h3 {
        margin-bottom: 9px;
        font-family: var(--font-display);
        font-size: 1.06rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .pain-card p {
        font-size: 0.9rem;
        line-height: 1.72;
        color: var(--text-secondary);
    }

.pain-card-answer {
    border-color: var(--gold-tint-line);
    background: linear-gradient(150deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

    .pain-card-answer .pain-icon {
        background: var(--gradient-primary);
        color: var(--on-accent);
    }

    .pain-card-answer h3 { color: var(--gold-text); }

.gapfill {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    margin-top: 22px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--rule);
    overflow: hidden;
}

.gapfill-item {
    padding: 22px 22px 20px;
    background: var(--bg-secondary);
}

    .gapfill-item strong {
        display: block;
        margin-bottom: 7px;
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text-primary);
    }

    .gapfill-item span {
        display: block;
        font-size: 0.85rem;
        line-height: 1.68;
        color: var(--text-secondary);
    }

@media (max-width: 560px) {
    .pain-card { padding: 20px 18px 18px; }

    .pain-icon { width: 38px; height: 38px; margin-bottom: 12px; }

    .gapfill-item { padding: 18px; }
}

.offer-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 12px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--gradient-primary);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--on-accent);
    box-shadow: 0 8px 22px -12px var(--accent-glow);
}

    .offer-flag i { font-size: 0.78rem; }

    .offer-flag em {
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        font-style: normal;
        font-size: 0.68rem;
    }

.price-was {
    display: block;
    margin-bottom: -2px;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--error);
    color: var(--text-muted);
}

.offer-line {
    margin-top: -4px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-text);
}

    .offer-line strong { color: var(--gold-text); }

.pricing-offer {
    border-color: var(--gold);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--gold-tint);
}

.tier-deal .tier-price s {
    display: block;
    margin-bottom: -1px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration-color: var(--error);
    color: var(--text-muted);
}

.tn-deal {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-weight: 600;
    color: var(--gold-text);
}

.tier-note {
    margin: 12px 2px 14px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .tier-note strong { color: var(--text-primary); }

.inline-buy-email {
    margin: 4px 0 14px;
    text-align: left;
}

    .inline-buy-email .calc-label { font-size: 0.78rem; }

    .inline-buy-email .checkout-hint {
        margin-top: 6px;
        font-size: 0.7rem;
        line-height: 1.5;
        color: var(--text-muted);
    }

.inline-buy-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 16px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--rule);
    font-size: 0.7rem;
    color: var(--text-muted);
}

    .inline-buy-foot i {
        margin-right: 5px;
        color: var(--gold);
    }

.inline-buy-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 11px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

    .inline-buy-more a {
        color: var(--gold-text);
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid var(--gold-tint-line);
        transition: border-color 0.2s ease;
    }

        .inline-buy-more a:hover { border-bottom-color: var(--gold); }

/* THE VALUE REMINDER */

.value-reminder {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 720px;
    margin: 0 auto 30px;
    padding: 15px 20px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 16px;
    background: var(--gold-tint);
}

/* THE PRICING PAGE INTRO  —  the cost of getting it wrong, beside what you keep */

.pricing-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(16px, 2vw, 22px);
    margin: 0 0 clamp(22px, 3vw, 32px);
}

    .pricing-intro.pi-solo {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-intro > * {
        min-width: 0;
        margin: 0;
        max-width: none;
    }

    .pricing-intro > #PricingKeep {
        display: grid;
    }

    .pricing-intro .keep-note {
        height: 100%;
        align-content: center;
        margin: 0;
        padding: clamp(20px, 2.6vw, 28px);
        border-radius: 16px;
    }

@media (max-width: 860px) {
    .pricing-intro {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The left half: what this decision could take off them */

.vr-loss {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: clamp(20px, 2.6vw, 28px);
    border-color: rgba(192, 57, 43, 0.30);
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(192, 57, 43, 0.13) 0%, transparent 58%),
        var(--bg-secondary);
    overflow: hidden;
}

[data-theme="dark"] .vr-loss {
    border-color: rgba(232, 105, 92, 0.28);
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(232, 105, 92, 0.14) 0%, transparent 58%),
        var(--bg-secondary);
}

.vr-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.vr-loss .vr-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(192, 57, 43, 0.13);
    color: var(--error);
    font-size: 0.85rem;
}

[data-theme="dark"] .vr-loss .vr-icon { background: rgba(232, 105, 92, 0.16); }

.vr-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--error);
}

.vr-loss .vr-body {
    display: block;
    font-size: 0.86rem;
}

.vr-loss .vr-figure {
    display: block;
    margin: 0 0 6px;
    font-size: clamp(2.4rem, 6.2vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.vr-loss .vr-figure.vr-figure-pop {
    animation:
        vrFigurePop 0.75s cubic-bezier(0.16, 1, 0.3, 1) both,
        moneyShine 9s ease-in-out infinite;
}

@keyframes vrFigurePop {
    0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
    60%  { opacity: 1; transform: translateY(0) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.vr-loss .vr-action {
    align-self: flex-start;
    margin-top: 2px;
}

.vr-loss.vr-prompt {
    border-color: var(--border);
    background: var(--bg-tertiary);
}

    .vr-loss.vr-prompt .vr-icon { background: var(--text-muted); color: var(--on-accent); }

    .vr-loss.vr-prompt .vr-eyebrow { display: none; }

@media (max-width: 860px) {
    .vr-loss .vr-figure { font-size: clamp(2.2rem, 11vw, 3rem); }
}

.vr-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gradient-primary);
    font-size: 1rem;
    color: var(--on-accent);
}

.vr-body {
    min-width: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .vr-body strong { color: var(--text-primary); }

    .vr-figure {
        margin-right: 6px;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gold-text);
    }

.vr-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

.vr-prompt {
    border-color: var(--border);
    background: var(--bg-tertiary);
}

    .vr-prompt .vr-icon { background: var(--text-muted); }

    .vr-prompt .vr-figure {
        display: block;
        margin-right: 0;
        margin-bottom: 2px;
        font-size: 0.95rem;
        line-height: 1.4;
        letter-spacing: -0.01em;
        background-image: none;
        -webkit-text-fill-color: currentColor;
        color: var(--text-primary);
        filter: none;
        animation: none;
    }

@media (max-width: 560px) {
    .inline-buy {
        padding: 16px 13px 15px;
        border-radius: 17px;
    }

    .tier-tabs { gap: 5px; }

    .tier-tab { padding: 10px 2px 9px; }

        .tier-tab .tier-name { font-size: 0.68rem; }

        .tier-tab .tier-price { font-size: 1.1rem; }

    .tier-badge {
        padding: 2px 6px;
        font-size: 0.5rem;
        letter-spacing: 0.04em;
    }

    .tier-note { font-size: 0.74rem; }

    .inline-buy-foot { gap: 5px 12px; font-size: 0.66rem; }

    .value-reminder {
        gap: 12px;
        padding: 13px 15px;
        margin-bottom: 22px;
        flex-wrap: wrap;
    }

    .vr-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 0.85rem; }

    .vr-body { font-size: 0.79rem; }

        .vr-body strong:first-child { font-size: 1.1rem; }

    .vr-action { flex: 1 1 100%; }
}

/* "SEND IT TO ME INSTEAD" */

.paywall-email {
    margin-top: 30px;
    padding: clamp(20px, 3vw, 26px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(23, 131, 95, 0.32);
    background: linear-gradient(140deg, rgba(23, 131, 95, 0.10) 0%, rgba(23, 131, 95, 0.02) 55%), var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.pe-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(23, 131, 95, 0.14);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--success);
}

.pe-title {
    margin: 12px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 2.4vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.pe-lede {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pe-form .form-input {
    background: var(--bg-secondary);
}

.pe-form .btn {
    white-space: nowrap;
}

.pe-fine {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 13px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .pe-fine i {
        margin-top: 2px;
        color: var(--success);
    }

[data-theme="dark"] .paywall-email {
    border-color: rgba(53, 196, 141, 0.3);
    background: linear-gradient(140deg, rgba(53, 196, 141, 0.11) 0%, rgba(53, 196, 141, 0.02) 55%), var(--bg-primary);
}

[data-theme="dark"] .pe-eyebrow { background: rgba(53, 196, 141, 0.17); }

.inline-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .inline-form input {
        flex: 1;
        min-width: 210px;
    }

.paywall-sent {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--success);
}

/* THE FULL REPORT */

.report-toolbar {
    position: sticky;
    top: 88px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 13px 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-glass);
    backdrop-filter: blur(22px);
    box-shadow: var(--shadow-sm);
}

.report-toolbar-right {
    display: flex;
    /* The row is deliberately mixed height: the quiet buttons are 42px, Ask Agent is 52px because it carries a
       32px orb. Every one of them sets its own height, so the default stretch does nothing and they would hang
       from the top of the line. Centring is what puts their labels on one line. It also keeps them centred
       against each other on a second row once the toolbar wraps. */
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* No arrow on the toolbar. .btn-quiet::after appends a gold arrow, which reads as "go somewhere" — right for a
   link out of a page, wrong for a row of controls that act on the report already on screen. The icons carry the
   meaning here, and seven arrows across one strip made the row look like a list of exits. */
.report-toolbar .btn-quiet::after { content: none; }

/* THE SAMPLE PAGE CARRIES THE SAME TOOLBAR, and that is the point of it: a visitor should be looking at the strip
   of controls they are being sold, not at a description of it. The buttons that need a real report are marked
   .rt-locked — they are present, they carry a padlock, and pressing one says what it would do and offers the way
   to get it. Hiding them instead would make the sample a smaller product than the one on sale. */
.report-toolbar .rt-locked {
    position: relative;
    opacity: 0.62;
}

    .report-toolbar .rt-locked:hover { opacity: 0.85; }

    .report-toolbar .rt-locked i:first-child { color: var(--text-muted); }

.report-building {
    padding: 90px 24px;
    text-align: center;
}

    .report-building i {
        font-size: 1.7rem;
        color: var(--gold);
    }

    .report-building h3 {
        margin: 18px 0 8px;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .report-building p {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

/* The report did not open, and it is NOT a paywall. Amber rather than gold, and a button under it, because the one
   thing this panel must never look like is a locked report — the reader has paid, and the only correct next move
   is to try again. See reportEngineStalled() in shared/js/action.js. */
.report-stalled i {
    color: var(--warning);
}

    .report-stalled .btn {
        margin-top: 18px;
    }

.rp-cover {
    position: relative;
    padding: clamp(38px, 6vw, 68px) clamp(26px, 5vw, 56px);
    margin-bottom: 44px;
    border-radius: var(--radius-lg);
    /* The cover is the first thing a buyer sees of what they paid for, so it is the one surface built to be looked
       at rather than read through. Four stops rather than the welcome panel's three, and it returns to near-black
       at the far corner instead of ending on the second hue — the diagonal has to carry twice the height. The two
       glows are what stop a flat gradient reading as a PowerPoint background; they are --panel-glow-a/b.

       Tokenised for the same reason as --dash-hero-gradient: tools/<slug>/theme.css is custom properties only and
       cannot reach a background written as a literal here. Same constraint on any override — DARK at every stop,
       because the text on this panel is a fixed near-white and does not flip with the theme. */
    background: var(--rp-cover-gradient);
    color: #E9EFF9;
    overflow: hidden;
}

    .rp-cover::after {
        content: '';
        position: absolute;
        inset: auto -20% -60% auto;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--panel-glow-a) 0%, transparent 66%);
        pointer-events: none;
    }

    .rp-cover::before {
        content: '';
        position: absolute;
        inset: -45% auto auto -15%;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--panel-glow-b) 0%, transparent 68%);
        pointer-events: none;
    }

/* Lifted above the two glows. Positioned pseudo-elements paint over non-positioned in-flow content, and the blue
   bloom now sits top left where the mark and the title are — .rp-cover-meta already did this for the ::after. */
.rp-cover-mark,
.rp-cover-title,
.rp-cover-for {
    position: relative;
    z-index: 1;
}

.rp-cover-mark {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(233, 239, 249, 0.62);
}

.rp-cover-title {
    margin: 20px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

    /* The one accented word in the cover title. Reads --rp-cover-accent so it moves with the gradient under it;
       it cannot use --gold-text, which flips with the theme and would go dark-on-dark here in light mode. Same
       arrangement, and same reason, as --dash-accent on the welcome panel. */
    .rp-cover-title em {
        font-style: normal;
        color: var(--rp-cover-accent);
    }

.rp-cover-for {
    font-size: 0.95rem;
    color: rgba(233, 239, 249, 0.72);
}

.rp-cover-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(233, 239, 249, 0.16);
}

    .rp-cover-meta span {
        display: grid;
        gap: 4px;
        font-size: 0.85rem;
        color: #E9EFF9;
    }

    .rp-cover-meta strong {
        font-size: 0.63rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(233, 239, 249, 0.5);
    }

.rp-section {
    margin-bottom: 54px;
    scroll-margin-top: 90px;
}

.rp-section-head {
    display: flex;
    gap: 18px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
}

.rp-section-num {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold-text);
    padding-top: 5px;
}

.rp-section-head h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.rp-section-lede {
    margin-top: 8px;
    max-width: 720px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.rp-h4 {
    margin: 26px 0 14px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rp-lead-in {
    margin-bottom: 16px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.rp-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 26px;
    align-items: start;
}

.rp-split-top { margin-top: 26px; }

.rp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.rp-stats-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.rp-stat {
    display: grid;
    gap: 6px;
    padding: 20px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

    .rp-stat:hover {
        transform: translateY(-3px);
        border-color: var(--border-hover);
    }

.rp-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rp-stat-value {
    font-family: var(--font-display);
    font-size: 1.62rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

    .rp-stat-value small {
        display: block;
        margin-top: 4px;
        font-family: var(--font-sans);
        font-size: 0.66rem;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--text-muted);
    }

.rp-stat-sub {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.rp-stat-primary { border-color: var(--gold-tint-line); background: linear-gradient(145deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary); }
.rp-stat-primary .rp-stat-value { color: var(--gold-text); }
.rp-stat-good .rp-stat-value { color: var(--success); }
.rp-stat-warn .rp-stat-value { color: var(--warning); }
.rp-stat-accent .rp-stat-value { color: var(--gold-text); }

.rp-callout {
    padding: 19px 22px;
    border-radius: 16px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--bg-tertiary);
    margin-bottom: 22px;
}

    .rp-callout strong {
        display: block;
        font-family: var(--font-display);
        font-size: 0.97rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .rp-callout p {
        margin-top: 7px;
        font-size: 0.85rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

.rp-callout-good { border-left-color: var(--success); }
.rp-callout-key { border-left-color: var(--gold); }

/* For the one thing on a page that the reader must not skim past. Used on the sample, where every figure belongs
   to somebody who does not exist and a visitor could otherwise take Margaret's answer for their own. */
.rp-callout-warn {
    border-left-color: var(--warning);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--warning) 7%, var(--bg-tertiary));
}

    .rp-callout-warn strong i { margin-right: 8px; color: var(--warning); }

@supports not (background: color-mix(in srgb, red 5%, blue)) {
    .rp-callout-warn { background: var(--bg-tertiary); }
}

.rp-scroll {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.rp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
}

.rp-scroll .rp-table { border-radius: 0; }

    .rp-table th,
    .rp-table td {
        padding: 12px 15px;
        text-align: left;
        font-size: 0.82rem;
        border-bottom: 1px solid var(--rule);
        white-space: nowrap;
    }

    .rp-table thead th {
        background: var(--bg-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .rp-table td { color: var(--text-secondary); }
    .rp-table td:first-child { color: var(--text-primary); white-space: normal; }

    .rp-table tbody tr:last-child td { border-bottom: 0; }

    .rp-table tbody tr:hover td { background: var(--gold-tint); }

.rp-table-tight th,
.rp-table-tight td { padding: 9px 13px; }

.rp-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.rp-strong { font-weight: 700; color: var(--text-primary) !important; }
.rp-pos { color: var(--success) !important; }
.rp-neg { color: var(--error) !important; }

.rp-table .rp-total td,
.rp-table .rp-total th {
    background: var(--bg-tertiary);
    font-weight: 700;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
}

.rp-table .rp-sub td {
    font-weight: 600;
    color: var(--text-primary);
}

.rp-table .rp-lead td {
    background: var(--gold-tint);
    font-weight: 600;
}

    .rp-table .rp-lead td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

.rp-rank {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-muted) !important;
}

.rp-lead .rp-rank { color: var(--gold-text) !important; }

.rp-tag {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.rp-flag {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--warning);
}

.rp-hint {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: normal;
}

.rp-chart {
    margin: 22px 0;
    padding: 16px 14px 12px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    min-width: 0;
    overflow: hidden;
}

.rp-chart-canvas {
    width: 100%;
    min-height: 240px;
    min-width: 220px;
}

.rp-chart figcaption {
    margin-top: 10px;
    padding: 0 6px;
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* =====================================================================================================================
   YOUR OPTIONS, SIDE BY SIDE  —  the first thing in the report

   Three columns: what the option is in plain words, the one number that matters, and how far behind the leader it
   is. The bar is the DIFFERENCE rather than the amount, because the amounts are large and similar and the gap
   between them is the entire point — five bars of near identical length would hide exactly what the reader came
   to find out.

   Nothing here says which option to take. The order and the bar lengths do the work; the styling deliberately
   stops short of a tick, a badge or a "best value" ribbon.
   ===================================================================================================================== */

.rp-choices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: rp-choice;
}

.rp-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(140px, 190px);
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-secondary);
    counter-increment: rp-choice;
}

    /* The leader is marked only by weight, never by a word. */
    .rp-choice-top {
        border-color: var(--gold-tint-line);
        background: var(--gold-tint);
    }

.rp-choice-what h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--text-primary);
}

    .rp-choice-what h4::before {
        content: counter(rp-choice) ". ";
        color: var(--text-muted);
        font-weight: 600;
    }

.rp-choice-detail {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.rp-choice-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.rp-choice-amount {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.rp-choice-top .rp-choice-amount { color: var(--gold-text); }

.rp-choice-caption {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.rp-choice-gap { display: flex; flex-direction: column; gap: 7px; }

.rp-choice-track {
    height: 8px;
    border-radius: 999px;
    background: var(--rule);
    overflow: hidden;
}

    .rp-choice-track span {
        display: block;
        height: 100%;
        border-radius: 999px;
        /* Slot 7, the same colour as the trailing bars in the option ranking chart, because it carries the same
           meaning: this is not the leader, and here is the gap. Not the accent — painting "what this costs you"
           in the brand colour would read as approval of the longest bar. */
        background: var(--chart-7);
        opacity: 0.8;
    }

.rp-choice-gap-text {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.rp-choice-top .rp-choice-gap-text { color: var(--gold-text); }

@media (max-width: 780px) {
    .rp-choice {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .rp-choice-money { align-items: flex-start; text-align: left; }
    .rp-choice-amount { font-size: 1.35rem; }
}

@media print {
    .rp-choice { break-inside: avoid; }
}


/* =====================================================================================================================
   SHOW DETAILS  —  the panel under every option

   A row of the list is three columns of arithmetic, and arithmetic only helps a reader who already knows what the
   words mean. The panel is where the option gets explained in plain English and where the steps involved in taking
   it are set out — closed by default, because a reader working down nine options wants nine one line rows, not nine
   essays, and open on the one they stopped at.

   The whole block spans the row (grid-column: 1 / -1) so it reads as belonging to the option above it rather than as
   a fourth column, and it slides on max-height the same way .paywall-reveal does — measured, animated, then released
   so a reflow can never cut a list of steps off half way down.

   IN PRINT EVERY PANEL IS OPEN AND EVERY BUTTON IS GONE. A printed page has no disclosure triangle, and a report
   somebody printed for the family with the explanations collapsed out of it is a worse artefact than the screen.
   ===================================================================================================================== */

/* No rule above the button. Every option in this list is already a card with its own boundary, so a hairline
   inside one of them drew a second box within a box — and it sat directly under the figure that is the whole
   point of the row, cutting the row's own answer away from the control that explains it. The spacing is kept:
   the padding was doing two jobs and only one of them was the line. */
.rp-choice-more {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 14px;
}

.rp-choice-reveal {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

    .rp-choice-reveal:hover {
        border-color: var(--gold-tint-line);
        color: var(--text-primary);
        background: var(--gold-tint);
    }

    .rp-choice-reveal i {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }

    .rp-choice-reveal[aria-expanded="true"] i { transform: rotate(180deg); }

.rp-choice-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}

    .rp-choice-panel.choice-open { opacity: 1; }

.rp-choice-panel-in {
    margin-top: 14px;
    padding: 20px 22px;
    border-radius: 14px;
    background: var(--bg-tertiary);
}

.rp-choice-panel-h {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

    .rp-choice-panel-h + p { margin-top: 0; }

.rp-choice-panel-in p {
    margin: 0 0 11px;
    font-size: 0.86rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

.rp-choice-panel-in strong { color: var(--text-primary); }

.rp-choice-panel-in .rp-choice-panel-h + p,
.rp-choice-panel-in ul + .rp-choice-panel-h { margin-top: 0; }

/* NUMBERED, AND NUMBERED NATIVELY.

   These are steps in an order, not a bag of bullets, so the list is an <ol> and the marker is a real one. That
   rules out the two obvious ways of styling it: display:flex on the list kills the markers outright in most
   browsers, and a CSS counter cannot be told where to start. The free list needs exactly that — its second half
   is a separate <ol start="8"> so the blurred steps carry on from the visible ones instead of restarting at 1. */

.rp-choice-panel-in .rp-choice-steps {
    margin: 0 0 4px;
    padding: 0 0 0 1.55em;
    list-style: decimal;
}

    .rp-choice-steps li {
        margin-bottom: 11px;
        padding-left: 4px;
        font-size: 0.85rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

        .rp-choice-steps li:last-child { margin-bottom: 0; }

        .rp-choice-steps li::marker {
            color: var(--gold-text);
            font-weight: 700;
            font-size: 0.82rem;
        }

        .rp-choice-steps li strong { color: var(--text-primary); }

/* THE HALF THAT IS NOT SHOWN YET

   The first half of the steps proves this is a worked answer to their own situation — their room price, their
   sale proceeds, their assessment. The second half is what somebody uses to go and do it, and that is what the
   report is for. It is present, blurred, and faded out down the page so it reads as a list cut short rather than
   as something that failed to render. */

.rp-steps-held {
    position: relative;
    margin-top: 10px;
}

    .rp-steps-held .rp-choice-steps {
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 62%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 62%, transparent 100%);
    }

.rp-steps-held-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0 !important;
    padding: 12px 15px;
    border: 1px dashed var(--gold-tint-line);
    border-radius: 12px;
    background: var(--gold-tint);
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

    .rp-steps-held-note i {
        flex: 0 0 auto;
        margin-top: 0.3em;
        color: var(--gold-text);
    }

.rp-choice-panel-in .rp-choice-panel-h:not(:first-child) { margin-top: 20px; }

.rp-choice-fineprint {
    display: flex;
    gap: 10px;
    margin: 18px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 0.76rem !important;
    line-height: 1.65 !important;
    color: var(--text-muted) !important;
}

    .rp-choice-fineprint i {
        flex: 0 0 auto;
        margin-top: 0.3em;
        color: var(--text-muted);
    }

/* A figure that is deliberately not the reader's. Never a security control — this is a legibility signal, and the
   block that carries it says in words that the number underneath is invented. */
.rp-blurred {
    filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
}

/* =====================================================================================================================
   THE FREE LIST

   Same rows, before anybody has paid: real option names, every panel readable in full, the order shuffled and the
   amounts replaced with placeholders of the right size. The head and the footnote are drawn by the calculator, and
   the footnote is the load bearing part — it is where the page says out loud that the figures are not real.
   ===================================================================================================================== */

.free-choices { margin: 34px 0 0; }

.rp-choices-head { margin-bottom: 18px; }

.rp-choices-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.rp-choices-title {
    margin: 10px 0 8px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.rp-choices-lede {
    margin: 0;
    max-width: 68ch;
    font-size: 0.9rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

.rp-choices-foot {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-tertiary);
}

    .rp-choices-foot p {
        display: flex;
        gap: 11px;
        margin: 0;
        font-size: 0.81rem;
        line-height: 1.68;
        color: var(--text-muted);
    }

    .rp-choices-foot i {
        flex: 0 0 auto;
        margin-top: 0.32em;
    }

    .rp-choices-foot strong { color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .rp-choice-panel { transition: none; }
    .rp-choice-reveal i { transition: none; }
}

@media (max-width: 780px) {
    .rp-choice-panel-in { padding: 16px 16px; }
    .rp-choices-title { font-size: 1.28rem; }
}

@media print {
    .rp-choice-reveal { display: none; }

    .rp-choice-panel {
        max-height: none !important;
        overflow: visible;
        opacity: 1;
    }
}
.rp-notes {
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--bg-tertiary);
}

    .rp-notes p {
        font-size: 0.83rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

        .rp-notes p + p { margin-top: 12px; }

    .rp-notes strong { color: var(--text-primary); }

.rp-observations {
    display: grid;
    gap: 14px;
}

.rp-obs {
    padding: 21px 24px;
    border-radius: 17px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--bg-secondary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

    .rp-obs:hover {
        transform: translateX(4px);
        box-shadow: var(--shadow-sm);
    }

    .rp-obs h4 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

    .rp-obs p {
        margin-top: 8px;
        font-size: 0.85rem;
        line-height: 1.68;
        color: var(--text-secondary);
    }

.rp-obs-headline {
    border-left-color: var(--gold);
    background: linear-gradient(120deg, var(--gold-tint) 0%, transparent 55%), var(--bg-secondary);
}

    .rp-obs-headline h4 { font-size: 1.14rem; }

.rp-obs-good { border-left-color: var(--success); }
.rp-obs-watch { border-left-color: var(--chart-2); }
.rp-obs-key { border-left-color: var(--gold); }
.rp-obs-note { border-left-color: var(--text-muted); }

.rp-questions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.rp-qgroup {
    padding: 22px 24px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

    .rp-qgroup h4 {
        margin-bottom: 14px;
        padding-bottom: 11px;
        border-bottom: 1px solid var(--rule);
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold-text);
    }

    .rp-qgroup ul {
        list-style: none;
        display: grid;
        gap: 11px;
    }

/* The expected answer, under each question in "What to ask before you sign anything". The question is what they
   read in the car; this is what they check the reply against while they are standing there, so it is deliberately
   quieter than the question and deliberately not hidden behind a disclosure. Block, not inline, because several of
   them run to two lines and an inline run-on would read as part of the question itself. */
.rp-qexpect {
    display: block;
    margin-top: 6px;
    padding-left: 12px;
    border-left: 2px solid var(--gold-tint-line);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

    .rp-qexpect strong {
        color: var(--gold-text);
        font-weight: 600;
    }

    .rp-qgroup li {
        position: relative;
        padding-left: 20px;
        font-size: 0.83rem;
        line-height: 1.55;
        color: var(--text-secondary);
    }

        .rp-qgroup li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid var(--gold);
        }

.rp-compare-card {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

    .rp-compare-card h4 {
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .rp-compare-card p {
        font-size: 0.83rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

.rp-compare-figure {
    margin: 12px 0 12px !important;
    font-family: var(--font-display);
    font-size: 1.85rem !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--gold-text) !important;
}

    .rp-compare-figure small {
        display: block;
        margin-top: 3px;
        font-family: var(--font-sans);
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--text-muted);
    }

.rp-disclaimer {
    padding: 26px 28px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .rp-disclaimer h3 {
        margin-bottom: 14px;
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .rp-disclaimer p {
        font-size: 0.8rem;
        line-height: 1.72;
        color: var(--text-secondary);
    }

        .rp-disclaimer p + p { margin-top: 12px; }

    .rp-disclaimer strong { color: var(--text-primary); }

.rp-fineprint {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
}

/* PRICING AND ACCESS */

.access-live {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 28px;
    border-radius: 17px;
    border: 1px solid rgba(23, 131, 95, 0.34);
    background: linear-gradient(120deg, rgba(23, 131, 95, 0.09) 0%, transparent 60%), var(--bg-secondary);
}

    .access-live > i {
        font-size: 1.3rem;
        color: var(--success);
    }

    .access-live > div { flex: 1; min-width: 220px; }

    .access-live strong {
        display: block;
        font-size: 0.96rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .access-live span {
        display: block;
        margin-top: 4px;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .access-live em {
        font-style: normal;
        font-weight: 600;
        color: var(--gold-text);
    }

.value-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin: clamp(36px, 5vw, 60px) 0;
}

.value-item {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: center;
}

    .value-item strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text-primary);
    }

    .value-item span {
        display: block;
        margin-top: 8px;
        font-size: 0.78rem;
        line-height: 1.55;
        color: var(--text-muted);
    }

.value-item-win {
    border-color: var(--gold);
    background: var(--gold-tint);
}

    .value-item-win strong { color: var(--gold-text); font-size: 2rem; }

/* THE PAYMENT PANEL AT THE FOOT OF THE PRICING CARD

   It sits INSIDE .pricing-card now, so it gets no border and no shadow of its own — a bordered panel inside a
   bordered card inside a page is the nesting that made the first version of this card unreadable. What separates
   it from the feature list above is a rule and some air, which is all the separation a card foot needs.

   Constrained to 520px and centred. The card runs the full grid width so the comparison has room; an email box
   and a PayPal button stretched to that same measure look like a form someone forgot to lay out.

   scroll-margin-top clears the sticky nav for choosePass() arriving from the home page card, which scrolls here
   with block:'start'. Without it the eyebrow lands under .nav and the buyer arrives at an unlabelled form. */

.pack-buy {
    max-width: 520px;
    margin: clamp(24px, 3vw, 34px) auto 0;
    padding-top: clamp(22px, 2.8vw, 30px);
    border-top: 1px solid var(--rule);
    scroll-margin-top: 108px;
    text-align: center;
}

.pb-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

    .pb-eyebrow i { margin-right: 6px; color: var(--gold); }

.pb-title {
    margin-top: 9px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text-primary);
}

.pb-lede {
    max-width: 42ch;
    margin: 9px auto 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* The only left aligned thing in the panel. A centred field reads as a caption rather than as something to fill
   in, and the floating label is positioned from the left edge regardless, so centring it would misplace it too.

   The hint is a sibling of the group, not a child of it — see the note where it is rendered. Its own top margin is
   zeroed and the group's bottom margin tightened, so the pair still reads as one field with a note under it. */
.pb-email {
    margin: 20px 0 6px;
    text-align: left;
}

.pb-hint {
    margin: 0 0 16px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.5;
}

.pb-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 16px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--rule);
    font-size: 0.7rem;
    color: var(--text-muted);
}

    .pb-foot i { margin-right: 5px; color: var(--gold); }

.pricing-faq { margin-top: clamp(40px, 6vw, 70px); }

.saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.saved-card {
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.5s ease;
}

    .saved-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

    .saved-card header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
    }

    .saved-card h3 {
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.saved-ref {
    flex-shrink: 0;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.saved-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

    .saved-meta dt {
        font-size: 0.63rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .saved-meta dd {
        margin-top: 3px;
        font-size: 0.8rem;
        color: var(--text-primary);
    }

.saved-best {
    display: flex;
    gap: 9px;
    margin-bottom: 16px;
    padding: 10px 13px;
    border-radius: 12px;
    background: var(--gold-tint);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

    .saved-best i { color: var(--gold-text); margin-top: 2px; }

.saved-actions {
    display: flex;
    gap: 9px;
}

/* GUIDES */

.guides-cluster { margin-bottom: 48px; }

.guides-cluster-title {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-text);
}

.guides-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: 18px;
}

.guide-card {
    display: block;
    cursor: pointer;
    /* These two are load bearing now. The card used to be an <a> with only an onclick, and a browser applies no
       link styling at all to an anchor with no href — so it inherited the page's colour and had no underline by
       accident. It carries a real href now (guides are their own URLs and have to be crawlable), which turns the
       user agent defaults on: blue text, underlined. */
    text-decoration: none;
    color: inherit;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .guide-card:hover {
        transform: translateY(-5px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.guide-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--gold-tint) 0%, var(--bg-tertiary) 100%);
    overflow: hidden;
}

    .guide-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .guide-card:hover .guide-card-img img { transform: scale(1.05); }

.guide-card-noimg::after {
    content: '\f02d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    color: var(--gold-text);
    opacity: 0.35;
}

.guide-card-body { padding: 20px 22px 22px; }

    .guide-card-body h3 {
        font-family: var(--font-display);
        font-size: 1.03rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

    .guide-card-body p {
        margin: 9px 0 14px;
        font-size: 0.81rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

.guide-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-text);
}

    .guide-card-meta i { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

    .guide-card:hover .guide-card-meta i { transform: translateX(4px); }

/* AN INFORMATION PAGE */

.guide {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px 90px;
}

.guide-hero {
    margin-bottom: 30px;
    padding-top: 0;
}

.guide-lede {
    margin-top: 16px;
    font-size: clamp(1rem, 2.1vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-secondary);
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 0.72rem;
    color: var(--text-muted);
}

    .guide-meta i { margin-right: 6px; color: var(--gold-text); }

.guide-image {
    margin: 0 0 34px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--gold-tint) 0%, var(--bg-tertiary) 100%);
    aspect-ratio: 16 / 8;
}

    .guide-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.key-points {
    padding: 26px 28px;
    margin-bottom: 36px;
    border-radius: 20px;
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(155deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

    .key-points h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold-text);
    }

    .key-points ul {
        list-style: none;
        display: grid;
        gap: 11px;
    }

    .key-points li {
        position: relative;
        padding-left: 21px;
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

        .key-points li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--gold);
        }

    .key-points strong { color: var(--text-primary); }

    .key-points a { color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.legal-meta {
    margin-bottom: 26px;
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

    .legal-meta strong { color: var(--text-primary); }

.prose h2 {
    margin: 40px 0 16px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.7vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.prose h3 {
    margin: 30px 0 12px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.prose p {
    margin-bottom: 17px;
    font-size: 0.96rem;
    line-height: 1.78;
    color: var(--text-secondary);
}

.prose ul,
.prose ol {
    margin: 0 0 20px 20px;
    display: grid;
    gap: 10px;
}

.prose li {
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

.prose strong { color: var(--text-primary); font-weight: 600; }
.prose em { color: var(--text-primary); }

.prose a {
    color: var(--gold-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--gold-tint-line);
    transition: text-decoration-color 0.35s ease, color 0.35s ease;
}

    .prose a:hover {
        color: var(--gold-bright);
        text-decoration-color: var(--gold);
    }

.formula {
    padding: 18px 22px;
    margin-bottom: 20px !important;
    border-radius: 14px;
    border-left: 3px solid var(--gold);
    background: var(--bg-tertiary);
    font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
    font-size: 0.85rem !important;
    line-height: 1.9 !important;
    color: var(--text-primary) !important;
}

.figure-callout {
    padding: 18px 22px;
    margin-bottom: 20px !important;
    border-radius: 14px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
    font-size: 1.02rem !important;
    color: var(--text-primary) !important;
}

    .figure-callout strong { color: var(--gold-text); }

.guide-table {
    width: 100%;
    margin: 8px 0 26px;
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

    .guide-table th,
    .guide-table td {
        padding: 11px 15px;
        text-align: left;
        font-size: 0.83rem;
        border-bottom: 1px solid var(--rule);
    }

    .guide-table thead th {
        background: var(--bg-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .guide-table td { color: var(--text-secondary); }
    .guide-table td:first-child { color: var(--text-primary); }
    .guide-table tbody tr:last-child td { border-bottom: 0; }
    .guide-table tbody tr:hover td { background: var(--gold-tint); }

    .guide-table .guide-total td {
        background: var(--bg-tertiary);
        font-weight: 700;
        color: var(--text-primary);
    }

    .guide-table a { color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.guide-cta {
    margin-top: 44px;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(140deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
    text-align: center;
}

    .guide-cta h3 {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .guide-cta p {
        margin: 11px auto 22px;
        max-width: 520px;
        font-size: 0.87rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

.guide-next {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
}

    .guide-next h4 {
        margin-bottom: 14px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

/* Read next, as cards */

.guide-next .guides-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 620px) {
    .guide-next .guides-cards { grid-template-columns: minmax(0, 1fr); }
}

/* THE STICKY BUY BAR */

.buy-bar.buy-bar-show {
    display: flex;
    animation: buyBarIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes buyBarIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.buy-bar-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease;
}

    .buy-bar-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
    }

/* FOOTER COLUMNS */

.footer-col h4 {
    margin-bottom: 13px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.footer-col a {
    display: block;
    margin-bottom: 9px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    transition: color 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .footer-col a:hover {
    color: #FFFFFF;
    transform: translateX(3px);
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .gap-grid { grid-template-columns: 1fr; }

    .gap-versus { padding: 4px 0; }

    .rp-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .calc-container,
    .report-container,
    .guide { padding-left: 18px; padding-right: 18px; }

    .report-toolbar {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    /* Ask Agent is not a .btn, but stacked in a column it is the one item that would sit at a different width. */
    .report-toolbar-right .btn,
    .report-toolbar-right button.agent-open { flex: 1; justify-content: center; }

    .paywall-list { grid-template-columns: 1fr; }

    .rp-cover-meta { gap: 18px; }

    .guide-table { font-size: 0.78rem; }
}

/* PRINT  —  the report, and nothing else */

@media print {
    .nav,
    .mobile-menu,
    .mobile-menu-overlay,
    .footer,
    .buy-bar,
    .ambient-bg,
    .report-toolbar,
    .summary-actions,
    .paywall,
    .loading-overlay { display: none !important; }

    body { background: #FFFFFF !important; }

    .page { display: none !important; }

    .page.active {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .report-container { max-width: 100%; padding: 0; }

    .rp-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .rp-cover {
        page-break-after: always;
        break-after: page;
    }

    .rp-chart,
    .rp-scroll,
    .rp-obs { page-break-inside: avoid; break-inside: avoid; }

    .rp-scroll { overflow: visible; }

    .rp-table th,
    .rp-table td { white-space: normal; }

    a { text-decoration: none !important; color: inherit !important; }
}

/* corrections */

/* FOOTER */

.footer-brand {
    display: block;
}

.footer-col {
    min-width: 0;
}

.footer-copy p {
    margin-bottom: 8px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
}

    .footer-copy p strong {
        color: rgba(255, 255, 255, 0.62);
    }

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        flex-direction: unset;
        gap: 26px;
    }
}

/* VERTICAL RHYTHM */

.calc-container,
.report-container,
.guide {
    padding-top: clamp(34px, 5vw, 58px);
}

.calc-container > .page-header,
.report-container .page-header,
.home-container > .page-header,
.dashboard-main > .page-header,
.guide > .page-header {
    max-width: none;
    margin: 0;
    padding: 0 0 clamp(24px, 3vw, 36px);
}

.guide-hero .page-title {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.06;
}

.page-header .lx-sectionmark,
.guide-hero .lx-sectionmark,
.section-header .lx-sectionmark {
    display: block;
    margin-bottom: 14px;
}

.section-header .section-title {
    margin-top: 0;
}

.section-header .section-subtitle {
    margin-top: 16px;
}

.prose > .guide-table + h2,
.prose > .formula + h2,
.prose > .figure-callout + h2,
.prose > ul + h2,
.prose > ol + h2 {
    margin-top: 44px;
}

.prose > h2 + h3 {
    margin-top: 18px;
}

.prose > p + h3 {
    margin-top: 28px;
}

.summary-fees {
    margin-top: 8px;
}

.stats-grid + .summary-fees {
    margin-top: 34px;
}

/* NAVIGATION */

@media (max-width: 768px) {
    #theme-toggle-desktop {
        display: block;
    }

    .nav-actions {
        gap: 10px;
    }
}

/* THE MEMBER DASHBOARD */

#MemberHome {
    display: none;
}

html.has-access.signed-in #MemberHome {
    display: block;
}

html.has-access.signed-in .funnel-only {
    display: none !important;
}

.dash-hero {
    position: relative;
    padding: clamp(32px, 5vw, 54px) clamp(24px, 4vw, 48px);
    margin-bottom: 28px;
    border-radius: var(--radius-lg);
    background: var(--dash-hero-gradient);
    color: #E9EFF9;
    overflow: hidden;

    /* THE PANEL'S OWN ACCENT, DECLARED ONCE.

       This surface is a fixed dark gradient in BOTH themes, so it cannot use --gold-text: that token flips with the
       theme and would go dark-on-dark in light mode. It carried the literal instead, and the literal was written
       out separately for the eyebrow and for the meter value — two copies of one colour, free to drift the first
       time either was touched.

       One custom property, scoped to the panel, and everything on it that is "accent" reads the same value. It
       reads --dash-hero-accent so a tool's theme.css can move it with the gradient. */
    --dash-accent: var(--dash-hero-accent);
}

    .dash-hero::after {
        content: '';
        position: absolute;
        inset: auto -14% -70% auto;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--dash-hero-glow) 0%, transparent 66%);
        pointer-events: none;
    }

.dash-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dash-accent);
}

.dash-title {
    margin: 14px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.1;
}

.dash-sub {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(233, 239, 249, 0.72);
    max-width: 46ch;
}

.dash-meter {
    min-width: 210px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(233, 239, 249, 0.18);
    /* A well pressed into the panel, so it darkens whatever gradient is behind it rather than tinting it. It was
       a navy, which on a panel that is no longer navy is a second hue nobody asked for; plain black is the only
       value that stays neutral against every --dash-hero-gradient a calculator can set. */
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

.dash-meter-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(233, 239, 249, 0.5);
}

/* "Unlimited", under YOUR ACCESS.

   IT USED TO BE GREEN, and it was in the money-shine group to get there — the animated gradient reserved for
   MONEY: a figure the reader could keep, or lose. This is not a figure. It is the word "Unlimited", and dressing a
   status in the vocabulary the site uses for dollars spends that vocabulary on something that is not one.

   It now takes the panel's own accent, the same colour as "Full access is live" a few centimetres to its left, so
   the two facts in this panel are stated in one voice. --dash-accent is declared on .dash-hero. */
.dash-meter-value {
    display: block;
    margin: 7px 0 4px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--dash-accent);
}

.dash-meter-sub {
    display: block;
    font-size: 0.72rem;
    color: rgba(233, 239, 249, 0.6);
}

.dash-meter-track {
    margin-top: 13px;
    height: 4px;
    border-radius: 999px;
    background: rgba(233, 239, 249, 0.16);
    overflow: hidden;
}

.dash-meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    /* The panel's own accent into a lighter mix of itself, so the fill belongs to the panel it sits on. It was
       two literal blues. */
    background: linear-gradient(90deg, var(--dash-accent), color-mix(in srgb, var(--dash-accent) 45%, #FFFFFF));
    width: 0;
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.dash-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 26px 24px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .dash-card:hover {
        transform: translateY(-5px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.dash-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 1.05rem;
}

.dash-card h3 {
    margin: 16px 0 7px;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dash-card p {
    font-size: 0.83rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dash-card-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-text);
}

    .dash-card-go i {
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

.dash-card:hover .dash-card-go i {
    transform: translateX(4px);
}

.dash-section {
    margin-bottom: 34px;
}

.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}

    .dash-section-head h2 {
        font-family: var(--font-display);
        font-size: 1.12rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text-primary);
    }

    .dash-section-head a {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--gold-text);
        cursor: pointer;
    }

.dash-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.dash-fact {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .dash-fact span {
        display: block;
        font-size: 0.68rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .dash-fact strong {
        display: block;
        margin-top: 7px;
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

    .dash-fact em {
        display: block;
        margin-top: 4px;
        font-style: normal;
        font-size: 0.72rem;
        color: var(--text-muted);
    }

/* PRICING, WHEN THEY ALREADY HAVE ACCESS */

html.has-access .buy-only {
    display: none !important;
}

/* CHART CONTAINERS */

.rp-split > div {
    min-width: 0;
}

.rp-chart-failed {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Small containers that only needed sane defaults. */

.guides-grid {
    display: block;
}

.summary-status {
    display: block;
}

/* corrections, second pass */

/* THE GAP SECTION VERDICT */

.gap-verdict {
    display: block;
    margin-top: 26px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold);
    background: linear-gradient(150deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
    box-shadow: var(--shadow-md), 0 0 110px -60px var(--accent-glow);
    text-align: center;
}

.gap-verdict-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gap-verdict-value {
    display: block;
    margin: 12px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 5.6rem);
    font-weight: 700;
    line-height: 0.94;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gap-verdict-sub {
    display: block;
    max-width: 60ch;
    margin: 0 auto;
    font-size: 0.94rem;
    line-height: 1.68;
    color: var(--text-secondary);
}

    .gap-verdict-sub strong { color: var(--text-primary); }

.gap-verdict-multiple {
    display: block;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--gold-tint-line);
    font-size: 1rem;
    color: var(--text-secondary);
}

    .gap-verdict-multiple strong {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gold-text);
    }

/* THE ACCOUNT BUTTON */

.nav-user {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, color 0.35s ease, background 0.35s ease;
}

    .nav-user:hover {
        transform: translateY(-2px);
        border-color: var(--border-hover);
        color: var(--gold-text);
    }

    .nav-user:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 3px;
    }

.nav-user-in {
    border-color: var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
}

.nav-user-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-primary);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.signed-in .nav-user-dot {
    opacity: 1;
    transform: scale(1);
}

/* CHECKOUT */

#CheckoutDone,
#CheckoutPay {
    grid-column: 1 / -1;
    min-width: 0;
}

    .checkout-success .page-header {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .checkout-success .page-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

/* THE STICKY BUY BAR */

html.has-access .buy-bar,
html.has-access .buy-bar.buy-bar-show {
    display: none !important;
}

@media (max-width: 768px) {
    .buy-bar {
        display: none;
    }

    .buy-bar.buy-bar-show {
        display: flex;
    }

    html.has-access .buy-bar,
    html.has-access .buy-bar.buy-bar-show {
        display: none !important;
    }
}

/* THE MEMBER HOME, WITH THE ACCOUNT RAIL */

#MemberHome .dashboard-container {
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
}

#MemberHome .dash-hero {
    margin-top: 0;
}

@media (max-width: 768px) {
    #MemberHome .dashboard-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dash-hero-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-meter {
        min-width: 0;
    }

    .nav-user {
        width: 38px;
        height: 38px;
    }
}

/* proof, preview, guarantee, sample */

/* THE COUNTED STRIP */

.proof-strip-wrap {
    margin-top: clamp(28px, 4vw, 44px);
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--rule);
    overflow: hidden;
}

.proof-item {
    padding: 20px 22px;
    background: var(--bg-secondary);
    text-align: center;
}

    .proof-item strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--gold-text);
        font-variant-numeric: tabular-nums;
    }

    .proof-item span {
        display: block;
        margin-top: 6px;
        font-size: 0.74rem;
        line-height: 1.45;
        color: var(--text-muted);
    }

/* THE REDACTED PREVIEW */

.preview {
    margin-top: 34px;
    padding: clamp(24px, 3.5vw, 34px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.preview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.preview-title {
    margin: 12px 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--text-primary);
}

.preview-lede {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .preview-lede strong { color: var(--text-primary); }

.preview-chart {
    margin-top: 22px;
}

.pv-row {
    display: grid;
    grid-template-columns: minmax(96px, 150px) 1fr minmax(84px, auto);
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}

.pv-label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}

    .pv-label i {
        flex-shrink: 0;
        font-size: 0.62rem;
        color: var(--gold-text);
        opacity: 0.75;
    }

.pv-redact {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.6rem;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.34;
    user-select: none;
}

.pv-track {
    position: relative;
    display: block;
    height: 22px;
    border-radius: 7px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.pv-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 7px;
    background: var(--chart-7);
    opacity: 0.5;
    transition: width 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv-bar-low {
    background: var(--gradient-primary);
    opacity: 1;
}

.pv-bar-high {
    background: var(--error);
    opacity: 0.72;
}

.pv-value {
    text-align: right;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pv-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--rule);
    font-size: 0.73rem;
    color: var(--text-muted);
}

.pv-key {
    display: inline-block;
    width: 22px;
    height: 8px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

.pv-key-low { background: var(--gradient-primary); }
.pv-key-high { background: var(--error); opacity: 0.72; }

.pv-legend-gap {
    margin-left: auto;
    font-weight: 700;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
}

.preview-caveat {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 13px;
    border-left: 3px solid var(--gold);
    background: var(--bg-tertiary);
    font-size: 0.79rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

/* THE COUNTDOWN */

.paywall-clock {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--gold-tint-line);
    background: var(--bg-secondary);
}

/* THE COUNTDOWN TILE — "27 / DAYS", stacked.

   place-items centres each item inside its own grid row; it says nothing about the rows themselves. With two
   auto rows in a fixed 68px box, align-content defaults to a stretch, so each row grew to ~34px and the number
   and its label were pushed to opposite ends of the tile with a hole between them. place-content: center is the
   line that makes the two rows hug their content and centre as a pair. */
.pc-days {
    display: grid;
    place-items: center;
    place-content: center;
    row-gap: 0;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

    .pc-days em {
        display: block;
        margin-top: -1px;
        line-height: 1;
        font-family: var(--font-sans);
        font-style: normal;
        font-size: 0.56rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.85;
    }

.pc-body strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pc-body span {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* THE GUARANTEE */

.guarantee {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 16px;
    padding: 15px 17px;
    border-radius: 14px;
    border: 1px solid rgba(23, 131, 95, 0.30);
    background: rgba(23, 131, 95, 0.06);
}

    .guarantee > i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 1rem;
        color: var(--success);
    }

    .guarantee span {
        font-size: 0.81rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

    .guarantee strong { color: var(--text-primary); }

    .guarantee a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.guarantee-wide {
    max-width: 780px;
    margin: 26px auto 0;
    justify-content: flex-start;
}

/* REVIEWS */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.review-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

    .review-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .review-card h3 {
        margin: 12px 0 8px;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .review-card p {
        flex: 1;
        font-size: 0.86rem;
        line-height: 1.68;
        color: var(--text-secondary);
    }

    .review-card footer {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--rule);
    }

.review-rating i {
    font-size: 0.78rem;
    color: var(--gold);
}

.review-rating .star-off { color: var(--rule); }

.review-who {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.review-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.review-invite {
    margin-top: 40px;
    padding: 26px;
    border-radius: 20px;
    border: 1px dashed var(--gold-tint-line);
    background: var(--bg-tertiary);
    text-align: left;
}

    .review-invite h3 {
        font-family: var(--font-display);
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .review-invite > p {
        margin: 8px 0 18px;
        font-size: 0.83rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

.review-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}

.star {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--rule);
    font-size: 1.15rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

    .star:hover {
        transform: scale(1.14);
        background: var(--gold-tint);
    }

.star.star-on { color: var(--gold); }

.review-stars-label {
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.review-thanks {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

    .review-thanks i {
        font-size: 1.3rem;
        color: var(--success);
    }

    .review-thanks strong {
        display: block;
        font-size: 0.98rem;
        color: var(--text-primary);
    }

    .review-thanks span {
        display: block;
        margin-top: 5px;
        font-size: 0.82rem;
        color: var(--text-secondary);
    }

/* THE SAMPLE REPORT */

.sample-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 17px 20px;
    border-radius: 17px;
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(120deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

    .sample-banner > i {
        font-size: 1.2rem;
        color: var(--gold-text);
    }

    .sample-banner > div { flex: 1; min-width: 240px; }

    .sample-banner strong {
        display: block;
        font-size: 0.95rem;
        color: var(--text-primary);
    }

    .sample-banner span {
        display: block;
        margin-top: 5px;
        font-size: 0.81rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

        /* The one sentence that must not be skimmed sits inside the paragraph, so it is emphasised in place
           rather than promoted to its own heading — a second bold heading would compete with the first. */
        .sample-banner span strong {
            display: inline;
            font-size: inherit;
            font-weight: 650;
            color: var(--text-primary);
        }

/* THE SAMPLE IS A WARNING, NOT AN INTRODUCTION.
   Amber rather than the brand accent: the accent says "here is something good", and the first thing this page
   has to say is "these figures are not yours". */
.sample-banner-warn {
    border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
    border-left-width: 4px;
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 7%, var(--bg-secondary));
}

    .sample-banner-warn > i { color: var(--warning); }

@supports not (background: color-mix(in srgb, red 5%, blue)) {
    .sample-banner-warn {
        border-color: var(--border);
        border-left-color: var(--warning);
        background: var(--bg-secondary);
    }
}

.sample-sheet {
    position: relative;
}

    .sample-sheet::before {
        content: 'SAMPLE';
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-size: clamp(4rem, 17vw, 12rem);
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--gold);
        opacity: 0.055;
        transform: rotate(-24deg);
        pointer-events: none;
        user-select: none;
    }

/* THE LOCKED HALF */

.sample-locked {
    position: relative;
    margin-top: 10px;
    max-height: clamp(640px, 80vh, 920px);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.sample-locked-body {
    filter: blur(7px) saturate(0.85);
    opacity: 0.62;
    pointer-events: none;
    user-select: none;
    margin-top: -12px;
}

.rp-chart-ghost {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6%;
    width: 100%;
    padding: 18px 12%;
    border-radius: 14px;
    background: var(--bg-tertiary);
}

    .rp-chart-ghost span {
        flex: 1;
        border-radius: 6px 6px 0 0;
        background: var(--gold);
        opacity: 0.5;
    }

        .rp-chart-ghost span:nth-child(1) { height: 46%; }
        .rp-chart-ghost span:nth-child(2) { height: 74%; }
        .rp-chart-ghost span:nth-child(3) { height: 58%; }
        .rp-chart-ghost span:nth-child(4) { height: 88%; opacity: 0.75; }
        .rp-chart-ghost span:nth-child(5) { height: 36%; }
        .rp-chart-ghost span:nth-child(6) { height: 64%; }

.sample-locked-veil {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(to bottom,
                var(--bg-primary) 0%,
                rgba(0, 0, 0, 0) 20%,
                rgba(0, 0, 0, 0) 62%,
                var(--bg-primary) 97%);
}

.sample-locked-card {
    width: 100%;
    max-width: 560px;
    padding: clamp(26px, 4vw, 40px);
    border: 1px solid var(--gold-tint-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--gold-tint) 0%, transparent 60%), var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.sample-locked-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--gradient-primary);
    font-size: 1.25rem;
    color: var(--on-accent);
}

    .sample-locked-card h3 {
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 3vw, 1.7rem);
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--text-primary);
    }

    .sample-locked-card p {
        max-width: 46ch;
        margin: 0 auto;
        font-size: 0.86rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

.sample-locked-list {
    display: grid;
    gap: 7px;
    margin: 20px 0;
    padding: 16px 14px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    text-align: left;
    list-style: none;
}

    .sample-locked-list li {
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

        .sample-locked-list li span {
            font-family: var(--font-display);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--gold-text);
        }

.sample-locked-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width: 560px) {
    .sample-locked-body { filter: blur(5px) saturate(0.85); }

    .sample-locked { max-height: clamp(560px, 88vh, 760px); }

    .sample-locked-veil { padding: 24px 12px; }

    .sample-locked-actions .btn { width: 100%; }
}

/* RESPONSIVE */

@media (max-width: 620px) {
    .pv-row {
        grid-template-columns: 60px 1fr minmax(72px, auto);
        gap: 9px;
    }

    .pv-redact { font-size: 0.5rem; }

    .pv-value { font-size: 0.75rem; }

    .paywall-clock {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
    }

    .proof-item { padding: 16px 14px; }

    .proof-item strong { font-size: 1.25rem; }
}

.preview-head {
    display: block;
}

.rp-table-rank td:nth-child(2) {
    min-width: 240px;
    white-space: normal;
}

/* IS THAT ROOM PRICE NORMAL? */

.bench {
    margin: 4px 0 22px;
    padding: 20px 22px;
    border-radius: 17px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--bg-tertiary);
}

.bench-at { border-left-color: var(--success); }
.bench-below,
.bench-well-below { border-left-color: var(--success); }
.bench-above { border-left-color: var(--warning); }
.bench-well-above { border-left-color: var(--error); }

.bench-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.bench-verdict {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .bench-verdict strong { color: var(--text-primary); }

.bench-conf {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.bench-scale {
    margin-bottom: 16px;
}

.bench-track {
    position: relative;
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    margin: 26px 0 8px;
}

.bench-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    opacity: 0.28;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.bench-median,
.bench-you {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 20px;
    transform: translate(-50%, -50%);
}

.bench-median {
    background: var(--text-muted);
    opacity: 0.5;
}

.bench-you {
    background: var(--gold);
    height: 26px;
    box-shadow: 0 0 0 3px var(--bg-tertiary);
    transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

    .bench-median em,
    .bench-you em {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-style: normal;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .bench-median em {
        top: -17px;
        color: var(--text-muted);
    }

    .bench-you em {
        bottom: -18px;
        font-weight: 700;
        color: var(--gold-text);
    }

.bench-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bench-note {
    font-size: 0.81rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

    .bench-note strong { color: var(--text-primary); }

.bench-source {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--rule);
    font-size: 0.68rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* toasts, dialogs and the loading scrim */

/* TOASTS */

.toast-notification {
    position: fixed;
    top: 92px;
    right: clamp(14px, 3vw, 30px);
    z-index: 10000;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    max-width: min(400px, calc(100vw - 28px));
    padding: 15px 18px 15px 16px;

    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;

    font-size: 0.86rem;
    line-height: 1.5;
    text-align: left;
    color: var(--text-primary);

    opacity: 0;
    transform: translateX(24px) scale(0.97);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

    .toast-notification.toast-show {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    .toast-notification i {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        margin: -1px 0 0;
        border-radius: 9px;
        font-size: 0.78rem;
        background: var(--gold-tint);
        color: var(--gold-text);
    }

    .toast-notification::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background: var(--gold);
        opacity: 0.5;
        transform-origin: left center;
        animation: toastTimer 4s linear forwards;
    }

@keyframes toastTimer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast-notification.toast-success {
    border-left-color: var(--success);
}

    .toast-notification.toast-success i {
        background: rgba(23, 131, 95, 0.13);
        color: var(--success);
    }

    .toast-notification.toast-success::after { background: var(--success); }

.toast-notification.toast-error {
    border-left-color: var(--error);
}

    .toast-notification.toast-error i {
        background: rgba(192, 57, 43, 0.13);
        color: var(--error);
    }

    .toast-notification.toast-error::after { background: var(--error); }

.toast-notification.toast-warning {
    border-left-color: var(--warning);
}

    .toast-notification.toast-warning i {
        background: rgba(181, 129, 31, 0.14);
        color: var(--warning);
    }

    .toast-notification.toast-warning::after { background: var(--warning); }

.toast-notification.toast-info {
    border-left-color: var(--gold);
}

    .toast-notification.toast-info i {
        background: var(--gold-tint);
        color: var(--gold-text);
    }

    .toast-notification.toast-info::after { background: var(--gold); }

[data-theme="dark"] .toast-notification.toast-success i { background: rgba(53, 196, 141, 0.16); }
[data-theme="dark"] .toast-notification.toast-error i { background: rgba(232, 105, 92, 0.16); }
[data-theme="dark"] .toast-notification.toast-warning i { background: rgba(217, 164, 65, 0.16); }

@media (max-width: 620px) {
    .toast-notification {
        top: 76px;
        left: 12px;
        right: 12px;
        max-width: none;
        transform: translateY(-16px) scale(0.98);
    }

        .toast-notification.toast-show {
            transform: translateY(0) scale(1);
        }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification { transition-duration: 0.01ms; }
    .toast-notification::after { animation: none; opacity: 0.35; }
}

/* DIALOGS */

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background: var(--scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

    .dialog-overlay.dialog-show { opacity: 1; }

.dialog {
    width: 100%;
    max-width: 460px;
    padding: clamp(26px, 4vw, 34px);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);

    transform: translateY(18px) scale(0.97);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog-overlay.dialog-show .dialog {
    transform: translateY(0) scale(1);
}

.dialog-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 1.1rem;
}

.dialog-danger .dialog-icon {
    background: rgba(192, 57, 43, 0.12);
    color: var(--error);
}

[data-theme="dark"] .dialog-danger .dialog-icon { background: rgba(232, 105, 92, 0.16); }

.dialog-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dialog-message {
    margin-top: 9px;
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

.dialog-input {
    margin-top: 20px;
}

    .dialog-input::placeholder {
        opacity: 1;
    }

    .dialog-input.input-error {
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
    }

.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 26px;
}

    .dialog-actions .btn {
        min-width: 116px;
        justify-content: center;
    }

.dialog-danger .dialog-actions .btn-primary {
    background: var(--error);
    border-color: var(--error);
    color: #FFFFFF;
}

    .dialog-danger .dialog-actions .btn-primary:hover {
        color: var(--ink);
    }

@media (max-width: 480px) {
    .dialog-actions {
        flex-direction: column-reverse;
    }

        .dialog-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dialog-overlay,
    .dialog { transition-duration: 0.01ms; }
}

/* THE LOADING SCRIM */

/* the hero estimate, the money numbers, and the remaining fixes */

/* BIG MONEY NUMBERS

   These used to be painted in --gold, which worked only because --gold was green. It is sapphire now, and a headline
   figure rendered in the interface colour is a figure the reader has to think about before they can read it.

   So the big number is explicitly GREEN — --success, the same green as before the palette moved — and it stays
   green whatever a calculator does to its accent in tools/<slug>/theme.css. The three states below are the whole
   vocabulary and nothing else on the page is allowed to borrow them:

       this rule                        the headline figure, and money in hand           green
       .money-shine-loss  (further down) the figure that is a shortfall                   red
       .money-shine-gain  (further down) the figure that is an improvement                green

   .qc-gap-value and .gap-verdict-value take their colour from here and are then overridden to red by the loss rule
   below, because a "gap" is a shortfall until a calculator says otherwise. That override is load bearing — do not
   reorder these three blocks. */

/* .buy-bar-copy strong WAS IN THIS LIST, and that was the bug. This group is money the reader could KEEP — it
   paints in --success, green, with a green halo. The buy bar's headline says "You could lose up to $47,000". It
   was the one figure on the site whose colour said the opposite of its sentence, and it beat the accent rule
   further up the file by coming later. The headline is now white (see .buy-bar-copy strong above) and its figure
   carries money-shine money-shine-loss, which is this same treatment in the loss colour. */
.money-shine,
.qc-gap-value,
.gap-verdict-value,
.paywall-title em {
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.82) 50%,
            rgba(255, 255, 255, 0.50) 53%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(115deg,
            var(--success) 0%,
            var(--success-bright) 52%,
            var(--success) 100%);
    background-size: 220% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: 210% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 14px var(--success-glow));
    animation: moneyShine 9s ease-in-out infinite;
}

@keyframes moneyShine {
    0% { background-position: 210% 0, 0 0; }
    52% { background-position: -110% 0, 0 0; }
    100% { background-position: -110% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .money-shine,
    .qc-gap-value,
    .gap-verdict-value,
    .paywall-title em {
        animation: none;
        background-position: -110% 0, 0 0;
    }
}

/* THE DASHBOARD METER'S GREEN OVERRIDE USED TO SIT HERE and has been removed with the rest of that treatment —
   see .dash-meter-value further up. It existed because --success at its light-theme depth is a smudge on this
   permanently dark panel, so the value needed the bright pair at both ends of the gradient and a heavier halo.
   All of that was in service of a colour the element no longer wears. The buy bar's figure still has the same
   problem in the other colour; that one is handled below and is a real figure. */

/* THE ONE FIGURE THAT IS NOT GOOD NEWS */

.money-shine-loss,
.qc-gap-value,
.gap-verdict-value,
.paywall-title.pt-loss em {
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.82) 50%,
            rgba(255, 255, 255, 0.50) 53%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(115deg,
            var(--error) 0%,
            var(--error-bright) 52%,
            var(--error) 100%);
    filter: drop-shadow(0 2px 14px rgba(192, 57, 43, 0.38));
}

[data-theme="dark"] .money-shine-loss,
[data-theme="dark"] .qc-gap-value,
[data-theme="dark"] .gap-verdict-value,
[data-theme="dark"] .paywall-title.pt-loss em {
    filter: drop-shadow(0 2px 16px rgba(232, 105, 92, 0.34));
}

/* The buy bar's figure, which is the loss colour on a bar that is dark in BOTH themes — the same problem the
   dashboard meter has in green, and the same answer. --error at its light-theme depth (#C0392B) does not clear
   4.5:1 against that navy, so the bright red runs the whole gradient instead of only its middle. Scoped to the
   bar so the identical class elsewhere, on ordinary page backgrounds, keeps the deeper red it needs there. */

.buy-bar-copy strong .money-shine-loss {
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.82) 50%,
            rgba(255, 255, 255, 0.50) 53%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(115deg,
            var(--error-bright) 0%,
            #FF9184 52%,
            var(--error-bright) 100%);
    filter: drop-shadow(0 2px 16px rgba(232, 105, 92, 0.38));
}

/* SCENARIOS */

.sc-primer {
    margin-bottom: clamp(28px, 4vw, 44px);
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.scp-title {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 2.6vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--text-primary);
}

.scp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(16px, 2.4vw, 26px);
}

.scp-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
}

.scp-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--gold-tint);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold-text);
}

.scp-item strong {
    display: block;
    margin-bottom: 7px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.scp-item p {
    margin-bottom: 9px;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .scp-item p strong { display: inline; margin: 0; font-size: inherit; }

.scp-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 0.78rem;
    color: var(--text-muted);
}

    .scp-foot strong { color: var(--text-secondary); }

.scenario-block { margin-bottom: clamp(30px, 4vw, 48px); }

.sc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--text-primary);
}

.sc-loss .sc-head i { color: var(--error); }
.sc-gain .sc-head i { color: var(--success); }

.sc-lede {
    max-width: 760px;
    margin-bottom: 18px;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.sc-card {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.4vw, 24px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.sc-loss .sc-card { border-color: rgba(192, 57, 43, 0.24); }
.sc-gain .sc-card { border-color: rgba(23, 131, 95, 0.26); }

[data-theme="dark"] .sc-loss .sc-card { border-color: rgba(232, 105, 92, 0.24); }
[data-theme="dark"] .sc-gain .sc-card { border-color: rgba(53, 196, 141, 0.26); }

.sc-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.3;
    color: var(--text-primary);
}

.sc-who {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.sc-figure {
    margin: 16px 0 12px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.sc-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4.4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.sc-unit {
    display: block;
    margin-top: 5px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sc-driver {
    flex: 1 1 auto;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.sc-split {
    margin-bottom: 4px;
    padding: 12px 14px;
    border-radius: 13px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}

.sc-end {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

    .sc-end + .sc-end { border-top: 1px solid var(--rule); }

.sc-end-label {
    display: block;
    font-size: 0.76rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text-primary);
}

.sc-end-note {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.sc-end strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sc-worst strong { color: var(--error); }
.sc-best strong { color: var(--success); }

.sc-split-note {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--rule);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}

    .sc-split-note strong { color: var(--text-primary); }

.sc-inputs {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--rule);
    font-size: 0.72rem;
    color: var(--text-muted);
}

    .sc-inputs i { margin-top: 2px; color: var(--success); }

.scenario-cta {
    margin-top: 12px;
    padding: clamp(26px, 4vw, 40px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
    text-align: center;
}

    .scenario-cta h2 {
        margin-bottom: 10px;
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 3vw, 1.6rem);
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--text-primary);
    }

    .scenario-cta p {
        max-width: 560px;
        margin: 0 auto 20px;
        font-size: 0.88rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

/* WHEN THE FIGURE IS A GAIN */

.money-shine-gain,
.qc-gap.is-gain .qc-gap-value,
.paywall-title.pt-gain em {
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.82) 50%,
            rgba(255, 255, 255, 0.50) 53%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(115deg,
            var(--success) 0%,
            var(--success-bright) 52%,
            var(--success) 100%);
    filter: drop-shadow(0 2px 14px rgba(23, 131, 95, 0.34));
}

[data-theme="dark"] .money-shine-gain,
[data-theme="dark"] .qc-gap.is-gain .qc-gap-value,
[data-theme="dark"] .paywall-title.pt-gain em {
    filter: drop-shadow(0 2px 16px rgba(53, 196, 141, 0.34));
}

.qc-gap.is-gain {
    border-color: rgba(23, 131, 95, 0.42);
    background: linear-gradient(150deg, rgba(23, 131, 95, 0.10) 0%, transparent 72%), var(--bg-secondary);
    box-shadow: 0 0 50px -30px rgba(23, 131, 95, 0.55);
}

[data-theme="dark"] .qc-gap.is-gain {
    border-color: rgba(53, 196, 141, 0.4);
    background: linear-gradient(150deg, rgba(53, 196, 141, 0.12) 0%, transparent 72%), var(--bg-secondary);
}

.qc-gap.is-gain .qc-gap-label { color: var(--success); }

.paywall-breakdown.is-gain .pb-item {
    border-color: rgba(23, 131, 95, 0.26);
    background: rgba(23, 131, 95, 0.06);
}

[data-theme="dark"] .paywall-breakdown.is-gain .pb-item {
    border-color: rgba(53, 196, 141, 0.26);
    background: rgba(53, 196, 141, 0.08);
}

.paywall-breakdown.is-gain .pb-value { color: var(--success); }
.paywall-breakdown.is-gain .pb-total { border-color: var(--success); }

/* THE HERO ESTIMATE */

.hero-stage {
    display: flex;
    align-items: center;
    min-width: 0;
}

.quickcalc {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
}

    .quickcalc::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: var(--gradient-primary);
    }

    .quickcalc:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg), 0 0 90px -46px var(--accent-glow);
        border-color: var(--border-hover);
    }

.quickcalc-head {
    padding: 20px 24px 0;
}

.quickcalc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.quickcalc-title {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.quickcalc-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 15px 24px 0;
}

.quick-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

    .quick-label em {
        display: block;
        font-style: normal;
        font-size: 0.62rem;
        font-weight: 400;
        color: var(--text-muted);
    }

.quickcalc .input-money { --field-h: 48px; }

.quickcalc .form-input {
    height: 48px;
    padding: 10px 12px 10px 24px !important;
    font-size: 0.88rem;
    border-radius: 11px;
}

.quickcalc .input-money > span {
    left: 11px;
    font-size: 0.82rem;
}

.quickcalc-result {
    margin-top: 14px;
    padding: 15px 24px 20px;
    border-top: 1px solid var(--rule);
    background: linear-gradient(180deg, var(--gold-tint) 0%, transparent 62%);
}

.qc-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

    .qc-status.qc-good { color: var(--success); }
    .qc-status.qc-warn { color: var(--warning); }
    .qc-status strong { color: var(--text-primary); }

.qc-calc {
    margin: 10px 0 3px;
    border-top: 1px solid var(--rule);
}

.qc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule);
}

.qc-row-label {
    font-size: 0.76rem;
    line-height: 1.25;
    color: var(--text-secondary);
}

    .qc-row-label em {
        display: inline;
        font-style: normal;
        font-size: 0.62rem;
        color: var(--text-muted);
    }

    .qc-row-label em::before {
        content: ' · ';
        opacity: 0.6;
    }

.qc-row-value {
    flex-shrink: 0;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qc-row-locked .qc-row-value {
    color: var(--gold-text);
    letter-spacing: 0.03em;
}

    .qc-row-locked .qc-row-value i {
        margin-right: 2px;
        font-size: 0.6rem;
    }

.qc-figure {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 10px;
    flex-wrap: wrap;
    row-gap: 2px;
}

.qc-figure-label,
.qc-figure-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.qc-figure-value {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.6vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.qc-gap {
    display: block;
    margin: 14px 0 12px;
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px solid rgba(192, 57, 43, 0.42);
    background: linear-gradient(150deg, rgba(192, 57, 43, 0.10) 0%, transparent 72%), var(--bg-secondary);
    box-shadow: 0 0 50px -30px rgba(192, 57, 43, 0.6);
    text-align: center;
}

[data-theme="dark"] .qc-gap {
    border-color: rgba(232, 105, 92, 0.4);
    background: linear-gradient(150deg, rgba(232, 105, 92, 0.12) 0%, transparent 72%), var(--bg-secondary);
}

.qc-gap-label {
    display: block;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--error);
}

.qc-gap-value {
    display: block;
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.qc-gap-sub {
    display: inline;
    font-size: 0.74rem;
    line-height: 1.42;
    color: var(--text-secondary);
}

    .qc-gap-sub strong { color: var(--text-primary); }

.qc-gap-multiple {
    display: inline;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

    .qc-gap-multiple strong {
        color: var(--gold-text);
        font-weight: 700;
    }

.quickcalc .btn {
    height: 48px;
    padding: 0 22px;
    font-size: 0.74rem;
}

.qc-fineprint {
    margin-top: 9px;
    font-size: 0.66rem;
    line-height: 1.4;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 1080px) {
    .quickcalc-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .quick-label em { display: none; }
}

@media (max-width: 560px) {
    .quickcalc-head,
    .quickcalc-body,
    .quickcalc-result { padding-left: 16px; padding-right: 16px; }

    .quickcalc-body { grid-template-columns: 1fr 1fr; }

    .quickcalc-body .form-group:last-child { grid-column: 1 / -1; }

    .qc-row-label em { display: none; }
}

/* WHAT IS IN THE REPORT */

.whatsin-list li > span {
    display: block;
    min-width: 0;
}

/* SELECT DROPDOWNS */

select.form-input {
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A9A95' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 12px 8px;
    transition: background-position 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] select.form-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2375867F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

    select.form-input:hover,
    select.form-input:focus {
        background-position: right 15px center;
    }

    select.form-input option {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

/* THE STICKY BUY BAR */

.buy-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 32px);
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.buy-bar-copy {
    text-align: right;
}

@media (max-width: 720px) {
    .buy-bar-inner {
        justify-content: space-between;
        gap: 12px;
    }

    .buy-bar-copy {
        text-align: left;
    }
}

/* THE CHECKOUT ASSURANCE PANEL */

.assure {
    margin-top: 22px;
    padding: clamp(24px, 3.5vw, 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.assure-title {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--text-primary);
}

.assure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.assure-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    gap: 13px;
}

    .assure-item strong {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.35;
        color: var(--text-primary);
    }

    .assure-item span {
        display: block;
        margin-top: 4px;
        font-size: 0.77rem;
        line-height: 1.55;
        color: var(--text-secondary);
    }

    .assure-item sup {
        color: var(--gold-text);
        font-size: 0.7em;
    }

.assure-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 0.85rem;
    padding: 8px 0px 0px 12px;
}

.assure-hero {
    grid-column: 1 / -1;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid rgba(23, 131, 95, 0.3);
    background: rgba(23, 131, 95, 0.06);
    grid-template-columns: 40px 1fr;
}

    .assure-hero .assure-icon {
        width: 40px;
        height: 40px;
        background: rgba(23, 131, 95, 0.14);
        color: var(--success);
        font-size: 1rem;
    }

    .assure-hero strong { font-size: 0.94rem; }

[data-theme="dark"] .assure-hero { background: rgba(53, 196, 141, 0.08); }
[data-theme="dark"] .assure-hero .assure-icon { background: rgba(53, 196, 141, 0.16); }

.assure-fine {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: 0.71rem;
    line-height: 1.6;
    color: var(--text-muted);
}

    .assure-fine strong { color: var(--text-secondary); }

    .assure-fine sup { color: var(--gold-text); }

/* THE GAP  —  the pointer down to the verdict */

.gap-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 22px 0 -4px;
    pointer-events: none;
}

.gap-arrow-line {
    display: block;
    width: 2px;
    height: 0px;
    border-radius: 2px;
    background: linear-gradient(to bottom, transparent, var(--gold));
    opacity: 0.55;
}

.gap-arrow-head {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: -28px;
    border-radius: 50%;
    border: 1px solid var(--gold-tint-line);
    background: var(--bg-secondary);
    color: var(--gold-text);
    font-size: 0.82rem;
    box-shadow: 0 6px 20px -10px var(--accent-glow);
    animation: gapNudge 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes gapNudge {
    0%, 62%, 100% { transform: translateY(0); }
    76% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .gap-arrow-head { animation: none; }
}

@media (max-width: 900px) {
    .gap-arrow {
        margin: 16px 0 -2px;
    }

    .gap-arrow-line {
        height: 24px;
    }
}

/* THE BUY BAR ON A PHONE

   WIDTH ONLY. This block used to carry `and (orientation: portrait)`, so a narrow viewport that did not report
   portrait — a phone on its side, a foldable, a device-toolbar preset, a small window on a desktop — fell through
   to the desktop bar: display-size heading, sub-line visible, full-size button, all on a 380px row. That row is
   wider than the screen, and what reaches the reader is a clipped headline with the button somewhere off the
   right-hand edge. Nothing in here needs to know which way up the phone is.

   The copy is also allowed to shrink now. A flex item defaults to min-width:auto, which means it will not go
   narrower than its longest unbreakable word — so the headline pushed the button and the close cross out of the
   bar instead of wrapping. min-width:0 is what lets it wrap. */

@media (max-width: 768px) {
    .buy-bar {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    .buy-bar-inner {
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .buy-bar-copy {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .buy-bar-copy strong {
        justify-content: flex-start;
        gap: 2px 8px;
        font-size: 1rem;
        line-height: 1.15;
    }

    .bb-lead { font-size: 0.84rem; }

    .bb-figure { font-size: 1.75rem; }

    /* The strapline only — the child combinator keeps this off the headline's own two spans. */
    .buy-bar-copy > span {
        display: none;
    }

    /* Pinned right, with the close cross beyond it. Everything to the left of this is the message; everything
       from here on is the action, and on a narrow bar that separation is the only thing keeping it readable. */
    .buy-bar .btn {
        margin-left: auto;
        padding: 10px 16px;
        height: auto;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .buy-bar-close {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    .bb-figure { font-size: 1.3rem; }

    .buy-bar .btn { padding: 10px 12px; }
}

/* THE REPORT AGENT */

/* The button */

button.agent-open {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 20px 9px 10px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: var(--bg-secondary);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gold-text);
    cursor: pointer;
    box-shadow: 0 4px 16px -8px var(--accent-glow);

    /* transform and background are in here because the hover moves and fills as well as glowing. Leaving either
       out is what makes a hover snap on and ease off, which reads as a glitch rather than as a state. */
    transition: border-color 0.22s ease, box-shadow 0.22s ease,
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.22s ease;
}

    /* -----------------------------------------------------------------------------------------------------------
       THE HOVER, AND WHY IT IS LOUDER THAN THE REST OF THE CHROME

       This button is not a control, it is an OFFER — the only thing on the toolbar that answers a question rather
       than moving the reader somewhere, and the one feature of the product that nobody believes until they press
       it. It used to shift its border by one shade and deepen a shadow already set to a negative spread, which on
       a light panel is very nearly nothing.

       So it now moves, fills and lights up, and everything it uses is a --gold-* token: each calculator's own
       accent drives it, so this reads as that calculator's colour rather than as a colour the shell chose.

       LIFT IS THE PART THAT DOES THE WORK. Colour changes are easy to miss on a busy report page; a 2px rise with
       a bloom under it is read as "this is pressable" before anybody has looked at it directly.
       ----------------------------------------------------------------------------------------------------------- */

    button.agent-open:hover,
    button.agent-open:focus-visible {
        border-color: var(--gold-bright);
        background: var(--gold-tint);
        transform: translateY(-2px);

        /* Two layers doing two jobs: a tight ring that reads as a halo on the pill itself, and a wide soft bloom
           underneath that reads as height. Either alone is a colour change; together they are a lift. */
        box-shadow: 0 0 0 4px var(--gold-tint),
                    0 12px 28px -10px var(--accent-glow);
    }

    /* The keyboard route gets the same treatment plus a real ring, because a hover state borrowed for focus is
       not a focus indicator — it has to be visible against the page as well as different from the resting state. */
    button.agent-open:focus-visible {
        outline: 2px solid var(--gold-bright);
        outline-offset: 3px;
    }

    /* Pressed. Back down to the surface, and the bloom collapses with it, so the click has somewhere to land. */
    button.agent-open:active {
        transform: translateY(0);
        box-shadow: 0 0 0 3px var(--gold-tint),
                    0 4px 12px -8px var(--accent-glow);
    }

    /* The orb grows into the space the lift just made. Its own aoPulse ring is left alone on purpose: restarting
       an infinite animation on hover makes it stutter at exactly the moment the pointer arrives. */
    button.agent-open:hover .ao-orb,
    button.agent-open:focus-visible .ao-orb {
        transform: scale(1.08);
    }

    button.agent-open:hover .ao-label,
    button.agent-open:focus-visible .ao-label {
        color: var(--gold-bright);
    }

.ao-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--on-accent);
    font-size: 0.86rem;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.ao-orb::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid var(--gold);
    animation: aoPulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

@keyframes aoPulse {
    0%   { opacity: 0.75; transform: scale(1); }
    70%  { opacity: 0;    transform: scale(1.8); }
    100% { opacity: 0;    transform: scale(1.8); }
}

/* THE SHEEN, AND THE SPAN IT USES WAS ALREADY IN THE MARKUP.

   Every calculator's Ask Agent button carries <span class="ao-glow"> and this rule used to switch it off, so the
   element shipped on every report page doing nothing at all. It is now what it was named for: a single band of
   light that crosses the pill once when the pointer arrives.

   Once, not looping. A button that shimmers forever is a button the eye learns to ignore, and this one is asking
   somebody to try the feature the whole product is judged on. */
.ao-glow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

    .ao-glow::before {
        content: '';
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -60%;
        width: 40%;
        background: linear-gradient(100deg, transparent, var(--gold-tint-line), transparent);
        transform: skewX(-18deg);
    }

button.agent-open:hover .ao-glow,
button.agent-open:focus-visible .ao-glow { opacity: 1; }

    button.agent-open:hover .ao-glow::before,
    button.agent-open:focus-visible .ao-glow::before {
        animation: aoSheen 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    }

@keyframes aoSheen {
    from { left: -60%; }
    to   { left: 120%; }
}


/* The overlay */

.agent-overlay {
    --agent-veil: rgba(245, 247, 251, 0.58);
    --agent-chrome: rgba(245, 247, 251, 0.72);
    --agent-surface: rgba(255, 255, 255, 0.86);

    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9995;
    background: transparent;
    overflow: hidden;
    overscroll-behavior: contain;
}

[data-theme="dark"] .agent-overlay {
    --agent-veil: rgba(7, 12, 22, 0.58);
    --agent-chrome: rgba(7, 12, 22, 0.74);
    --agent-surface: rgba(23, 32, 51, 0.78);
}

    .agent-overlay.agent-on {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.agent-scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--agent-veil);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .agent-overlay { --agent-veil: rgba(245, 247, 251, 0.95); }
    [data-theme="dark"] .agent-overlay { --agent-veil: rgba(7, 12, 22, 0.95); }
}

.agent-glass {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    height: 100%;
    overflow: hidden;
    animation: agentPanel 0.28s ease both;
}

@keyframes agentPanel {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Head */

.agent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-shrink: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--agent-chrome);
}

.agent-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.agent-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--gradient-primary);
    color: var(--on-accent);
    font-size: 0.95rem;
}

.agent-head h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.agent-head p {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.agent-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.agent-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--agent-surface);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
}

    .agent-new:hover {
        border-color: var(--gold);
        color: var(--gold-text);
    }

.agent-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--agent-surface);
    font-size: 0.95rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

    .agent-close:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

/* The conversation */

.agent-scroll {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.agent-log {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 18px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-turn {
    display: flex;
    max-width: 100%;
}

.agent-user { justify-content: flex-end; }

.agent-bubble {
    max-width: 86%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.87rem;
    line-height: 1.62;
}

    .agent-bubble p + p { margin-top: 9px; }

/* What the model is allowed to format */

.agent-bubble strong {
    font-weight: 700;
    color: var(--text-primary);
}

.agent-bubble em { font-style: italic; }

.agent-bubble code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--gold-tint);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    color: var(--gold-text);
}

.agent-lede {
    font-weight: 700;
    color: var(--text-primary);
}

.agent-list {
    margin: 9px 0 0;
    padding-left: 18px;
    list-style: none;
}

    .agent-bubble p + .agent-list { margin-top: 9px; }
    .agent-list:first-child { margin-top: 0; }

    .agent-list li {
        position: relative;
        margin-top: 5px;
    }

        .agent-list li:first-child { margin-top: 0; }

    ul.agent-list li::before {
        content: '';
        position: absolute;
        top: 0.62em;
        left: -13px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold-text);
    }

    ol.agent-list {
        counter-reset: agentitem;
    }

        ol.agent-list li { counter-increment: agentitem; }

        ol.agent-list li::before {
            content: counter(agentitem) '.';
            position: absolute;
            left: -18px;
            font-weight: 700;
            font-size: 0.86em;
            color: var(--gold-text);
        }

.agent-model .agent-bubble {
    border: 1px solid var(--border);
    border-bottom-left-radius: 6px;
    background: var(--agent-surface);
    color: var(--text-secondary);
}

.agent-user .agent-bubble {
    border-bottom-right-radius: 6px;
    background: var(--gradient-primary);
    color: var(--on-accent);
}

.agent-error .agent-bubble {
    border-color: rgba(192, 57, 43, 0.34);
    background: rgba(192, 57, 43, 0.07);
    color: var(--error);
}

.agent-dots {
    display: inline-flex;
    gap: 5px;
    padding: 3px 0;
}

    .agent-dots i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold-text);
        opacity: 0.35;
        animation: agentDot 1.25s ease-in-out infinite;
    }

    .agent-dots i:nth-child(2) { animation-delay: 0.16s; }
    .agent-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes agentDot {
    0%, 60%, 100% { opacity: 0.3; }
    30%           { opacity: 1; }
}

/* Each word arriving */

.agent-word {
    display: inline-block;
    animation: agentWord 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes agentWord {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(0.34em) scale(0.97);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

/* Suggestions, input, disclaimer */

.agent-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 86%;
    margin-top: 10px;
}

.agent-chip {
    padding: 7px 13px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gold-text);
    cursor: pointer;
    transition: background 0.25s ease;
}

    .agent-chip:hover { background: var(--gold-tint); }

/* ---------------------------------------------------------------------------------------------------------------------
   THE TRIAL STRIP  —  two questions on the sample report

   Sits above the input, empty everywhere except the sample page. It has two states and they are deliberately
   different weights: counting down it is a quiet aside, and spent it is the offer, because at that moment it is the
   most important thing in the window.

   The input and the send button are DISABLED rather than removed when the count runs out. What is being sold is
   this window with no limit on it, and a chat window with its chat box taken away is a screenshot of the product
   rather than a demonstration of it.
   --------------------------------------------------------------------------------------------------------------------- */

.agent-trial {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    padding: 11px 18px;
    border-top: 1px solid var(--rule);
    background: var(--agent-chrome);
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .agent-trial > i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 0.82rem;
        color: var(--gold);
    }

    .agent-trial strong { color: var(--text-primary); font-weight: 650; }

    /* The spent state. Wrapping is what lets the button drop under the sentence on a narrow window rather than
       squeezing the sentence into a column two words wide. */
    .agent-trial:has(.btn) {
        flex-wrap: wrap;
        padding-top: 13px;
        padding-bottom: 13px;
        background: var(--gold-tint);
    }

    .agent-trial .btn {
        flex-shrink: 0;
        margin-left: auto;
    }

@media (max-width: 560px) {
    .agent-trial { font-size: 0.72rem; }
    .agent-trial .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* A disabled input still has to look like an input rather than like something broken. */
.agent-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.agent-send:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.agent-bar {
    display: flex;
    gap: 9px;
    flex-shrink: 0;
    padding: 12px 18px 10px;
    border-top: 1px solid var(--rule);
    background: var(--agent-chrome);
}

.agent-consent {
    flex-shrink: 0;
    padding: 0 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--agent-chrome);
    font-size: 0.66rem;
    line-height: 1.5;
    text-align: center;
    color: var(--text-muted);
}

.ac-link {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

    .ac-link:hover,
    .ac-link[aria-expanded="true"] { color: var(--gold-text); }

.agent-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    background: var(--agent-surface);
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.25s ease;
}

    .agent-input:focus { border-color: var(--gold); }

.agent-send {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--on-accent);
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

    .agent-send:disabled { opacity: 0.45; cursor: default; }

/* THE MARKER THE AGENT WINDOW PUTS ON <body>, AND IT IS DELIBERATELY EMPTY.

   Scroll is not locked while the agent is open -- see lockPageScroll() in shared/js/action.js for why. The class
   is kept so that anything that ever does need to know can ask, and it is named `agent-shown` rather than
   `agent-open` because `agent-open` is the BUTTON above, and body wearing the button's class gave the whole
   document `display: inline-flex` and a hover transform. A transform on body makes it the containing block for
   `position: fixed`, so the overlay stretched to the full height of the page instead of the viewport. */
body.agent-shown { }

@media (max-width: 620px) {
    .agent-bubble { max-width: 92%; }

    .agent-head { padding-left: 14px; padding-right: 14px; }

    .agent-new {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

        .agent-new span { display: none; }

    .agent-log { padding: 14px 14px 36px; }
    .agent-starters { max-width: 92%; }
    .agent-followup { width: 92%; }
    .agent-bar,
    .agent-consent { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ao-orb::after { animation: none; opacity: 0; }
    .agent-glass { animation: none; }
    .agent-dots i { animation: none; }

    /* THE ASK AGENT BUTTON KEEPS ITS HOVER, IT JUST STOPS MOVING. Somebody who has asked their machine to stop
       animating things still has to be able to see which control the pointer is on, so the border, the fill and
       the halo all stay — what goes is the 2px lift, the orb's growth and the sheen crossing the pill. */
    button.agent-open,
    button.agent-open .ao-orb { transition: none; }

    button.agent-open:hover,
    button.agent-open:focus-visible,
    button.agent-open:active { transform: none; }

    button.agent-open:hover .ao-orb,
    button.agent-open:focus-visible .ao-orb { transform: none; }

    .ao-glow { display: none; }

    .agent-word { animation-name: agentWordStill; }
}

@keyframes agentWordStill {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Type */

.agent-overlay,
.agent-overlay p,
.agent-overlay span,
.agent-overlay input,
.agent-overlay button,
.agent-overlay textarea {
    font-family: var(--font-sans);
}

.agent-overlay h2 { font-family: var(--font-display); }

/* The chat fades out under the input */

.agent-scroll::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 54px;
    background: linear-gradient(to top, var(--agent-chrome) 26%, transparent);
    pointer-events: none;
}

/* Under the answer */

.agent-model {
    flex-direction: column;
    align-items: flex-start;
}

.agent-followup {
    width: 86%;
    margin-top: 8px;
}

.af-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.af-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 11px;
    border: 1px dashed var(--gold-tint-line);
    border-radius: 999px;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-text);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

    .af-toggle:hover {
        background: var(--gold-tint);
        border-color: var(--gold);
    }

    .af-toggle i {
        font-size: 0.64rem;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

.af-open .af-toggle {
    border-style: solid;
    background: var(--gold-tint);
}

    .af-open .af-toggle i { transform: rotate(180deg); }

.af-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .af-note:hover,
    .af-note[aria-expanded="true"] { color: var(--gold-text); }

    .af-note i { font-size: 0.74rem; }

    .af-note span { text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted; }

.af-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.26s ease,
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.af-open .af-body {
    opacity: 1;
    transform: none;
}

.af-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 9px;
}

    .af-inner .agent-chip {
        font-size: 0.72rem;
        padding: 6px 12px;
    }

@media (prefers-reduced-motion: reduce) {
    .af-body,
    .af-toggle i { transition: none; }
}

/* =====================================================================================================================
   THE ACCENT ROTATION

   Everything numbered or tiled on this site used to come out the same blue, which made a three step process look
   like one long step and a six card grid look like a wall. These rules walk the supporting hues across repeating
   sequences: item 1 royal, item 2 deep blue, item 3 cyan, then round again — one ramp walked in order, not three
   unrelated hues taking turns.

   THE RULE: this is rhythm, not meaning. A step is not the deep blue BECAUSE it is the second step — it is the
   deep blue because it is next, and if a step is inserted the colours all shift and nothing is lost. Anything that
   must be understood from its colour uses --success, --error or --warning and never appears in this block.

   Keeping all three inside ONE RAMP is what stops the rotation reading as arbitrary. An earlier pass used a violet
   for the middle step of a blue accent; it was technically fine and looked like confetti.

   WHICH RAMP IS THE CALCULATOR'S, NOT THE SHELL'S. Step one is --gold, so a tool that themes its accent and leaves
   --accent-2/-3 on the shell's defaults gets its own hue followed by two of the domain's — which is the confetti
   failure above, arrived at from the other direction. The default ramp below is the domain's own sapphire walked
   blue to cyan, correct for a calculator that keeps the default accent and wrong for one that does not; the
   accent family in tools/<slug>/theme.css is where a tool restates it in its own hue. Both -text variants must
   clear 4.5:1 on --bg-secondary in their own theme, because both are used as text.

   Every selector here targets a family that genuinely repeats as siblings — steps, grid cards, report sections,
   the checklist. Single instance components (the form card's icon, a section kicker that appears once) are left on
   the brand accent deliberately: rotating a sequence of one is just an arbitrary colour.

   Placed at the end of the file on purpose. Most of these match the base rule's specificity exactly and win on
   source order alone, so moving this block up will silently stop it working.
   ===================================================================================================================== */

/* ---- numbered steps: the home page process, the scenario primer ------------------------------------------------- */

.lx-step:nth-child(3n+2) .lx-step-no,
.scp-item:nth-child(3n+2) .scp-num {
    color: var(--accent-2-text);
    background: var(--accent-2-tint);
    border-color: var(--accent-2-line);
}

.lx-step:nth-child(3n) .lx-step-no,
.scp-item:nth-child(3n) .scp-num {
    color: var(--accent-3-text);
    background: var(--accent-3-tint);
    border-color: var(--accent-3-line);
}

/* ---- icon tiles in the card grids: the member dashboard, the trust strip ---------------------------------------- */

.dash-card:nth-child(3n+2) .dash-card-icon {
    color: var(--accent-2-text);
    background: var(--accent-2-tint);
}

.dash-card:nth-child(3n) .dash-card-icon {
    color: var(--accent-3-text);
    background: var(--accent-3-tint);
}

.trust-item:nth-child(3n+2) i { color: var(--accent-2-text); }
.trust-item:nth-child(3n) i { color: var(--accent-3-text); }

/* ---- the dot on each section mark, so the home page changes hue as you scroll ------------------------------------
   One mark per section, so this counts sections rather than the marks themselves. :nth-of-type, not :nth-child —
   the sections sit among spacers and dividers, and counting every sibling would make the colour depend on how the
   page happens to be marked up rather than on which section this is. */

section:nth-of-type(3n+2) .lx-sectionmark::before { background: var(--accent-2); }
section:nth-of-type(3n) .lx-sectionmark::before { background: var(--accent-3); }

/* ---- report section numbers ------------------------------------------------------------------------------------ */

.rp-section:nth-of-type(3n+2) .rp-section-num { color: var(--accent-2-text); }
.rp-section:nth-of-type(3n) .rp-section-num { color: var(--accent-3-text); }

/* ---- the calculator's progress rail ----------------------------------------------------------------------------- */

.cs-item:nth-child(3n+2).cs-on .cs-dot { background: var(--accent-2); }
.cs-item:nth-child(3n).cs-on .cs-dot { background: var(--accent-3); }

/* ---- the few large decorative surfaces that can carry the full three hue sweep ---------------------------------- */

.checkout-success-icon,
.agent-avatar,
.ao-orb {
    background: var(--gradient-vivid);
}

/* =====================================================================================================================
   THE QUICK REPORT  —  one page, for somebody who has read nothing

   Deliberately larger and plainer than the full report. Everything here is sized for a page held up on a phone or
   printed and slid across a table, which is a reading distance the eleven section report was never designed for.
   Two type sizes, one accent, no charts.
   ===================================================================================================================== */

.quick-report {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px) 0 60px;
}

.qr-head { margin-bottom: clamp(24px, 4vw, 38px); }

.qr-mark {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.qr-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.6vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--text-primary);
}

.qr-for {
    margin-top: 12px;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

/* ---- the gap. The largest thing on the page, because it is the only reason the page exists. ---------------------- */

.qr-headline {
    display: grid;
    gap: 8px;
    padding: clamp(22px, 3.6vw, 34px);
    margin-bottom: clamp(24px, 4vw, 36px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(150deg, var(--gold-tint) 0%, transparent 68%), var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.qr-headline-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.qr-headline-value {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 8vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.qr-headline-sub {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.qr-h3 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.qr-note {
    font-size: 0.83rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 18px;
}

/* ---- what the two ways of paying ARE. Nobody arrives knowing this. ---------------------------------------------- */

.qr-primer { margin-bottom: clamp(26px, 4vw, 38px); }

.qr-primer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.qr-primer-item {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.qr-primer-tag {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-text);
}

    .qr-primer-item p {
        font-size: 0.85rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

/* ---- the arrangements ------------------------------------------------------------------------------------------- */

.qr-options { margin-bottom: clamp(26px, 4vw, 38px); }

.qr-option {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    margin-bottom: 10px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

/* The one that leaves the most is MARKED, not recommended. The line above the list says which single measure the
   order is on, and the limits block says what that measure cannot see. */
.qr-option-top {
    border-color: var(--gold-tint-line);
    background: linear-gradient(140deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

.qr-option-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 240px;
    flex: 1 1 260px;
}

.qr-option-rank {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

    .qr-option-head strong {
        display: block;
        font-size: 0.96rem;
        line-height: 1.35;
        color: var(--text-primary);
    }

.qr-option-mech {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.qr-option-figs {
    display: flex;
    gap: 26px;
    flex-shrink: 0;
}

    .qr-option-figs span { display: grid; gap: 2px; text-align: right; }

    .qr-option-figs em {
        font-style: normal;
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .qr-option-figs strong {
        font-family: var(--font-display);
        font-size: 1.12rem;
        font-weight: 700;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

/* A shortfall against the top option is money going the wrong way, so it takes --error, the same colour the rest of
   the site uses for exactly that. */
.qr-down { color: var(--error) !important; }

/* ---- the limits, and the dates ---------------------------------------------------------------------------------- */

.qr-limits {
    padding: clamp(20px, 3vw, 28px);
    margin-bottom: clamp(22px, 3.4vw, 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .qr-limits ul { list-style: none; display: grid; gap: 12px; }

    .qr-limits li {
        position: relative;
        padding-left: 20px;
        font-size: 0.86rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

        .qr-limits li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 9px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--gold);
        }

        .qr-limits li strong { color: var(--text-primary); }

.qr-timing { margin-bottom: 26px; }

.qr-timing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

    .qr-timing-grid > div {
        padding: 16px 18px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .qr-timing-grid em {
        display: block;
        margin-bottom: 6px;
        font-style: normal;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--gold-text);
    }

    .qr-timing-grid span {
        font-size: 0.83rem;
        line-height: 1.55;
        color: var(--text-secondary);
    }

.qr-foot {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

/* One page means one page. Nothing here may split across a sheet when it is printed from the toolbar button. */
@media print {
    .quick-report { max-width: 100%; padding: 0; }

    .qr-headline,
    .qr-option,
    .qr-primer-item,
    .qr-limits,
    .qr-timing-grid > div { break-inside: avoid; page-break-inside: avoid; }

    .qr-headline { box-shadow: none; }
}

/* The break between the leading options and the lowest one. Drawn rather than implied, so the bottom row is never
   misread as the next one down. */
.qr-gapmark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 2px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

    .qr-gapmark::before,
    .qr-gapmark::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--rule);
    }


/* =====================================================================================================================
   BREATHING ROOM UNDER THE NAV ON A PHONE

   .page clears the fixed nav exactly — 78px against a 78px bar on desktop, 64 against 64 on a phone — so the only
   thing between the nav and the first thing on the page is whatever top padding the container carries. On desktop
   that is 44-58px and it reads fine. On a phone the same clamps bottom out at 28-34px, and the page containers
   above zero the top padding of .page-header outright, so the section mark — the small pill above every H1 — ends
   up sitting almost against the bar. The nav is translucent and the page scrolls under it, which makes a tight gap
   look tighter still.

   This is a phone-only top-up on the header block itself rather than a change to .page: the nav clearance is a
   contract with the fixed bar and is correct as it stands, and anything that moved it would move every page on the
   site, including the ones that open with a full-bleed hero and want to sit under the bar.

   Placed at the end of the file on purpose — the rules it corrects are declared later than the base ones, so it
   has to come after them to win at equal specificity.
   ===================================================================================================================== */

@media (max-width: 768px) {

    .calc-container > .page-header,
    .report-container .page-header,
    .home-container > .page-header,
    .dashboard-main > .page-header,
    .guide > .page-header,
    .guide-hero {
        padding-top: 22px;
    }

    /* The one that opens with a section mark rather than a heading needs it most: the pill is short, so there is
       no descender or cap height near the bar to fill the space the way an H1 does. */
    .page-header > .lx-sectionmark:first-child,
    .guide-hero > .lx-sectionmark:first-child {
        margin-top: 4px;
    }
}