/* =====================================================================================================================
   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);

    /* A card face, an edge and real ink. Light mode is white on paper, which is the pairing that reads as
       expensive next to the deep navy primary. */
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-bg-hover: #EAF0FA;            /* the page's own paper, one step under the card it lifts off  */
    --btn-secondary-line: rgba(11, 23, 40, 0.32);
    --btn-secondary-ink: #0B1728;
    --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;

    /* Dark: one step ABOVE the card it sits on, never below. A button darker than its own panel reads as a
       hole; this one reads as a raised key. */
    --btn-secondary-bg: #1C2844;
    --btn-secondary-bg-hover: #24355A;            /* up, never down: a dark theme's hover has to gain light      */
    --btn-secondary-line: rgba(233, 239, 249, 0.34);
    --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);
}

[data-theme="dark"] .nav .logo-img {
    content: url("/images/logo_dark.png");
}

.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.

       BOTH FILLED BUTTONS, and the same number for each. The secondary is built on the primary's construction —
       see its block below — so it swells by the identical 3% rather than by a figure of its own. Two controls
       that are meant to read as one component at two weights cannot move by different amounts. */
    .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. It does NOT lead by doing something the secondary does not do — the secondary is this same button on
   quieter tokens and runs the same reveal, sheen and bar. The gap is entirely in the fills, which is why the
   numbers above are the whole of the hierarchy and why changing either one means re-checking them. */

.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.

       The secondary runs this same construction on a quicker clock — 0.5s and 0.9s against 0.62s and 1.05s. Same
       gesture, different tempo, which is most of what separates the two buttons now that they share a shape. Any
       change to the geometry here belongs in that block as well; they are meant to stay identical. */
    .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  —  THE PRIMARY, TURNED DOWN

   THIS IS THE PRIMARY'S CONSTRUCTION, LINE FOR LINE, READING QUIETER TOKENS.

   Read the primary block above first; everything structural here is explained there and is not repeated. Same
   shape, same typography, same two pseudo-elements doing the same two jobs in the same order — ::before is a
   gradient that rises from the bottom edge with a sheen band swept across it, ::after is a bar that grows left to
   right along the floor. Same easing, same 3% swell, same press. If a change is ever made to how the primary
   behaves, make it here too: these are one component at two weights, and the moment they drift they stop reading
   as a pair.

   THE ONLY FOUR THINGS THAT DIFFER, and they are deliberately few:

       1. THE FILLS ARE ITS OWN. --btn-secondary-bg and --btn-secondary-bg-hover instead of the primary's pair, so
          the whole hierarchy question stays where it already was — see the contrast table in the primary's block.
          Both are flat colours rather than gradients, so the gradients are built here from each token and its own
          ink: a single 12% shade across 135deg, the primary's angle. Quiet enough to read as one colour at a
          glance, present enough that the button is the same KIND of object as the one beside it.

       2. IT KEEPS ITS KEYLINE. The primary sets border-color: transparent; this holds --btn-secondary-line through
          every state. On the light theme, where the secondary is a white face on near-white paper, that hairline
          is the only thing giving it an edge, and dropping it to match the primary would erase the button.

       3. THE BAR IS THE ACCENT, and it is 2px rather than 4px. This is the one place the two buttons are told
          apart by colour instead of by weight. var(--gold) clears 3:1 against all four secondary faces — 5.7:1 on
          the light shell's white, 3.8:1 on the coral theme's graphite, and better than either on both dark faces
          — so it is legible as a bar everywhere without a per-theme token, which the primary needed because it
          draws its bar over a moving gradient. Half the height because half the weight.

       4. IT IS QUICKER. 0.5s for the reveal against the primary's 0.62s, 0.9s for the sheen against 1.05s. Same
          gesture, faster tempo. A secondary that takes longer than the button it defers to feels heavier than it,
          whatever it is coloured.

   THE LABEL IS THE PRIMARY'S: 0.72rem uppercase at 0.14em, straight off .btn, with nothing overriding it. Earlier
   versions of this button set 0.9rem sentence case and argued for it on the grounds that "Print" and "Show more"
   are utilities that want a readable label rather than a row of tracked capitals. That argument is not wrong, but
   it was the single largest reason the two buttons never looked related — different size, different case, different
   tracking, sitting side by side in the same row. Matching the primary is the point of this design, so the type
   matches too. If the small caps ever do become a problem on a specific screen, the fix is a size modifier on that
   instance, not a divergence baked into the component.

   :focus-visible IS WIRED TO THE REVEAL HERE, which the primary does not do — it swells on keyboard focus but does
   not fill. That is a gap in the primary rather than a feature of this button, and the primary should get the same
   treatment; it is not changed here because that block is not what was being worked on. */

/* Each of the two gradients is written TWICE — a flat version of the same token first, the shaded one second —
   which is the convention the token blocks at the top of this file use and it is load bearing here for a specific
   reason: color-mix appears INSIDE a gradient, so a browser without it throws out the whole background-image
   declaration rather than one stop. On ::before that would take the sheen layer with it and leave the button with
   no hover at all. The fallback is the same colour flat, so an old browser gets a plain fill that still rises. */
.btn-secondary {
    background: var(--btn-secondary-bg);
    background: linear-gradient(135deg,
        var(--btn-secondary-bg) 0%,
        color-mix(in srgb, var(--btn-secondary-bg) 88%, var(--btn-secondary-ink)) 100%);
    border-color: var(--btn-secondary-line);
    color: var(--btn-secondary-ink);
}

    /* THE REVEAL AND THE SHEEN ON TOP OF IT — one element, two background layers, exactly as the primary does it.
       The band is painted on the same layer it sweeps across, so it cannot outrun the fill rising underneath it no
       matter how the two timings drift. The 112% and -15% ends are the primary's, and for the reason given at
       length in its block: pulled in tight so the bright core is over the button from the first frame instead of
       spending most of its travel outside the shape. */
    .btn-secondary::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%),
            linear-gradient(135deg,
                var(--btn-secondary-bg-hover) 0%,
                var(--btn-secondary-bg-hover) 100%);
        background-image:
            linear-gradient(100deg,
                rgba(255, 255, 255, 0) 38%,
                rgba(255, 255, 255, 0.16) 50%,
                rgba(255, 255, 255, 0) 62%),
            linear-gradient(135deg,
                var(--btn-secondary-bg-hover) 0%,
                color-mix(in srgb, var(--btn-secondary-bg-hover) 88%, var(--btn-secondary-ink)) 100%);
        background-size: 220% 100%, 100% 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: 112% 0, 0 0;
        transform: translateY(101%);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    background-position 0.9s linear 0s;
    }

    /* THE BAR. Accent, 2px, growing left to right on the same 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 it paints over the rising fill
       rather than under it. */
    .btn-secondary::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        z-index: -1;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    /* THE LABEL NEVER CHANGES COLOUR — one token, --btn-secondary-ink, covers rest and hover on every theme. That
       is the same rule the primary follows and for the same reason: a button that changes fill, changes text
       colour and grows a bar all at once reads as three events rather than one. The keyline is restated so the
       hover cannot inherit a transparent one from anywhere. */
    .btn-secondary:hover,
    .btn-secondary:focus-visible {
        color: var(--btn-secondary-ink);
        border-color: var(--btn-secondary-line);
    }

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

        .btn-secondary:hover::after,
        .btn-secondary:focus-visible::after {
            transform: scaleX(1);
        }

    /* The press pushes the revealed fill slightly past the edges, the primary's trick, quickened to match the rest
       of this button. */
    .btn-secondary:active::before {
        transform: translateY(0) scale(1.04);
        transition-duration: 0.13s;
    }

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

