/*
 * v4-hero.css — the v4 hero, ported for WordPress.
 *
 * Source of truth: app.lendzi.com, branch feature/scrum-508-mobile-layout-trust-badge,
 * commit 9bfba650732c913205e198302de3f2d185d73264, public/css/v4.css.
 * See includes/v4-hero/SYNC.md for the port table and the divergences.
 *
 * Section A is a VERBATIM subset of v4.css with exactly one mechanical
 * substitution: the scope root `.v4-page ` becomes `.lz-v4 `, matching the
 * substitution TASK-521-01 recorded for the card. Specificity is unchanged on
 * both sides of that swap (0,2,0), because `.lz-v4` is an ancestor here — it is
 * applied to Elementor's document wrapper, not to the hero section.
 *
 * Section B has no upstream counterpart. It neutralises host CSS that the funnel
 * page never meets, bridges Elementor's wrapper divs, and restores two
 * line-heights that TASK-521-01's shared neutraliser outranks. Every rule there
 * was found by reading the host CSS or by computed-style diff, not guessed.
 *
 * px only, no rem: lendzi-theme sets html { font-size: 62.5% }, so a rem copied
 * from v4 (which assumes 16px) would render at 62.5% of intended.
 */

/* ==========================================================================
   A1. DESIGN TOKENS  (28 properties)                    [v4.css 43-82, verbatim]

   Duplicated from css/v4-amount-card.css:19-52 rather than shared. This is
   deliberate and load-bearing: if the hero's tokens came from the card's
   stylesheet, switching the card OFF would strip all 28 values and the scoped
   reset out from under the hero. The duplication is only cascade-safe while the
   two blocks are BYTE-IDENTICAL — equal specificity plus equal declarations
   makes enqueue order unobservable. Verify with:
     diff <(sed -n '19,52p' css/v4-amount-card.css) <(sed -n '/A1. DESIGN/,/^}/p' css/v4-hero.css)
   Extracting a shared css/v4-base.css is the intended endgame, once TASK-521-04
   makes a third consumer — but it would modify TASK-521-01's shipped stylesheet,
   which this card may not do.
   ========================================================================== */


.lz-v4 {
    --lz-green:        #20c58a;
    --lz-green-deep:   #169e6e;
    --lz-green-soft:   #d6f3e6;
    --lz-green-mist:   #ebf9f2;

    --lz-teal:         #0e3742;
    --lz-teal-deep:    #082730;
    --lz-teal-mid:     #1c4d59;
    --lz-teal-line:    #1a4a55;

    --lz-paper:        #f6f4ef;
    --lz-paper-2:      #efebe2;
    --lz-white:        #ffffff;
    --lz-ink:          #0a2a32;
    --lz-mute:         #5b7480;
    --lz-line:         #e3e0d6;
    --lz-line-2:       #d6d2c5;

    --lz-amber:        #e8a23a;
    --lz-amber-soft:   #fbe9c7;

    --lz-display:      'Sansation', 'Manrope', system-ui, sans-serif;
    --lz-body:         'Albert Sans', 'Manrope', system-ui, sans-serif;
    --lz-mono:         'JetBrains Mono', ui-monospace, monospace;

    --lz-r-sm:         8px;
    --lz-r-md:         14px;
    --lz-r-lg:         22px;
    --lz-r-xl:         32px;
    --lz-r-pill:       999px;

    --lz-shadow-sm:    0 1px 2px rgba(10,42,50,.06), 0 1px 1px rgba(10,42,50,.04);
    --lz-shadow-md:    0 8px 24px -8px rgba(10,42,50,.12), 0 2px 6px rgba(10,42,50,.05);
    --lz-shadow-lg:    0 28px 60px -20px rgba(10,42,50,.22), 0 6px 14px rgba(10,42,50,.06);
}

/* ==========================================================================
   A2. SCOPED RESET + PAGE BASE                         [v4.css 84-125, verbatim]

   `line-height: 1.5` here is why the type scale reproduces at all: v4's h3
   (45px) and lede (27px) are INHERITED from this unitless number, not declared.
   ========================================================================== */

.lz-v4,
.lz-v4 *,
.lz-v4 *::before,
.lz-v4 *::after {
    box-sizing: border-box;
}

