/*
 * v4 funding-amount card — SCRUM-521 / TASK-521-01
 *
 * Ported from the SSP repo (app.lendzi.com), branch
 * feature/scrum-508-mobile-layout-trust-badge, commit
 * 9bfba650732c913205e198302de3f2d185d73264, blob 43eeec30 of public/css/v4.css.
 *
 * Section A is a verbatim subset of that file with one mechanical substitution:
 * the scope root .v4-page becomes .lz-v4. Every other class name is unchanged so
 * a re-sync stays a mechanical diff. Section B is WordPress-only and has no
 * upstream counterpart. See includes/v4-amount-card/SYNC.md before editing.
 */

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

.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 + BASE                        [v4.css 84-125, verbatim]
   ========================================================================== */

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

.lz-v4 .lz-display { font-family: var(--lz-display); letter-spacing: -0.01em; }
.lz-v4 .lz-mono    { font-family: var(--lz-mono); letter-spacing: 0; }

/* ==========================================================================
   A3. PRIMITIVES — the Continue button           [v4.css 131-161, verbatim]

   Source order is load-bearing: :hover carries no :not([disabled]) guard, so
   the disabled rule wins only by coming later at equal specificity. Upstream
   has the same shape. Do not reorder.
   ========================================================================== */

.lz-v4 .lz-btn {
    font-family: var(--lz-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    padding: 16px 24px;
    border-radius: var(--lz-r-pill);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.lz-v4 .lz-btn-primary {
    background: var(--lz-green);
    color: var(--lz-teal-deep);
    box-shadow: 0 6px 0 0 var(--lz-green-deep), 0 12px 24px -8px rgba(22,158,110,.4);
}
.lz-v4 .lz-btn-primary:hover { transform: translateY(-1px); }
.lz-v4 .lz-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 var(--lz-green-deep), 0 6px 12px -4px rgba(22,158,110,.35);
}
.lz-v4 .lz-btn-primary[disabled],
.lz-v4 .lz-btn-primary[aria-disabled="true"] {
    background: var(--lz-paper-2);
    color: var(--lz-mute);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   A4. THE CARD                                  [v4.css 322-410, verbatim]
   ========================================================================== */

.lz-v4 .v4-hero__card {
    background: var(--lz-white);
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-xl);
    box-shadow: var(--lz-shadow-lg);
    padding: 28px;
    position: relative;
}
.lz-v4 .v4-hero__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.lz-v4 .v4-hero__card-step {
    font-family: var(--lz-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--lz-mute);
}
.lz-v4 .v4-hero__card-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--lz-body);
    font-size: 13px;
    color: var(--lz-mute);
}
.lz-v4 .v4-hero__card-title {
    font-family: var(--lz-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--lz-teal);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.lz-v4 .v4-hero__card-hint {
    font-size: 14px;
    color: var(--lz-mute);
    margin: 0 0 22px;
}

.lz-v4 .v4-hero__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.lz-v4 .v4-pill {
    padding: 18px 16px;
    text-align: left;
    border-radius: var(--lz-r-md);
    border: 1.5px solid var(--lz-line);
    background: var(--lz-white);
    color: var(--lz-teal);
    font-family: var(--lz-display);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: border-color .12s ease, background .12s ease;
}
.lz-v4 .v4-pill:hover { border-color: var(--lz-green); }
.lz-v4 .v4-pill[aria-pressed="true"] {
    border-color: var(--lz-green);
    background: var(--lz-green-mist);
}
.lz-v4 .v4-pill__check {
    position: absolute;
    right: 12px;
    top: 12px;
    display: none;
}
.lz-v4 .v4-pill[aria-pressed="true"] .v4-pill__check { display: inline-block; }

.lz-v4 .v4-hero__continue {
    width: 100%;
    justify-content: center;
    padding: 20px;
    font-size: 18px;
}
.lz-v4 .v4-hero__continue-note {
    text-align: center;
    font-size: 14px;
    color: var(--lz-mute);
    margin: 14px 0 0;
    font-weight: 500;
}

/* ==========================================================================
   A5. MOBILE                                    [v4.css 883-892, verbatim]

   The card subset of v4's @media (max-width: 900px). v4's other two media
   queries are deliberately not here: the 375px block touches only .v4-hero
   padding and the chip twins, and the 1204-1267 block is funnel-form only.
   ========================================================================== */

@media (max-width: 900px) {
    .lz-v4 .v4-hero__continue-note { display: none; }
    .lz-v4 .v4-hero__card { padding: 18px; border-radius: var(--lz-r-lg); box-shadow: var(--lz-shadow-md); }
    .lz-v4 .v4-hero__card-head { gap: 8px; }
    .lz-v4 .v4-hero__card-secure { font-size: 11px; }
    .lz-v4 .v4-hero__card-title { font-size: 20px; margin-bottom: 12px; }
    .lz-v4 .v4-hero__card-hint { display: none; }
    .lz-v4 .v4-hero__pills { gap: 8px; margin-bottom: 14px; }
    .lz-v4 .v4-pill { padding: 12px 10px; font-size: 13px; border-radius: var(--lz-r-sm); }
    .lz-v4 .v4-pill__check { top: 8px; right: 8px; }
    .lz-v4 .v4-hero__continue { padding: 16px; font-size: 16px; }
}

/* ==========================================================================
   ===  END OF PORTED CSS. Everything below is WordPress-only.            ===
   ========================================================================== */

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

   Sansation is not declared here — lendzi-theme already serves all six cuts
   from assets/fonts/ and applies it to h1-h6 site-wide, so the card inherits
   a face the site already downloads. v4's own @font-face blocks point at
   /fonts/v4/ on app.lendzi.com, which serves no Access-Control-Allow-Origin;
   referencing them cross-origin fails silently and falls back to Manrope.

   That reuse is a dependency, and it is worth naming: --lz-display resolves
   through lendzi-theme's @font-face, not through anything in this plugin.
   Nothing here declares Sansation and nothing here can. If the theme's faces
   go away the card silently renders in system-ui — Manrope, the next fallback
   in the token, is not on this site either. It is the same "styled hero in the
   wrong face" failure as a cross-origin font error, just relocated. The theme
   stylesheet is enqueued unconditionally on every front-end page, so this is
   not a live risk today; it becomes one if that ever stops being true, or if
   the card is used somewhere the theme stylesheet does not load. 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.

   Albert Sans and JetBrains Mono are absent from this site entirely, so they
   are self-hosted here rather than fetched from Google: same-origin keeps the
   "switched off means zero font requests" guarantee honest, and keeps a
   render-blocking third-party request off the homepage's critical path.
   Albert Sans is one variable file covering both weights, as Google serves it.
   ========================================================================== */

@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: 'JetBrains Mono';
    src: url('../fonts/v4/JetBrainsMono-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

   v4.css runs on a bare Laravel page. Here the same markup sits under
   Bootstrap 4.5, the lendzi-theme reset and elementor-kit-7, all of which
   style bare <h3> and <button>. A rule that leaks through does not render
   unstyled — it renders plausibly wrong. Each line below neutralises a
   measured leak; none is speculative, and none uses !important.
   ========================================================================== */

/* elementor-kit-7 sets font-weight:100 on <body>, and it inherits. A2 above
   re-declares family, size, line-height and colour but not weight, so this is
   the single property v4's own base rule leaves exposed on this site. */
.lz-v4 { font-weight: 400; }

/* v4 gets the card's 540px width from the hero's grid track, which is hero
   layout and out of scope for this card, so the card carries it here.

   It goes on the card rather than the wrapper because lendzi-theme caps
   .entry-content > *:not(...) at 58rem (style.css:2792). Under the theme's
   html { font-size: 62.5% } that is 580px, and the five :not() clauses make it
   a 0,6,0 selector the wrapper cannot outrank. The card is not a direct child
   of .entry-content, so the rule never reaches it. */
.lz-v4 .v4-hero__card {
    max-width: var(--lz-card-max, 540px);
    margin-left: auto;
    margin-right: auto;
}

/* At 900px v4's hero grid collapses to one column and the card goes full-bleed
   in its container, jumping from the 540px track to the full content width.
   The cap has to lift at the same breakpoint or the card stays narrow through
   the whole 540-900px band, which is the one place it would not match. */
@media (max-width: 900px) {
    .lz-v4 .v4-hero__card {
        max-width: none;
    }
}

/* Three element-level theme rules beat inheritance regardless of specificity,
   because an inherited value loses to any rule that matches at all. Each was
   found by diffing computed styles against the reference card, not guessed:

     style.css  h1..h6, .faux-heading      line-height: 1.25    -> title 37.5px, not 45px
     style.css  .entry-content p, ...li    line-height: 1.476   -> hint 20.66px, not 21px
     style.css  button, .button, ...       text-transform: uppercase
                                           letter-spacing: 0.0333em

   v4 needs no equivalent because nothing on the funnel page styles bare
   elements. Button text-align is deliberately left alone: the theme sets
   center, which is also the UA default the reference card renders with. */
/* The doubled class is deliberate. These need to outrank .entry-content p
   (0,1,1) while staying below the ported card rules (0,2,0), and they must
   apply to ANY .lz-v4 scope — TASK-521-02 will create more of them, and keying
   this to the card's own data attribute would silently hand that card the same
   three bugs back. */
.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;
}

/* style.css also underlines button:focus and button:hover, which put a rule
   under every pill label and under Continue on hover. v4 has no such rule. */
.lz-v4 button:hover,
.lz-v4 button:focus {
    text-decoration: none;
}

/* lendzi-theme sets body { text-align: left }; the funnel page leaves it at the
   UA default. Identical in LTR, but matching it keeps the computed-style diff
   clean enough to be worth reading. */
.lz-v4 {
    text-align: start;
    letter-spacing: normal;
}

/* Focus. v4.css declares none, so on the funnel page the pills get whatever
   the UA draws and nothing more.
   Here bootstrap.css adds `button:focus { outline: 5px auto }` — note :focus,
   not :focus-visible — so a plain mouse click painted a fat blue ring over the
   green selected border, which the reference card does not have. Suppressing
   it and drawing our own on :focus-visible restores the mouse behaviour to
   match v4 and gives keyboard users a ring in the design's own colour.
   A deliberate divergence from the design source; see SYNC.md. */
.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;
}

/* v4 transitions the pills and the button but ships no reduced-motion block. */
@media (prefers-reduced-motion: reduce) {
    .lz-v4 .v4-pill,
    .lz-v4 .lz-btn {
        transition: none;
    }
}