.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.6rem);
    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 the <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 the <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. --gold-tint-line is already a translucent accent 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.

   THE CLASS WAS .h1-loss AND THE COLOUR NEVER WAS. It marked the figure in "Don't lose over $X" back when the
   heading was a loss; the swipe was always the brand accent rather than the loss red, so turning the heading into
   a gain was a rename and nothing else. 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-gain {
    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
       paintHeadlineFigure() 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-gain.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-gain.is-marked:hover,
    .h1-gain.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-gain: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 the <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. paintHeadlineFigure() 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-gain { 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 gap, as one line under the split rather than a third box. */
.pv-gap {
    margin-top: 18px;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary);
    display: none;
}

    .pv-gap strong {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gold-text);
    }

    .pv-gap em {
        display: block;
        margin-top: 4px;
        font-size: 0.76rem;
        font-style: normal;
        color: var(--text-muted);
    }

.pv-close {
    max-width: 66ch;
    margin: 18px auto 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.65;
    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-container.no-sidebar {
    /* THE SUPPORT PAGE HAS NO SIDEBAR, and .dashboard-container is a two column grid — so without this it lays the
       page out in the 1fr track and leaves a 280px column of nothing down the left. Every other page that uses
       this container has a nav beside it; this one is the exception, so it says so rather than the container
       guessing from its children. */
    grid-template-columns: 1fr;
}

.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. NEUTRAL BLACK rather than the navy it was: the scrim is the
       widest dark object on the page and a blue one under a black-and-coral theme reads as a different site's
       furniture. If this domain ever goes back to a blue accent, this is the literal to put back. 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(14, 14, 17, 0.94) 0%, rgba(8, 8, 10, 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 on its own — the jade gradient this site reserves for money the reader KEEPS.

   THE COLOUR FOLLOWS THE SENTENCE, and the sentence changed. The bar used to read "You could lose up to $X" and
   took money-shine-loss to match; it now names what the top suburb MADE over a finished twelve months, which is
   a gain, so it takes the gain treatment. Nothing here is a new colour — it is the existing vocabulary applied
   the right way round. If the wording in updateBuyBar() ever goes back to a loss, this goes back with it. */
.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.

   "The top suburb made $107,065 more" set as one run of text gives the number the same weight as the word
   "more". 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 gain colour, and the words around it shrink out of its way.

   THE HEADLINE IS THREE SPANS NOW, not two — lead, figure, lead — because the sentence reads around the number
   rather than stopping at it. .buy-bar-copy strong is a wrapping flex row with a baseline alignment, so the
   trailing clause drops to a second line on a narrow bar and stays on the baseline on a wide one. */

.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 carrying the money gradient, 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-body {
    /* The frozen report, injected whole. It carries its own section markup and needs no layout of its own — this
       exists to separate it from the header above and the disclaimer below, and so that a class in the markup has
       a rule behind it rather than looking like an oversight. */
    margin: 26px 0;
}

.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; }

/* The same three places in the full ranking table. The cell is narrow, so the medal sits above the number rather
   than beside it, and the number is never dropped. */
.rp-rank-1, .rp-rank-2, .rp-rank-3 { white-space: nowrap; }
.rp-rank-1 { color: var(--podium-1-ink) !important; }
.rp-rank-2 { color: var(--podium-2-ink) !important; }
.rp-rank-3 { color: var(--podium-3-ink) !important; }

    .rp-rank-1 i, .rp-rank-2 i, .rp-rank-3 i { margin-right: 5px; font-size: 10px; }

/* First place keeps the accent bar it already had on .rp-lead — that marks "the row this report is about", which
   is a different statement from "this one came first" even though they are the same row. */

.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;
    border-radius: var(--radius-lg);

    /* TWO LAYERS IN ONE GRID CELL, rather than a card positioned absolutely over a blurred one.

       THE BUG THIS FIXES. The veil was position:absolute, so it contributed nothing to this element's height —
       which meant the panel was as tall as the BLURRED HALF, three section headings and 433px of it, while the
       card inside it wanted 739. overflow:hidden here then took 153px off the top of the card and 153px off the
       bottom, at every viewport width and height and on mobile: no lock badge, the heading sliced through the
       middle of its first line, and neither button on the page at all. The highest converting block on the site
       was missing both of its calls to action and nothing about the markup looked wrong.

       (The max-height below was never the cause and never even applied — 433px is a long way under its 640px
       floor. It caps the TEASER, which is a real job, and it has moved to the element it is about.)

       Stacking the two layers in a single grid cell makes this element as tall as whichever is TALLER, which is
       the card, always. The blurred half keeps its own cap and does its own clipping. */
    display: grid;
}

    .sample-locked > * { grid-area: 1 / 1; }