.lz-v4 {
    margin: 0;
    padding: 0;
    font-family: var(--lz-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--lz-ink);
    background: var(--lz-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.lz-v4 h1, .lz-v4 h2, .lz-v4 h3, .lz-v4 h4, .lz-v4 p,
.lz-v4 ul, .lz-v4 ol, .lz-v4 figure, .lz-v4 button {
    margin: 0;
    padding: 0;
}

.lz-v4 ul, .lz-v4 ol { list-style: none; }
.lz-v4 a { color: inherit; text-decoration: none; }
.lz-v4 img, .lz-v4 svg { display: block; max-width: 100%; }
.lz-v4 button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* v4.css:124-125 declare the .lz-display and .lz-mono utilities here. They are
   DELIBERATELY NOT PORTED, and this is the one place the "byte-identical
   duplication is cascade-neutral" argument at A1 does not hold.

   Those two are the only (0,2,0) selectors in v4.css's A2 block. Everything
   else in it is (0,1,1) or lower, so it cannot outrank a component rule
   whatever the source order. `.lz-v4 .lz-mono` CAN: it ties at (0,2,0) with
   css/v4-amount-card.css's `.lz-v4 .v4-hero__card-step { letter-spacing: 0.1em }`,
   and because this stylesheet loads after the card's, duplicating it here won
   the tie and flattened the STEP label's tracking from 1.1px to 0. Measured in
   the computed diff, traced with CSS.getMatchedStylesForNode, which showed
   `.lz-v4 .lz-mono` matching twice — once from each file.

   The hero uses neither class: its rules set font-family from the tokens
   directly. So the correct fix is not to port them. If a later card needs
   them, extract a shared base rather than duplicating them again.

   Equal specificity plus equal declarations is only unobservable for a rule
   against ITSELF. It is very observable when the duplicated rule competes with
   a DIFFERENT rule in the other stylesheet. */

/* ==========================================================================
   A3. THE CHIP PRIMITIVE                              [v4.css 169-190, verbatim]

   Not ported by TASK-521-01 — the card does not use it. The hero does, twice
   (desktop chip and its mobile twin).
   ========================================================================== */

.lz-v4 .lz-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--lz-r-pill);
    background: var(--lz-green-mist);
    color: var(--lz-teal);
    font-family: var(--lz-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
}
.lz-v4 .lz-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lz-green);
    box-shadow: 0 0 0 4px rgba(32,197,138,.18);
}


/* ==========================================================================
   A4. HERO — SHELL AND COPY COLUMN                    [v4.css 248-320, verbatim]

   `.v4-hero__inner` is declared here for fidelity, but Elementor gives the hero
   no element to carry it: `.elementor-container` takes its place. See B5.
   Stops at 320: from 322 the card is TASK-521-01's.
   ========================================================================== */

.lz-v4 .v4-hero {
    background: var(--lz-paper);
    padding: 48px 56px 0;
}
.lz-v4 .v4-hero__inner {
    display: grid;
    grid-template-columns: 1fr 540px;
    gap: 48px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

/* Left — value prop */
.lz-v4 .v4-hero__copy { padding-block: 32px; }
.lz-v4 .v4-hero__chip { margin-bottom: 24px; }

.lz-v4 .v4-hero__headline {
    font-family: var(--lz-display);
    font-size: 76px;
    line-height: 1.02;
    font-weight: 700;
    color: var(--lz-teal);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.lz-v4 .v4-hero__headline-accent { color: var(--lz-green-deep); white-space: nowrap; }

.lz-v4 .v4-hero__lede {
    font-size: 18px;
    line-height: inherit;
    color: var(--lz-mute);
    max-width: 520px;
    margin: 0 0 28px;
    font-weight: 500;
}
/* Mobile-only lede variant — hidden by default on desktop, shown by the mobile media query. */
.lz-v4 .v4-hero__lede_mobile { display: none; }

.lz-v4 .v4-hero__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: var(--lz-body);
    font-size: 14px;
    color: var(--lz-teal);
    font-weight: 700;
}
.lz-v4 .v4-hero__checks li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lz-v4 .v4-hero__funds-asterisk {
    font-size: 0.85em;
    font-weight: 700;
    margin-left: -5px;
}
.lz-v4 .v4-hero__checks-disclaimer {
    margin: 14px 0 0;
    max-width: 520px;
    font-family: var(--lz-body);
    font-size: 11px;
    line-height: 1.45;
    color: var(--lz-mute);
    font-weight: 400;
}
.lz-v4 .v4-hero__checks-disclaimer::before {
    content: none;
}
.lz-v4 .v4-hero__checks-disclaimer_mobile,
.lz-v4 .v4-hero__chip_mobile { display: none; }

/* ==========================================================================
   A5. HERO MOBILE, <= 900px                           [v4.css 849-882, verbatim]

   Stops at 882. From 883 (`__continue-note`, `__card`, `__pill`) the block is
   already TASK-521-01's A5 at css/v4-amount-card.css:239-250.
   ========================================================================== */

@media (max-width: 900px) {

    /* Hero */
    .lz-v4 .v4-hero {
        padding: 24px 20px 0;
    }
    .lz-v4 .v4-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
    }
    .lz-v4 .v4-hero__copy { padding-block: 0; }
    .lz-v4 .v4-hero__headline {
        font-size: 38px;
        line-height: 1.02;
        margin-bottom: 12px;
        max-width: 350px;
    }
    .lz-v4 .v4-hero__lede { display: none; }
    .lz-v4 .v4-hero__lede_mobile { display: block;  font-weight: 400; font-size: 16px;}
    /* Reference mobile design (image 19) hides the 3 trust checks and the "Takes about
       60 seconds" footer to keep the hero compact above the fold. */
    .lz-v4 .v4-hero__checks { display: none; }
    /* Trust checks are hidden on small screens; show a leading * on the disclaimer
       so the OnDeck-style footnote still ties to the same-day funding claim. */
    .lz-v4 #v4-hero-funds-disclaimer { display: none; }
    .lz-v4 .v4-hero__checks-disclaimer_mobile { display: block; }
    .lz-v4 .v4-hero__checks-disclaimer {
        margin-top: 0;
        font-size: 10px;
    }
    .lz-v4 .v4-hero__checks-disclaimer::before {
        content: '*';
        font-weight: 700;
        margin-right: 0.2em;
    }
}

