/* =====================================================================
       Scoped premium styles (namespace: .ezn-)
       ===================================================================== */

    /* Hide sitewide chrome we don't want on this page:
       - the SEO breadcrumb partial rendered by layouts.public
       - the layout's #content-box fallback (empty card-header + Edit Page btn)
       - the share icons row that layouts.public appends for post/page types
       - the .ezc blog-comments (Discussion) livewire block                    */
    .seo-breadcrumbs { display: none !important; }
    body:has(.ezn-page) #content-box,
    body:has(.ezn-page) .social-share,
    body:has(.ezn-page) .ezc,
    body:has(.ezn-page) [class*="blog-comments"] { display: none !important; }
    /* Fallback for browsers without :has() — the JS pass at the bottom of
       this view removes each block by id/class as a belt-and-braces measure. */

    /* Force a clean white background across the sitewide wrappers ONLY on
       this page. `main.css` paints a soft grey on .page-content site-wide;
       overriding it locally keeps every other page untouched.               */
    body:has(.ezn-page),
    body:has(.ezn-page) .page-wrapper,
    body:has(.ezn-page) .page-content,
    body:has(.ezn-page) .container,
    body:has(.ezn-page) .card,
    body:has(.ezn-page) .card-body { background: #ffffff !important; }

    /* =====================================================================
       TOKENS — sourced from the HOMEPAGE  (2026-08-31)
       ---------------------------------------------------------------------
       Every `--ezn-*` below is now an alias for the homepage's own
       `--hpx-*`, which `ThemeCompiler::css()` emits from the `hp_tokens`
       rows an admin edits on the theme screen. The view carries that
       compiled block and the page root carries `.hpx`, so this page and `/`
       render from ONE source of colour, radius and shadow. Change the theme
       and both move together; there is nothing to keep in sync by hand.

       WHY THIS REPLACED ~40 LITERAL VALUES
       The page had accumulated its own palette — a near-miss of the
       homepage's (#0f172a against #0B1220, #eef2f6 against #E7ECF3) — plus a
       hand-maintained dark block restating all of it. Two palettes that are
       almost the same read as two different sites when you move between
       them, which is exactly what §DKSYS was written to stop.

       THE DARK BLOCK IS GONE, AND THAT IS THE POINT.
       `body.theme-dark .hpx` already redeclares every `--hpx-*` on THIS
       element, and a property defined from another property substitutes on
       the element that declares it — so `--ezn-ink: var(--hpx-ink)` picks up
       the dark value with no second declaration. Only the handful of things
       with no `--hpx-*` source are restated under `body.theme-dark`.
       (This is the same-element case; a DESCENDANT that redeclares
       `--hpx-*` would NOT flow through — see the per-instance tone trap.)

       ALWAYS PASS A FALLBACK. `ThemeCompiler::css()` is emitted by the view,
       so a context that renders this sheet without it — an email preview, a
       cached fragment — must still paint. A `var()` that cannot resolve
       invalidates the whole declaration.
       ===================================================================== */
    .ezn-page {
        /* Brand */
        --ezn-primary:      var(--hpx-brand, #3680ED);
        --ezn-primary-600:  var(--hpx-brand-600, #2060C0);
        --ezn-primary-ink:  var(--hpx-brand-ink, #1B5BB5);
        --ezn-primary-tint: var(--hpx-brand-soft, #EAF2FD);
        --ezn-primary-line: var(--hpx-brand-line, #CFE0FA);
        --ezn-ring:         var(--hpx-brand-glow, rgba(54,128,237,.28));
        /* The one brand value the homepage has no token for: a wash even
           fainter than `brand-soft`, used for the resting story-row surface
           and the perk-card hover tint. */
        --ezn-primary-tint2: var(--hpx-bg-2, #F7F9FC);

        /* Button fill. NOT `--hpx-brand` in dark: that value exists to be read
           AS ink on a near-black canvas, so white on it is 2.58:1. Light is
           the two stops `.hpx-btn-solid` ships; dark reads the `--aa-fill-*`
           ramp from `ai-contrast-fix.css`, the layer that already corrects
           this across ten kits. */
        --ezn-grad: linear-gradient(135deg,
                        var(--hpx-brand, #3680ED) 0%,
                        var(--hpx-brand-600, #2060C0) 100%);

        /* Ink + surface */
        --ezn-ink:          var(--hpx-ink, #0B1220);
        --ezn-body:         var(--hpx-ink-2, #3D4757);
        --ezn-muted:        var(--hpx-ink-3, #6B7686);
        --ezn-line:         var(--hpx-line, #E7ECF3);
        --ezn-line-strong:  var(--hpx-line-strong, #D6DEE9);
        --ezn-surface:      var(--hpx-card, #FFFFFF);
        --ezn-field:        var(--hpx-card-2, #F9FAFC);
        --ezn-glass:        var(--hpx-glass, rgba(255,255,255,.72));
        --ezn-mesh:         var(--hpx-brand-line, rgba(54,128,237,.12));

        /* Tones. The homepage ships a bg / ink / LINE triple per tone, and
           every ink clears 4.5:1 on its own bg — better than the pairs this
           page had, which were 2.7–2.8:1 for green and amber. The `-line` is
           new here and is what the card hover borders use. */
        --ezn-red-bg:    var(--hpx-t-blue-bg, #EAF2FD);
        --ezn-red-fg:    var(--hpx-t-blue-ink, #1B5BB5);
        --ezn-red-line:  var(--hpx-t-blue-line, #CFE0FA);
        --ezn-violet-bg: var(--hpx-t-violet-bg, #E0F2FE);
        --ezn-violet-fg: var(--hpx-t-violet-ink, #0369A1);
        --ezn-violet-line: var(--hpx-t-violet-line, #BAE6FD);
        --ezn-green-bg:  var(--hpx-t-emerald-bg, #E6F8F1);
        --ezn-green-fg:  var(--hpx-t-emerald-ink, #08795A);
        --ezn-green-line: var(--hpx-t-emerald-line, #C6EEDF);
        --ezn-amber-bg:  var(--hpx-t-amber-bg, #FEF4E4);
        --ezn-amber-fg:  var(--hpx-t-amber-ink, #A85B08);
        --ezn-amber-line: var(--hpx-t-amber-line, #FBE3C0);

        /* Error state, on the homepage's rose tone. Before this it painted
           `--ezn-primary` — the same blue as the focus ring — so a wrong
           field and a focused field were the same colour. */
        --ezn-danger:      var(--hpx-t-rose-ink, #B31D3C);
        --ezn-danger-ring: var(--hpx-t-rose-bg, #FEECEF);

        /* Placeholder is the ONE ink that cannot come from the homepage:
           `--hpx-ink-faint` is 2.58:1 light and 3.92:1 dark, i.e. a
           placeholder nobody can read. These are the lightest values on the
           field rung that clear 4.5 (4.55 / 4.77). */
        --ezn-placeholder:  #64748b;

        /* Shape + depth, straight from the homepage's scale. */
        --ezn-radius-lg:    var(--hpx-r-xl, 26px);
        --ezn-radius-md:    var(--hpx-r-lg, 20px);
        --ezn-radius-xs:    var(--hpx-r-md, 14px);
        --ezn-shadow:       var(--hpx-sh-lift, 0 2px 6px rgba(16,24,40,.06), 0 18px 44px rgba(16,24,40,.10));
        --ezn-shadow-soft:  var(--hpx-sh-soft, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05));
        --ezn-shadow-red:   var(--hpx-sh-glow, 0 10px 30px rgba(51,134,237,.24));

        /* Band rhythm — the homepage's `--hpx-band` is the vertical unit
           every section on `/` is spaced by. */
        --ezn-band:         var(--hpx-band, 56px);

        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
        color: var(--ezn-body);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .ezn-page * { box-sizing: border-box; }
    .ezn-page a { text-decoration: none; }
    .ezn-page img { max-width: 100%; height: auto; }

    /* ═════════════════════════════════════════════════════════════════════
       THE PAGE SHELL  (§VPMATCH)  — 2026-09-08
       ---------------------------------------------------------------------
       Every band on this page runs on the SITE shell, not a private one.
       `--seo-shell-max` and `--seo-shell-pad` are declared once on
       `body.public-page` by `partials/shell-cap.blade.php`, and they are the
       same two numbers the header (`--container-hd`, 1920px on a flat
       24/20/14/11 gutter ramp) and the footer (`--aits-w`, 1920px) run at.
       Read them and the nav brand, the h1 below it and the first footer
       column all sit on ONE left edge at every viewport width.

       WHAT THIS REPLACED, AND WHAT IT COST
       A private `max-width: 1200px` with a flat 24px gutter. Two faults,
       both visible:

       · Desktop — against a 1920px header and footer, the content stopped
         360px short on each side. On a 1920px monitor the nav ran the full
         width of the glass bar while the hero headline started 384px in.
       · Phone — the gutter never moved. At 380px the brand in the header sat
         11px from the edge and the copy here sat 24px in, so the two never
         lined up on any device narrower than a laptop either.

       Both are exactly the mismatch shell-cap.blade.php was written to
       prevent, and its own note says module shells "read these two tokens
       instead of hardcoding their own numbers. Keep it that way."

       The gutter goes through `max(…, env(safe-area-inset-*))` for the same
       reason `.aitshd-inner` does: in landscape on a notched phone the
       inset is larger than the ramp and the copy would slide under the
       sensor housing.

       ⚠ ONE GUTTER OWNER. Every element that carries `.ezn-wrap` also
       carries a band class, and a `padding:` SHORTHAND on that band would
       re-declare the inline padding at equal specificity — later in the
       sheet, so it wins. That is precisely how `.ezn-main`, `.ezn-why` and
       `.ezn-cta-wrap` each kept a flat 24px gutter no matter what the wrap
       said. They are all `padding-block` now. Keep them that way.
       ═════════════════════════════════════════════════════════════════════ */
    .ezn-wrap {
        width: 100%;
        max-width: var(--seo-shell-max, 1920px);
        margin-inline: auto;
        padding-left:  max(var(--seo-shell-pad, 24px), env(safe-area-inset-left));
        padding-right: max(var(--seo-shell-pad, 24px), env(safe-area-inset-right));
    }

    /* layouts.public wraps this component in `.container`, and shell-cap
       gives every public `.container` that same gutter. Two owners means the
       gutter is paid TWICE — 48px of inset under a 24px header — so on this
       page the container gives its up and `.ezn-wrap` is the only one left.

       Equal specificity to shell-cap's own rule ((0,2,1) both ways, since
       `:has()` takes the weight of its argument), which is settled by
       document order: shell-cap is an inline <style> in <head>, this sheet
       is linked from the view, so this lands later and wins. That ordering
       is the same one the <link>'s own note depends on — do not move it.

       The §EZNMQ ticker is unaffected: it breaks out with
       `margin-inline: calc(50% - 100vw/2)`, measured against the container's
       CONTENT box, which stays centred in the viewport either way. */
    body:has(.ezn-page) .container { padding-inline: 0; }
    /* =====================================================================
       HERO  (§EZNHERO)  — rebuilt 2026-08-31
       ---------------------------------------------------------------------
       The right column used to be a 1.1 MB PNG of an envelope. It is now a
       CSS "issue preview" built from the same brand tokens as everything
       else, which is why it is the only part of this page that cannot fall
       out of theme: there is no baked-in colour to go stale.

       THREE THINGS THAT ARE LOAD-BEARING HERE

       1. `--ezn-primary` is remapped in the dark block at the foot of this
          file. The light brand (#3680ED) is a 2.6:1 contrast against
          #0E0E11 — unreadable — so dark mode runs the site's own dark
          accent (#60A4F5) instead. Every hue below reads that variable
          rather than a literal, so the whole hero follows.

       2. Nothing in the hero uses the `background` SHORTHAND on an element
          that also carries a background-image. The shorthand resets
          background-repeat / position / size, and the dark override would
          then tile the mesh — the trap documented in the dark sweep.

       3. Hover is behind `@media (hover: hover)`. A touch device fires
          :hover on tap and keeps it stuck until the next tap elsewhere, so
          an unguarded lift leaves a card visibly raised for no reason.
       ===================================================================== */

    .ezn-hero {
        position: relative;
        padding: var(--ezn-band) 0 calc(var(--ezn-band) * 1.3);
        /* No `overflow:hidden` here: the floating chips sit outside the
           stage's box and clipping them at the section edge would slice
           them in half. The ambient layer does its own clipping instead. */
    }

    /* --- Ambient layer ------------------------------------------------- */

    .ezn-hero__bg {
        position: absolute;
        inset: 0;
        overflow: hidden;          /* clips the orbs, not the chips */
        pointer-events: none;      /* never eats a click on the headline */
        z-index: 0;
    }

    /* A 34px dot grid, faded out towards the bottom so the hero dissolves
       into the subscribe card instead of ending on a hard line. Drawn with
       longhand properties — see note 2 above. */
    .ezn-hero__mesh {
        position: absolute;
        inset: -1px;
        background-image: radial-gradient(circle at 1px 1px, rgba(54,128,237,.14) 1px, transparent 0);
        background-size: 34px 34px;
        background-repeat: repeat;
        -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
                mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
    }

    /* --- The two ambient orbs are REMOVED (2026-09-02) -------------------
       They were the hero's whole colour cast — a 460px blue and a 520px
       violet, both `filter: blur(70px)` — and `/`'s hero band paints NOTHING
       at all: measured on the live homepage, `.hpx-b-hero` has no background
       colour, no background-image and no painted pseudo-element, so its
       ground is the plain #FFFFFF of `.hpx`. This hero now matches it.

       ⚠ They were also a real rendering fault, not just a colour choice.
       `.ezn-hero` sits 24px inside the viewport, `.ezn-hero__bg` is
       `inset: 0` on it with `overflow: hidden`, and a 70px-blurred circle
       clipped by a hard rectangle edge is sliced FLAT — so the wash ended in
       two vertical lines 24px from each edge and the hero read as a tinted
       panel floating on a white page rather than as the page itself.

       The dot mesh stays: it is texture rather than colour, its own
       `mask-image` fades it out long before the box edge, and at .14 alpha it
       shifts the ground by less than a percent.
       --------------------------------------------------------------------- */

    /* --- Grid ----------------------------------------------------------- */

    .ezn-hero__grid {
        position: relative;
        z-index: 1;                /* above the ambient layer */
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
        align-items: center;
        gap: 64px;
    }
    /* `minmax(0, …)` on both tracks, not `1.02fr .98fr`. An fr track has an
       auto minimum, so the preview card's longest row would refuse to
       shrink and push the whole grid past the wrap — the column-count
       collapse documented for auto-fill grids, in its two-column form. */

    /* The shell is 1920px, so past ~1400px the two tracks are ~900px each and
       a 440px preview card floats in the middle of its column with ~230px of
       white on either side — the hero reads as two islands rather than one
       composition. The card is CSS, not a bitmap, so it grows with the page.

       NOT pinned flush to the wrap's right edge, which would line it up with
       the header's account chip: chip B is anchored by its far edge at
       `left: calc(100% - 92px)` and so sticks out of the stage by up to 45px
       (55px on hover). Flush right would put that overhang past the gutter
       and onto a horizontal scrollbar. Centred in a wider column it keeps
       160px+ of slack on both sides. */
    @media (min-width: 1400px) {
        .ezn-hero__grid  { gap: 80px; }
        .ezn-hero__stage { max-width: 560px; }
    }

    .ezn-hero__left { min-width: 0; }

    /* --- Badge ---------------------------------------------------------- */

    .ezn-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 18px 6px 6px;
        border: 0;
        border-radius: 999px;
        background-color: var(--ezn-glass, rgba(255,255,255,.72));
        color: var(--ezn-ink);
        font-weight: 650;
        font-size: 13.5px;
        letter-spacing: -.004em;
        margin-bottom: 22px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.75),
            0 1px 2px rgba(16,24,40,.04),
            0 10px 24px -14px var(--ezn-ring);
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
    }
    /* Gradient hairline. `border-image` with a gradient discards
       border-radius outright, so the edge is a masked pseudo-element — the
       same technique the homepage hero badge uses, kept identical on
       purpose so the two pills read as one component. */
    .ezn-badge::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background-image: linear-gradient(135deg,
            var(--ezn-primary-line, #CFE0FA) 0%,
            var(--ezn-line-strong) 44%,
            var(--ezn-line-strong) 58%,
            rgba(124,92,239,.42) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }
    .ezn-badge__chip {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 26px; height: 26px;
        border-radius: 9px;
        background-color: var(--ezn-primary-tint);
        color: var(--ezn-primary);
        font-size: 12px;
        box-shadow: inset 0 0 0 1px var(--ezn-primary-line, #CFE0FA);
    }
    .ezn-badge__txt { white-space: nowrap; }

    /* --- Headline ------------------------------------------------------- */

    .ezn-hero__title {
        color: var(--ezn-ink);
        /* The homepage display scale, token for token. clamp() supplies the
           small-screen steps that homepage.css does with media queries. */
        font-size: clamp(34px, 5.2vw, var(--hpx-fs-display, 62px));
        line-height: var(--hpx-lh-display, 1.06);
        font-weight: var(--hpx-fw-display, 800);
        letter-spacing: var(--hpx-ls-display, -.032em);
        margin: 0 0 20px;
    }
    .ezn-hero__l1 { display: block; }
    .ezn-hero__l2 {
        position: relative;
        display: inline-block;
        margin-top: .06em;
        /* Descender room. The accent below paints through
           `background-clip:text`, and a clipped background stops at the
           element box — without this the tail of a `y` or `g` is sheared
           off at some font sizes. */
        padding-bottom: .12em;
    }
    /* Gradient text. `color` is set FIRST and is the real fallback: if a
       browser drops `-webkit-text-fill-color` the words stay brand-coloured
       rather than transparent-on-transparent, which is the one way a
       gradient headline goes invisible. */
    /* The homepage's accent gradient — `120deg, brand → brand-600`. This page
       ran a three-stop 100deg version that ended on `brand-ink`, which is a
       visibly darker tail than any accent on `/`.

       `color` is set FIRST and is the real fallback: if a browser drops
       `-webkit-text-fill-color` the words stay brand-coloured rather than
       transparent-on-transparent, which is the one way a gradient headline
       goes invisible. */
    .ezn-text-accent {
        color: var(--ezn-primary);
        background-image: linear-gradient(120deg,
            var(--hpx-brand, #3680ED) 0%,
            var(--hpx-brand-600, #2060C0) 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
        .ezn-text-accent { background-image: none; -webkit-text-fill-color: currentColor; }
    }

    /* The brush stroke under "Our Newsletter" is REMOVED (2026-09-02), and so
       is its `eznStroke` keyframe — nothing else referenced either.

       ⚠ `.ezn-hero__l2` above KEEPS `padding-bottom: .12em`. That is not the
       stroke's clearance, it is descender room for `.ezn-text-accent`: the
       words paint through `background-clip: text`, a clipped background stops
       at the element box, and without the padding the tail of a `y` or `g` is
       sheared off at some font sizes. Its `position: relative` no longer
       anchors anything and is now inert. */

    .ezn-hero__sub {
        color: var(--ezn-body);
        font-size: var(--hpx-fs-lead, 19px);
        line-height: var(--hpx-lh-lead, 1.58);
        max-width: 54ch;
        margin: 0 0 30px;
    }

    /* --- Actions -------------------------------------------------------- */

    .ezn-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 26px;
    }
    .ezn-hero__actions .ezn-btn {
        height: 52px;
        padding: 0 26px;
        font-size: 15.5px;
        border-radius: 14px;
    }

    /* Sheen sweep on the primary CTA. It lives on ::after so the button's
       own `overflow:hidden` clips it to the pill, and it is translated well
       off-screen at rest so nothing is visible until hover. */
    .ezn-hero__cta::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(115deg,
            transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
        transform: translateX(-120%);
        transition: transform .65s cubic-bezier(.22,.61,.36,1);
        pointer-events: none;
    }
    .ezn-hero__cta > * { position: relative; z-index: 1; }

    .ezn-btn--outline {
        background-color: var(--ezn-surface, #fff);
        background-image: none;
        color: var(--ezn-ink);
        border: 1px solid var(--ezn-line-strong);
        box-shadow: 0 1px 2px rgba(16,24,40,.04);
        transition: transform .2s, box-shadow .25s, border-color .25s, color .2s;
    }
    .ezn-btn--outline i { color: var(--ezn-primary); transition: transform .25s; }

    @media (hover: hover) {
        .ezn-hero__cta:hover::after { transform: translateX(120%); }
        .ezn-btn--outline:hover {
            color: var(--ezn-primary);
            border-color: var(--ezn-primary-line, #CFE0FA);
            transform: translateY(-2px);
            box-shadow: 0 16px 30px -18px var(--ezn-ring);
        }
        .ezn-btn--outline:hover i { transform: rotate(-8deg); }
    }

    /* --- Social proof --------------------------------------------------- */

    .ezn-proof {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }
    .ezn-proof__stack { display: inline-flex; }
    .ezn-proof__av {
        width: 32px; height: 32px;
        margin-left: -9px;
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background-image: var(--ezn-grad);
        box-shadow: 0 0 0 2.5px var(--ezn-surface, #fff);
        transition: transform .25s cubic-bezier(.22,.61,.36,1);
    }
    .ezn-proof__av:first-child { margin-left: 0; }
    .ezn-proof__av:nth-child(2) { background-image: linear-gradient(135deg,#9B7BFF 0%,#5B34D6 100%); }
    .ezn-proof__av:nth-child(3) { background-image: linear-gradient(135deg,#34D9A0 0%,#0CA678 100%); }
    .ezn-proof__av:nth-child(4) { background-image: linear-gradient(135deg,#FFC46B 0%,#E08A00 100%); }
    .ezn-proof__av--more {
        background-image: none;
        background-color: var(--ezn-primary-tint);
        color: var(--ezn-primary);
    }
    @media (hover: hover) {
        .ezn-proof:hover .ezn-proof__av { transform: translateY(-3px); }
        /* Staggered so the stack fans rather than jumping as one block. */
        .ezn-proof:hover .ezn-proof__av:nth-child(2) { transition-delay: .04s; }
        .ezn-proof:hover .ezn-proof__av:nth-child(3) { transition-delay: .08s; }
        .ezn-proof:hover .ezn-proof__av:nth-child(4) { transition-delay: .12s; }
        .ezn-proof:hover .ezn-proof__av:nth-child(5) { transition-delay: .16s; }
    }
    .ezn-proof__txt { color: var(--ezn-muted); font-size: 14px; }
    .ezn-proof__txt strong { color: var(--ezn-ink); font-weight: 700; }

    /* --- Perks: REMOVED 2026-09-02 --------------------------------------
       The four hero perk cards (`.ezn-perks` / `.ezn-perk` / `__ico` / `__txt`)
       are gone with their markup. Their copy is now the §EZNMQ ticker's
       payload directly below the hero, and the same four claims twice within
       one screen read as a repeat rather than as emphasis.

       Deleted rather than commented out: the classes appeared in exactly one
       view, so nothing else can be relying on them, and a dead ~60-line block
       in a sheet this size is a trap for the next person reading it. The
       responsive overrides at the 860px and 640px breakpoints went with it.
       ------------------------------------------------------------------- */


    /* The hero's primary CTA is an in-page jump to #ezn-subscribe. Two rules
       make that land properly:
       · `scroll-margin-top` clears the sticky header bar, which would
         otherwise sit over the top of the subscribe card on arrival.
       · smooth scrolling, but only where the visitor has not asked for less
         motion — the reduced-motion block further down kills transitions and
         animations inside `.ezn-page` and has no reach over this. */
    /* `scroll-margin-top` lives on the canonical `.ezn-sub-wrap` block further
       down, with the rest of that element's layout. */
    @media (prefers-reduced-motion: no-preference) {
        html:has(.ezn-page) { scroll-behavior: smooth; }
    }

    /* --- Stage: the issue preview --------------------------------------- */

    /* The stage is sized to the CARD, not to the grid track. The floating
       chips are anchored to this box, so a stage wider than the card would
       start them out in the column's slack — which is exactly how the first
       cut put "Delivered every Friday" on top of the card's own title. */
    .ezn-hero__stage {
        position: relative;
        width: 100%;
        max-width: 440px;
        margin-inline: auto;
        min-width: 0;
    }

    /* ---------------------------------------------------------------------
       THE ISSUE PREVIEW  (§EZNHERO · card)
       A mock-up of the thing the page is selling. Rebuilt 2026-08-31 (2nd
       pass) after the first cut read as an empty panel: the three story rows
       were transparent until hover, so at rest the card was a title, a
       heading and a lot of nothing.

       What changed, and why each one is not just decoration:
       · Rows carry a RESTING surface. Hover then deepens it. A control that
         only appears under the pointer cannot be seen to be a control.
       · The tone chips actually paint. `.ezn-tone--red .ezn-issue__ico` was
         a descendant selector copied from the Why band, where the tone sits
         on the CARD; here it sits on the chip itself, so nothing matched and
         all three rendered as bare glyphs. Paired on one element now.
       · The chevron is present at rest, muted, and brightens on hover rather
         than fading in from nothing — an affordance you can only discover by
         hovering is not an affordance.
       --------------------------------------------------------------------- */

    .ezn-issue {
        position: relative;
        width: 100%;
        max-width: 440px;
        overflow: hidden;
        border-radius: var(--ezn-radius-md);
        border: 1px solid var(--ezn-line-strong);
        background-color: var(--ezn-surface, #fff);
        padding: 22px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.7),
            var(--ezn-shadow);
        /* A slight rest tilt so the card reads as an object rather than a
           second content column; hover levels it. */
        transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
        transition: transform .4s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)), box-shadow .24s ease;
    }

    /* Brand rail across the top edge — the one cue that says "application
       window" without drawing fake traffic lights. `inset: 0 0 auto` pins it
       to the top without needing a width. */
    .ezn-issue__rail {
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background-image: linear-gradient(90deg,
            var(--ezn-primary) 0%,
            var(--ezn-primary-ink, #1B5BB5) 46%,
            rgba(124,92,239,.9) 100%);
        pointer-events: none;
    }
    .ezn-issue__sheen {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(150deg, rgba(255,255,255,.55) 0%, transparent 46%);
        pointer-events: none;
    }
    .ezn-issue > *:not(.ezn-issue__sheen):not(.ezn-issue__rail) { position: relative; z-index: 1; }

    @media (hover: hover) {
        .ezn-issue:hover {
            transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-6px);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.7),
                0 1px 2px rgba(16,24,40,.05),
                0 44px 80px -36px var(--ezn-ring);
        }
    }

    /* --- Header ---------------------------------------------------------- */

    .ezn-issue__head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--ezn-line);
    }
    .ezn-issue__mark {
        flex: 0 0 auto;
        width: 42px; height: 42px;
        border-radius: var(--ezn-radius-xs);   /* --hpx-r-md, the field radius on / */
        display: inline-grid;
        place-items: center;
        color: #fff;
        font-size: 17px;
        background-image: var(--ezn-grad);
        box-shadow: 0 10px 20px -12px var(--ezn-ring);
    }
    /* `min-width:0` with an explicit basis floor. A flex child defaults to
       `min-width:auto`, so without this the title refuses to ellipsis and
       shoves the "New" pill out of the card. */
    .ezn-issue__meta { flex: 1 1 0; min-width: 0; }
    .ezn-issue__meta strong {
        display: block;
        color: var(--ezn-ink);
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ezn-issue__meta small {
        display: block;
        color: var(--ezn-muted);
        font-size: 12px;
        margin-top: 2px;
    }
    .ezn-issue__live {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        background-color: var(--ezn-green-bg);
        color: var(--ezn-green-fg);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .01em;
    }
    .ezn-issue__live i {
        width: 6px; height: 6px;
        border-radius: 50%;
        background-color: currentColor;
        animation: eznPulse 2.4s ease-in-out infinite;
    }
    @keyframes eznPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

    /* --- Subject --------------------------------------------------------- */

    .ezn-issue__kicker {
        margin: 16px 0 4px;
        /* -ink, not -primary: #3680ED on white is 3.84:1 and this is 10.5px
           text, not a graphic. #1B5BB5 clears 4.5 at 6.54:1. */
        color: var(--ezn-primary-ink, #1B5BB5);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }
    .ezn-issue__subject {
        margin: 0 0 14px;
        color: var(--ezn-ink);
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -.018em;
    }

    /* --- Story rows ------------------------------------------------------ */

    .ezn-issue__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

    .ezn-issue__row {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-radius: var(--hpx-r-md, 14px);
        /* Resting surface, NOT transparent. This is the whole difference
           between a card that looks populated and one that looks empty. */
        background-color: var(--ezn-primary-tint2);
        border: 1px solid var(--ezn-line);
        transition: background-color .24s, border-color .24s,
                    transform .22s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)), box-shadow .24s ease;
    }

    .ezn-issue__ico {
        position: relative;
        flex: 0 0 auto;
        width: 34px; height: 34px;
        border-radius: var(--hpx-r-sm, 10px);
        display: inline-grid;
        place-items: center;
        font-size: 13px;
        transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s;
    }
    /* Unread marker: a brand dot notched into the chip's corner, ringed in
       the ROW's colour so it reads as sitting on top of the chip. */
    .ezn-issue__row.is-unread .ezn-issue__ico::after {
        content: '';
        position: absolute;
        top: -3px; right: -3px;
        width: 9px; height: 9px;
        border-radius: 50%;
        background-color: var(--ezn-primary);
        box-shadow: 0 0 0 2.5px var(--ezn-primary-tint2);
    }

    .ezn-issue__txt { flex: 1 1 0; min-width: 0; }
    .ezn-issue__txt strong {
        color: var(--ezn-ink);
        font-size: 13.5px;
        font-weight: 650;
        line-height: 1.35;
        /* Two-line clamp, not a one-line ellipsis: these headlines are the
           only place a translation can run long, and clipping a translated
           string to four words reads as broken. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ezn-issue__txt small {
        display: block;
        color: var(--ezn-muted);
        font-size: 11.5px;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ezn-issue__go {
        flex: 0 0 auto;
        color: var(--ezn-muted);
        font-size: 11px;
        opacity: .45;
        transition: opacity .24s, transform .24s, color .24s;
    }

    @media (hover: hover) {
        .ezn-issue__row:hover {
            background-color: var(--ezn-primary-tint);
            border-color: var(--ezn-primary-line, #CFE0FA);
            transform: translateX(4px);
            box-shadow: 0 12px 22px -14px var(--ezn-ring);
        }
        .ezn-issue__row:hover .ezn-issue__ico {
            transform: scale(1.07) rotate(-3deg);
            box-shadow: 0 8px 14px -8px var(--ezn-ring);
        }
        .ezn-issue__row:hover .ezn-issue__go {
            opacity: 1;
            transform: translateX(3px);
            color: var(--ezn-primary);
        }
        .ezn-issue__row:hover.is-unread .ezn-issue__ico::after {
            box-shadow: 0 0 0 2.5px var(--ezn-primary-tint);
        }
    }

    /* Tone chips. Paired on ONE element — see the block comment at the top of
       this section for the descendant-selector bug this replaces. */
    .ezn-issue__ico.ezn-tone--red    { background-color: var(--ezn-red-bg);    color: var(--ezn-red-fg); }
    .ezn-issue__ico.ezn-tone--violet { background-color: var(--ezn-violet-bg); color: var(--ezn-violet-fg); }
    .ezn-issue__ico.ezn-tone--green  { background-color: var(--ezn-green-bg);  color: var(--ezn-green-fg); }
    .ezn-issue__ico.ezn-tone--amber  { background-color: var(--ezn-amber-bg);  color: var(--ezn-amber-fg); }

    /* --- Footer ---------------------------------------------------------- */

    .ezn-issue__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--ezn-line);
    }
    .ezn-issue__readers { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
    .ezn-issue__avs { display: inline-flex; flex: 0 0 auto; }
    .ezn-issue__av {
        width: 24px; height: 24px;
        margin-left: -7px;
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
        font-size: 9.5px;
        font-weight: 700;
        color: #fff;
        background-image: var(--ezn-grad);
        box-shadow: 0 0 0 2px var(--ezn-surface, #fff);
        transition: transform .25s cubic-bezier(.22,.61,.36,1);
    }
    .ezn-issue__av:first-child { margin-left: 0; }
    .ezn-issue__av:nth-child(2) { background-image: linear-gradient(135deg,#9B7BFF 0%,#5B34D6 100%); }
    .ezn-issue__av:nth-child(3) { background-image: linear-gradient(135deg,#34D9A0 0%,#0CA678 100%); }
    .ezn-issue__rtxt { color: var(--ezn-muted); font-size: 11.5px; white-space: nowrap; }
    .ezn-issue__rtxt strong { color: var(--ezn-ink); font-size: 13px; font-weight: 800; margin-right: 4px; }

    .ezn-issue__rate { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
    /* Amber from the homepage tone ramp — the -INK value, not -plate: this is a
       glyph colour, and -plate is a fill meant to carry white text. It follows
       the theme in both modes instead of being two loose hexes. */
    .ezn-issue__stars { display: inline-flex; gap: 1.5px; color: var(--hpx-t-amber-ink, #A85B08); font-size: 9.5px; }
    .ezn-issue__rate strong { color: var(--ezn-ink); font-size: 13px; font-weight: 800; }

    @media (hover: hover) {
        /* The stack fans on card hover, tying the footer to the same gesture
           the rows and the floating chips answer. */
        .ezn-issue:hover .ezn-issue__av { transform: translateY(-2px); }
        .ezn-issue:hover .ezn-issue__av:nth-child(2) { transition-delay: .05s; }
        .ezn-issue:hover .ezn-issue__av:nth-child(3) { transition-delay: .1s; }
    }

    /* --- Floating chips -------------------------------------------------- */

    .ezn-float {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 14px;
        border-radius: 999px;
        border: 1px solid var(--ezn-line-strong);
        background-color: var(--ezn-glass, rgba(255,255,255,.86));
        color: var(--ezn-ink);
        font-size: 12.5px;
        font-weight: 650;
        white-space: nowrap;
        box-shadow: 0 18px 34px -20px rgba(15,23,42,.38);
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
        transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s;
    }
    .ezn-float i { color: var(--ezn-primary); font-size: 11px; }
    /* WHERE THE CHIPS SIT, AND WHY IT IS NOT `left`/`right`.

       A chip anchored with `left: -14px` grows RIGHTWARDS from that point, so
       a 165px chip on a 440px card lies across 150px of the card's own header
       — which is what the first cut did to "AIToolsay Weekly".

       Each chip is anchored by its FAR edge instead: chip A's right edge is
       pinned 92px inside the card's left edge, chip B's left edge 92px inside
       the right edge. Two things follow.

       · Horizontally the chip can only ever stick OUT by (its width − 92px),
         which for these labels is under 45px — comfortably inside the 64px
         grid gap, so no width can produce a horizontal scrollbar.
       · Vertically each one straddles the card's top or bottom edge by half
         its own height — 12px against a 39px chip — and the card carries 22px
         of padding on all four sides. The overlap lands on padding every
         time; there is no viewport at which a chip can cover a word.

       Keep the labels short for the same reason: a long translation grows the
       chip leftwards into the gap, and the 92px inset is what buys the room. */
    /* NO IDLE ANIMATION. An earlier cut drifted these ±8px on a 6s loop, and
       the loop is what made the overlap unprovable: the chip's resting inset
       was 16px but mid-cycle it reached 24px, i.e. past the card's 22px padding
       and onto the footer's text. The site already took this trade once —
       the homepage hero dropped its scroll-reveal rather than keep a
       permanent animation above the fold. Motion here is hover-only, which
       is both cheaper and a fixed, measurable geometry. */
    .ezn-float--a { top: -27px;    right: calc(100% - 92px); }
    .ezn-float--b { bottom: -27px; left:  calc(100% - 92px); }
    @media (hover: hover) {
        /* On card hover the chips push further out, so the whole stage reads
           as one object responding rather than three separate widgets. */
        .ezn-hero__stage:hover .ezn-float {
            box-shadow: 0 24px 44px -22px var(--ezn-ring);
        }
        .ezn-hero__stage:hover .ezn-float--a { transform: translate(-10px, -8px); }
        .ezn-hero__stage:hover .ezn-float--b { transform: translate(10px, 8px); }
    }

    /* --- Responsive ------------------------------------------------------ */

    /* Laptop / small desktop: pull the gap in before the columns start to
       squeeze the preview card. */
    @media (max-width: 1180px) {
        .ezn-hero__grid { gap: 44px; }
        .ezn-hero__title { font-size: clamp(34px, 4.6vw, 52px); }
        .ezn-hero__stage { max-width: 400px; }
    }

    /* Tablet portrait and below: one column. The stage follows the copy —
       the old layout hoisted the image ABOVE the headline on phones, which
       pushed the h1 and the CTA below the fold on every device narrower
       than 960px. */
    @media (max-width: 960px) {
        .ezn-hero { padding: 40px 0 56px; }
        .ezn-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
        .ezn-hero__left { text-align: center; }
        .ezn-hero__sub { max-width: 60ch; margin-left: auto; margin-right: auto; }
        .ezn-hero__actions { justify-content: center; }
        .ezn-proof { justify-content: center; }
        .ezn-hero__stage { order: 2; max-width: 460px; }
        .ezn-issue {
            /* Flat on touch: the tilt only pays off next to a text column,
               and on a centred card it just looks skewed. */
            transform: none;
        }
    }

    /* Phones. The chips are anchored to the card's own edges (see §float), so
       they never cover text at any width — but below this the card is close
       enough to the viewport gutter that the 45px they stick out starts to
       read as clutter rather than depth, so they come off entirely. */
    @media (max-width: 900px) {
        .ezn-float { display: none; }
    }

    @media (max-width: 640px) {
        .ezn-hero { padding: 28px 0 44px; }
        .ezn-hero__title { font-size: clamp(30px, 8.2vw, 40px); }
        .ezn-hero__sub { font-size: 16px; margin-bottom: 26px; }
        .ezn-hero__actions { gap: 10px; }
        .ezn-hero__actions .ezn-btn { flex: 1 1 100%; height: 50px; }
        .ezn-issue { padding: 18px 16px; border-radius: 20px; }
        .ezn-issue__subject { font-size: 17px; }
    }

    /* Narrow phones (360px and under). The footer stats are the first thing
       to wrap here, so the separator dots go and the row becomes a clean
       three-up instead of a ragged two-plus-one. */
    @media (max-width: 400px) {
        .ezn-badge { font-size: 12.5px; padding: 5px 14px 5px 5px; }
        .ezn-badge__chip { width: 23px; height: 23px; border-radius: 8px; }
        /* At 360px the card is 276px wide and the header was spending 42px on
           the mark plus ~58px on the "New" pill, which left the title 130px
           and ellipsised it to "AIToolsay Week…". The pill is decoration —
           it goes, and the mark shrinks, so the name fits in full. Measured
           with the iframe harness at 360/390/430. */
        .ezn-issue__live { display: none; }
        .ezn-issue__mark { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
        .ezn-issue__meta strong { font-size: 13.5px; }

        /* The footer's avatar stack is the first thing with no room here —
           the readers line and the rating still both fit, the three faces do
           not. They go; the two facts stay. */
        .ezn-issue__avs { display: none; }
        .ezn-issue__ico { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
        .ezn-issue__row { padding: 9px; gap: 10px; }
        .ezn-proof__txt { font-size: 13px; }
    }

    /* =====================================================================
       SUBSCRIBE CARD  (§EZNSUB)
       ---------------------------------------------------------------------
       Rebuilt 2026-08-31. The card worked, but three things were wrong under
       the surface rather than on it:

       · A validation ERROR painted `--ezn-primary` — the same blue as the
         focus ring. There was no visual difference between "this field is
         focused" and "this field is wrong". Errors now have their own tone.
       · `@keyframes eznPulse` was declared twice in this file. The LAST
         declaration wins for every user of the name, so the hero's 6px "New"
         dot was quietly running this card's halo animation — which translates
         by -50%/-50% and scales. Renamed; see the note on the halo.
       · `.ezn-sub` and `.ezn-input` painted literal `#fff`. They had dark
         overrides, so this was not visibly broken, but it is the same shape
         as the bug that made the Why band render white-on-white. Both read
         `--ezn-surface` / `--ezn-field` now.
       ===================================================================== */

    /* Vertical only — the side gutter belongs to `.ezn-wrap`, which this
       element also carries. See the §VPMATCH note above for why a `padding:`
       shorthand here silently wins against it. */
    .ezn-main { padding-block: 0 60px; }

    /* The outer wrapper exists so the halo can extend past the card edges and
       the icon tile can poke above the top edge, neither of which is possible
       if the glow lives on a card that has to clip its own corners. */
    .ezn-sub-wrap {
        max-width: 760px;
        margin: 40px auto 20px;
        position: relative;
        padding-top: 32px;
        scroll-margin-top: 96px;
    }

    /* =====================================================================
       THE SUBSCRIBE PANEL  (§EZNSUB)
       ---------------------------------------------------------------------
       Rebuilt 2026-09-02 onto the same premium surface as §EZNWORTH and `/`'s
       library columns, at PANEL scale — which on `/` is `.hpx-promo`, the
       biggest of §HPXP's seven hosts. It reads the shared `--ezn-p-*` alpha
       ramp declared with §EZNWORTH further down, so the wash, the edge and
       the orbit are the same numbers this page's cards use, in both themes.

       The tone is the brand blue, stated as a triplet because a gradient
       needs to vary ALPHA and `--ezn-primary` is an opaque hex. §HPXP-RGB's
       own value, byte for byte, so this panel and every card on the page
       wash in one blue.
       ===================================================================== */

    .ezn-sub {
        --ezn-tone-rgb: 54, 128, 237;
        --ezn-tone-plate: var(--hpx-t-blue-plate, #1B5BB5);

        position: relative;
        z-index: 1;
        overflow: hidden;
        border: 0;                     /* the ring below IS the edge */
        border-radius: var(--ezn-radius-lg);
        padding: 58px 44px 40px;

        /* §HPXP-WASH. Colour and image as SEPARATE properties — the
           `background` shorthand resets the colour to transparent and the
           page ground would come through the panel. The 48% dead stop and
           the fade to `rgba(same-hue, 0)` rather than the `transparent`
           KEYWORD are both load-bearing: fading to `transparent` interpolates
           through transparent BLACK and leaves a grey seam down the middle. */
        background-color: var(--ezn-surface, #fff);
        background-image:
            linear-gradient(152deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-a1)) 0%,
                rgba(var(--ezn-tone-rgb), 0)               48%,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-a2)) 100%);
        background-repeat: no-repeat;

        /* §HPXP-LIFT, with the tone carried into the wide shadow so the panel
           casts brand-tinged light rather than the same grey as a plain card. */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .7),
            0 1px 2px rgba(16, 24, 40, .04),
            0 22px 46px -26px rgba(var(--ezn-tone-rgb), .42),
            0 14px 32px -22px rgba(16, 24, 40, .26);

        transition: transform .28s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)),
                    box-shadow .28s ease;
    }
    /* THE GRADIENT RING is this panel's signature edge — the glow the design
       shows at rest. It replaces both the 1px border AND an older animated
       version that cycled `background-position` forever above the fold.

       Drawn as a masked pseudo-element because `border-image` with a gradient
       discards `border-radius` outright — the same technique the hero badge
       uses. `border: 0` on the card, so this 1.5px frame IS the edge; z-index
       2 puts it over the mesh but under the content, which sits at 1 on its
       own stacking context.

       It STAYS static. The sweep now lives on `::after` and only runs while
       the panel is engaged, which is the difference between a page that
       animates at you and one that answers you. */
    .ezn-sub::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        padding: 1.5px;
        background-image: linear-gradient(135deg,
            var(--ezn-primary-line, #CFE0FA) 0%,
            var(--ezn-primary) 48%,
            rgba(124,92,239,.75) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        opacity: .75;
        pointer-events: none;
    }

    /* ── §EZNSUB-ORBIT) The rotating light ────────────────────────────────
       §HPXP-ORBIT at promo scale. Speed is a statement about size: 8.5s is
       the slow ambient sweep `/` gives its widest panel, and slow reads as
       large. The §EZNWORTH cards run 5.2s for exactly the same reason in
       reverse.

       It rides OVER the static gradient ring, and the conic is transparent
       for roughly half its circumference — so what you see is the signature
       edge with a comet travelling along it, not a second ring replacing the
       first.

       `focus-within` is deliberately outside the hover query and is the state
       that matters most here: tabbing into the name field lights the panel. */
    @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
        .ezn-sub::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            border-radius: inherit;
            padding: 1.5px;
            --ezn-pspin: 0deg;
            background: conic-gradient(from var(--ezn-pspin),
                rgba(var(--ezn-tone-rgb), 0)                0deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o1)) 30deg,
                rgba(255, 255, 255, 1)                     52deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o2)) 74deg,
                rgba(var(--ezn-tone-rgb), 0)              118deg,
                rgba(var(--ezn-tone-rgb), 0)              180deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o1)) 210deg,
                rgba(255, 255, 255, 1)                    232deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o2)) 254deg,
                rgba(var(--ezn-tone-rgb), 0)              298deg,
                rgba(var(--ezn-tone-rgb), 0)              360deg);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            opacity: 0;
            transition: opacity .32s ease;
            animation: ezn-worth-orbit 8.5s linear infinite;
            animation-play-state: paused;
        }
        .ezn-sub:focus-within::after { opacity: 1; animation-play-state: running; }
    }

    @media (hover: hover) and (pointer: fine) {
        .ezn-sub-wrap:hover .ezn-sub::after { opacity: 1; animation-play-state: running; }
        .ezn-sub-wrap:hover .ezn-sub {
            transform: translateY(-3px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .8),
                0 1px 2px rgba(16, 24, 40, .05),
                0 34px 60px -30px rgba(var(--ezn-tone-rgb), .52),
                0 18px 38px -24px rgba(16, 24, 40, .28);
        }
        body.theme-dark .ezn-sub-wrap:hover .ezn-sub {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .07),
                0 1px 2px rgba(0, 0, 0, .45),
                0 34px 60px -30px rgba(var(--ezn-tone-rgb), .46),
                0 18px 38px -24px rgba(0, 0, 0, .82);
        }
    }

    @media (hover: none) {
        .ezn-sub::after { animation: none; }
    }
    @media (prefers-reduced-motion: reduce) {
        .ezn-sub::after { animation: none !important; }
        .ezn-sub { transition: none !important; }
        .ezn-sub-wrap:hover .ezn-sub { transform: none; }
        /* The breathing halo is the one thing on this panel that moves with
           nobody asking, so reduced motion is where it stops. */
        .ezn-sub-wrap::after { animation: none; opacity: .7; }
    }
    @media (forced-colors: active) {
        .ezn-sub::before,
        .ezn-sub::after { display: none; }
        .ezn-sub { background-image: none; border: 1px solid CanvasText; box-shadow: none; }
    }
    .ezn-sub__mesh {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px, var(--ezn-mesh, rgba(54,128,237,.12)) 1px, transparent 0);
        background-size: 30px 30px;
        -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 72%);
                mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 72%);
        pointer-events: none;
    }
    .ezn-sub > *:not(.ezn-sub__mesh) { position: relative; z-index: 1; }

    /* Breathing halo behind the card. Its keyframe is `eznHalo`, NOT the
       generic `eznPulse` it used to share with the hero's status dot. */
    .ezn-sub-wrap::after {
        content: '';
        position: absolute; left: 50%; top: 50%;
        width: 92%; height: 70%;
        transform: translate(-50%, -50%);
        border-radius: 40% 40% 60% 60% / 50%;
        background-image: radial-gradient(closest-side, var(--ezn-ring), transparent 70%);
        filter: blur(34px);
        z-index: 0;
        animation: eznHalo 4.5s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes eznHalo {
        0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
        50%     { opacity: .9;  transform: translate(-50%,-50%) scale(1.06); }
    }

    /* The floating plate. It keeps the brand GRADIENT rather than dropping to
       a flat `--tone-plate` — this is the one mark on the page that is the
       page's own logo-scale object, and `/`'s promo panel does the same — but
       it now carries §HPXP's sheen and choreography so it moves with the
       band's cards rather than on a curve of its own. */
    .ezn-sub__ico {
        position: absolute; left: 50%; top: 0;
        transform: translate(-50%, -50%);
        width: 68px; height: 68px;
        border-radius: 21px;
        background-color: var(--ezn-primary-600, #2060C0);
        background-image: var(--ezn-grad);
        color: var(--hpx-ink-invert, #fff);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 26px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.26),
            inset 0 0 0 1px rgba(255,255,255,.18),
            var(--ezn-shadow-red);
        z-index: 3;
        transition: transform .35s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)), box-shadow .35s ease;
    }
    /* The sheen is a SECOND background layer over the gradient, not a
       pseudo-element: `.ezn-sub__ico` is an <i>-bearing box that already
       stacks above the panel ring at z-index 3, and a pseudo here would need
       its own stacking fix for nothing. */
    .ezn-sub__ico::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.24) 100%);
        pointer-events: none;
    }
    .ezn-sub__ico > * { position: relative; }
    @media (hover: hover) {
        /* `scale(1.08) rotate(-5deg)`, the value every plate on this page now
           moves by — the worth cards, and `/`'s library columns before them. */
        .ezn-sub-wrap:hover .ezn-sub__ico {
            transform: translate(-50%, -50%) rotate(-5deg) scale(1.08);
        }
    }

    /* ── Head ─────────────────────────────────────────────────────────── */

    .ezn-sub__head { text-align: center; margin-bottom: 30px; }
    /* `.ezn-sub__eyebrow` is styled with `.ezn-eyebrow` further down — one
       component, two tones. The standalone 11px/uppercase block that used to
       sit here was a second eyebrow design on the same page. */
    .ezn-sub__title {
        color: var(--ezn-ink);
        /* The same showcase step the band heads use, one notch smaller: this
           heading sits inside a card, not at the top of a section. */
        font-size: clamp(24px, 3.2vw, calc(var(--hpx-fs-h2, 30px) * 1.18));
        font-weight: var(--hpx-fw-h2, 750); letter-spacing: -.03em;
        line-height: 1.12;
        margin: 0 0 10px;
    }
    /* Gradient number, with `color` set first as the real fallback — a browser
       that drops `-webkit-text-fill-color` keeps a brand-coloured count rather
       than a transparent one. */
    .ezn-sub__title .ezn-count {
        color: var(--ezn-primary);
        background-image: linear-gradient(120deg,
            var(--hpx-brand, #3680ED) 0%,
            var(--hpx-brand-600, #2060C0) 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
        .ezn-sub__title .ezn-count { background-image: none; -webkit-text-fill-color: currentColor; }
    }
    .ezn-sub__sub { color: var(--ezn-body); font-size: 15.5px; line-height: 1.6; margin: 0; }

    /* ── Fields ───────────────────────────────────────────────────────── */

    .ezn-form { margin: 0; }
    .ezn-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
    .ezn-field { display: block; min-width: 0; }
    .ezn-label {
        display: block; font-weight: 650;
        color: var(--ezn-ink); font-size: 13.5px;
        margin-bottom: 8px; letter-spacing: -.005em;
        transition: color .2s;
    }
    .ezn-input-wrap { position: relative; }

    /* THE LEADING ICON IS A PLATE, not a loose glyph — the same motif the
       library columns and §EZNWORTH use, at field scale. It is the `<i>`
       itself, so no markup changes and main.js's hooks are untouched.
       At rest it is the soft brand tint; on focus it fills with the brand
       PLATE and the glyph goes white, so the field the caret is in is
       readable from across the form rather than only by its border. */
    .ezn-input-ico {
        position: absolute; left: 9px; top: 50%;
        transform: translateY(-50%);
        display: inline-grid;
        place-items: center;
        width: 34px; height: 34px;
        border-radius: 10px;
        background-color: var(--ezn-primary-tint);
        color: var(--ezn-primary-ink, #1B5BB5);
        pointer-events: none;
        font-size: 13px;
        transition: background-color .2s ease, color .2s ease, transform .22s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1));
    }
    .ezn-input {
        width: 100%; height: 56px;
        /* 53px clears the 34px plate at left: 9px with 10px of breathing
           room; 42px on the right clears the valid tick. */
        padding: 0 42px 0 53px;
        border: 1px solid var(--ezn-line-strong);
        background-color: var(--ezn-field, #fff);
        border-radius: var(--ezn-radius-xs);   /* --hpx-r-md, the field radius on / */
        font: inherit; color: var(--ezn-ink);
        transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }
    .ezn-input::placeholder { color: var(--ezn-placeholder, #94a3b8); }

    /* Hover is a real state on a field, not just a cursor change: the border
       warms toward brand and the surface steps up to the card's own white, so
       the box you are about to click confirms itself before you do. */
    @media (hover: hover) {
        .ezn-input:hover:not(:focus) {
            border-color: var(--ezn-primary-line, #CFE0FA);
            background-color: var(--ezn-surface, #fff);
        }
        .ezn-input-wrap:hover .ezn-input-ico { transform: translateY(-50%) scale(1.04); }
    }

    .ezn-input:focus {
        outline: none;
        border-color: var(--ezn-primary);
        background-color: var(--ezn-surface, #fff);
        box-shadow: 0 0 0 4px var(--ezn-ring);
    }
    .ezn-input-wrap:focus-within .ezn-input-ico {
        background-color: var(--hpx-t-blue-plate, #1B5BB5);
        color: var(--hpx-ink-invert, #fff);
        transform: translateY(-50%) scale(1.06);
    }
    .ezn-field:focus-within .ezn-label { color: var(--ezn-primary-ink, #1B5BB5); }

    /* Valid tick. Pure CSS off `:valid` + `:not(:placeholder-shown)`, so it
       cannot drift out of step with main.js's own checks the way a second
       JS validator would. `:placeholder-shown` is what keeps it hidden on an
       empty field, since an empty non-required input is technically :valid. */
    .ezn-input-ok {
        position: absolute; right: 15px; top: 50%;
        transform: translateY(-50%) scale(.6);
        color: var(--ezn-green-fg);
        font-size: 13px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
    }
    .ezn-input:valid:not(:placeholder-shown) ~ .ezn-input-ok {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    .ezn-input.is-error ~ .ezn-input-ok { opacity: 0; }

    /* ── Error state ──────────────────────────────────────────────────────
       Its own tone, not the brand blue the focus ring uses. Before this an
       invalid field and a focused field were the same colour, so the form
       could tell you something was wrong only in words. */
    .ezn-input.is-error {
        border-color: var(--ezn-danger);
        box-shadow: 0 0 0 4px var(--ezn-danger-ring);
    }
    .ezn-field:has(.ezn-input.is-error) .ezn-label { color: var(--ezn-danger); }

    /* ⚠ `:has()` ON THE WRAP, not `~` from the input. The leading icon is the
       FIRST child of `.ezn-input-wrap` and the input is the second:

           <i class="ezn-input-ico">  <input class="ezn-input">  <i class="ezn-input-ok">

       so `.ezn-input.is-error ~ .ezn-input-ico` — which this file carried —
       looks for the icon AFTER the input and never matches anything. It cost
       nothing while the icon was a bare grey glyph, because the rule only set
       a colour nobody looked for; with the icon on a brand-tinted PLATE it
       would leave a blue chip sitting inside a rose field.
       (`.ezn-input-ok` genuinely is after the input, so the tick's own `~`
       rules further up are correct and are left alone.) */
    .ezn-input-wrap:has(.ezn-input.is-error) .ezn-input-ico {
        background-color: var(--ezn-danger-ring);
        color: var(--ezn-danger);
    }
    /* Focus must not repaint an invalid field back to brand — the error is
       still true while you are fixing it. (0,3,0) here against the focus
       rule's (0,2,0), so error survives focus in both directions. */
    .ezn-input-wrap:focus-within:has(.ezn-input.is-error) .ezn-input-ico {
        background-color: var(--ezn-danger-ring);
        color: var(--ezn-danger);
    }
    .ezn-error {
        display: none;
        color: var(--ezn-danger);
        font-size: 12.5px; margin-top: 7px; font-weight: 600;
    }

    /* ── Submit ───────────────────────────────────────────────────────── */

    .ezn-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        border: 0; border-radius: 12px;
        padding: 12px 20px;
        font-weight: 650; font-family: inherit; font-size: 15px;
        cursor: pointer; text-decoration: none;
        transition: transform .18s, box-shadow .25s;
        line-height: 1; position: relative; overflow: hidden;
    }
    .ezn-btn--primary {
        background-image: var(--ezn-grad);
        color: #fff;
        box-shadow: var(--ezn-shadow-red);
    }
    .ezn-btn--primary:hover { color: #fff; transform: translateY(-2px); }
    .ezn-btn--block { width: 100%; height: 58px; font-size: 16.5px; padding: 0 24px; border-radius: var(--ezn-radius-xs); }

    /* THE SUBMIT, scoped to this panel. `.ezn-btn--primary` is shared with the
       hero CTA further up the page, so the weight this one carries — it is the
       page's single conversion control — is added HERE rather than on the
       shared class, which would move a button nobody asked to change.

       The fill is the brand gradient it already had; what is new is §HPXP's
       inset top light and a tone-tinted drop, so the button seats on the
       washed panel the same way the plates and the pills do. */
    .ezn-sub .ezn-btn--primary {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .26),
            0 14px 28px -12px rgba(var(--ezn-tone-rgb), .55),
            0 4px 10px -6px rgba(16, 24, 40, .28);
        transition: transform .18s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)),
                    box-shadow .26s ease, filter .2s ease;
    }
    @media (hover: hover) and (pointer: fine) {
        .ezn-sub .ezn-btn--primary:hover {
            transform: translateY(-3px);
            /* `brightness`, not a second gradient: the fill is `--ezn-grad`,
               which is remapped by night, and a hard-coded hover gradient
               would be a second palette to keep in step with it. */
            filter: brightness(1.06);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .3),
                0 26px 46px -18px rgba(var(--ezn-tone-rgb), .62),
                0 8px 16px -8px rgba(16, 24, 40, .3);
        }
        .ezn-sub .ezn-btn--primary:active { transform: translateY(-1px); }
    }
    body.theme-dark .ezn-sub .ezn-btn--primary {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 14px 28px -12px rgba(var(--ezn-tone-rgb), .48),
            0 4px 10px -6px rgba(0, 0, 0, .6);
    }
    /* A control that is working should not also be inviting a click. */
    .ezn-sub .ezn-btn--primary.is-loading { filter: none; transform: none; }

    /* Sheen sweep, same as the hero CTA. `::after` so the button's own
       `overflow:hidden` clips it, parked off-screen so nothing shows at rest.
       It sits UNDER the label because the children are lifted to z-index 1. */
    .ezn-btn--block::after {
        content: '';
        position: absolute; inset: 0;
        background-image: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
        transform: translateX(-120%);
        transition: transform .7s cubic-bezier(.22,.61,.36,1);
        pointer-events: none;
    }
    .ezn-btn--block > * { position: relative; z-index: 1; }

    @media (hover: hover) {
        .ezn-btn--primary:hover { box-shadow: 0 26px 44px -20px var(--ezn-ring); }
        .ezn-btn--block:hover::after { transform: translateX(120%); }
    }
    /* No sweep while submitting: the sheen crossing a spinner reads as a
       second, conflicting progress cue. */
    .ezn-btn.is-loading::after { display: none; }

    .ezn-btn__spin {
        display: none; width: 18px; height: 18px;
        border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
        border-radius: 50%; animation: eznSpin .8s linear infinite;
    }
    .ezn-btn.is-loading .ezn-btn__lbl,
    .ezn-btn.is-loading .ezn-btn__arr { display: none; }
    .ezn-btn.is-loading .ezn-btn__spin { display: inline-block; }
    .ezn-btn.is-loading { cursor: progress; transform: none; }
    @keyframes eznSpin { to { transform: rotate(360deg); } }
    .ezn-btn__arr { transition: transform .2s; }
    .ezn-btn:hover .ezn-btn__arr { transform: translateX(3px); }

    .ezn-fine {
        color: var(--ezn-muted); font-size: 12.5px;
        line-height: 1.55;
        margin: 18px 0 0;
        display: flex; align-items: flex-start; justify-content: center;
        gap: 8px;
    }
    .ezn-fine i { color: var(--ezn-primary); margin-top: 2px; flex: 0 0 auto; }
    /* ⚠ NO `max-width` HERE. This carried `52ch`, which at 12.5px is about
       328px — less than half the 672px of panel it sits in — so the sentence
       folded onto two lines no matter how much room was around it. The cap is
       what wrapped it, not the copy.

       No `white-space: nowrap` either, and that is deliberate: the sentence is
       ~90 characters, which needs roughly 550px at this size. It fits on one
       line from the widest desktop down to about 640px; below that `nowrap`
       would push the panel wider than the phone and give the whole PAGE a
       horizontal scrollbar to save one line break. So it runs on one line
       wherever one line fits, and wraps where it physically cannot. */
    .ezn-fine > span { min-width: 0; }
    .ezn-fine a { color: var(--ezn-primary-ink, #1B5BB5); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

    /* ── Success ──────────────────────────────────────────────────────── */

    .ezn-success { text-align: center; padding: 8px 0; }
    .ezn-success__ico {
        display: grid; place-items: center;
        margin: 0 auto 16px;
        width: 76px; height: 76px;
        border-radius: 50%;
        color: var(--ezn-green-fg);
        background-color: var(--ezn-green-bg);
    }
    .ezn-success__ico svg { width: 40px; height: 40px; display: block; }
    .ezn-success h3 { margin: 0 0 8px; color: var(--ezn-ink); font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
    .ezn-success p { color: var(--ezn-body); margin: 0 0 20px; font-size: 15px; }

    @media (max-width: 860px) {
        .ezn-sub { padding: 52px 30px 34px; }
    }
    @media (max-width: 640px) {
        .ezn-sub-wrap { margin-top: 28px; padding-top: 28px; }
        .ezn-sub { padding: 46px 20px 30px; border-radius: 22px; }
        .ezn-sub__ico { width: 58px; height: 58px; border-radius: 18px; font-size: 22px; }
        .ezn-form__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
        .ezn-btn--block { height: 54px; font-size: 16px; }
        .ezn-sub__head { margin-bottom: 24px; }
        /* The lock icon on its own line looks like a bullet with nothing after
           it once the sentence wraps three times, so the row centres instead. */
        .ezn-fine { font-size: 12px; }
    }

    /* =====================================================================
       WHY BAND  (§EZNWHY)
       ---------------------------------------------------------------------
       Rebuilt 2026-08-31. The old cards were `background: #fff` with no dark
       counterpart, so in dark mode they stayed white while `--ezn-ink` had
       already flipped to #F4F5F7 — every heading rendered white-on-white.
       Nothing here paints a literal surface any more; `--ezn-surface` is the
       one name, remapped once in the dark block.

       The layout is left-aligned rather than centred. Four centred cards read
       as a poster; left-aligned with the tone chip and the index in a top row
       reads as a spec sheet, which is what these four claims actually are —
       and it gives the body copy a straight left edge to scan.
       ===================================================================== */

    /* Band rhythm off the homepage's own `--hpx-band` unit (56px), so the
       vertical spacing between sections here matches the spacing between
       sections on `/` instead of being a set of hand-picked numbers. */
    /* Vertical only — §VPMATCH. */
    .ezn-why { padding-block: calc(var(--ezn-band) * 1.5) calc(var(--ezn-band) * .8); }

    .ezn-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }

    /* The eyebrow is a chip, not tracked text on its own. It matches the hero
       badge's construction so the page has one eyebrow component, not two. */
    /* THE HOMEPAGE'S SHOWCASE EYEBROW, declaration for declaration —
       `.hpx-head.is-showcase .hpx-eyebrow`. Note `text-transform: none` and
       the near-zero tracking: the uppercase, .14em-tracked version this page
       used is the homepage's PLAIN eyebrow, not its showcase pill, and the
       two do not read as the same component.

       ONE component, two tones. The subscribe card's pill was a separate
       11px/uppercase/.12em thing until 2026-08-31, so the page was showing two
       different eyebrows a screen apart; it now shares every metric and
       differs only in which tone it carries. */
    .ezn-eyebrow,
    .ezn-sub__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 7px 16px 7px 13px;
        background-color: var(--hpx-brand-soft, #EAF2FD);
        border: 1px solid var(--hpx-brand-line, #CFE0FA);
        border-radius: var(--hpx-r-pill, 999px);
        color: var(--hpx-brand-ink, #1B5BB5);
        font-size: 12.5px;
        font-weight: var(--hpx-fw-eyebrow, 700);
        letter-spacing: -.005em;
        text-transform: none;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }
    /* The subscribe pill is the emerald twin — same shape, "Free forever"
       reads as a reassurance rather than a section label. */
    .ezn-sub__eyebrow {
        background-color: var(--ezn-green-bg);
        border-color: var(--ezn-green-line, transparent);
        color: var(--ezn-green-fg);
    }
    .ezn-eyebrow i,
    .ezn-eyebrow svg,
    .ezn-sub__eyebrow i,
    .ezn-sub__eyebrow svg {
        width: 14px; height: 14px;
        flex: 0 0 auto;
        font-size: 12px;
    }
    /* Only the brand pill tints its glyph; the emerald one lets it inherit, so
       the chip stays one colour. */
    .ezn-eyebrow svg { color: var(--hpx-brand, #3680ED); }

    .ezn-h2 {
        color: var(--ezn-ink);
        /* The showcase head steps the h2 token up by 1.42 — the same multiple
           `.hpx-head.is-showcase .hpx-title` uses, so the Typography screen
           still governs this heading. */
        font-size: clamp(26px, 3.9vw, calc(var(--hpx-fs-h2, 30px) * 1.42));
        font-weight: var(--hpx-fw-h2, 750);
        margin: 0;
        letter-spacing: -.03em;
        line-height: 1.12;
    }
    .ezn-head__sub {
        color: var(--ezn-muted);          /* .hpx-sub is --hpx-ink-3 */
        font-size: var(--hpx-fs-body, 15px);
        line-height: var(--hpx-lh-body, 1.66);
        margin: 14px 0 0;
    }
    .ezn-h2-line {
        display: block; width: 64px; height: 4px;
        border-radius: 4px;
        margin: 22px auto 0;
        background-image: linear-gradient(90deg, var(--ezn-primary) 0%, rgba(124,92,239,.9) 100%);
    }

    /* =====================================================================
       WHY SUBSCRIBE — the benefit cards  (§EZNWORTH)
       ---------------------------------------------------------------------
       Rebuilt 2026-09-02 on the surface `/` uses for its "All Free AI Tools"
       library columns, so the two bands read as one design system:

         · §HPXP-WASH   the diagonal tone wash on the card itself
         · §HPXP-ORBIT  the rotating comet ring along the border, on hover
         · §HPXP-LIFT   the four-layer depth, with the tone in the lift shadow
         · .hpx-libcol  the head — a SOLID tone plate with a white glyph, a
                        ringed tone pill, and a dashed rule under the row
         · .hpx-lib-more the foot button — tinted at rest, solid plate on hover

       ── WHY THE RECIPE IS COPIED RATHER THAN homepage.css LINKED ─────────
       This page already carries `class="ezn-page hpx"` and emits
       `ThemeCompiler::css()` (view line ~51), so the theme block resolves
       here. That is exactly what makes linking the sheet dangerous rather
       than free: `homepage.css` is 455KB and carries seven ELEMENT-level
       rules under `.hpx` — `.hpx a`, `.hpx p`, `.hpx ul`, `.hpx button`,
       `.hpx img`, `.hpx h1` — plus a root `.hpx { … }` block. With `.hpx`
       on the page root those would repaint every paragraph, link and list
       on the newsletter, not just this band. So: the ~40 declarations this
       one card needs are restated; nothing else is.

       What IS borrowed, and stays a single source of truth, are the tone
       tokens themselves — `--hpx-t-*-bg / -ink / -line / -plate`, emitted
       by the theme block in BOTH themes. The plate fill, the wash hue, the
       pill and the button all read those, so this band follows the admin's
       palette instead of a second set of hexes that can drift out of step.

       ⚠ A grid, not a rail. `/`'s band is a 14-column slider because it has
       fourteen categories; four benefit cards in a slider would hide half
       the section behind an arrow nobody presses. Same card, 4 → 2 → 1.
       ===================================================================== */

    .ezn-worth {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        align-items: stretch;
    }

    /* ── §EZNWORTH-RGB) The hue as a triplet ──────────────────────────────
       `--ezn-tone-bg/fg/line` stay the source of every FLAT colour, and
       nothing here touches them. But a wash and a conic tail need to vary
       ALPHA along a gradient, and no tone token carries an RGB triplet —
       `--hpx-t-blue-bg` is already a composited pale hex. These four lines
       are that missing primitive, byte-identical to §HPXP-RGB so a card
       here and a column on `/` wash in the SAME blue.

       ⚠ The triplet is load-bearing. Undefined, every `rgba(var(…), …)`
       below is INVALID, and an invalid declaration is dropped silently —
       the wash, the edge and the ring would simply not exist, with nothing
       in the output to say why. */
    .ezn-worth__card.ezn-tone--red    { --ezn-tone-rgb:  54, 128, 237; --ezn-tone-plate: var(--hpx-t-blue-plate,    #1B5BB5); }
    .ezn-worth__card.ezn-tone--violet { --ezn-tone-rgb: 14, 165, 233; --ezn-tone-plate: var(--hpx-t-violet-plate,  #0284C7); }
    .ezn-worth__card.ezn-tone--green  { --ezn-tone-rgb:  16, 185, 129; --ezn-tone-plate: var(--hpx-t-emerald-plate, #08795A); }
    .ezn-worth__card.ezn-tone--amber  { --ezn-tone-rgb: 245, 158,  11; --ezn-tone-plate: var(--hpx-t-amber-plate,   #A85B08); }

    /* The flat tone trio each card already declared, unchanged. */
    .ezn-worth__card.ezn-tone--red    { --ezn-tone-bg: var(--ezn-red-bg);    --ezn-tone-fg: var(--ezn-red-fg);    --ezn-tone-line: var(--ezn-red-line); }
    .ezn-worth__card.ezn-tone--violet { --ezn-tone-bg: var(--ezn-violet-bg); --ezn-tone-fg: var(--ezn-violet-fg); --ezn-tone-line: var(--ezn-violet-line); }
    .ezn-worth__card.ezn-tone--green  { --ezn-tone-bg: var(--ezn-green-bg);  --ezn-tone-fg: var(--ezn-green-fg);  --ezn-tone-line: var(--ezn-green-line); }
    .ezn-worth__card.ezn-tone--amber  { --ezn-tone-bg: var(--ezn-amber-bg);  --ezn-tone-fg: var(--ezn-amber-fg);  --ezn-tone-line: var(--ezn-amber-line); }

    /* The alpha ramp every layer reads. Four numbers by day, four by night —
       §HPXP's own values. Dark lifts all four because a 5% tint that reads
       over #FFFFFF is invisible over #17171B. */
    .ezn-worth__card,
    .ezn-sub {
        --ezn-p-a1:   .075;   /* wash, the lit corner   */
        --ezn-p-a2:   .055;   /* wash, the far corner   */
        --ezn-p-edge: .20;    /* the tinted hairline    */
        --ezn-p-o1:   .5;     /* orbit, leading tail    */
        --ezn-p-o2:   .88;    /* orbit, trailing tail   */
    }
    body.theme-dark .ezn-worth__card,
    body.theme-dark .ezn-sub {
        --ezn-p-a1:   .13;
        --ezn-p-a2:   .09;
        --ezn-p-edge: .30;
        --ezn-p-o1:   .66;
        --ezn-p-o2:   1;
    }

    /* §HPXP-INK — MEASURED, and the measurement is why this line exists.
       `--hpx-ink-3` (#6B7686) is 4.60:1 on a pure white card, 0.10 above the
       AA floor; under the wash it drops below it. #656F7E restores the
       margin. Light only — darkening a dark-mode grey would invert the fix.

       ⚠ It has to re-declare `--ezn-muted` ON THE CARD, not redefine
       `--hpx-ink-3`. `--ezn-muted: var(--hpx-ink-3)` is declared up on
       `.ezn-page`, and a var() resolves where it is DECLARED — patching the
       input on a descendant would change nothing. */
    body:not(.theme-dark) .ezn-worth__card,
    body:not(.theme-dark) .ezn-sub { --ezn-muted: #656F7E; }

    .ezn-worth__card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 24px 22px 22px;
        border: 1px solid rgba(var(--ezn-tone-rgb), var(--ezn-p-edge));
        border-radius: var(--ezn-radius-md);

        /* §HPXP-WASH. `background-color` and `background-image` as SEPARATE
           properties, never the `background` shorthand: the shorthand resets
           the colour to transparent and the page ground shows through every
           card. (The same trap this site logs as the dark `background`
           shorthand bug.)

           152deg, a dead stop at 48%, and a fade to `rgba(same-hue, 0)`
           rather than the `transparent` KEYWORD. That last one matters more
           than it looks: fading to `transparent` interpolates through
           transparent BLACK in sRGB and leaves a grey, dirty fringe down the
           middle of the card. */
        background-color: var(--ezn-surface, #fff);
        background-image:
            linear-gradient(152deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-a1)) 0%,
                rgba(var(--ezn-tone-rgb), 0)               48%,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-a2)) 100%);
        background-repeat: no-repeat;

        /* §HPXP-LIFT: a glass hairline along the top inner edge, a 1px
           contact shadow to seat the card, and a wide soft one for lift —
           with the tone carried into the lift, so a violet card casts a
           violet-tinged shadow rather than the same grey as its neighbour. */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .7),
            0 1px 2px rgba(16, 24, 40, .04),
            0 14px 30px -22px rgba(var(--ezn-tone-rgb), .40),
            0 10px 24px -20px rgba(16, 24, 40, .26);

        transition: transform .26s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)),
                    border-color .22s ease,
                    box-shadow .26s ease;
    }

    body.theme-dark .ezn-worth__card {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .05),
            0 1px 2px rgba(0, 0, 0, .42),
            0 14px 30px -22px rgba(var(--ezn-tone-rgb), .34),
            0 10px 24px -20px rgba(0, 0, 0, .78);
    }

    /* Top edge shine, inset from the corners the way `.hpx-libcol` draws it —
       a bar that runs the full width fights the radius at both ends. */
    .ezn-worth__card::before {
        content: '';
        position: absolute;
        inset-inline: 20px;
        top: 0;
        z-index: 3;
        height: 2px;
        border-end-start-radius: 2px;
        border-end-end-radius: 2px;
        background-image: linear-gradient(90deg, transparent, var(--ezn-tone-fg), transparent);
        opacity: 0;
        transform: translateY(-2px);
        transition: opacity .26s ease, transform .26s ease;
        pointer-events: none;
    }

    .ezn-worth__card > * { position: relative; z-index: 1; }

    /* ── §EZNWORTH-ORBIT) The rotating light ──────────────────────────────
       §HPXP-ORBIT at this band's scale. The hue is NOT fixed: it reads
       `--ezn-tone-rgb`, so a violet card orbits violet and an amber one
       amber — the light belongs to the card it is lighting.

       5.2s: §HPXP's ladder puts a compact 4-up tile there. `/`'s library
       column sweeps at 7.5s because it is twice as tall; running that speed
       on a card this short reads as a stall.

       A property and keyframe of its own rather than `--hpx-pspin` — that
       one is registered in homepage.css, which is deliberately NOT loaded
       here, so reusing the name would animate nothing. */
    @property --ezn-pspin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
    @keyframes ezn-worth-orbit { to { --ezn-pspin: 360deg; } }

    @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
        /* Two full-box mask layers — one clipped to the content box, one to
           the border box — composited with xor, leaving exactly the padding
           band. `mask-clip` follows `border-radius`, so the inner cut is a
           rounded rect on a rounded rect and the corners stay true.

           ⚠ THE @supports GATE IS LOAD-BEARING, NOT DEFENSIVE. Without
           mask-composite the two layers UNION and the conic paints as a
           SOLID BLOCK over the card, covering every word on it. Where the
           mask is missing there is simply no ring, and the border, lift and
           shadow already carry the hover state. */
        .ezn-worth__card::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            border-radius: inherit;
            padding: 1.5px;
            --ezn-pspin: 0deg;
            background: conic-gradient(from var(--ezn-pspin),
                rgba(var(--ezn-tone-rgb), 0)                0deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o1)) 30deg,
                rgba(255, 255, 255, 1)                     52deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o2)) 74deg,
                rgba(var(--ezn-tone-rgb), 0)              118deg,
                rgba(var(--ezn-tone-rgb), 0)              180deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o1)) 210deg,
                rgba(255, 255, 255, 1)                    232deg,
                rgba(var(--ezn-tone-rgb), var(--ezn-p-o2)) 254deg,
                rgba(var(--ezn-tone-rgb), 0)              298deg,
                rgba(var(--ezn-tone-rgb), 0)              360deg);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            opacity: 0;
            transition: opacity .32s ease;
            animation: ezn-worth-orbit 5.2s linear infinite;
            /* A paused animation does not tick, so four idle cards cost
               nothing — and re-entering RESUMES the sweep rather than
               snapping the comet back to 0deg under the pointer. */
            animation-play-state: paused;
        }

        /* Keyboard is deliberately OUTSIDE the hover query: focus deserves
           the same answer as the pointer. */
        .ezn-worth__card:focus-within::after { opacity: 1; animation-play-state: running; }
    }

    /* ── Head ─────────────────────────────────────────────────────────── */

    .ezn-worth__head {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 16px;
        margin-bottom: 16px;
        /* Dashed, not solid: it separates a heading from its copy rather
           than dividing two blocks, and `/` draws it that way. */
        border-bottom: 1px dashed var(--ezn-line-strong);
    }

    /* A SOLID tone fill with a white glyph, not the soft tinted chip the
       rest of this page uses. That is the one place `/`'s library column
       departs from the house style, and it is what makes the reference read
       as it does. The sheen supplies the second gradient stop, so no
       per-tone "light twin" token has to exist. */
    .ezn-worth__ico {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 46px; height: 46px;
        border-radius: 13px;
        background-color: var(--ezn-tone-plate);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
        /* `--hpx-ink-invert` is #FFFFFF in BOTH themes (checked against the
           emitted block, not assumed) — the plate is what changes at night,
           to a brighter tone, so the glyph stays white. */
        color: var(--hpx-ink-invert, #fff);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .24),
            0 8px 18px -8px var(--ezn-tone-plate);
        transition: transform .3s var(--hpx-a-ease, cubic-bezier(.22,.61,.36,1)), box-shadow .3s ease;
    }
    .ezn-worth__ico svg { width: 22px; height: 22px; display: block; }

    /* Dark keeps the sheen only — the fill is `--ezn-tone-plate`, which
       carries a real dark value of its own. */
    body.theme-dark .ezn-worth__ico {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 8px 18px -8px rgba(0, 0, 0, .8);
    }

    /* `min-width: 0` is what keeps a long title wrapping inside the column
       instead of forcing the flex row wider than the card. */
    .ezn-worth__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

    /* ⚠ (0,3,1), and it has to be. `custom.ltr.css` carries
       `body:not(.admin-shell):not(.theme-dark) h3 { color: var(--ez-ink) }`
       at (0,3,1) plus a `.theme-dark` metric mirror at (0,2,2); a plain
       `.ezn-worth__title` at (0,1,0) sets nothing but the size. Weight,
       line-height and letter-spacing are LEFT to that global rule on
       purpose — `/`'s own `.hpx-libcol-title` loses to it too, so matching
       the homepage means inheriting the same metrics, not out-ranking them. */
    .ezn-worth .ezn-worth__card .ezn-worth__title {
        font-size: 16.8px;
        margin: 0;
        color: var(--ezn-ink);
        transition: color .2s ease;
    }

    /* The tone pill. No leading dot: the tint, the ring and the tone ink
       already carry the signal, and the marker only crowded a short label. */
    .ezn-worth__pill {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        max-width: 100%;
        padding: 3px 9px;
        border-radius: var(--hpx-r-pill, 999px);
        background-color: var(--ezn-tone-bg);
        border: 1px solid var(--ezn-tone-line);
        color: var(--ezn-tone-fg);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: .02em;
    }
    /* The label wraps rather than being clipped — the pill is short, but a
       translation can be twice the English length and no word of it should
       disappear. */
    .ezn-worth__pill span { min-width: 0; }

    /* ── Copy ─────────────────────────────────────────────────────────── */

    /* `flex: 1` is what keeps four cards in a row the same height when their
       copy runs to different line counts, and pushes every button onto the
       same baseline. No clamp: the copy is short and all of it shows. */
    .ezn-worth__text {
        flex: 1 1 auto;
        margin: 0 0 18px;
        color: var(--ezn-muted);
        font-size: var(--hpx-fs-body, 15px);
        line-height: var(--hpx-lh-body, 1.66);
    }

    /* ── The card's own button ────────────────────────────────────────── */

    /* 10px radius, not a pill — `/` draws it as a rounded rectangle. At
       (0,2,0) because it is an <a> that would otherwise inherit body ink.
       The site-wide focus ring (`body:not(.admin-shell) a:focus-visible`,
       (0,3,1)) is deliberately left to win: one ring, sitewide, is the
       whole point of that rule. */
    .ezn-worth .ezn-worth__more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: flex-start;
        margin-top: auto;
        padding: 9px 14px;
        border: 1px solid var(--ezn-tone-line);
        border-radius: 10px;
        background-color: var(--ezn-tone-bg);
        color: var(--ezn-tone-fg);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -.005em;
        line-height: 1.2;
        transition: background-color .18s ease, background-image .18s ease, color .18s ease,
                    border-color .18s ease, transform .18s ease, box-shadow .18s ease, gap .18s ease;
    }
    .ezn-worth__more svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .18s ease; }
    [dir="rtl"] .ezn-worth__more svg { transform: scaleX(-1); }

    /* ── Hover choreography ───────────────────────────────────────────── */

    @media (hover: hover) and (pointer: fine) {
        .ezn-worth__card:hover {
            transform: translateY(-5px);
            border-color: rgba(var(--ezn-tone-rgb), calc(var(--ezn-p-edge) + .22));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .8),
                0 1px 2px rgba(16, 24, 40, .05),
                0 22px 44px -26px rgba(var(--ezn-tone-rgb), .52),
                0 14px 30px -22px rgba(16, 24, 40, .28);
        }
        body.theme-dark .ezn-worth__card:hover {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .07),
                0 1px 2px rgba(0, 0, 0, .45),
                0 22px 44px -26px rgba(var(--ezn-tone-rgb), .46),
                0 14px 30px -22px rgba(0, 0, 0, .82);
        }

        .ezn-worth__card:hover::before { opacity: 1; transform: translateY(0); }
        .ezn-worth__card:hover::after  { opacity: 1; animation-play-state: running; }

        /* The card steps BACK the moment its button claims the pointer, so
           the thing under the cursor always wins — the same choreography `/`
           runs. Without `:has()` the card simply stays lit: a degradation,
           not a break. */
        .ezn-worth__card:has(.ezn-worth__more:hover)::after { opacity: .3; }

        .ezn-worth__card:hover .ezn-worth__ico { transform: scale(1.08) rotate(-5deg); }

        /* ⚠ (0,4,1) on purpose. The global light-mode `h3` colour rule is
           (0,3,1); a `.ezn-worth__card:hover .ezn-worth__title` at (0,3,0)
           would lose and the title would stay ink by day and turn tone by
           night — the same split that made the CTA heading go black. */
        body:not(.admin-shell) .ezn-worth__card:hover .ezn-worth__title { color: var(--ezn-tone-fg); }

        .ezn-worth .ezn-worth__more:hover {
            gap: 10px;
            background-color: var(--ezn-tone-plate);
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 100%);
            border-color: transparent;
            color: var(--hpx-ink-invert, #fff);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px -8px var(--ezn-tone-plate);
        }
        body.theme-dark .ezn-worth .ezn-worth__more:hover {
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
            box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
        }
        .ezn-worth__more:hover svg { transform: translateX(3px); }
        [dir="rtl"] .ezn-worth__more:hover svg { transform: scaleX(-1) translateX(3px); }
    }

    /* ── Responsive ───────────────────────────────────────────────────── */

    /* Tablet: two up. Four columns below ~1100px puts the titles on three
       lines each and the row goes ragged. */
    @media (max-width: 1024px) {
        .ezn-worth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    }

    @media (max-width: 560px) {
        .ezn-worth { grid-template-columns: minmax(0, 1fr); gap: 14px; }
        .ezn-why  { padding-block: 56px 32px; }
        .ezn-head { margin-bottom: 32px; }

        .ezn-worth__card { padding: 20px 18px 20px; border-radius: var(--ezn-radius-xs); }
        .ezn-worth__card::before { inset-inline: 16px; }
        .ezn-worth__head { gap: 12px; padding-bottom: 14px; margin-bottom: 14px; }
        .ezn-worth__ico  { width: 42px; height: 42px; border-radius: 12px; }
        .ezn-worth__ico svg { width: 20px; height: 20px; }
        .ezn-worth .ezn-worth__card .ezn-worth__title { font-size: 16px; }
        .ezn-worth__text { margin-bottom: 16px; }
        /* One-up: the button spans the card, which is the only width worth
           tapping on a phone. */
        .ezn-worth .ezn-worth__more { align-self: stretch; justify-content: center; padding: 11px 14px; }
    }

    /* ── A11y and reduced motion ──────────────────────────────────────── */

    /* On a touch screen the ring can never be triggered, and an animation
       that can never run is still a compositor layer per card. Suppressing
       it there is a battery decision, not a design one — the wash, the
       tinted edge and the plate all remain. */
    @media (hover: none) {
        .ezn-worth__card::after { animation: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        /* The ring still APPEARS on focus — it is state, and removing state
           is not what reduced motion asks for. What stops is the sweep. */
        .ezn-worth__card::after { animation: none !important; }
        .ezn-worth__card,
        .ezn-worth__card::before,
        .ezn-worth__ico,
        .ezn-worth__more { transition: none !important; }
        .ezn-worth__card:hover { transform: none; }
        .ezn-worth__card:hover .ezn-worth__ico { transform: none; }
    }

    /* Every layer above is decorative and none of it survives a forced
       palette intact — a conic in system colours is a grey smear across the
       border. The hairline comes back as a real border, which is all forced
       colours needs from these cards. */
    @media (forced-colors: active) {
        .ezn-worth__card::after,
        .ezn-worth__card::before { display: none; }
        .ezn-worth__card {
            background-image: none;
            border: 1px solid CanvasText;
            box-shadow: none;
        }
    }

    /* =====================================================================
       CTA BANNER  (§EZNWHY · cta)
       ---------------------------------------------------------------------
       The one surface on this page that is the SAME in both themes: a brand
       gradient with white text. That is the point — the old panel was a hard
       `#EAF2FD` wash that only worked by day, and its heading read
       white-on-pale in dark. A deep brand fill needs no per-theme ink at all,
       and white clears 6:1 against every stop of it.
       ===================================================================== */

    /* Vertical only — §VPMATCH. */
    .ezn-cta-wrap { padding-block: calc(var(--ezn-band) * .8) calc(var(--ezn-band) * 1.5); }

    .ezn-cta {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 28px;
        border-radius: 26px;
        padding: 32px 36px;
        /* Every stop solved against its own text, not eyeballed: white .78 on
           the LIGHTEST stop is the binding constraint at 4.79:1, and #1B4E9C
           is the site's own `--hpx-brand-700`. An earlier, brighter ramp put
           the kicker at 3.70:1. */
        background-image: linear-gradient(135deg, #1F58B4 0%, #1B4E9C 46%, #174280 100%);
        box-shadow: 0 30px 64px -32px rgba(27,78,156,.7);
    }
    .ezn-cta__glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
    }
    .ezn-cta__glow--a {
        width: 300px; height: 300px; top: -150px; left: 8%;
        background-image: radial-gradient(circle, rgba(140,190,250,.55) 0%, rgba(140,190,250,0) 70%);
    }
    .ezn-cta__glow--b {
        width: 340px; height: 340px; bottom: -190px; right: 4%;
        background-image: radial-gradient(circle, rgba(139,110,246,.45) 0%, rgba(139,110,246,0) 70%);
    }
    .ezn-cta__grid {
        position: absolute; inset: 0;
        background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
        background-size: 26px 26px;
        -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 58%);
                mask-image: linear-gradient(105deg, #000 0%, transparent 58%);
        pointer-events: none;
    }
    .ezn-cta > *:not(.ezn-cta__glow):not(.ezn-cta__grid) { position: relative; z-index: 1; }

    .ezn-cta__art {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 84px; height: 84px;
        border-radius: 22px;
        background-color: rgba(255,255,255,.12);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.24),
                    0 16px 30px -18px rgba(0,0,0,.6);
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .35s;
    }
    .ezn-cta__art svg { width: 46px; height: 46px; display: block; }

    .ezn-cta__body { min-width: 0; }
    .ezn-cta__kicker {
        display: block;
        color: rgba(255,255,255,.78);
        font-size: 11.5px; font-weight: 800;
        letter-spacing: .16em; text-transform: uppercase;
        margin-bottom: 8px;
    }
    .ezn-cta__title {
        color: #fff;
        font-size: clamp(21px, 2.4vw, 28px);
        font-weight: 800;
        margin: 0 0 8px;
        line-height: 1.2;
        letter-spacing: -.022em;
    }

    /* ⚠ The `color:#fff` above is (0,1,0) and LOSES to custom.ltr.css's
       `body:not(.admin-shell):not(.theme-dark) h3` — (0,3,1) — which paints
       every public heading `--ez-ink`. That rule is guarded `:not(.theme-dark)`,
       so the guard fails by night and the kit's white wins, but it holds by
       day: the same brand gradient carried a white title in dark and a
       near-black one in light. This restates the colour at (0,4,1) so the
       panel's own ink wins in BOTH themes, matching the kicker and the body
       copy beside it (a span and a p, which that heading rule never touched).
       Colour only — the metrics above are deliberately left alone: the light
       rule and its `.theme-dark` metric mirror override them identically, so
       the two themes still set this line the same way. */
    body:not(.admin-shell) .ezn-cta .ezn-cta__body .ezn-cta__title { color: #fff; }
    .ezn-cta__text {
        color: rgba(255,255,255,.86);
        font-size: 15px; margin: 0;
        max-width: 56ch;
        line-height: 1.55;
    }

    /* Inverted button: white on the brand panel. A brand-blue button on a
       brand-blue panel would be the one place the site's own CTA disappears
       into its own background. */
    .ezn-cta__btn {
        white-space: nowrap;
        padding: 0 26px;
        height: 52px;
        font-size: 15.5px;
        border-radius: 14px;
        background-color: #fff;
        color: #174280;
        box-shadow: 0 14px 28px -14px rgba(0,0,0,.55);
        transition: transform .22s, box-shadow .28s, background-color .28s;
    }
    .ezn-cta__btn .ezn-btn__arr { transition: transform .22s; }

    @media (hover: hover) {
        .ezn-cta:hover .ezn-cta__art {
            transform: rotate(-3deg) scale(1.05);
            background-color: rgba(255,255,255,.2);
        }
        .ezn-cta__btn:hover {
            color: #174280;
            transform: translateY(-2px);
            box-shadow: 0 22px 38px -16px rgba(0,0,0,.62);
        }
        .ezn-cta__btn:hover .ezn-btn__arr { transform: translateX(4px); }
    }

    @media (max-width: 1024px) {
        .ezn-cta { grid-template-columns: auto minmax(0, 1fr); gap: 22px 24px; }
        /* The button drops to its own row and spans both columns rather than
           squeezing the copy into a 2-word rag. */
        .ezn-cta__btn { grid-column: 1 / -1; justify-self: start; }
    }

    @media (max-width: 640px) {
        .ezn-cta-wrap { padding-block: 32px 60px; }
        .ezn-cta { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 28px 22px; gap: 18px; }
        .ezn-cta__art { justify-self: center; width: 72px; height: 72px; border-radius: 20px; }
        .ezn-cta__art svg { width: 40px; height: 40px; }
        .ezn-cta__text { margin-inline: auto; }
        .ezn-cta__btn { justify-self: stretch; }
    }

    /* ══════════════════════════ TOASTS ══════════════════════════
       These are emitted by assets/js/newsletter-public.js (§NLX, was newsletter/assets/js/main.js) as
       `.nl-toast` / `.nl-toast__icon` / `.nl-toast__body` / `.nl-toast__close`.
       The rules here used to be written against `.ezn-toast*`, a name nothing
       ever renders — so every message on this page appeared as naked black text
       with a default grey button. The selectors below are the ones main.js
       actually emits; the `.ezn-` twins are kept only so a future rename of the
       JS does not silently strip the styling again.

       The icon is drawn from a masked inline SVG rather than the Font Awesome
       glyph main.js asks for: it requests FA6 names (`fa-solid fa-circle-check`)
       and this build is FA Free 5.15.3, where those do not exist — so the <i>
       renders a blank box. Masking makes the icon independent of any icon font,
       and `content: none` kills the empty FA pseudo underneath. */
    .nl-toast-wrap,
    .ezn-toast-wrap {
        position: fixed;
        top: calc(var(--hd-h, 76px) + 16px);
        right: 20px;
        z-index: 2147483000;      /* above the sticky header and the mega panels */
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: min(380px, calc(100vw - 32px));
        pointer-events: none;      /* the page stays clickable between toasts */
    }

    .nl-toast,
    .ezn-toast {
        --nl-accent: var(--ezn-primary, #3680ED);
        --nl-tint:   rgba(54, 128, 237, .13);
        --nl-ico:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.4M12 7.7h.01'/%3E%3C/svg%3E");

        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 14px 14px 18px;
        border-radius: 18px;
        border: 1px solid var(--ezn-line, #ECECEC);
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        box-shadow: 0 24px 48px -28px rgba(15, 23, 42, .55),
                    0 2px 8px -4px rgba(15, 23, 42, .18),
                    inset 0 1px 0 rgba(255, 255, 255, .7);
        color: var(--ezn-ink, #111);
        font-size: 14px;
        pointer-events: auto;
        /* Slides in from the right and settles. main.js removes `is-show` and
           deletes the node 400ms later, so nothing here may exceed that. */
        transform: translateX(26px) scale(.97);
        opacity: 0;
        transition: transform .34s cubic-bezier(.22, 1, .36, 1),
                    opacity .28s ease,
                    box-shadow .24s ease;
    }

    .nl-toast.is-show,
    .ezn-toast.is-show { transform: translateX(0) scale(1); opacity: 1; }

    /* Accent rail — the fastest read of "did that work?". */
    .nl-toast::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--nl-accent), color-mix(in srgb, var(--nl-accent) 55%, #fff));
        border-radius: 0 4px 4px 0;
    }

    /* Countdown to the 4.5s auto-dismiss, so the toast is not just gone. */
    .nl-toast::after {
        content: '';
        position: absolute;
        left: 0; bottom: 0;
        height: 2px;
        width: 100%;
        transform-origin: left center;
        background: var(--nl-accent);
        opacity: .32;
        animation: nl-toast-timer 4.5s linear forwards;
    }

    @keyframes nl-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

    .nl-toast__icon,
    .ezn-toast__ico {
        position: relative;
        flex: none;
        width: 34px; height: 34px;
        border-radius: var(--hpx-r-sm, 10px);
        background: var(--nl-tint);
        font-size: 0;            /* no glyph, no stray line-height */
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    }

    .nl-toast__icon::before { content: none; }   /* kill the empty FA pseudo */

    .nl-toast__icon::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--nl-accent);
        -webkit-mask: var(--nl-ico) center / 19px 19px no-repeat;
        mask: var(--nl-ico) center / 19px 19px no-repeat;
    }

    .nl-toast__body,
    .ezn-toast__body {
        flex: 1 1 auto;
        min-width: 0;
        padding-top: 6px;
        line-height: 1.5;
        font-weight: 600;
        color: var(--ezn-ink, #111);
        overflow-wrap: break-word;   /* long messages wrap, never truncate */
    }

    .nl-toast__close,
    .ezn-toast__close {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px; height: 28px;
        margin-top: 2px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--ezn-muted, #666);
        font-size: 19px;
        line-height: 1;
        cursor: pointer;
        transition: background-color .18s ease, color .18s ease, transform .18s ease;
    }

    /* Per-type accent + icon. Semantic, and the only thing that changes. */
    .nl-toast--success {
        --nl-accent: #0CA678;
        --nl-tint: rgba(12, 166, 120, .14);
        --nl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12.3 2.5 2.5 4.7-5.1'/%3E%3C/svg%3E");
    }

    .nl-toast--error {
        --nl-accent: #E03131;
        --nl-tint: rgba(224, 49, 49, .13);
        --nl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2M12 16.4h.01'/%3E%3C/svg%3E");
    }

    .nl-toast--warning {
        --nl-accent: #B45309;
        --nl-tint: rgba(245, 158, 11, .16);
        --nl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.6 17.3A2 2 0 0 0 4.3 20h15.4a2 2 0 0 0 1.7-2.7L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4.2M12 16.8h.01'/%3E%3C/svg%3E");
    }

    @media (hover: hover) and (pointer: fine) {
        .nl-toast:hover {
            box-shadow: 0 30px 56px -28px rgba(15, 23, 42, .62),
                        0 2px 8px -4px rgba(15, 23, 42, .2),
                        inset 0 1px 0 rgba(255, 255, 255, .7);
        }
        /* Reading a long message should not race the timer. */
        .nl-toast:hover::after { animation-play-state: paused; }
        .nl-toast__close:hover { background: rgba(15, 23, 42, .07); color: var(--ezn-ink, #111); transform: scale(1.06); }
    }

    .nl-toast__close:focus-visible {
        outline: 3px solid rgba(54, 128, 237, .3);
        outline-offset: 2px;
    }

    body.theme-dark .nl-toast,
    body.theme-dark .ezn-toast {
        border-color: var(--dk-line-strong,rgba(255,255,255,.16));
        background: rgba(29,29,34,.92);
        color: var(--dk-text,#F4F5F7);
        box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95),
                    inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    body.theme-dark .nl-toast__body { color: var(--dk-text,#F4F5F7); }
    body.theme-dark .nl-toast__icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
    body.theme-dark .nl-toast__close { color: var(--dk-text-3,#9AA0AB); }
    body.theme-dark .nl-toast__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

    /* Phones: bottom of the screen, full width — top-right is the one corner a
       thumb cannot reach, and the header already owns it. */
    @media (max-width: 640px) {
        .nl-toast-wrap,
        .ezn-toast-wrap {
            top: auto;
            bottom: 16px;
            left: 12px;
            right: 12px;
            width: auto;
        }
        .nl-toast,
        .ezn-toast { transform: translateY(18px) scale(.98); }
        .nl-toast.is-show,
        .ezn-toast.is-show { transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .ezn-page * { transition: none !important; animation: none !important; }
    }

    /* Dark mode — design.md §2.2 */
    body.theme-dark:has(.ezn-page),
    body.theme-dark:has(.ezn-page) .page-wrapper,
    body.theme-dark:has(.ezn-page) .page-content,
    body.theme-dark:has(.ezn-page) .container,
    body.theme-dark:has(.ezn-page) .card,
    body.theme-dark:has(.ezn-page) .card-body { background: var(--dk-bg,#0E0E11) !important; }
    /* WHAT IS LEFT OF THE DARK TOKEN BLOCK.
       Everything colour-, radius- and shadow-shaped now flows from
       `body.theme-dark .hpx` through the aliases above — roughly forty
       declarations deleted here on 2026-08-31. These four have no `--hpx-*`
       source and so are still stated twice. */
    body.theme-dark .ezn-page {
        /* The dark accent is INK, not a fill: white on #60A4F5 is 2.58:1.
           `ai-contrast-fix.css` publishes the ramp the site's other ten kits
           use for exactly this, worst point 6.27:1. */
        --ezn-grad: linear-gradient(135deg,
                        var(--aa-fill-1, #2E6FD0) 0%,
                        var(--aa-fill-2, #2762C2) 52%,
                        var(--aa-fill-3, #1B4E9E) 100%);

        /* `--hpx-bg-2` is #131317 by night — darker than the card, so a row
           filled with it would read as a hole rather than a raised surface.
           A brand wash at low alpha is the dark equivalent of the light
           tint. */
        --ezn-primary-tint2: rgba(54,128,237,.10);

        /* `--hpx-ink-faint` is 3.68:1 on the dark field. #838994 is the
           dimmest value on that rung that clears 4.5 (4.77). */
        --ezn-placeholder:  #838994;

        /* The rose BG is a .18-alpha wash in dark, which is right for a chip
           but too weak for a focus ring; the ring wants the line value. */
        --ezn-danger-ring: var(--hpx-t-rose-line, rgba(251,113,133,.30));
    }
    /* The card and the field now read `--ezn-surface` / `--ezn-field`, both
       remapped in the token block above, so the three rules that used to
       restate those surfaces here are gone — one source of truth per surface.
       What is genuinely theme-specific is the inner highlight: a 70%-white
       top edge is a lit card by day and a grey seam by night. */
    body.theme-dark .ezn-sub__ico {
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.14),
            0 24px 44px -20px rgba(0,0,0,.8);
    }
    body.theme-dark .ezn-toast { background: var(--dk-surface-2,#17171B); color: var(--dk-text,#F4F5F7); border: 1px solid var(--dk-line,rgba(255,255,255,.10)); }
    

    /* ---------------------------------------------------------------------
       DARK · HERO  (§EZNHERO)
       The token remap above already moves every brand hue. What is left here
       is the handful of places that paint WHITE rather than a token — inner
       highlights, sheens, and the ambient layer — because a white highlight
       is correct in light and fog in dark.
       --------------------------------------------------------------------- */

    /* Dots at .14 blue vanish on #0E0E11. Brightened, and the whole mesh is
       pulled back so it reads as texture rather than a visible pattern. */
    body.theme-dark .ezn-hero__mesh {
        background-image: radial-gradient(circle at 1px 1px, rgba(140,190,250,.13) 1px, transparent 0);
    }

    body.theme-dark .ezn-badge {
        background-image: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 52%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 1px 2px rgba(0,0,0,.4),
            0 12px 26px -14px rgba(0,0,0,.7);
    }
    body.theme-dark .ezn-badge::before {
        background-image: linear-gradient(135deg,
            rgba(96,164,245,.42) 0%,
            var(--dk-line,rgba(255,255,255,.10)) 44%,
            var(--dk-line,rgba(255,255,255,.10)) 58%,
            rgba(139,110,246,.42) 100%);
    }

    body.theme-dark .ezn-btn--outline {
        background-color: var(--dk-surface-2,#17171B);
        border-color: var(--dk-line-strong,rgba(255,255,255,.16));
        box-shadow: 0 1px 2px rgba(0,0,0,.4);
    }


    /* Only the inner highlight. Surface, border and lift all come from the
       tokens now — a 70%-white top edge is a lit card by day and a grey seam
       by night, which is the one thing no token can express. */
    body.theme-dark .ezn-issue {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            var(--ezn-shadow);
    }
    /* ⚠ The subscribe panel is SPLIT OUT of the rule above, and has to be.
       It now carries §HPXP's four-layer lift with the tone in it (§EZNSUB);
       the shared two-layer dark shadow would out-rank that at (0,2,1) and
       silently flatten the panel back to a plain grey card after dark — the
       only theme where it would ever be seen. Same four layers, dark alphas. */
    body.theme-dark .ezn-sub {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 1px 2px rgba(0, 0, 0, .42),
            0 22px 46px -26px rgba(var(--ezn-tone-rgb), .36),
            0 14px 32px -22px rgba(0, 0, 0, .78);
    }
    /* The gloss on the card goes from a 55% white wash to a 6% one. Anything
       stronger reads as a grey card rather than a lit dark one. */
    body.theme-dark .ezn-issue__sheen {
        background-image: linear-gradient(150deg, rgba(255,255,255,.06) 0%, transparent 46%);
    }

    body.theme-dark .ezn-float {
        background-color: rgba(28,28,33,.88);
        border-color: var(--dk-line-strong,rgba(255,255,255,.16));
        box-shadow: 0 18px 34px -20px rgba(0,0,0,.9);
    }


    /* The card's story rows and footer, dark. `--ezn-primary-tint2` at .10
       alpha is the resting row surface and it reads correctly on #17171B, so
       only the pieces that paint WHITE need restating here. */
    body.theme-dark .ezn-issue__row { box-shadow: none; }
    body.theme-dark .ezn-issue__row:hover { box-shadow: 0 12px 22px -14px rgba(0,0,0,.8); }
    body.theme-dark .ezn-issue__av { box-shadow: 0 0 0 2px var(--dk-surface-2,#17171B); }
    /* Amber stars hold up on both canvases, but the dark card wants the
       brighter rung so they do not sink into the surface. */

    /* ---------------------------------------------------------------------
       DARK · WHY BAND  (§EZNWHY)
       The card surface itself needs nothing: it reads `--ezn-surface`, which
       the token block above already moves to `--dk-surface-2`. What is left
       is the drop shadow — a 4%-black lift is invisible on #0E0E11 — and the
       amber tone, whose light pair is a pastel plate that glows on a dark
       card. The other three tones were already remapped for the hero chips.

       The CTA panel is deliberately absent from this block. It is a brand
       gradient with white text in BOTH themes, so it has no dark variant to
       maintain — see the note on the rule itself.
       --------------------------------------------------------------------- */

    /* The ring reads `--ezn-primary*`, which the token block already moves, so
       only its weight changes by night: a 75%-opacity brand hairline that is
       tasteful on white is a bright outline on #0E0E11. */
    body.theme-dark .ezn-sub::before { opacity: .5; }