.sample-locked-body {
    /* Its own cap and its own clip. The blur bleeds well past the element's box, so the clip has to be on the
       blurred element or its fringe shows in the space beside the card. */
    max-height: clamp(640px, 80vh, 920px);
    overflow: hidden;

    /* Stretch is the grid default and would pull the blurred half down to the card's height — which does not
       lengthen it, it just leaves the last heading floating in the middle of a taller box. */
    align-self: start;

    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 {
    /* IN THE FLOW OF ITS GRID CELL, not out of it. This is the layer that has to be allowed to set the panel's
       height; taking it out of the flow is what made the panel's height independent of the card inside it. It
       still sits on top of the blurred half — same cell, later in source order — and z-index keeps that true
       whatever the two layers end up stacking against. */
    position: relative;
    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) {
    /* The cap is on the blurred half, not on the wrapper — see the note on the desktop rule. Capping the
       wrapper here would crop the card on exactly the screens where it is tallest relative to the viewport. */
    .sample-locked-body {
        max-height: clamp(560px, 88vh, 760px);
        filter: blur(5px) saturate(0.85);
    }

    .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 */

/* COLUMN, NOT ROW. This was a one-child flex row and the default direction never mattered — then the live map
   button was added above the teaser and the two sat SIDE BY SIDE, squeezing both into half the column. Anything
   added to this stage stacks above the calculator, which is the only order that makes sense here: the map is the
   lower-commitment door and has to be reached first. */
.hero-stage {
    display: flex;
    flex-direction: column;
    justify-content: 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(8, 8, 10, 0.58);
    --agent-chrome: rgba(8, 8, 10, 0.74);
    --agent-surface: rgba(28, 28, 33, 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;
    }
}


/* =====================================================================================================================
   THE SUBURB EXPLORER  —  the ranked cards, the heatmap and everything around them

   The component SuburbRank is built on, mounted twice against one implementation: once on the free result with the
   top five open and the rest locked, once inside the paid report with all of it. js/goldmines.js writes the markup;
   everything below is what it looks like.

   IT LIVES HERE RATHER THAN IN tools/suburbrank/, and that is the platform's rule rather than an exception made for
   it. theme.css is custom properties only — every rule, layout and component on this domain is in this file — which
   is what makes a tool a palette rather than a stylesheet, and what stops a component drifting out of step with the
   shell's own spacing, radii, focus rings and dark theme. A .sm-card defined in a tool folder would be the first
   block on the site that did not.

   FOUR THINGS ARE LOAD BEARING AND EASY TO REMOVE BY ACCIDENT:

     .sm-map has an explicit HEIGHT. MapLibre measures its container exactly once at construction and a container
     that measures zero never recovers from it — the same failure .rp-chart-canvas exists to prevent for amCharts.

     .sm-blurred is a LEGIBILITY signal, not a lock. It is three pixels of blur and it comes off with one keystroke
     in any browser's inspector, which is why every block that uses it says on the page that the figures under it
     are withheld rather than pretending they are protected.

     .sm-up and .sm-down are THE ONLY PLACE A FIGURE IS COLOURED on this site. Growth takes the verdict colours;
     scores, badges, rings and the map take the accent. Colouring a score green would put brand chrome and verdict
     chrome in the same visual sentence, and the separation between the two is the only cue a reader has for
     telling a ranking from a result — see the note at the top of theme.css.

     body.sm-map-open locks the page scroll behind the expanded map. Without it the map fills the viewport and the
     page carries on scrolling underneath, which on a phone reads as the map having come loose.
   ===================================================================================================================== */

.sm-explorer {
    display: block;
    margin: 26px 0 0;
}


/* ---- the toolbar. Report only: the free result has nothing to re-rank -------------------------------------------- */

.sm-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sm-toolbar-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.sm-select {
    width: auto;
    min-width: 240px;
    padding-top: 11px;
    padding-bottom: 11px;
}


/* ---- the summary strip ------------------------------------------------------------------------------------------ */

.sm-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;

    padding: 16px 20px;
    margin-bottom: 16px;

    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.sm-summary-copy strong {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* The count itself, in the accent. It is the one number in the strip the reader came for. */
.sm-summary-copy strong em {
    font-style: normal;
    color: var(--gold-text);
}

.sm-summary-copy span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-muted);
}

.sm-summary-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.sm-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 62px;
}

.sm-summary-stat-value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

.sm-summary-stat-label {
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .sm-summary { padding: 14px 16px; }
    .sm-summary-stats { gap: 16px; width: 100%; justify-content: space-between; }
    .sm-summary-stat { align-items: flex-start; min-width: 0; }
}


/* ---- the map ---------------------------------------------------------------------------------------------------- */

.sm-map-wrap {
    position: relative;
    margin-bottom: 22px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    background: var(--bg-tertiary);
}

/* THE HEIGHT IS THE POINT. MapLibre measures once, at construction, and never recovers from measuring zero. */
.sm-map {
    width: 100%;
    height: 460px;
}

@media (max-width: 768px) {
    .sm-map { height: 340px; }
}

.sm-map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-map-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;

    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sm-map-btn:hover {
    border-color: var(--border-hover);
    color: var(--gold-text);
}

.sm-map-btn.is-on {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
}

.sm-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;

    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 168px;
    padding: 11px 13px;

    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.sm-legend:empty { display: none; }

.sm-legend-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* The same five stops js/goldmines.js interpolates in HEAT_STOPS. Kept in step by hand, which is acceptable only
   because a legend that disagreed with the map by one step would be almost invisible and change nothing — this is
   a key to a scale, not the scale itself. */
.sm-legend-ramp {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #DAD5D1 0%, #F5A697 25%, #EB6753 55%, #B33A28 80%, #631A11 100%);
}

.sm-legend-scale {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.sm-legend-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}

.sm-legend-count i { color: var(--gold); font-size: 10px; }