/* ==========================================================================
   A6. HERO, <= 375px                                 [v4.css 1000-1012, verbatim]

   Added to v4.css by TASK-508-01 to clear the fold on a 375x667 viewport by
   dropping the chip from flow and re-showing it after the card.
   ========================================================================== */

@media (max-width: 375px) {

    /* Hero — the amount widget has to clear the fold on a 375x667 viewport, which
       it does not with the chip in flow. 390-wide phones keep both. */
    .lz-v4 .v4-hero {
        padding: 12px 20px 0;
    }
    .lz-v4 .v4-hero__chip { display: none; }
    .lz-v4 .v4-hero__chip_mobile {
        display: inline-flex;
        justify-self: center;
    }
}

/* ======================== END OF PORTED SECTION ========================== */

/* ==========================================================================
   B1. FONTS

   Albert Sans is the hero's body face. One variable file covers every weight
   the hero asks for, as Google serves it. Same-origin and relative-path, so it
   costs no third-party request on the homepage's critical path.

   JetBrains Mono is deliberately NOT declared here. It is used only by the
   card's STEP label, it is declared only in css/v4-amount-card.css, and leaving
   it out of this file is what keeps a real per-font off-switch: with the card
   switched off, JetBrainsMono-latin-400.woff2 is not requested at all.

   Sansation is not declared here either, and cannot be: lendzi-theme already
   serves all six cuts from assets/fonts/ and applies it to h1-h6 site-wide
   (style.css:58-132), so --lz-display resolves through the THEME's @font-face,
   not through this plugin. That is a real cross-component dependency — the
   hero's 76px headline is its largest consumer on the site — and if the theme's
   faces ever stop loading the headline degrades silently to system-ui, because
   Manrope (the next fallback in the token) is not on this site either.
   Declaring the theme's handle as a WordPress style dependency would be worse,
   not better: a missing dependency handle makes WordPress drop THIS stylesheet
   entirely. Recorded rather than defended against. See SYNC.md.
   ========================================================================== */

@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/v4/AlbertSans-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/v4/AlbertSans-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/v4/AlbertSans-latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/v4/AlbertSans-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   B2. SHARED HOST NEUTRALISERS

   Byte-identical to the correspondingly-named rules in
   css/v4-amount-card.css:319, 362-371, 373-376, 381-383, 388-391, 402-408,
   411-416. Duplicated, not shared, for the reason given at A1: the card's
   stylesheet disappears when the card is switched off, and the hero still needs
   these. Byte-identity is what makes the duplication cascade-neutral — equal
   specificity and equal declarations mean enqueue order cannot be observed.

   Each rule neutralises a MEASURED leak from Bootstrap 4.5, the lendzi-theme
   reset or elementor-kit-7, all of which style bare <h3> and <button> where the
   funnel page styles nothing. Do not delete one without re-running the diff.
   ========================================================================== */

.lz-v4 { font-weight: 400; }

.lz-v4.lz-v4 h1,
.lz-v4.lz-v4 h2,
.lz-v4.lz-v4 h3,
.lz-v4.lz-v4 h4,
.lz-v4.lz-v4 h5,
.lz-v4.lz-v4 h6,
.lz-v4.lz-v4 p {
    line-height: inherit;
    font-variant-numeric: normal;
}

.lz-v4 button {
    text-transform: none;
    letter-spacing: normal;
}

.lz-v4 button:hover,
.lz-v4 button:focus {
    text-decoration: none;
}

.lz-v4 {
    text-align: start;
    letter-spacing: normal;
}