.sm-map-loading {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.sm-map-loading i { color: var(--gold); }

.sm-map-loading.is-hidden { display: none; }

/* THE PROGRESS FORM, AND WHY IT IS NOT THE FULL SHEET.

   The map draws every suburb the filter matched, so a wide filter is thousands of boundaries arriving over
   several round trips, a few hundred at a time — and js/goldmines.js paints each batch as it lands precisely so
   the reader watches the country fill in rather than a spinner. A full bleed blurred overlay across the top of
   that hides the one thing it is reporting on, and turns a map that is visibly working into a map that appears
   to be stuck for ten seconds.

   So the short wait keeps the sheet and the long one becomes a chip. TOP LEFT: the legend has the bottom left
   corner and the 3D, satellite and expand buttons have the top right. */
.sm-map-loading.is-progress {
    inset: 12px auto auto 12px;

    padding: 7px 13px;
    gap: 8px;

    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);

    /* The blur goes with the sheet. Over a chip it costs a compositing layer on every frame of a map that is
       already painting a few thousand polygons. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg-glass);
}

/* Tabular figures so the count does not jitter the chip's width as it climbs. */
.sm-map-loading em {
    font-style: normal;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* The map is the thing that makes people believe the list; the list is the product. A blocked CDN costs the
   picture and nothing else, and says so in one line rather than leaving an empty grey box. */
.sm-map-down {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.sm-map-down i { font-size: 20px; color: var(--text-muted); opacity: 0.6; }

/* ---- expanded ---------------------------------------------------------------------------------------------------
   Full viewport, above everything, escapable. The scroll lock on the body is what stops the page sliding around
   underneath it on a phone. */

body.sm-map-open { overflow: hidden; }

.sm-explorer.sm-map-expanded .sm-map-wrap {
    position: fixed;
    inset: 0;
    z-index: 900;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.sm-explorer.sm-map-expanded .sm-map { height: 100%; }


/* ---- the cards -------------------------------------------------------------------------------------------------- */

.sm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 16px;
}

.sm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 20px 18px 18px;

    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);

    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.sm-card:hover,
.sm-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.sm-card-top {
    border-color: var(--gold-tint-line);
    background:
        linear-gradient(180deg, var(--gold-tint) 0%, transparent 120px),
        var(--bg-secondary);
}

.sm-card-rank {
    position: absolute;
    top: -9px;
    left: 16px;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 3px 10px;

    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;

    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.sm-card-rank-top {
    color: var(--on-accent);
    background: var(--gradient-vivid);
    border-color: transparent;
    text-transform: uppercase;
}

.sm-card-rank-top i { font-size: 9px; }

/* ---------------------------------------------------------------------------------------------------------------------
   THE PODIUM  —  ranks 1, 2 and 3

   A tinted pill with the metal as its ink and its border, rather than a filled metal chip. Two reasons, and the
   first is the one that decided it: a gold light enough to READ as gold carries neither white nor black type at
   11px, and every filled version of this ended up either a mustard block or a beige one. The tinted form has the
   ink at 5:1 or better in both themes.

   The second is that it matches .sm-card-rank, which these replace rather than sit beside. A podium card and an
   ordinary card differ by colour and by one icon, not by shape — the badge stays the same size and in the same
   place, so a grid of cards does not develop a lumpy top edge at the first three.

   The rank number stays inside the pill on all three. See the note in theme.css: colour is the third cue here.
   --------------------------------------------------------------------------------------------------------------------- */
.sm-card-rank-1,
.sm-card-rank-2,
.sm-card-rank-3 {
    border-width: 1px;
    border-style: solid;
    /* Uppercase like .sm-card-rank-top, because a podium card that is ALSO a national top pick carries both
       labels in one pill and they cannot be set two different ways. */
    text-transform: uppercase;
}

.sm-card-rank-1 { color: var(--podium-1-ink); background: var(--podium-1-tint); border-color: var(--podium-1-line); }
.sm-card-rank-2 { color: var(--podium-2-ink); background: var(--podium-2-tint); border-color: var(--podium-2-line); }
.sm-card-rank-3 { color: var(--podium-3-ink); background: var(--podium-3-tint); border-color: var(--podium-3-line); }

    .sm-card-rank-1 i,
    .sm-card-rank-2 i,
    .sm-card-rank-3 i { font-size: 10px; }

/* The card itself gets the faintest possible lift on first place — a hairline in the metal, nothing more. The
   accent still owns .sm-card-top, which is a different claim ("national top pick") and can coexist with any rank. */
.sm-card-podium-1 { border-color: var(--podium-1-line); }

.sm-card-head { padding-top: 2px; }

.sm-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

.sm-card-where {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin: 5px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.sm-card-where i { font-size: 10px; color: var(--gold); }

.sm-dot { opacity: 0.5; }

/* ---- the score ring ---- */

.sm-card-score {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sm-card-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.sm-card-ring svg { transform: rotate(-90deg); }

.sm-ring-track {
    fill: none;
    stroke: var(--gold-tint);
    stroke-width: 4;
}

.sm-ring-value {
    fill: none;
    stroke: var(--gold);
    stroke-width: 4;
    stroke-linecap: round;
}

.sm-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.sm-card-ring-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    border-radius: 50%;
    color: var(--text-muted);
}

.sm-card-score-copy { min-width: 0; }

.sm-card-score-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sm-card-score-word {
    display: block;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- the three figures ---- */

.sm-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
    padding-top: 13px;
    border-top: 1px solid var(--rule);
}

.sm-metric { min-width: 0; }

.sm-metric dt {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sm-metric dd {
    margin: 3px 0 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* THE ONLY PLACE A FIGURE IS COLOURED ON THIS TOOL. See the note at the top of this section. */
.sm-up { color: var(--success); }
.sm-down { color: var(--error); }

/* ---- the tags ---- */

.sm-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
}

.sm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 3px 9px;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;

    border-radius: 20px;
    border: 1px solid transparent;
}

.sm-tag i { font-size: 9px; }

.sm-tag-hot { color: var(--gold-text); background: var(--gold-tint); border-color: var(--gold-tint-line); }
.sm-tag-momentum { color: var(--accent-3-text); background: var(--accent-3-tint); border-color: var(--accent-3-line); }
.sm-tag-value { color: var(--accent-2-text); background: var(--accent-2-tint); border-color: var(--accent-2-line); }
.sm-tag-steady { color: var(--text-secondary); background: var(--bg-tertiary); border-color: var(--border); }

/* ---- locked ------------------------------------------------------------------------------------------------------
   The shape of a card with the answer taken out. The rank and the region stay legible on purpose: the reader can
   see there is a queue and roughly where it goes, which is the argument. */

/* The dollar figure on each summary row, and the headline concentration warning above them. Both are additions
   to the one-page summary: it printed neither, which is most of why it read as unfinished — see renderQuickInto()
   in private/report-engine.js. */
.qr-made {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}

.qr-concentration {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--warning, #c6913c);
    background: color-mix(in srgb, var(--warning, #c6913c) 10%, transparent);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.qr-concentration i { margin-top: 2px; color: var(--warning, #c6913c); }

/* =====================================================================================================================
   THE PACE READING  —  .rp-pace, on every row of "your top twelve, one at a time"

   Replaced a score/topScore progress bar that spanned 2.1 percentage points across twelve rows — twelve identical
   bars under captions reading "0 points behind the top". See paceOf() in js/shell-bridge.js for why any
   rank-against-rank measure is compressed to nothing on a shortlist, and what this measures instead.

   THE CENTRE MARK IS THE WHOLE COMPONENT. It sits at "the quarter is running at exactly the annual rate", so the
   fill reaching past it means the run is speeding up and falling short of it means it is fading. A reader gets
   that from the shape before reading a word of it, which is the thing the old bar could never do.
   ===================================================================================================================== */
.rp-pace { width: 100%; }

.rp-pace-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.rp-pace-word {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.rp-pace-ratio {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rp-pace-track {
    position: relative;
    height: 7px;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}

.rp-pace-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: 4px;
}

/* The "on pace" mark. Above the fill so it stays visible when the bar runs past it, which is exactly the case
   the reader most needs to see. */
.rp-pace-mark {
    position: absolute;
    top: -2px; bottom: -2px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--text-muted);
    opacity: 0.55;
    z-index: 2;
}

.rp-pace-legend {
    display: block;
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.rp-pace-legend strong { color: var(--text-primary); font-weight: 700; }

/* FOUR READINGS, FOUR COLOURS, and they follow the site's existing money vocabulary rather than inventing one:
   jade for a run still building, muted for one holding steady, amber for fading, red for stopped. */
.rp-pace-up .rp-pace-word { color: var(--success); }
.rp-pace-up .rp-pace-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--success) 55%, transparent), var(--success)); }

.rp-pace-level .rp-pace-word { color: var(--text-primary); }
.rp-pace-level .rp-pace-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent)); }

.rp-pace-down .rp-pace-word { color: var(--warning, #c6913c); }
.rp-pace-down .rp-pace-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--warning, #c6913c) 45%, transparent), var(--warning, #c6913c)); }

.rp-pace-stopped .rp-pace-word { color: var(--error, #a5453f); }
.rp-pace-stopped .rp-pace-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--error, #a5453f) 45%, transparent), var(--error, #a5453f)); }

/* The marker on a demonstration card. Small, but never hidden: a card is the unit that gets screenshotted away
   from the banner that explains it. See cardHTML() in js/goldmines.js. */
.sm-card-demo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.sm-card-demo i { color: var(--warning, #c6913c); }

/* The Details button on a suburb card, and the modal it opens. The button sits inside a card that is itself
   clickable — the card flies the map, the button explains the suburb — so it is visually a secondary control and
   stops its own click from reaching the card behind it (see cardHTML in js/goldmines.js). */
.sm-card-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.sm-card-details:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sm-card-details i { color: var(--accent); }

/* The modal is the .exit-card component with more room: this one carries several paragraphs and a numbered list
   rather than a single prompt, and at the exit modal's width the steps wrap into a column of fragments. */
.suburb-card-modal { max-width: 660px; text-align: left; }

.sd-para { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary, var(--text-muted)); }
.sd-para strong { color: var(--text-primary); }

.sd-head {
    margin: 20px 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sd-steps { margin: 0; padding-left: 20px; }

.sd-steps li {
    margin-bottom: 9px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary, var(--text-muted));
}

.sd-steps li strong { color: var(--text-primary); }

.sd-fine {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* =====================================================================================================================
   THE PRICING PAGE'S TWO PANELS

   The page used to be three cards, each carrying the whole buyer's-agent comparison — the same table three times,
   once per price. It is now one panel that argues the tool is worth paying for, and one that takes the money.
   See renderPasses() in shared/js/action.js for why that is the order.
   ===================================================================================================================== */
/* The three offers, side by side, above the payment panel. They are a COMPARISON — no payment happens in a card;
   its button chooses the tier and drops the reader at the panel below. One place on this page takes money. */
/* The two figures inside a scenario's split note, coloured to the two ends of the bar above them — the ordinary
   suburb in the loss colour, the best one in the gain colour. The sentence and the bar then agree without the
   reader working out which number is which. */
/* THE BASIS LINE UNDER THE PROOF FIGURES.

   Quieter than the claim it qualifies, and deliberately still legible: it names lender's mortgage insurance,
   which is excluded and is larger than every other buying cost combined for anyone borrowing over 80%. Small
   enough not to compete with the number, never small enough to read as something being hidden. */
.gv-basis {
    display: block;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.sc-fig-bad { color: var(--error, #a5453f); }
.sc-fig-good { color: var(--success); }

/* ONE TIER PER COLUMN, and repeat(3) rather than auto-fit deliberately. auto-fit reflows to 2+1 the moment the
   container is a little narrow, which puts two passes side by side and orphans the third underneath — and the
   whole value of showing three prices at once is that they are read against each other on one line. Three across
   until there is genuinely no room, then straight to one. */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    align-items: stretch;
}

/* Inside the plans panel the cards are the content, so the panel keeps the outer margin and they keep none.

   The padding is cut back from the standalone card's clamp(30px, 3.4vw, 46px) / clamp(22px, 2.6vw, 34px). That
   figure was set for a card sitting directly on the page at full width; here it is nested inside a panel that
   already pays 24px, in a column a third as wide, so the original ate most of the card in whitespace.

   margin-top buys the clearance the badge hangs into, and overflow:visible lets it be drawn — the base card
   clips, which cut the top off the badge on the featured pass. */
.pricing-panel-plans .pricing-card {
    margin: 14px 0 0;
    padding: clamp(24px, 2vw, 32px) clamp(16px, 1.4vw, 22px);
    overflow: visible;

    /* A COLUMN, so the three buttons line up.

       The passes do not carry the same number of features, and in a stretched grid row that put each card's
       button wherever its own list happened to end — three buy buttons at three different heights across a row
       whose whole purpose is side-by-side comparison. As a flex column with the feature list taking the slack,
       every button sits on the floor of its card and the row reads straight across.

       No height is set: the grid already stretches each item to the row, and the margin above is taken out of
       that automatically. */
    display: flex;
    flex-direction: column;
}

/* The slack goes here, so everything below it is pinned to the bottom of the card. */
.pricing-panel-plans .pack-includes {
    flex: 1 0 auto;
    text-align: left;
}

.pricing-panel-plans .pricing-card > .btn { margin-top: auto; }

/* The lift on hover reads as the card leaving the panel, so it needs to paint above its neighbours. */
.pricing-panel-plans .pricing-card:hover { z-index: 4; }

/* Both were written as the foot of a full-width pricing card. In their own panels the trailing margin is dead
   space above the panel edge, and the rule separates the payment block from a heading that already separates it. */
.pricing-panel-versus .pack-versus { margin-bottom: 0; }

.pricing-panel-buy .pack-buy {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

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

/* The card matching the selected tab. It has to be visible at a glance, because the tabs below are the same
   choice and a reader who picks in one place must see it land in the other. */
.pricing-chosen {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}



/* =====================================================================================================================
   THE THREE PANELS ON THE PRICING PAGE

   WHITE IS RESERVED FOR CARDS — see --bg-secondary at the top of this file. These panels were written taking
   --bg-secondary anyway, which was fine for the two that hold plain content and wrong for the one that holds the
   three pricing cards: white cards on a white panel, separated by a single hairline, so the cards dissolved into
   the slab behind them. That is the formatting fault, and it is a background, not a layout.

   So the panels split by what they contain. A panel holding CONTENT is itself a card and keeps white. The panel
   holding CARDS steps back to the paper tone so the white cards sit on top of it — which is also the correct
   elevation in the dark theme, where the panel goes darker than the cards rather than lighter. */
/* THE HOST, ONCE IT HOLDS PANELS INSTEAD OF CARDS.

   .pricing-grid is a three-column auto-fit grid, which is correct for the bare cards it was built for and very
   wrong for three full-width panels — they came out side by side across the page. renderPasses adds this class
   to whatever container it writes into, so the container follows the content rather than the markup.

   It beats .pricing-grid on order, not specificity: both are single class selectors, and this block sits later
   in the file. Anything that later moves .pricing-grid below this point silently breaks the page. */
.pricing-stack {
    display: block;
}

.pricing-panel {
    margin: 0 0 22px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-secondary);
}

.pricing-panel-buy { border-color: var(--accent); }

/* The one panel whose contents are cards, so it is the one panel that is not itself a card.

   --bg-tertiary rather than the paper tone, because paper IS the page background: a panel painted in it is only
   a border, and this one has to read as a container holding three cards. The tinted tone is the one value that
   differs from BOTH the page and the cards in both themes — light, it is a soft blue well under white cards;
   dark, it lifts above the page while the cards sit darker inside it. Either way all three surfaces separate.

   overflow must stay visible: the featured pass's badge is absolutely positioned at top:-12px and hangs above
   its own card's edge, so a clipping ancestor cuts the top off it. */
.pricing-panel-plans {
    background: var(--bg-tertiary);
    overflow: visible;
}

.pp-head { margin-bottom: 18px; text-align: center; }

.pp-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }

.pp-sub { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); }

/* The tabs get room to breathe on this page — they are the decision here, not a footnote under a card. */
.pricing-panel-buy .tier-tabs { margin-bottom: 12px; }

.pricing-panel-buy .tier-note { margin: 0 0 18px; text-align: center; }

.pricing-panel-buy .pack-includes { margin-bottom: 20px; }

@media (max-width: 640px) {
    .pricing-panel { padding: 18px 16px; }
}

/* =====================================================================================================================
   THE VALUE LINE ON A PRICING CARD  —  .pack-value

   The rate, and what it saves against the shortest pass. It sits directly under the price because that is where a
   reader is already looking and the whole point is that the bigger number is the cheaper one.

   IT IS NOT AN OFFER FLAG AND MUST NOT LOOK LIKE ONE. There is a .offer-flag component for a genuine was/now and
   this deliberately does not borrow it: no strike-through, no "% off", no deadline. What this says is arithmetic
   the reader can check against the card next to it — see valueBlock() in shared/js/action.js for why that
   distinction is worth keeping.
   ===================================================================================================================== */
.pack-value {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: -4px 0 14px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    text-align: center;
}

.pval-rate { font-size: 0.86rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pval-rate strong { font-size: 1.02rem; font-weight: 800; color: var(--text-primary); }

.pval-base { font-size: 0.72rem; color: var(--text-muted); }

/* The saving. Jade, because it is money the reader keeps — the same vocabulary the rest of the site uses for a
   gain, rather than a discount red that would read as a sale. */
.pack-value-win {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
}

.pack-value-win .pval-rate strong { color: var(--success); }

.pval-save {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--success);
}

/* =====================================================================================================================
   THE LIVE MAP BUTTON  —  .map-btn

   Sits directly above the hero's quick calculator and on the calculator page above the wizard. It is the only
   element allowed to compete with the teaser, because it is the lower-commitment door: the teaser asks for two
   answers before it gives anything, the map gives everything and asks for nothing.

   IT IS DELIBERATELY LOUD. Full-width, gradient, lifted, with a sheen that crosses it every few seconds — the one
   place on this site where a control is trying to be noticed rather than trying to be quiet. Everything else in
   the hero is typography; this is the only thing with a moving part, which is what makes it read first.

   THE SHEEN RESPECTS prefers-reduced-motion. A repeating animation in the hero is exactly what that setting is
   for, and the button is perfectly legible without it.
   ===================================================================================================================== */
.map-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 14px;
    padding: 15px 20px;
    border: 0;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #7b3ff2));

    /* Its own white, NOT --btn-secondary-ink. That token was borrowed here while the secondary button was also
       an accent gradient; the secondary is a light card now and its ink is near-black, which would have put dark
       text on this blue slab. The two buttons no longer share a look, so they no longer share a token. */
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 42%, transparent);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.map-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 55%, transparent);
}

.map-btn:active { transform: translateY(0); }

.map-btn:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }

/* The map pin, sized against the label rather than the button, so it reads as part of the sentence. */
.map-btn > i {
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.map-btn-text { flex: 1 1 auto; text-align: left; }

/* "Free" as a pill on the right. It is the single most persuasive word available here and it is the only thing
   on the button that is not the label. */
.map-btn-tag {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The sheen. A narrow bright band swept across on a long loop — long enough that it reads as a highlight rather
   than as something demanding attention every second. */
.map-btn-shine {
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-18deg);
    animation: mapBtnShine 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mapBtnShine {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .map-btn-shine { animation: none; opacity: 0; }
    .map-btn { transition: none; }
    .map-btn:hover { transform: none; }
}

/* On the calculator page it is not competing with a teaser beside it, so it gets a little more room. */
.map-btn-wide { margin: 4px 0 24px; padding: 17px 22px; font-size: 1.05rem; }

@media (max-width: 480px) {
    .map-btn { padding: 13px 15px; font-size: 0.92rem; gap: 10px; }
    .map-btn-tag { display: none; }
}

/* =====================================================================================================================
   THE EXPLORER FILTERS  —  .smf

   Rendered on the paid report as working controls and on the free result as the same controls, disabled, behind a
   Full Access notice. One stylesheet for both so the locked version cannot drift into looking like a different
   feature — it is the SAME panel, which is the whole persuasive point of showing it at all.

   THE WARNING IS PART OF THE COMPONENT, not decoration under it. These filters re-rank the list and the map and
   nothing else on the page, so the sentence saying so has to be as hard to miss as the Apply button.
   ===================================================================================================================== */
.smf {
    margin: 0 0 18px;
    padding: 16px 18px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-secondary);
}

.smf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.smf-head h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.smf-head h4 i { color: var(--accent); }

.smf-reset {
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

.smf-lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-tertiary, rgba(0,0,0,0.05));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

/* ---- THE DUAL-THUMB SLIDERS ------------------------------------------------------------------------------------

   Lifted from the Goldmines tool this project was forked from, and deliberately: it is the control the audience
   already knows, and a range you drag reads as a range in a way two number boxes never do.

   THE CONSTRUCTION. A flat track, a filled bar between the thumbs, and TWO overlapping range inputs. The inputs
   are transparent and pointer-events: none so clicks fall through to whichever thumb is under them; the thumbs
   themselves turn pointer-events back on. Two real inputs rather than a JS library is what keeps the keyboard and
   the screen reader working — each thumb is a slider with a real value and a real label.

   The theme's accent drives the fill and the thumb ring, so this inherits dark mode without a second rule. */

.smf-sliders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 26px;
}

.smf-slider { min-width: 0; }

.smf-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.smf-slider-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.smf-slider-vals {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.smf-slider-dash { color: var(--text-muted); font-weight: 400; }

.smf-slider-wrap { position: relative; height: 40px; }

.smf-slider-track {
    position: absolute; top: 16px; left: 0; right: 0;
    height: 8px;
    border-radius: 4px;
    background: var(--border);
}

.smf-slider-range {
    position: absolute; top: 16px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff));
    pointer-events: none;
}

.smf-slider-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 40px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    outline: none;
}

.smf-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bg-card, #FFFFFF);
    border: 3px solid var(--accent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
    cursor: grab;
    transition: transform 0.15s ease;
}

.smf-slider-wrap input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.smf-slider-wrap input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }

.smf-slider-wrap input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bg-card, #FFFFFF);
    border: 3px solid var(--accent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
    cursor: grab;
    transition: transform 0.15s ease;
}

.smf-slider-wrap input[type="range"]::-moz-range-thumb:hover { transform: scale(1.15); }

.smf-slider-wrap input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: none; }
.smf-slider-wrap input[type="range"]::-moz-range-track { background: transparent; border: none; }

.smf-slider-wrap input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- the rest of the panel ---- */

.smf-foot { margin-top: 14px; }

.smf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.smf-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* THE WARNING. Amber rather than red: nothing has gone wrong, and a red panel over a working control reads as an
   error the reader caused. It is stated before they press Apply and it stays afterwards. */
/* .smf-warn is gone with the markup that used it. It warned that the charts, the tables and the PDF
   would disagree with the list until the search was re-run — true while these filters lived on the
   report, and obsolete from the day they were taken off it. */


/* ---- the locked variant, on the free result ---- */
.smf-locked .smf-input,
.smf-locked .smf-chip { opacity: 0.55; cursor: not-allowed; }

.smf-locked .smf-grid,
/* STATES AND RANK BY, SIDE BY SIDE.

   Rank by used to sit in a strip above the whole panel. It belongs with the States chips: both decide what
   the list shows, and having them in separate blocks meant reading past one to reach the other.

   flex-wrap rather than a media query, because the break should happen when the ROW actually runs out of
   room, not at a width somebody guessed. States takes the slack, Rank by keeps its own measure. */
.smf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 22px;
}

.smf-row .smf-states {
    flex: 1 1 320px;
    min-width: 0;   /* without this a flex child refuses to shrink under its content, and the chip row is wide */
}

.smf-rank {
    flex: 0 1 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .smf-rank .sm-select { width: 100%; }

@media (max-width: 640px) {
    /* Full width once it has dropped to its own line. A 240px select under a full width chip row reads as
       unfinished rather than as deliberate. */
    .smf-rank { flex: 1 1 100%; }
}

.smf-locked .smf-rank { pointer-events: none; opacity: 0.55; }
.smf-locked .smf-states { pointer-events: none; }

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

.smf-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.smf-chip:hover { border-color: var(--accent); color: var(--text-primary); }

.smf-chip.is-on {
    border-color: var(--accent);
    background: var(--accent);
    color: #FFFFFF;
}

/* The ALL chip reads as the default rather than as a ninth state, so it sits slightly apart and darker when on —
   the same treatment the Goldmines tool gives it. */
.smf-chip-all { margin-right: 6px; font-weight: 700; }

.smf-chip-all.is-on {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

.smf-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
}

.smf-gate p { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary, var(--text-muted)); }

@media (max-width: 560px) {
    .smf-actions { flex-direction: column; align-items: stretch; }
    .smf-gate { flex-direction: column; align-items: stretch; }
}