.lz-v4 .v4-pill:focus,
.lz-v4 .lz-btn:focus {
    outline: none;
}
.lz-v4 .v4-pill:focus-visible,
.lz-v4 .lz-btn:focus-visible {
    outline: 2px solid var(--lz-green-deep);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lz-v4 .v4-pill,
    .lz-v4 .lz-btn {
        transition: none;
    }
}

/* ==========================================================================
   B3. SPECIFICITY RESTORATION

   B2's doubled-class rule above is `.lz-v4.lz-v4 h1` — specificity (0,2,1).
   Every ported hero rule is `.lz-v4 .v4-hero__headline` — (0,2,0). The classes
   tie at two and the type selector breaks the tie, so B2's `line-height:
   inherit` OUTRANKS the hero's own declared line-height:

     .v4-hero__headline           76px x 1.02 = 77.52px  ->  76 x 1.5 = 114px
     .v4-hero__checks-disclaimer  11px x 1.45 = 15.95px  ->  11 x 1.5 = 16.5px

   The card never hit this because no card rule declares line-height on a bare
   h3 or p — it RELIES on inheritance to reach its 45px. The hero declares it
   twice, so it loses. A 114px headline reads as a design choice, not a bug,
   which is exactly the "renders plausibly wrong" failure B2 exists to prevent.

   TASK-521-01 widened that selector on purpose so this card would inherit its
   fixes, and re-narrowing it is what caused the bug it was fixing. So the fix
   here is local: re-assert the same values one step higher, at (0,3,0).

   The principled fix belongs in TASK-521-01's stylesheet, not this one:
   rewriting B2 as `.lz-v4 :where(h1,h2,h3,h4,h5,h6,p)` makes it (0,1,0), which
   still beats lendzi-theme's `h1..h6` (0,0,1) but sits BELOW every component
   rule at (0,2,0), removing the trap for every future scope. That is LOWERING a
   shared neutraliser, not narrowing it, so it stays compatible with the brief —
   but it changes a shipped stylesheet and needs the card's computed diff
   re-run. Filed against 521-01. Delete this block when that lands.

   Values are duplicated from A4/A5 above; if one changes, change both.
   ========================================================================== */

.lz-v4.lz-v4 .v4-hero__headline {
    line-height: 1.02;
    /* lendzi-theme/style.css:382 sets font-feature-settings: "lnum" on every
       h1-h6, the twin of the font-variant-numeric B2 resets. B2 resets only one
       half, so the other still inherits. v4's headline has neither. */
    font-feature-settings: normal;
}

.lz-v4.lz-v4 .v4-hero__checks-disclaimer {
    line-height: 1.45;
}

/* ==========================================================================
   B4. ELEMENT LEAKS THE CARD NEVER MET

   The card has no lists, no <sup> and no <section> root, so TASK-521-01 had no
   reason to neutralise these and they are not in B2.
   ========================================================================== */

/* lendzi-theme/style.css:574-577 sets `li { line-height: 28px; margin: .5rem 0
   0 2rem }`. A2 resets ul and ol but never li, and an inherited value loses to
   any rule that matches at all — so each of the hero's three trust checks would
   take a 28px line-height and a 5px/20px margin against v4's 21px and zero. */
.lz-v4 li {
    margin: 0;
    padding: 0;
    line-height: inherit;
}

/* lendzi-theme/style.css:461-471 and bootstrap.css:140-153 both style bare
   sub/sup: font-size 75%, line-height 0, position relative, top -0.5em. The
   funnel page resets nothing, so its funds asterisk keeps the UA's
   vertical-align: super at position static. v4 declares only font-size,
   font-weight and margin-left on it (A4 above), so the rest must be put back. */
.lz-v4 sup {
    line-height: inherit;
    position: static;
    top: auto;
    vertical-align: super;
}

/* ==========================================================================
   B5. THE ELEMENTOR BRIDGE

   v4's hero is `section.v4-hero > div.v4-hero__inner > 4 children`. Elementor
   emits `section > div.elementor-container > div.elementor-column >
   div.elementor-widget-wrap > div.elementor-widget > div.elementor-widget-container`,
   so there is no element for `.v4-hero__inner` and four extra boxes sit between
   the grid and its intended children.

   `.elementor-container` takes the inner's place, and the four intervening
   levels are set to `display: contents` so they generate no boxes at all. That
   makes the rendered box tree byte-for-byte v4's — which is what a computed
   geometry diff actually measures — and replaces roughly fourteen separate
   neutralisers (flex, width: 50%, min-height, flex-wrap, align-content,
   position, height, the kit's widget margins, the transform on
   .elementor-widget-container) with one declaration.

   It is also the only arrangement in which the mobile twins work. At <= 900px
   `.v4-hero__checks-disclaimer_mobile` and `.lz-chip.v4-hero__chip_mobile` are
   separate grid items with the grid's 24px gap between them, and at <= 375px
   the chip needs `justify-self: center`. Inside a column box they would be two
   stacked children of one item; nested in `.v4-hero__copy` they would render
   above the card, where v4's order is copy -> card -> twins.
   ========================================================================== */