/* =====================================================================================================================
   A WITHHELD SUBURB NAME  —  sample page and worked examples

   THE REAL NAME IS IN THE MARKUP AND IT IS BLURRED, rather than replaced with an invented one. That is a
   deliberate difference from the free result's locked cards, and the reason is the figures beside it: on those
   two pages every median, score and growth figure is REAL, and a page whose whole argument is "these numbers are
   the ones the engine produced" cannot also carry a fabricated name in the same row. Blur what is there.

   IT STOPS READING, NOT INSPECTION, and it is not pretending otherwise. Anybody who opens a developer console
   can lift it — but on these pages they could already identify every row from the median alone, which is public
   in js/suburbs.js and unique to the dollar. The blur is against the reader who would otherwise simply read the
   answer off the page, which is almost all of them.

   pointer-events AND user-select ARE BOTH OFF so the name cannot be selected, dragged or copied out of a blur
   that only looks opaque. The screen reader gets "name shown in your own report" from the .sm-sr span beside it.
   ===================================================================================================================== */
.rp-name-blur {
    filter: blur(5px);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* On a chart the label is drawn into a canvas and cannot be blurred by CSS, so those are numbered instead — see
   maskSuburb() in js/report-charts.js. */

.sm-card-locked {
    cursor: default;
    box-shadow: none;
    background: var(--bg-card);
}

.sm-card-locked:hover { transform: none; box-shadow: none; border-color: var(--border); }

.sm-blurred {
    filter: blur(4px);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}


/* ---- empty, and the button under the grid ------------------------------------------------------------------------ */

.sm-empty {
    grid-column: 1 / -1;
    padding: 42px 24px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 16px;
}

.sm-empty i { font-size: 26px; color: var(--text-muted); opacity: 0.55; }

.sm-empty h4 {
    margin: 12px 0 6px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.sm-empty p {
    margin: 0 auto;
    max-width: 460px;
    font-size: 14px;
    color: var(--text-secondary);
}

.sm-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    margin-bottom: 22px;
    text-align: center;
}

.sm-more:empty { display: none; }

/* THE BUTTON INSIDE THAT CONTAINER, and it needed its own name.

   It used to carry .sm-more as well, which is the column flex container above — so the button stacked its
   own icon above its own label. inline-flex puts them back on one line; nowrap keeps the count with the
   words when the column is narrow. */
.sm-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

    .sm-more-btn i,
    .sm-more-btn span { white-space: nowrap; }

.sm-more-note {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    color: var(--text-muted);
}


/* ---- the state chips ---------------------------------------------------------------------------------------------
   A multi-select that is not a form control. Nothing in the shell reads it; js/shell-bridge.js does. */

.sm-states {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sm-state-chip {
    padding: 8px 16px;

    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;

    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sm-state-chip:hover { border-color: var(--border-hover); color: var(--gold-text); }

.sm-state-chip.is-on {
    color: var(--on-accent);
    background: var(--gold);
    border-color: var(--gold);
}


/* ---- the map popup -------------------------------------------------------------------------------------------
   MapLibre owns the outer element, so the shell styles what is inside it and overrides the two parts of the
   library's own chrome that would otherwise arrive white on a dark page. */

.maplibregl-popup.sm-pop .maplibregl-popup-content {
    padding: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.maplibregl-popup.sm-pop .maplibregl-popup-tip { border-top-color: var(--bg-secondary); }
.maplibregl-popup.sm-pop .maplibregl-popup-close-button { color: var(--text-muted); font-size: 18px; }

.sm-pop-in { padding: 14px 16px 15px; }

.sm-pop-head strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.sm-pop-head > span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--on-accent);
}

.sm-pop-top {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    padding: 3px 9px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: var(--on-accent);
    background: var(--gradient-vivid);
    border-radius: 20px;
}

.sm-pop-score {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--gold-tint);
    border-radius: 10px;
}

.sm-pop-score-num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text);
}