/* = A4's .v4-hero__inner, relocated. Two selectors, same declarations: the
   compound one is (0,4,0) and outranks elementor-kit-7's three container caps
   (post-7.css: 1250px, 1024px at <=1024, 480px at <=544 — that last would
   render a 480px inner against v4's 504px, a silent 24px miss inside a band no
   Elementor control can reach). Unconditional, so it wins inside their media
   queries too. `position: static` undoes Elementor frontend.css's
   `.elementor-container { position: relative }`. */
.lz-v4 .v4-hero > .elementor-container,
.lz-v4 .v4-hero.elementor-section-boxed > .elementor-container {
    display: grid;
    grid-template-columns: 1fr 540px;
    gap: 48px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    position: static;
}

/* Guarded on the editor's own body class: `display: contents` removes the boxes
   Elementor's editor draws its column handles on, so the guard keeps the
   builder usable. Elementor adds `elementor-editor-active` to the preview body
   and removes it in Preview mode, so the frontend and Preview both get the
   grid. Test the editor AND its preview toggle, not only the frontend. */
body:not(.elementor-editor-active) .lz-v4 .v4-hero > .elementor-container > .elementor-column,
body:not(.elementor-editor-active) .lz-v4 .v4-hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
body:not(.elementor-editor-active) .lz-v4 .v4-hero > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
body:not(.elementor-editor-active) .lz-v4 .v4-hero > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .elementor-widget-container {
    display: contents;
}

@media (max-width: 900px) {
    /* = A5's collapse, on the relocated grid. */
    .lz-v4 .v4-hero > .elementor-container,
    .lz-v4 .v4-hero.elementor-section-boxed > .elementor-container {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
    }
}

/* With the card's switch off there is no .v4-hero__card, and a 540px second
   track would leave a void beside the copy. :has() is Baseline since 2023; in
   an older browser the off state shows that void, which is a cosmetic failure
   of an edge case rather than of the primary path. */
.lz-v4 .v4-hero > .elementor-container:not(:has(.v4-hero__card)),
.lz-v4 .v4-hero.elementor-section-boxed > .elementor-container:not(:has(.v4-hero__card)) {
    grid-template-columns: 1fr;
}

/* ==========================================================================
   B6. INSTANCE SAFETY

   v4.css:872 hides the desktop disclaimer with an ID selector,
   `#v4-hero-funds-disclaimer` (1,1,0) — ported verbatim in A5 above. An id can
   only appear once per document, so a second hero instance would keep its
   desktop disclaimer visible on mobile. Following TASK-521-01's divergence 4
   ("the class is the stable hook, not the id"), the shortcode emits the bare id
   on the first instance only and suffixes it thereafter, and every instance
   also carries `_desktop` so this class twin governs all of them.
   ========================================================================== */

@media (max-width: 900px) {
    .lz-v4 .v4-hero__checks-disclaimer_desktop {
        display: none;
    }
}

/* ==========================================================================
   B7. CLEARING THE THEME'S FIXED HEADER

   The single largest structural difference from the design source, and the main
   reason SCRUM-508's fold numbers do not transfer to this page.

   v4's funnel page has its own in-flow header, so `.v4-hero { padding: 48px 56px
   0 }` starts below it. lendzi-theme's `#site-header` is `position: fixed`
   (z-index 999), and below 1025px it is replaced by `.lendzi-mobilehder-strip`,
   which is `position: absolute`. Both are OUT OF FLOW, so the hero starts at
   y=0 and the header paints over its first 65-115px. Left uncorrected the card's
   STEP label and the chip render behind the navigation.

   This is the site's existing convention rather than a defect: page 8's own
   first section also starts at y=0 and clears the header with its own internal
   padding. So the clearance goes on the first section, here, and nothing in
   lendzi-theme is touched.

   Heights measured, not read off the stylesheets — the theme's own media
   queries say the swap is at 991px, and empirically it is at 1025px, because
   another rule moves it. Swept every width 320-1440 on this page:

       320-1024px    mobile strip     65px
       1025-1314px   desktop header  115px   (the nav wraps to two lines)
       1315px+       desktop header  101px

   Declared as a custom property so the arithmetic below stays legible and so
   the three breakpoints live in one place. These are NOT v4 tokens and are
   deliberately not in the A1 block, which must stay byte-identical to the card.

   The cost is real and is stated in the PR: 65px of above-fold height on every
   phone, spent before the hero renders anything.
   ========================================================================== */

.lz-v4 { --lz-wp-header: 65px; }

@media (min-width: 1025px) {
    .lz-v4 { --lz-wp-header: 115px; }
}

@media (min-width: 1315px) {
    .lz-v4 { --lz-wp-header: 101px; }
}

/* Longhand padding-top, and after A4/A5/A6, because those declare the `padding`
   SHORTHAND — a longhand here would otherwise be reset by the shorthand at
   equal specificity. The addends are v4's own padding-top at each breakpoint. */
.lz-v4 .v4-hero {
    padding-top: calc(48px + var(--lz-wp-header));
}

@media (max-width: 900px) {
    .lz-v4 .v4-hero {
        padding-top: calc(24px + var(--lz-wp-header));
    }
}

@media (max-width: 375px) {
    .lz-v4 .v4-hero {
        padding-top: calc(12px + var(--lz-wp-header));
    }
}

/* ==========================================================================
   B8. THE CHIP RELOCATES ON EVERY PHONE, NOT ONLY BELOW 375px

   A DIVERGENCE FROM THE DESIGN SOURCE, taken on a measurement and recorded in
   SYNC.md with it.

   v4.css:1000-1012 (ported verbatim as A6) drops the chip from flow below
   375px and re-shows it after the card, because "the amount widget has to
   clear the fold on a 375x667 viewport, which it does not with the chip in
   flow. 390-wide phones keep both."

   That last sentence is true on v4's own page and false on this one, because
   this page carries lendzi-theme's fixed header and v4's does not — see B7.
   Spending 65px there costs exactly the margin the chip was affordable in.
   Measured on the built page, Continue's clearance below the fold:

       device              viewport    chip in flow    chip relocated
       iPhone SE            320x568       -127px          -127px
       Galaxy S9+           320x658        -37px           -37px
       iPhone 12/13/14/15   390x664        -48px           +11px
       Pixel 5              393x727        +15px           +74px
       iPhone 15 Pro Max    430x739        +27px           +86px

   So the threshold moves to 430px — the widest current phone — and the most
   common iPhone viewport gains 60px and clears the fold.

   This RELOCATES the chip, it does not remove it: `.v4-hero__chip_mobile`
   renders the same label below the card, which is precisely what v4 does at
   375px. No copy is hidden to make the number work; the design's own decision
   is applied at a threshold this host's header makes necessary.

   320px remains unwinnable and is declared unsupported for the above-fold CTA.
   It stays supported for layout: it renders correctly with zero overflow, and
   the reader scrolls once to reach Continue.
   ========================================================================== */

@media (max-width: 430px) {
    .lz-v4 .v4-hero__chip {
        display: none;
    }
    .lz-v4 .v4-hero__chip_mobile {
        display: inline-flex;
        justify-self: center;
    }
}

/* ==========================================================================
   B9. THE TWO-COLUMN HERO COLLAPSES AT 1168px, NOT 900px

   A DIVERGENCE, and a REPRODUCED UPSTREAM BUG. Raise it against SSP; when it is
   fixed there, re-sync and delete this block.

   v4's hero is `grid-template-columns: 1fr 540px` with `max-width: 1280px`
   inside `padding: 48px 56px`, collapsing to one column only at <= 900px. That
   leaves the band 901-1168px with no layout that fits: the copy column's
   min-content (the 76px headline's longest word, ~469px) plus the 48px gap plus
   the fixed 540px track exceeds the available width, and the page scrolls
   sideways. `docs/scrum-521-wordpress-notes.md` §3.4 already recorded that v4
   "has no tablet breakpoint"; this is what that costs.

   It is NOT a porting error. Measured against the live reference page at
   http://127.0.0.1:8000/web/v4, the magnitudes are pixel-identical:

       width   v4 reference   this page
        910      +259px        +259px
        950      +219px        +219px
       1000      +169px        +169px
       1100       +69px         +69px
       1160        +9px          +9px
       1169          0             0

   So the live funnel page scrolls sideways today on any laptop or landscape
   tablet between 901 and 1168 CSS px.

   Fixes that were measured and REJECTED, recorded so nobody retries them:

     - `grid-template-columns: minmax(0,1fr) minmax(0,540px)` reports
       page overflow 0 and is WRONG. It lets the copy track shrink to 201px at
       901px while the headline keeps its 76px type, so the text runs
       underneath the card: the headline's own scrollWidth is 525px against a
       201px clientWidth. The page-level number passes only because the
       overflowing text is painted behind the card. Verified by screenshot.
     - The same, plus a smaller headline in the band (44px), still overflows its
       own box at 901 and 1000.

   What actually works, and is the minimum that does: collapse to one column
   for the whole band. The typography is untouched — v4's <= 900px block does
   not fire here — so 901-1168px renders the desktop type stacked above the
   card, which is coherent and is what the design does at every other width
   where two columns do not fit.

   1168 is measured, not chosen: at 1169px the two-column layout fits exactly.
   It is a function of the headline's longest word at 76px, so re-measure if
   that copy changes.
   ========================================================================== */