.sm-pop-score-lbl {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.sm-pop-score-lbl em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

/* THE DETAILS BUTTON IN THE MAP POPUP.

   Full width under the three figures: it is the only action in the popup, and a small button floating in a
   280px card is easy to miss on a touch screen. Sized to a real tap target rather than to its text. */
.sm-pop-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .sm-pop-details:hover {
        background: var(--bg-tertiary);
        border-color: var(--accent);
    }

    .sm-pop-details i { color: var(--accent); }

.sm-pop-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sm-pop-metrics span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sm-pop-metrics strong {
    display: block;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}


/* =====================================================================================================================
   FIVE SMALL THINGS THE SUBURB REPORT NEEDS AND THE SHELL DID NOT HAVE

   Each one is a component the report writes and none of them existed before, because no tool on this platform had
   previously produced a ranked list of PLACES. They are here rather than in a tool folder for the same reason
   everything above is.
   ===================================================================================================================== */

/* A second line inside a table cell — the state and region under a suburb name. Without it the ranking table needs
   two more columns to say the same thing, and it is already seven wide. */
.rp-cell-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

/* The score, as a chip, on the detail line of an option row. */
.rp-choice-chip {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;

    font-size: 11px;
    font-weight: 700;

    color: var(--gold-text);
    background: var(--gold-tint);
    border-radius: 12px;
}

/* ---- the "look at twice" section ---- */

.rp-cautions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.rp-caution {
    padding: 16px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: 12px;
}

.rp-caution-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.rp-caution-head h4 {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.rp-caution-rank,
.rp-caution-score {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.rp-caution-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.rp-caution-list li {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.rp-caution-list li:last-child { margin-bottom: 0; }

.rp-caution-list strong { color: var(--text-primary); }

/* ---- the one page summary's ranked list ---- */

.qr-list {
    margin: 18px 0;
    padding-left: 22px;
}

.qr-list li {
    margin-bottom: 9px;
    font-size: 14px;
    color: var(--text-primary);
}

.qr-list li span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- the home page teaser's itemised lines ---- */

.qc-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    color: var(--text-secondary);
}

.qc-line:last-child { border-bottom: 0; }

.qc-line strong {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* A CHECKBOX, WHICH THIS STYLESHEET HAD NEVER NEEDED BEFORE.

   Three tools in, no calculator on this platform had asked a yes/no question: every field was a number, a select
   or a variant button. SuburbRank's advanced step has two switches on it, and an unstyled native checkbox beside
   the shell's own inputs looks exactly like a control somebody forgot to finish.

   Native input, restyled — not a div pretending to be one. It keeps the keyboard behaviour, the focus ring and
   the label association for free, and every one of those is a thing a hand rolled version gets wrong. */
.calc-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 12px 14px;

    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc-check:hover { border-color: var(--border-hover); }

.calc-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.calc-check:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px var(--input-focus-glow);
}

.calc-check span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* A SINGLE NOTE UNDER A REPORT SECTION, as opposed to .rp-notes, which is a block of several.

   The two are easy to confuse and one of them did not exist: the report writes <p class="rp-note"> where it has
   one thing to say — "the table shows the top 60", "four more carry a flag" — and got an unstyled paragraph in the
   middle of a page where everything around it was styled. The plural version is a container with its own padding
   and a rule above it, which is wrong for one line. */
.rp-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* .sm-unlock WAS HERE and has been removed rather than left unused.

   It was two declarations on top of .btn-primary — a bigger padding and a bigger font — for the "show me top
   suburbs" button under the free grid. The intent was to make the highest intent control on the page read as more
   than one more button, and the effect was to break it: .btn-primary's fill and its inner bar are laid out against
   the padding the shell gives it, and a local override moves one without the other.

   The shell already has a size for this and it is btn-huge. Anything that wants a bigger primary button uses that
   rather than inventing a third geometry — which is the whole reason this stylesheet holds every rule on the
   domain and tools/<slug>/theme.css holds none. */

/* TEXT FOR A SCREEN READER AND NOBODY ELSE.

   The covered cards on the free grid carry invented names behind a blur, and the blurred elements are aria-hidden
   — a name that means nothing is worse than no name at all when it is being read aloud. So each covered card
   carries one real sentence instead, saying what is actually there: the suburb name is withheld.

   Clipped rather than display:none, because a screen reader skips what is not displayed. This is the standard
   visually-hidden recipe and it is the first thing on this domain to have needed it. */
.sm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}