@media (max-width: 1168px) {
    .lz-v4 .v4-hero > .elementor-container,
    .lz-v4 .v4-hero.elementor-section-boxed > .elementor-container {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
    }
}

/* ==========================================================================
   B10. THE LAST THREE COMPUTED-STYLE LEAKS

   Each found by diffing every computed property against the live reference at
   http://127.0.0.1:8000/web/v4, not guessed. Each is a host rule the funnel
   page never meets.
   ========================================================================== */

/* Elementor sets `position: relative` on every .elementor-section. v4's hero is
   static. Nothing here depends on the hero being a containing block — the card
   carries its own `position: relative` — so matching the reference is free. */
.lz-v4 .v4-hero {
    position: static;
}

/* lendzi-theme/style.css:382 sets `font-feature-settings: "lnum"` on h1-h6, the
   twin of the `font-variant-numeric: lining-nums` on the next line. TASK-521-01's
   B2 resets only the second half, so the first still inherits — which is very
   likely one of the two properties its own 765/767 diff could not account for.

   Reset for every heading in the scope rather than only the hero's, so the
   card's <h3> title matches the reference too. That reaches into the card's
   rendering from this stylesheet, which is deliberate and is what a scope-wide
   neutraliser is for: it is a pure fidelity fix, it changes no geometry, and
   the alternative is leaving a known leak in place because of which file it
   was found in. Raised against 521-01 so its own B2 can absorb it on re-sync. */
.lz-v4.lz-v4 h1,
.lz-v4.lz-v4 h2,
.lz-v4.lz-v4 h3,
.lz-v4.lz-v4 h4,
.lz-v4.lz-v4 h5,
.lz-v4.lz-v4 h6 {
    font-feature-settings: normal;
}

/* bootstrap.css sets `-webkit-appearance: button` on every <button>; the funnel
   page leaves it at the UA's `auto`. Verified cosmetically inert here — box,
   background and border are byte-identical either way — so this only brings the
   computed value back in line with the reference. */
.lz-v4 button {
    appearance: auto;
    -webkit-appearance: auto;
}

/* ==========================================================================
   B11. BOTTOM PADDING ON THE HERO

   A DIVERGENCE, and a temporary one.

   v4 declares `padding: 48px 56px 0` — no bottom padding — because on its own
   page `.v4-hero__trust` follows inside the same <section>, carrying
   `margin-top: 32px`, and the trust band supplies the closing space. That band
   is TASK-521-04's and does not exist yet, so with nothing after it the card
   sat flush against the next section's edge.

   The values mirror v4's own top padding at each breakpoint rather than being
   picked by eye, so the section closes on the same rhythm it opens with.

   TASK-521-04 LANDED, and re-checked this block as it asked. The band is its
   own top-level section (`v4trust01`, class `v4-trust-band`) carrying v4's own
   `margin: 32px auto 0`, which collapses through that section's zero top
   padding and supplies the closing space — measured 32px above 900px and 18px
   at or below it, matching the reference.

   So this block is now the FALLBACK, not the primary path, and the rules below
   are deliberately UNCHANGED. `css/v4-trust-strip.css` B5 withdraws them with
   `.lz-v4.lz-v4 .v4-hero { padding-bottom: 0 }` at (0,3,0). That stylesheet is
   enqueued only on a page that actually renders the strip, so the switched-off
   case gets these values back automatically, with no `:has()` and no test on
   where the band sits. Measured both ways: strip on, hero padding-bottom 0px;
   strip off, 48px and no empty section (the strip's own
   `elementor/frontend/section/should_render` filter removes it).

   Do not change these values without re-measuring both states.
   ========================================================================== */

.lz-v4 .v4-hero {
    padding-bottom: 48px;
}

@media (max-width: 900px) {
    .lz-v4 .v4-hero {
        padding-bottom: 24px;
    }
}

@media (max-width: 375px) {
    .lz-v4 .v4-hero {
        padding-bottom: 12px;
    }
}

/* ==========================================================================
   B12. THE WAVE DIVIDER ABOVE THE BLOG SECTION

   NOT A PORT — v4 has no dividers; its sections meet on flat edges. This
   reproduces the curve the current homepage has, which was asked for.

   Where the original comes from: it is not an Elementor shape divider (the
   rendered production page contains zero `elementor-shape` elements). It is the
   bottom edge of `wp-content/uploads/2020/09/home-banner.png`, a 1920x850 RGBA
   image used as a background on section 2569967 ("Our Products") at
   `bottom center / cover` over `#003945`. The image is opaque above the curve
   and fully transparent below it, so the dark section colour shows through and
   the curve reads as the transition into the Resource Center. Deleting section
   2569967 took the curve with it.

   Rather than re-adding a section or linking a production-hosted PNG, the curve
   is reproduced as an inline SVG. The path is not eyeballed: the PNG was
   decoded and its alpha boundary traced column by column, giving the crest at
   x=400 and the trough at x=1400 of 1920, over a band 108px tall —

     x     0   400   800  1120  1400  1760  1920
     y    36     0    36    88   108    74    40      (0 = crest, 108 = trough)

   — and three cubic segments fit that within ~2px. `preserveAspectRatio` is
   effectively "none" via `background-size: 100% 100%`, so the wave stretches to
   any width exactly as the original's `cover` did.

   Height: at 1440px the original renders the band at 108 * (994/850) = 128px,
   which is also what the orphaned `shape_divider_bottom_height` setting left on
   the old hero says (127px desktop, 70px mobile). 128/70 is used here.

   The green glow. The original is not a flat fill: sampling the PNG down a
   column shows a vertical ramp, flat `#f6f9f9` for the top two thirds and then
   greening toward the curve —

     y      0    550    650    700    740    780    820    845
     hex  f6f9f9 f6f9f9 f4f8f7 f0f7f5 eaf5f1 dcf2ea c9eddf b8e9d5

   It is purely a function of y; the curve looks greener on the right only
   because the curve is lower there.

   The whole ramp is carried by the wave band, and NONE of it by the hero. Two
   earlier attempts put the upper half on the hero — first over its last 108px,
   then eased and confined to its 48px bottom padding — and both drew a visible
   horizontal line across the page. The reason is not the size of the step but
   its direction: `--lz-paper` is warm (R>G>B) and the glow is cool (G>B>R), so
   the transition crosses a hue axis, and the eye picks that out on a large flat
   field however gently the values are interpolated. Shortening and easing it
   reduced the line without removing it.

   Starting the band's own gradient at `--lz-paper` instead removes it
   completely: the hero stays flat paper, exactly as v4 declares it, the band's
   top edge is the same colour as the hero above it so the boundary is
   invisible, and the green appears only as the curve descends. The stops are
   back-loaded (0.35 barely moves, 0.7 is most of the way) so the onset has no
   derivative jump at the boundary either.

   This also puts `.v4-hero`'s computed `background-image` back to `none`,
   matching the reference, so the divergence the earlier approach introduced is
   gone.

   `#eaf5f1` and `#b8e9d5` are sampled from the asset, not v4 tokens — the
   nearest tokens are `--lz-green-mist` (#ebf9f2) and `--lz-green-soft`
   (#d6f3e6), and neither is as green as the original at the curve. Sampled
   values are used because reproducing the current homepage's glow is what was
   asked for; swap in the tokens if this should read as v4 rather than as today.

   The top of the ramp is v4's `--lz-paper`, not the original's `#f6f9f9`,
   because the section above it here is the v4 hero. If a section with a
   different ground is ever placed above the Resource Center, both the hero rule
   and this gradient's first stop have to change with it — the divider cannot
   infer them.
   ========================================================================== */

.lz-v4 .v4-wave-top {
    /* Elementor already sets position: relative on a section; declared anyway so
       the absolute child cannot escape if that ever changes. */
    position: relative;
}

/*
 * The clearance that keeps the heading out from under the curve is NOT set
 * here. This section carries its own Elementor padding, which Elementor emits
 * as `.elementor-<page> .elementor-element-<id>` at (0,3,0) — it outranks
 * anything this stylesheet can say at (0,2,0) without an escalation war. So
 * docs/02-build-hero.php sets the top padding in the section's own
 * settings instead, to the wave height plus the padding it already had.
 */

.lz-v4 .v4-wave-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 128px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 108' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6f4ef'/%3E%3Cstop offset='0.35' stop-color='%23f2f4f0'/%3E%3Cstop offset='0.7' stop-color='%23ddf1e8'/%3E%3Cstop offset='1' stop-color='%23b8e9d5'/%3E%3C/linearGradient%3E%3Cpath d='M0,36 C130,25 270,0 400,0 C700,0 1050,108 1400,108 C1600,108 1800,70 1920,40 L1920,0 L0,0 Z' fill='url(%23g)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Decorative only; must never eat a click meant for the cards below. */
    pointer-events: none;
}

/*
 * Steps down at 1024px, Elementor's tablet breakpoint, NOT at v4's 900px. The
 * divider is not part of the v4 port, and its clearance is paid for by the
 * section's Elementor padding, which switches at 1024 and 544. Using v4's 900
 * here would leave 901-1024px asking for a 128px wave while the tablet padding
 * only cleared 70px, and the heading would sit under the curve in that band.
 */
@media (max-width: 1024px) {
    .lz-v4 .v4-wave-top::before {
        height: 70px;
    }
}