/*
 * landing.css
 *
 * Marketing layout for the LedgerRow landing surface. Editorial in tone:
 * confident display type, asymmetric composition, deliberate whitespace,
 * specimen artifacts (the audit PDF cover, the weather attribution chip,
 * the snap-the-label confidence card) built entirely in HTML and CSS.
 *
 * Loaded conditionally by _Layout.cshtml when a page sets
 * ViewData["UseLandingStyles"] = true. Used by Pages/Index, Pages/Demo,
 * Pages/Help.
 *
 * Rules.
 * - No new lr-* primitives. Marketing layout classes live under
 *   .lr-landing__* and never appear in the /Components gallery.
 * - No raw hex literals. Every color, size, and spacing references a
 *   --lr-* token defined in site.css. RGBA tints reuse the documented
 *   ink, primary, and on-primary values inline at hex parity only when
 *   no token alpha exists.
 * - No decorative illustrations, mascots, or stock photography. Visual
 *   weight comes from typography, layout, and compositions of real
 *   product artifacts (PDF cover sheet, NOAA attribution, confidence
 *   chips). The single hero embed is the actual audit PDF served by
 *   the app.
 */

/* ============================================================
   0. Shared marketing measure
   Every marketing surface (header, footer, hero, features, bands)
   centers its content in one column so the left and right edges line
   up down the whole page. --lr-mk-cap is the outer cap; --lr-mk-gutter
   is the inset from that cap to the text. A content edge therefore sits
   at (100vw - cap) / 2 + gutter on every surface, header included.
   ============================================================ */

:root {
    --lr-mk-cap: 1520px;
    --lr-mk-gutter: var(--lr-space-5);
}

@media (min-width: 1024px) {
    :root {
        --lr-mk-gutter: var(--lr-space-6);
    }
}

/* ============================================================
   1. Marketing header and footer modifiers
   The _Layout.cshtml adds --marketing modifiers when UseLandingStyles
   is true. The marketing chrome is taller, wordmark is larger, and the
   primary CTA in the nav is elevated.
   ============================================================ */

.lr-app-header.lr-app-header--marketing {
    background: var(--lr-color-neutral-card);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: saturate(180%) blur(8px);
}

.lr-app-header.lr-app-header--marketing .lr-app-header__inner {
    max-width: var(--lr-mk-cap);
    padding: var(--lr-space-3) var(--lr-mk-gutter);
    min-height: 64px;
}

@media (min-width: 1024px) {
    .lr-app-header.lr-app-header--marketing .lr-app-header__inner {
        padding: var(--lr-space-4) var(--lr-space-6);
        min-height: 76px;
    }
}

.lr-app-header.lr-app-header--marketing .lr-app-header__brand .lr-eyebrow {
    display: none;
}

@media (min-width: 720px) {
    .lr-app-header.lr-app-header--marketing .lr-app-header__brand .lr-eyebrow {
        display: block;
        font-size: 10px;
        letter-spacing: 0.12em;
        color: var(--lr-color-neutral-mute);
    }
}

.lr-app-header.lr-app-header--marketing .lr-wordmark {
    font-size: 22px;
    letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
    .lr-app-header.lr-app-header--marketing .lr-wordmark {
        font-size: 26px;
    }
}

@media (min-width: 720px) {
    .lr-app-header.lr-app-header--marketing .lr-app-nav {
        gap: var(--lr-space-6);
    }

    .lr-app-header.lr-app-header--marketing .lr-app-nav__link {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--lr-color-neutral-ink);
    }

    .lr-app-header.lr-app-header--marketing .lr-app-header__cta {
        background: var(--lr-color-primary);
        color: var(--lr-color-on-primary);
        padding: var(--lr-space-2) var(--lr-space-4);
        min-height: 40px;
        font-size: 14px;
        font-weight: 600;
    }

    .lr-app-header.lr-app-header--marketing .lr-app-header__login {
        background: transparent;
        color: var(--lr-color-primary-strong);
        border: 1px solid var(--lr-color-neutral-line);
        padding: var(--lr-space-2) var(--lr-space-4);
        min-height: 40px;
        font-size: 14px;
        font-weight: 600;
    }
}

/*
 * Slim header. Used by auth pages where the nav would be confusing
 * (clicking "Sign in" from the sign-in page, etc). Renders only the
 * wordmark, which links home. Reads as a focus surface, not a
 * marketing surface.
 */
.lr-app-header.lr-app-header--slim .lr-app-header__menu {
    display: none;
}

.lr-app-header.lr-app-header--slim .lr-app-header__inner {
    justify-content: flex-start;
}

/* Marketing footer. Inverted ink-on-dark with four columns. */
.lr-app-footer.lr-app-footer--marketing {
    background: var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
    border-top: none;
    margin-top: 0;
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__inner {
    max-width: var(--lr-mk-cap);
    padding: var(--lr-space-10) var(--lr-mk-gutter) var(--lr-space-6);
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--lr-space-6);
}

@media (min-width: 720px) {
    .lr-app-footer.lr-app-footer--marketing .lr-app-footer__columns {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--lr-space-8);
    }
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__name {
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--lr-color-on-primary);
    margin: 0 0 var(--lr-space-3);
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__name .lr-wordmark__ledger {
    color: var(--lr-color-on-primary);
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__name .lr-wordmark__row {
    color: var(--lr-color-primary-soft);
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__tagline {
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    line-height: 1.55;
    max-width: 36ch;
    margin: 0;
}

.lr-app-footer.lr-app-footer--marketing .lr-eyebrow,
.lr-app-footer.lr-app-footer--marketing .lr-app-footer__col-title {
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--lr-space-3);
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__list li {
    color: rgba(255, 255, 255, 0.85);
}

.lr-app-footer.lr-app-footer--marketing .lr-app-nav__link {
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
    min-height: auto;
}

.lr-app-footer.lr-app-footer--marketing .lr-app-nav__link:hover {
    color: var(--lr-color-on-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__meta {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: var(--lr-space-8);
    padding-top: var(--lr-space-4);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: var(--lr-space-4);
    flex-wrap: wrap;
}

.lr-app-footer.lr-app-footer--marketing .lr-app-footer__meta-strong {
    color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   2. Landing root container.
   Background is a soft gradient between bg and card so the page has
   atmosphere without losing the off-white feel. A 1% noise via SVG
   data URI gives paper-grain texture; this is non-decorative chrome,
   not illustration. The Help and Demo pages reuse the same container
   so footnotes and forms inherit the editorial baseline.
   ============================================================ */

.lr-app-main:has(.lr-landing) {
    background: var(--lr-color-neutral-bg);
    /* Marketing pages own their own width. Release the app shell's 1120px
       cap and gutter so colored bands run full bleed and each section's
       inner column controls the measure via --lr-mk-cap. */
    max-width: none;
    padding: 0;
}

/*
 * Full-bleed colored bands. Each top-level section (or feature wrapper)
 * carries one of these so the eye picks up the rhythm of the scroll:
 * hero gradient, white, soft tint, dark, warm bg, dark, soft, warm bg, dark.
 * Inner content stays centered at the page max-width via the existing
 * section/feature inner constraints. No new color tokens. No new lr-*
 * primitives. Just background routing on existing wrappers.
 */
.lr-landing__band {
    width: 100%;
    position: relative;
}

.lr-landing__band--white {
    background: var(--lr-color-neutral-card);
}

.lr-landing__band--bg {
    background: var(--lr-color-neutral-bg);
}

.lr-landing__band--soft {
    background: var(--lr-color-primary-soft);
}

.lr-landing__band--ink {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(47, 90, 61, 0.16), transparent 55%),
        var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
}

/*
 * Hairline transition rules between adjacent bands. The first feature
 * (white) sits below the hero gradient; we suppress its top rule. Other
 * transitions get a 1px primary-soft line which reads as deliberate
 * editorial punctuation rather than a section divider.
 */
.lr-landing__band + .lr-landing__band {
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-landing__band--ink + .lr-landing__band,
.lr-landing__band + .lr-landing__band--ink {
    border-top-color: transparent;
}

.lr-landing {
    --lr-landing-max: 1200px;
    --lr-landing-text-max: 60ch;
    --lr-landing-ink-rgb: 27, 31, 28;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    color: var(--lr-color-neutral-ink);
}

.lr-landing > section {
    width: 100%;
}

/* Editorial eyebrow used throughout marketing surfaces. */
.lr-landing__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-primary);
}

.lr-landing__eyebrow-rule {
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}

.lr-landing__eyebrow--centered {
    justify-content: center;
}

.lr-landing__eyebrow--inverted {
    color: var(--lr-color-primary-soft);
}

/* Shared section title. Tight letter-spacing, balanced wrap. */
.lr-landing__section-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
    font-weight: 700;
    text-wrap: balance;
    max-width: 22ch;
}

.lr-landing__section-title--wide {
    max-width: 26ch;
}

.lr-landing__section-title--inverted {
    color: var(--lr-color-on-primary);
}

.lr-landing__body {
    margin: 0;
    color: var(--lr-color-neutral-ink);
    font-size: 18px;
    line-height: 1.55;
    max-width: var(--lr-landing-text-max);
}

.lr-landing__body--centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--lr-color-neutral-mute);
}

.lr-landing__body--inverted {
    color: rgba(255, 255, 255, 0.78);
}

.lr-landing__body-small {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: 15px;
    line-height: 1.55;
    max-width: var(--lr-landing-text-max);
}

/* Inline link with arrow flourish. Editorial detail. */
.lr-landing__inline-link {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    color: var(--lr-color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap var(--lr-motion-fast) var(--lr-ease-enter), color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__inline-link:hover {
    gap: var(--lr-space-3);
    color: var(--lr-color-primary-strong);
}

.lr-landing__inline-link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 4px;
    border-radius: var(--lr-radius-sm);
}

.lr-landing__inline-link--inverted {
    color: var(--lr-color-primary-soft);
}

.lr-landing__inline-link--inverted:hover {
    color: var(--lr-color-on-primary);
}

.lr-landing__inline-link--small {
    font-size: 14px;
}

/* CTA polish. Composes lr-btn / lr-btn-primary but lifts on hover. */
.lr-landing__cta {
    min-height: 52px;
    padding-left: var(--lr-space-5);
    padding-right: var(--lr-space-5);
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: transform var(--lr-motion-fast) var(--lr-ease-enter),
                box-shadow var(--lr-motion-fast) var(--lr-ease-enter),
                background-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(47, 90, 61, 0.18);
}

.lr-landing__cta-ghost {
    min-height: 52px;
    padding-left: var(--lr-space-5);
    padding-right: var(--lr-space-5);
    font-size: 15px;
    letter-spacing: 0.01em;
    background: transparent;
    border: 1px solid var(--lr-color-neutral-ink);
    color: var(--lr-color-neutral-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
}

.lr-landing__cta-ghost:hover {
    background: var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
}

.lr-landing__cta-arrow {
    font-size: 14px;
    display: inline-block;
    transition: transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__cta-ghost:hover .lr-landing__cta-arrow {
    transform: translate(2px, -2px);
}

/* ============================================================
   3. Hero.
   Two-column asymmetric grid above 1024. Left: eyebrow, display title,
   lede, CTAs, hairline meta row. Right: PDF cover-sheet facsimile,
   slightly tilted, with a shadow that suggests paper on a desk.
   ============================================================ */

.lr-landing__hero {
    padding: var(--lr-space-8) var(--lr-space-5) var(--lr-space-10);
    position: relative;
    overflow: hidden;
    background: var(--lr-color-neutral-card);
}

@media (min-width: 720px) {
    .lr-landing__hero {
        padding: var(--lr-space-10) var(--lr-space-6) var(--lr-space-10);
    }
}

@media (min-width: 1280px) {
    .lr-landing__hero {
        padding: 88px var(--lr-space-8) 96px;
    }
}

.lr-landing__hero-grid {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-8);
    align-items: center;
}

@media (min-width: 1024px) {
    .lr-landing__hero-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--lr-space-10);
    }
}

.lr-landing__hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: 640px;
}

.lr-landing__hero-eyebrow {
    color: var(--lr-color-primary);
}

.lr-landing__display {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-size: clamp(40px, 8vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--lr-color-neutral-ink);
    text-wrap: balance;
}

.lr-landing__display br {
    display: none;
}

@media (min-width: 720px) {
    .lr-landing__display br {
        display: inline;
    }
}

.lr-landing__display-em {
    font-style: normal;
    color: var(--lr-color-primary);
    position: relative;
    display: inline-block;
}

.lr-landing__display-em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.04em;
    height: 0.18em;
    background: var(--lr-color-primary-soft);
    z-index: -1;
    border-radius: 2px;
}

.lr-landing__lede {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: 18px;
    line-height: 1.55;
    max-width: 56ch;
}

@media (min-width: 720px) {
    .lr-landing__lede {
        font-size: 20px;
        line-height: 1.55;
    }
}

.lr-landing__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    margin-top: var(--lr-space-2);
}

.lr-landing__hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-3);
    margin: var(--lr-space-5) 0 0;
    padding-top: var(--lr-space-4);
    border-top: 1px solid var(--lr-color-neutral-line);
}

@media (min-width: 600px) {
    .lr-landing__hero-meta {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lr-space-5);
    }
}

/* Full-width variant: meta strip sits below the asymmetric hero grid and
   spans the entire hero width so the hr above it reads as a deliberate
   section divider rather than a left-column rule. */
.lr-landing__hero-meta--full {
    margin-top: var(--lr-space-8);
    padding-top: var(--lr-space-5);
    width: 100%;
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin-left: auto;
    margin-right: auto;
}

/* On the stacked single-column hero the paper specimen sits directly above
   this strip, so it needs more clearance (and room for the paper's drop
   shadow) than it does once the layout splits into two columns. */
@media (min-width: 1024px) {
    .lr-landing__hero-meta--full {
        margin-top: var(--lr-space-6);
    }
}

.lr-landing__hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lr-landing__hero-meta-item dt {
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    margin: 0;
}

.lr-landing__hero-meta-item dd {
    margin: 0;
    color: var(--lr-color-neutral-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

/* Hero specimen: the audit PDF cover sheet facsimile. */
.lr-landing__hero-specimen {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    isolation: isolate;
}

/* Below the two-column breakpoint the paper sizes to its own content so the
   sealed footer and page number never spill past the sheet on a narrow
   screen. The fixed document proportion is reapplied at 1024px and up, where
   the column is wide enough for the full record to fit inside it. */
@media (min-width: 1024px) {
    .lr-landing__hero-specimen {
        max-width: 460px;
        margin-right: 0;
        margin-left: auto;
        aspect-ratio: 8.5 / 11;
        transform: rotate(2.2deg);
        transform-origin: center;
    }
}

.lr-landing__specimen-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%) rotate(-2.2deg);
    background: var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .lr-landing__specimen-tag {
        top: -18px;
        left: 22px;
        transform: rotate(-2.2deg);
    }
}

.lr-landing__specimen-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--lr-color-primary-soft);
    border-radius: 50%;
    display: inline-block;
}

.lr-landing__paper {
    position: relative;
    z-index: 2;
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: 2px;
    box-shadow:
        0 1px 1px rgba(27, 31, 28, 0.04),
        0 12px 24px rgba(27, 31, 28, 0.08),
        0 40px 80px rgba(27, 31, 28, 0.12);
    padding: 32px 28px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-image:
        repeating-linear-gradient(0deg, rgba(27, 31, 28, 0.02) 0 1px, transparent 1px 28px);
}

.lr-landing__paper-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-landing__paper-mark {
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.lr-landing__paper-stamp {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lr-landing__paper-stamp-num {
    font-family: var(--lr-font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__paper-stamp-label {
    font-family: var(--lr-font-heading);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
}

.lr-landing__paper-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__paper-sub {
    margin: -8px 0 8px;
    font-size: 12px;
    color: var(--lr-color-neutral-mute);
    font-weight: 500;
}

.lr-landing__paper-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    flex: 1;
}

.lr-landing__paper-fields > div {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--lr-color-neutral-line);
}

.lr-landing__paper-fields dt {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    font-weight: 600;
}

.lr-landing__paper-fields dd {
    margin: 0;
    font-size: 12.5px;
    color: var(--lr-color-neutral-ink);
    line-height: 1.35;
}

.lr-landing__paper-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--lr-color-neutral-line);
    font-family: var(--lr-font-heading);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
}

.lr-landing__paper-seal {
    color: var(--lr-color-primary);
    font-weight: 600;
}

/* Decorative paper shadow that suggests the document sits on a surface. */
.lr-landing__paper-shadow {
    position: absolute;
    inset: auto -8px -10px 8px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(27, 31, 28, 0.10), transparent 70%);
    filter: blur(6px);
    z-index: 1;
}

/* ============================================================
   4. Features section. Three articles, varied composition.
   ============================================================ */

/*
 * .lr-landing__features is now a band host: it sits at full width and
 * lets each feature article live inside its own colored band wrapper.
 * The inner max-width / padding moves to the .lr-landing__feature itself
 * so the article centers within whatever band wraps it.
 */
.lr-landing__features {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.lr-landing__feature {
    position: relative;
    max-width: var(--lr-mk-cap);
    margin: 0 auto;
    padding: var(--lr-space-10) var(--lr-mk-gutter);
}

@media (min-width: 1024px) {
    .lr-landing__feature {
        padding: 112px var(--lr-space-6);
    }
}

.lr-landing__feature--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-8);
    align-items: center;
}

@media (min-width: 1024px) {
    .lr-landing__feature--split {
        grid-template-columns: 1fr 1fr;
        gap: 96px;
    }
}

.lr-landing__feature-copy {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    max-width: 600px;
}

.lr-landing__feature-copy .lr-landing__section-title {
    max-width: 24ch;
}

.lr-landing__feature--reverse .lr-landing__feature-copy {
    order: 2;
}

.lr-landing__feature--reverse > aside {
    order: 1;
}

@media (max-width: 1023px) {
    .lr-landing__feature--reverse .lr-landing__feature-copy {
        order: 1;
    }

    .lr-landing__feature--reverse > aside {
        order: 2;
    }
}

/* Specimen container shared base. */
.lr-landing__specimen {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-lg);
    padding: var(--lr-space-6);
    box-shadow: 0 18px 40px rgba(27, 31, 28, 0.06);
    position: relative;
}

/* --- Weather specimen --- */
.lr-landing__specimen--weather {
    color: var(--lr-color-sky);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lr-space-5);
    align-items: center;
}

.lr-landing__specimen-head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--lr-space-3);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-landing__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.lr-landing__chip--sky {
    background: rgba(44, 110, 145, 0.10);
    color: var(--lr-color-sky);
    border: 1px solid rgba(44, 110, 145, 0.2);
}

.lr-landing__chip--sky::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lr-color-sky);
    display: inline-block;
}

.lr-landing__specimen-time {
    font-family: var(--lr-font-mono);
    font-size: 13px;
    color: var(--lr-color-neutral-mute);
    font-variant-numeric: tabular-nums;
}

.lr-landing__compass {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1;
    color: var(--lr-color-sky);
}

.lr-landing__compass svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Smoothly rotate the needle when JS updates the transform attribute.
   Origin is set explicitly so the transform-attribute and CSS transform
   share a pivot, and the long duration sells "weather, not animation." */
.lr-landing__compass-needle {
    transform-box: view-box;
    transform-origin: 60px 60px;
    transition: transform 3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .lr-landing__compass-needle {
        transition: none;
    }
}

.lr-landing__readout {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    margin: 0;
}

/* Wind reads "X mph from Y deg". It stays inline with its label when the
   column is wide enough; if it gets too tight, flex-wrap drops the value
   onto its own line under the label, still right aligned (margin-left:auto
   pushes it right on whichever line it lands on). white-space:nowrap keeps
   the value from breaking mid phrase. */
.lr-landing__readout-wind {
    flex-wrap: wrap;
}

.lr-landing__readout-wind dd {
    margin-left: auto;
    white-space: nowrap;
}

.lr-landing__readout div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lr-space-3);
    padding-bottom: var(--lr-space-2);
    border-bottom: 1px dashed var(--lr-color-neutral-line);
}

.lr-landing__readout div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lr-landing__readout dt {
    font-family: var(--lr-font-heading);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    font-weight: 600;
}

.lr-landing__readout dd {
    margin: 0;
    color: var(--lr-color-neutral-ink);
    font-size: 18px;
    font-weight: 600;
    font-family: var(--lr-font-mono);
    font-variant-numeric: tabular-nums;
}

.lr-landing__specimen-note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--lr-space-3);
    border-top: 1px solid var(--lr-color-neutral-line);
    font-size: 13px;
    color: var(--lr-color-neutral-mute);
    line-height: 1.4;
}

/* --- Snap the label specimen --- */
.lr-landing__specimen--label {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
}

@media (min-width: 600px) {
    .lr-landing__specimen--label {
        grid-template-columns: 140px 1fr;
        gap: var(--lr-space-5);
        align-items: stretch;
    }
}

.lr-landing__capture {
    grid-column: 1;
}

.lr-landing__capture-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    background:
        linear-gradient(135deg, rgba(47, 90, 61, 0.06), rgba(107, 90, 69, 0.04)),
        var(--lr-color-neutral-bg);
    border-radius: var(--lr-radius-md);
    overflow: hidden;
    border: 1px solid var(--lr-color-neutral-line);
}

.lr-landing__capture-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--lr-color-primary);
}

.lr-landing__capture-corner--tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.lr-landing__capture-corner--tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.lr-landing__capture-corner--bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.lr-landing__capture-corner--br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.lr-landing__capture-bottle {
    position: absolute;
    inset: 22% 26%;
    background: linear-gradient(180deg, var(--lr-color-neutral-card) 0%, var(--lr-color-primary-soft) 100%);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: 4px 4px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -8px 16px rgba(27, 31, 28, 0.05);
}

.lr-landing__capture-bottle::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 14px;
    background: var(--lr-color-dirt);
    border-radius: 2px 2px 0 0;
}

.lr-landing__capture-bottle-band {
    position: absolute;
    inset: 30% 0 30% 0;
    background: var(--lr-color-primary);
    opacity: 0.85;
}

.lr-landing__capture-bottle-text {
    position: relative;
    color: var(--lr-color-on-primary);
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1.1;
    z-index: 2;
    padding: 0 4px;
}

.lr-landing__extract {
    grid-column: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}

@media (min-width: 600px) {
    .lr-landing__extract {
        grid-column: 2;
    }
}

.lr-landing__extract > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--lr-space-2);
    border-bottom: 1px dashed var(--lr-color-neutral-line);
}

.lr-landing__extract > div:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.lr-landing__extract dt {
    font-family: var(--lr-font-heading);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    font-weight: 600;
}

.lr-landing__extract dd {
    margin: 0;
    font-size: 15px;
    color: var(--lr-color-neutral-ink);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--lr-space-2);
    flex-wrap: wrap;
}

.lr-landing__confidence {
    font-family: var(--lr-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--lr-color-primary);
    background: var(--lr-color-primary-soft);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.lr-landing__extract-confirm {
    grid-column: 1 / -1;
    background: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
    border: none;
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-3) var(--lr-space-4);
    font-family: var(--lr-font-heading);
    font-weight: 600;
    font-size: 13px;
    cursor: default;
    min-height: 40px;
    pointer-events: none;
}

/* --- Immutability quote --- */
.lr-landing__feature--quote {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.lr-landing__quote {
    margin: 0;
    border: none;
    padding: 0;
}

.lr-landing__quote p {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
    text-wrap: balance;
}

.lr-landing__quote em {
    font-style: italic;
    color: var(--lr-color-primary);
}

.lr-landing__quote strong {
    font-weight: 700;
    color: var(--lr-color-neutral-ink);
    box-shadow: inset 0 -0.12em 0 var(--lr-color-primary-soft);
}

/*
 * Inverted feature variant. Used when the feature lives inside the
 * dark ink band so the quote and body text invert while em / strong
 * keep the primary-soft underline accent.
 */
.lr-landing__feature--inverted .lr-landing__eyebrow {
    color: var(--lr-color-primary-soft);
}

.lr-landing__feature--inverted .lr-landing__quote p {
    color: var(--lr-color-on-primary);
}

.lr-landing__feature--inverted .lr-landing__quote em {
    color: var(--lr-color-primary-soft);
}

.lr-landing__feature--inverted .lr-landing__quote strong {
    color: var(--lr-color-on-primary);
    box-shadow: inset 0 -0.12em 0 rgba(227, 239, 230, 0.35);
}

.lr-landing__feature--inverted .lr-landing__body--centered {
    color: rgba(255, 255, 255, 0.72);
}

/*
 * Trust-card accents. Each card on a band gets a small chromatic cue
 * that mirrors the band tone without overwhelming it.
 *
 * Weather card: sky-toned top rule, reinforces the NOAA attribution.
 * Label card: primary-soft left rule, signals the in-the-field flow.
 */
.lr-landing__feature--weather .lr-landing__specimen--weather {
    border-top: 3px solid var(--lr-color-sky);
}

.lr-landing__feature--label .lr-landing__specimen--label {
    border-left: 3px solid var(--lr-color-primary);
    background: var(--lr-color-neutral-card);
}

/* ============================================================
   4b. Stakes band. Names the buyer's problem before the page
   sells the cure. Warm neutral band, left-aligned, with a single
   warn-orange accent on the liability phrase. Three beats map to
   the three feature bands.
   ============================================================ */

.lr-landing__stakes {
    padding: var(--lr-space-10) max(var(--lr-mk-gutter), calc((100% - var(--lr-mk-cap)) / 2 + var(--lr-mk-gutter)));
}

.lr-landing__stakes-inner {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
}

.lr-landing__stakes-lead {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--lr-color-neutral-ink);
    text-wrap: balance;
    max-width: none;
}

.lr-landing__stakes-em {
    font-style: normal;
    color: var(--lr-color-warn);
}

.lr-landing__stakes-list {
    list-style: none;
    counter-reset: stake;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-5);
}

@media (min-width: 720px) {
    .lr-landing__stakes-list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lr-space-6);
    }
}

.lr-landing__stakes-list li {
    position: relative;
    padding-top: var(--lr-space-3);
    border-top: 2px solid var(--lr-color-warn);
    color: var(--lr-color-neutral-mute);
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch;
}

.lr-landing__stakes-num {
    display: block;
    margin-bottom: var(--lr-space-2);
    font-family: var(--lr-font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--lr-color-warn);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   5. How it works. Three columns with huge thin numerals.
   ============================================================ */

/*
 * .lr-landing__how is a band. The section is full width, so we constrain
 * inner content with horizontal padding plus a calc-driven inner inset
 * that keeps content at 1200px max. The head still aligns left; the
 * steps grid stretches across the full inner width.
 */
.lr-landing__how {
    padding: var(--lr-space-10) max(var(--lr-mk-gutter), calc((100% - var(--lr-mk-cap)) / 2 + var(--lr-mk-gutter)));
}

@media (min-width: 1024px) {
    .lr-landing__how {
        padding: 96px max(var(--lr-mk-gutter), calc((100% - var(--lr-mk-cap)) / 2 + var(--lr-mk-gutter)));
    }
}

.lr-landing__how-head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    margin-bottom: var(--lr-space-10);
    max-width: 720px;
}

.lr-landing__steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-8);
}

@media (min-width: 720px) {
    .lr-landing__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lr-space-6);
    }
}

.lr-landing__step {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    position: relative;
    padding-top: var(--lr-space-4);
    padding-right: var(--lr-space-4);
    border-top: 2px solid var(--lr-color-primary-soft);
}

@media (min-width: 720px) {
    .lr-landing__step + .lr-landing__step::before {
        content: "";
        position: absolute;
        left: calc(var(--lr-space-4) * -1);
        top: 80px;
        bottom: 12px;
        width: 1px;
        background: var(--lr-color-neutral-line);
    }
}

.lr-landing__step-num {
    font-family: var(--lr-font-heading);
    font-weight: 300;
    font-size: clamp(64px, 8vw, 96px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--lr-color-primary);
    font-variant-numeric: tabular-nums;
}

.lr-landing__step-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lr-color-neutral-ink);
    max-width: 22ch;
}

.lr-landing__step-body {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: 16px;
    line-height: 1.55;
    max-width: 30ch;
}

/* ============================================================
   6. PDF specimen band. Inverted. The trust load-bearer.
   ============================================================ */

.lr-landing__pdf-band {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(47, 90, 61, 0.18), transparent 50%),
        var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
    padding: var(--lr-space-10) var(--lr-space-5);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .lr-landing__pdf-band {
        padding: 120px var(--lr-space-6);
    }
}

.lr-landing__pdf-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
    pointer-events: none;
}

.lr-landing__pdf-band-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-8);
    align-items: center;
    position: relative;
}

@media (min-width: 1024px) {
    .lr-landing__pdf-band-inner {
        grid-template-columns: 1fr 1fr;
        gap: 96px;
    }
}

.lr-landing__pdf-band-copy {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: 520px;
}

.lr-landing__pdf-band-facts {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    margin: 0;
    padding: var(--lr-space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.lr-landing__pdf-band-facts > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--lr-space-4);
    align-items: baseline;
}

.lr-landing__pdf-band-facts dt {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.lr-landing__pdf-band-facts dd {
    margin: 0;
    color: var(--lr-color-on-primary);
    font-size: 15px;
    line-height: 1.45;
}

.lr-landing__pdf-band-frame {
    position: relative;
    background: var(--lr-color-neutral-card);
    border-radius: var(--lr-radius-lg);
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 30px 80px rgba(0, 0, 0, 0.4);
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

.lr-landing__pdf-band-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--lr-radius-lg);
    pointer-events: none;
}

.lr-landing__pdf-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--lr-color-neutral-card);
}

.lr-landing__pdf-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: var(--lr-space-6);
    color: var(--lr-color-neutral-ink);
    text-decoration: none;
    gap: var(--lr-space-2);
    background: var(--lr-color-neutral-bg);
}

.lr-landing__pdf-fallback-title {
    font-family: var(--lr-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__pdf-fallback-meta {
    font-size: 13px;
    color: var(--lr-color-neutral-mute);
}

/* ============================================================
   7. Pricing band. Three tiers in a 3-up grid that mirrors the
   "how it works" step rhythm: hairline-topped cards, display-weight
   price numerals, primary accent on the emphasized headline phrase.
   ============================================================ */

.lr-landing__pricing {
    padding: var(--lr-space-10) max(var(--lr-mk-gutter), calc((100% - var(--lr-mk-cap)) / 2 + var(--lr-mk-gutter)));
}

@media (min-width: 1024px) {
    .lr-landing__pricing {
        padding: 96px max(var(--lr-mk-gutter), calc((100% - var(--lr-mk-cap)) / 2 + var(--lr-mk-gutter)));
    }
}

.lr-landing__pricing-head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    margin-bottom: var(--lr-space-10);
    max-width: 720px;
}

.lr-landing__pricing .lr-landing__section-title em {
    font-style: normal;
    color: var(--lr-color-primary);
}

.lr-landing__pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-5);
}

@media (min-width: 880px) {
    .lr-landing__pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lr-space-4);
    }
}

.lr-landing__price-card {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    padding: var(--lr-space-6) var(--lr-space-5);
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-top: 2px solid var(--lr-color-primary);
    border-radius: var(--lr-radius-lg);
    transition: transform var(--lr-motion-fast) var(--lr-ease-enter),
                box-shadow var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__price-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lr-shadow-interactive);
}

.lr-landing__price-card--custom {
    border-top-color: var(--lr-color-neutral-mute);
    background: transparent;
}

.lr-landing__price-name {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lr-color-primary);
}

.lr-landing__price-card--custom .lr-landing__price-name {
    color: var(--lr-color-neutral-mute);
}

.lr-landing__price-tag {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--lr-space-2);
}

.lr-landing__price-amount {
    font-family: var(--lr-font-heading);
    font-size: clamp(40px, 6vw, 52px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--lr-color-neutral-ink);
    font-variant-numeric: tabular-nums;
}

.lr-landing__price-amount--quote {
    font-weight: 400;
    letter-spacing: -0.01em;
}

.lr-landing__price-cadence {
    font-size: 14px;
    color: var(--lr-color-neutral-mute);
}

.lr-landing__price-desc {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: 15px;
    line-height: 1.5;
}

.lr-landing__price-features {
    list-style: none;
    margin: var(--lr-space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    flex: 1;
}

.lr-landing__price-features li {
    position: relative;
    padding-left: var(--lr-space-5);
    font-size: 15px;
    line-height: 1.45;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__price-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lr-color-primary-soft);
    border: 1.5px solid var(--lr-color-primary);
}

.lr-landing__price-cta {
    margin-top: var(--lr-space-4);
    width: 100%;
    justify-content: center;
}

/* ============================================================
   8. Shared form primitives. Used by the Demo page card.
   ============================================================ */

.lr-landing__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
}

.lr-landing__form-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lr-space-3);
    align-items: start;
    margin-top: var(--lr-space-2);
    font-size: 13px;
    line-height: 1.5;
    color: var(--lr-color-neutral-mute);
    cursor: pointer;
}

.lr-landing__form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--lr-color-primary);
    cursor: pointer;
}

.lr-landing__form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-4);
    align-items: center;
    margin-top: var(--lr-space-3);
    padding-top: var(--lr-space-4);
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-landing__form-note {
    color: var(--lr-color-neutral-mute);
    font-size: 13px;
}

.lr-landing__confirmation {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-left: 3px solid var(--lr-color-primary);
    border-radius: var(--lr-radius-lg);
    padding: var(--lr-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    box-shadow: 0 12px 30px rgba(27, 31, 28, 0.06);
}

@media (min-width: 720px) {
    .lr-landing__confirmation {
        padding: var(--lr-space-8);
    }
}

.lr-landing__confirmation-line {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--lr-color-neutral-ink);
    line-height: 1.3;
}

/* ============================================================
   9. Help and Demo pages reuse the landing root container.
   Keep the legacy facts and footnotes styles compatible.
   ============================================================ */

.lr-landing__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
    max-width: var(--lr-landing-max);
    margin: 0 auto;
    padding: var(--lr-space-8) var(--lr-space-5);
}

@media (min-width: 720px) {
    .lr-landing__facts {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lr-space-5);
        padding: var(--lr-space-10) var(--lr-space-6);
    }
}

.lr-landing__fact {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-5);
}

.lr-landing__fact dt {
    color: var(--lr-color-dirt);
    margin: 0 0 var(--lr-space-2);
}

.lr-landing__fact dd {
    margin: 0;
    color: var(--lr-color-neutral-ink);
    font-size: var(--lr-type-body-size);
    line-height: var(--lr-type-body-lh);
}

.lr-landing__fact .lr-mono {
    font-size: var(--lr-type-body-size);
}

.lr-landing__footnotes {
    max-width: var(--lr-landing-text-max);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-body-lh);
    padding: 0 var(--lr-space-5) var(--lr-space-8);
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .lr-landing__footnotes {
        padding: 0 var(--lr-space-6) var(--lr-space-10);
    }
}

.lr-landing__footnotes dt {
    font-weight: 600;
    color: var(--lr-color-neutral-ink);
    margin-top: var(--lr-space-3);
}

.lr-landing__footnotes dt:first-child {
    margin-top: 0;
}

.lr-landing__footnotes dd {
    margin: var(--lr-space-1) 0 0;
}

/* Demo / Help legacy sections that still reference the old class names. */
.lr-landing__section {
    max-width: var(--lr-landing-max);
    margin: 0 auto;
    padding: var(--lr-space-8) var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

@media (min-width: 1024px) {
    .lr-landing__section {
        padding: var(--lr-space-10) var(--lr-space-6);
    }
}

.lr-landing__section-eyebrow {
    color: var(--lr-color-primary);
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lr-landing__section-body {
    color: var(--lr-color-neutral-ink);
    font-size: 18px;
    line-height: 1.55;
    max-width: var(--lr-landing-text-max);
    margin: 0;
}

.lr-landing__section-proof {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    margin-top: var(--lr-space-3);
    padding: var(--lr-space-2) var(--lr-space-3);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    background: var(--lr-color-neutral-card);
    font-size: var(--lr-type-small-size);
    color: var(--lr-color-neutral-mute);
    text-decoration: none;
}

.lr-landing__section-proof strong {
    color: var(--lr-color-neutral-ink);
}

.lr-landing__section-proof:hover {
    border-color: var(--lr-color-primary);
}

.lr-landing__section-proof:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

/* Profile and form-flash compatibility for Demo and Profile pages. */
.lr-landing__form-flash {
    border-left: 2px solid var(--lr-color-primary);
    padding: var(--lr-space-3) var(--lr-space-4);
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-neutral-ink);
    border-radius: var(--lr-radius-sm);
}

.lr-landing__form-flash strong {
    color: var(--lr-color-primary-strong);
}

.lr-profile {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    padding: var(--lr-space-8) var(--lr-space-5);
    margin: 0 auto;
}

/* ============================================================
   9a. Closing CTA band on the landing page.
   Inverted dark band, asymmetric editorial composition. Left carries
   the display-weight statement and CTAs; right rail carries three
   numbered "what happens next" lines so the layout fills the width
   instead of stranding empty space.
   ============================================================ */

.lr-landing__closing {
    padding: var(--lr-space-10) var(--lr-space-5);
}

@media (min-width: 1024px) {
    .lr-landing__closing {
        padding: 112px var(--lr-space-6) 120px;
    }
}

.lr-landing__closing-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-8);
    align-items: start;
}

@media (min-width: 1024px) {
    .lr-landing__closing-inner {
        grid-template-columns: 1.25fr 0.85fr;
        gap: 96px;
        align-items: center;
    }
}

.lr-landing__closing-copy {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: 640px;
}

.lr-landing__closing-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-size: clamp(40px, 6.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--lr-color-on-primary);
    text-wrap: balance;
}

.lr-landing__closing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lr-space-5);
    margin-top: var(--lr-space-2);
}

.lr-landing__closing-rail {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

@media (min-width: 1024px) {
    .lr-landing__closing-rail {
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        padding-top: 0;
        padding-left: var(--lr-space-6);
    }
}

.lr-landing__closing-rail-head {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.lr-landing__closing-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-landing__closing-steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--lr-space-3);
    align-items: baseline;
    padding-bottom: var(--lr-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.lr-landing__closing-steps li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lr-landing__closing-reassure {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
}

.lr-landing__closing-step-num {
    font-family: var(--lr-font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lr-color-primary-soft);
    font-variant-numeric: tabular-nums;
}

.lr-landing__closing-step-text {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   9b. Demo page composition.
   Ink-dark hero band, then a two-column form band: editorial rail left,
   elevated form card right. The card is the deliberate "this is where
   it happens" moment, not a generic white box dropped on a band.
   ============================================================ */

.lr-landing__demo-hero {
    padding: var(--lr-space-10) var(--lr-space-5) var(--lr-space-10);
}

@media (min-width: 1024px) {
    .lr-landing__demo-hero {
        padding: 112px var(--lr-space-6) 112px;
    }
}

.lr-landing__demo-hero-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-landing__display--inverted {
    color: var(--lr-color-on-primary);
}

.lr-landing__display-em--inverted {
    color: var(--lr-color-primary-soft);
}

.lr-landing__display-em--inverted::after {
    background: rgba(227, 239, 230, 0.18);
}

.lr-landing__lede--inverted {
    color: rgba(255, 255, 255, 0.78);
}

.lr-landing__demo-hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-3);
    margin: var(--lr-space-5) 0 0;
    padding-top: var(--lr-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 720px;
}

@media (min-width: 600px) {
    .lr-landing__demo-hero-meta {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lr-space-5);
    }
}

.lr-landing__demo-hero-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lr-landing__demo-hero-meta dt {
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.lr-landing__demo-hero-meta dd {
    margin: 0;
    color: var(--lr-color-on-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    /* The version value can carry a long build suffix (the commit hash). Let
       it wrap inside its column instead of running off the right edge on a
       narrow screen. */
    overflow-wrap: anywhere;
}

.lr-landing__demo-hero-meta dd .lr-mono {
    font-size: 13px;
}

/* Form band */
.lr-landing__demo {
    padding: var(--lr-space-10) var(--lr-space-5) 96px;
}

@media (min-width: 1024px) {
    .lr-landing__demo {
        padding: 112px var(--lr-space-6) 120px;
    }
}

.lr-landing__demo-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-8);
    align-items: start;
}

@media (min-width: 1024px) {
    .lr-landing__demo-inner {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 96px;
    }
}

.lr-landing__demo-rail {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: 40ch;
}

.lr-landing__demo-steps {
    list-style: none;
    margin: var(--lr-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-landing__demo-steps li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--lr-space-4);
    align-items: start;
    padding-top: var(--lr-space-4);
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-landing__demo-steps li:first-child {
    padding-top: 0;
    border-top: none;
}

.lr-landing__demo-step-num {
    font-family: var(--lr-font-heading);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lr-color-primary);
    font-variant-numeric: tabular-nums;
}

.lr-landing__demo-steps h3 {
    margin: 0 0 var(--lr-space-1);
    font-family: var(--lr-font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__demo-steps p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lr-color-neutral-mute);
}

.lr-landing__demo-rail-signed {
    margin: var(--lr-space-3) 0 0;
    font-size: 14px;
    color: var(--lr-color-neutral-mute);
}

.lr-landing__demo-rail-signed a {
    color: var(--lr-color-primary);
    font-weight: 600;
}

.lr-landing__demo-form-wrap {
    position: relative;
}

.lr-landing__demo-card {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-left: 3px solid var(--lr-color-primary);
    border-radius: var(--lr-radius-lg);
    padding: var(--lr-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    box-shadow:
        0 1px 1px rgba(27, 31, 28, 0.04),
        0 12px 30px rgba(27, 31, 28, 0.08),
        0 40px 80px rgba(27, 31, 28, 0.06);
}

@media (min-width: 720px) {
    .lr-landing__demo-card {
        padding: var(--lr-space-8);
    }
}

.lr-landing__demo-card-head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    padding-bottom: var(--lr-space-4);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    margin-bottom: var(--lr-space-2);
}

.lr-landing__demo-card-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__demo-card--confirm {
    gap: var(--lr-space-3);
}

.lr-landing__demo-card-line {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
}

@media (min-width: 600px) {
    .lr-landing__form-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--lr-space-5);
    }
}

/* ============================================================
   9c. Help page composition.
   Ink-dark hero band echoes Demo. Below it: a 4-up "at a glance" grid
   where each fact is its own compositional unit (large mono version,
   mailto CTA tile, audit-PDF specimen tile, sign-in tile); then a
   regulated-terms grid where the acronym is a mono letter-mark anchor
   (FIFRA spans wide at the top); then a small closing email-us band.
   ============================================================ */

.lr-landing__help-hero {
    padding: var(--lr-space-10) var(--lr-space-5) var(--lr-space-10);
}

@media (min-width: 1024px) {
    .lr-landing__help-hero {
        padding: 112px var(--lr-space-6) 112px;
    }
}

.lr-landing__help-hero-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-landing__help-glance {
    padding: var(--lr-space-10) var(--lr-space-5);
}

@media (min-width: 1024px) {
    .lr-landing__help-glance {
        padding: 112px var(--lr-space-6) 112px;
    }
}

.lr-landing__help-glance-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-6);
}

.lr-landing__help-glance-head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    max-width: 640px;
}

/* Tile grid. Single column below 720, 2-column from 720 to 1023.
   At >=1024 the grid becomes a left stack column and a right PDF tile
   column. The .lr-landing__help-tile-stack carries the three utility
   tiles vertically inside the left column; the .lr-landing__help-tile--pdf
   spans the right column and stretches to match. */
.lr-landing__help-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lr-space-4);
}

@media (min-width: 720px) {
    .lr-landing__help-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--lr-space-5);
        align-items: stretch;
    }
}

@media (min-width: 1024px) {
    .lr-landing__help-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--lr-space-6);
    }
}

.lr-landing__help-tile-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

/* Stack tiles size to their content so the three of them stay compact,
   which lets the Audit PDF tile beside them read as one tall document. */
.lr-landing__help-tile-stack .lr-landing__help-tile {
    min-height: 0;
}

@media (min-width: 1024px) {
    .lr-landing__help-tile-stack {
        gap: var(--lr-space-5);
    }

    .lr-landing__help-tile-stack .lr-landing__help-tile {
        padding: var(--lr-space-5);
        min-height: 0;
    }
}

.lr-landing__help-tile {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-lg);
    padding: var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    min-height: 180px;
    position: relative;
    box-shadow:
        0 1px 1px rgba(27, 31, 28, 0.03),
        0 8px 20px rgba(27, 31, 28, 0.04);
}

@media (min-width: 1024px) {
    .lr-landing__help-tile {
        padding: var(--lr-space-5) var(--lr-space-5) var(--lr-space-6);
        min-height: 200px;
    }
}

.lr-landing__help-tile-eyebrow {
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-primary);
    margin: 0;
}

.lr-landing__help-tile-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lr-color-neutral-mute);
    max-width: 32ch;
}

.lr-landing__help-tile-anchor {
    margin-top: auto;
}

.lr-landing__help-tile--version {
    border-left: 3px solid var(--lr-color-primary);
}

.lr-landing__help-version-row {
    display: flex;
    align-items: center;
    gap: var(--lr-space-2);
    margin-top: var(--lr-space-2);
}

.lr-landing__help-version-num {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--lr-font-mono, ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--lr-color-neutral-ink);
    white-space: nowrap;
    overflow-x: auto;
}

/* Copy-version control. The build string is long (it carries the commit hash)
   and hardest to select by hand on a phone, so the copy button is offered on
   mobile and hidden once a pointer and a wider screen make manual select easy. */
.lr-landing__help-version-copy {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--lr-space-1);
    min-height: 44px;
    padding: 0 var(--lr-space-3);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-primary);
    font-family: var(--lr-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--lr-motion-fast) var(--lr-ease-enter),
                border-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__help-version-copy:hover {
    background: var(--lr-color-primary-soft);
    border-color: var(--lr-color-primary);
}

.lr-landing__help-version-copy:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-landing__help-version-copy.lr-is-copied {
    background: var(--lr-color-primary-soft);
    border-color: var(--lr-color-primary);
}

.lr-landing__help-version-copy-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 719px) {
    .lr-landing__help-version-copy {
        display: inline-flex;
    }
}

.lr-landing__help-tile--email {
    background: var(--lr-color-neutral-ink);
    border-color: var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
}

.lr-landing__help-tile--email .lr-landing__help-tile-eyebrow {
    color: var(--lr-color-primary-soft);
}

.lr-landing__help-tile--email .lr-landing__help-tile-body {
    color: rgba(255, 255, 255, 0.72);
}

.lr-landing__help-email-link {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    font-family: var(--lr-font-heading);
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--lr-color-on-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 4px;
    transition: gap var(--lr-motion-fast) var(--lr-ease-enter),
                border-color var(--lr-motion-fast) var(--lr-ease-enter);
    word-break: break-all;
}

.lr-landing__help-email-link:hover {
    gap: var(--lr-space-3);
    border-bottom-color: var(--lr-color-primary-soft);
    color: var(--lr-color-on-primary);
}

.lr-landing__help-email-link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 4px;
    border-radius: var(--lr-radius-sm);
}

/* Audit PDF tile. Right column on desktop. Stretches to match the full
   height of the three stacked utility tiles in the left column. The
   .lr-landing__help-pdf-stage is the document stage: it carries a tilted
   paper, a soft drop shadow, and document-proportioned aspect at width. */
.lr-landing__help-tile--pdf {
    overflow: hidden;
    padding: var(--lr-space-5) var(--lr-space-5) var(--lr-space-5);
    background: var(--lr-color-bg);
    border-color: var(--lr-color-neutral-line);
    gap: var(--lr-space-4);
}

@media (min-width: 720px) {
    .lr-landing__help-tile--pdf {
        padding: var(--lr-space-6);
        align-self: stretch;
    }
}

@media (min-width: 1024px) {
    .lr-landing__help-tile--pdf {
        padding: var(--lr-space-7) var(--lr-space-6) var(--lr-space-6);
        grid-row: 1;
        grid-column: 2;
        min-height: 100%;
    }
}

.lr-landing__help-pdf-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: var(--lr-space-3) var(--lr-space-2) var(--lr-space-4);
    perspective: 800px;
}

.lr-landing__help-pdf-card {
    position: relative;
    z-index: 2;
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: 2px;
    padding: 22px 22px 16px;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 8.5 / 11;
    background-image:
        repeating-linear-gradient(0deg, rgba(27, 31, 28, 0.025) 0 1px, transparent 1px 16px);
    box-shadow:
        0 1px 1px rgba(27, 31, 28, 0.05),
        0 10px 22px rgba(27, 31, 28, 0.08),
        0 30px 60px rgba(27, 31, 28, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: rotate(-1.4deg);
    transform-origin: center top;
    transition: transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__help-tile--pdf:hover .lr-landing__help-pdf-card {
    transform: rotate(-0.6deg) translateY(-2px);
}

.lr-landing__help-pdf-shadow {
    position: absolute;
    inset: auto 14px 6px 14px;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(27, 31, 28, 0.18), transparent 70%);
    filter: blur(8px);
    z-index: 1;
    pointer-events: none;
}

.lr-landing__help-pdf-tag {
    position: absolute;
    top: -10px;
    left: 14px;
    background: var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
    font-family: var(--lr-font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
}

.lr-landing__help-pdf-tag-dot {
    width: 5px;
    height: 5px;
    background: var(--lr-color-primary-soft);
    border-radius: 50%;
    display: inline-block;
}

.lr-landing__help-pdf-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lr-color-neutral-line);
    font-family: var(--lr-font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__help-pdf-head-meta {
    font-family: var(--lr-font-mono, ui-monospace, Menlo, Consolas, monospace);
    color: var(--lr-color-neutral-mute);
    letter-spacing: 0.04em;
    font-weight: 500;
    text-transform: none;
}

.lr-landing__help-pdf-title {
    margin: 4px 0 0;
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__help-pdf-sub {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-primary);
    font-weight: 600;
}

.lr-landing__help-pdf-meta-strip {
    list-style: none;
    margin: 4px 0 0;
    padding: 6px 0;
    border-top: 1px dashed var(--lr-color-neutral-line);
    border-bottom: 1px dashed var(--lr-color-neutral-line);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lr-landing__help-pdf-meta-strip li {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 8px;
}

.lr-landing__help-pdf-meta-strip li span {
    font-family: var(--lr-font-heading);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    font-weight: 600;
}

.lr-landing__help-pdf-meta-strip li i {
    display: block;
    height: 4px;
    background: var(--lr-color-neutral-line);
    border-radius: 2px;
}

.lr-landing__help-pdf-meta-strip li:nth-child(1) i { width: 72%; background: var(--lr-color-neutral-ink); opacity: 0.55; }
.lr-landing__help-pdf-meta-strip li:nth-child(2) i { width: 54%; }

.lr-landing__help-pdf-fields {
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.lr-landing__help-pdf-fields > div {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dotted var(--lr-color-neutral-line);
}

.lr-landing__help-pdf-fields dt {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    font-weight: 600;
}

.lr-landing__help-pdf-fields dd {
    margin: 0;
}

.lr-landing__help-pdf-fields dd i {
    display: block;
    height: 4px;
    background: var(--lr-color-neutral-line);
    border-radius: 2px;
}

.lr-landing__help-pdf-fields > div:nth-child(1) dd i { width: 64%; }
.lr-landing__help-pdf-fields > div:nth-child(2) dd i { width: 88%; background: var(--lr-color-neutral-ink); opacity: 0.5; }
.lr-landing__help-pdf-fields > div:nth-child(3) dd i { width: 48%; }
.lr-landing__help-pdf-fields > div:nth-child(4) dd i { width: 78%; background: var(--lr-color-primary-soft); }

.lr-landing__help-pdf-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lr-landing__help-pdf-lines li {
    height: 3px;
    background: var(--lr-color-neutral-line);
    border-radius: 2px;
}

.lr-landing__help-pdf-lines li:nth-child(1) { width: 92%; }
.lr-landing__help-pdf-lines li:nth-child(2) { width: 78%; }
.lr-landing__help-pdf-lines li:nth-child(3) { width: 64%; }

.lr-landing__help-pdf-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--lr-color-neutral-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--lr-font-heading);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    font-weight: 600;
}

.lr-landing__help-pdf-seal {
    color: var(--lr-color-primary);
}

.lr-landing__help-pdf-pageno {
    font-family: var(--lr-font-mono, ui-monospace, Menlo, Consolas, monospace);
    letter-spacing: 0.06em;
}

.lr-landing__help-tile--links {
    background: var(--lr-color-primary-soft);
    border-color: var(--lr-color-primary-soft);
}

.lr-landing__help-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.lr-landing__help-links li + li {
    border-top: 1px solid rgba(27, 31, 28, 0.10);
}

.lr-landing__help-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lr-space-3);
    padding: var(--lr-space-3) 0;
    font-family: var(--lr-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--lr-color-neutral-ink);
    text-decoration: none;
    transition: color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__help-links a span {
    color: var(--lr-color-primary);
    transition: transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__help-links a:hover {
    color: var(--lr-color-primary-strong);
}

.lr-landing__help-links a:hover span {
    transform: translateX(3px);
}

.lr-landing__help-links a:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
    border-radius: var(--lr-radius-sm);
}

.lr-landing__help-tile-link {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    color: var(--lr-color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
    transition: gap var(--lr-motion-fast) var(--lr-ease-enter),
                color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__help-tile-link:hover {
    gap: var(--lr-space-3);
    color: var(--lr-color-primary-strong);
}

.lr-landing__help-tile-link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 4px;
    border-radius: var(--lr-radius-sm);
}

/* Regulated terms band. */
.lr-landing__help-terms {
    padding: var(--lr-space-10) var(--lr-space-5);
}

@media (min-width: 1024px) {
    .lr-landing__help-terms {
        padding: 112px var(--lr-space-6) 112px;
    }
}

.lr-landing__help-terms-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-6);
}

.lr-landing__help-terms-head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    max-width: 720px;
}

.lr-landing__help-terms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
}

@media (min-width: 720px) {
    .lr-landing__help-terms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--lr-space-5);
    }
}

@media (min-width: 1024px) {
    .lr-landing__help-terms-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--lr-space-5);
    }
}

.lr-landing__help-term {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-lg);
    padding: var(--lr-space-5);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--lr-space-2) var(--lr-space-4);
    align-items: start;
    scroll-margin-top: 96px;
    transition: border-color var(--lr-motion-fast) var(--lr-ease-enter),
                transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__help-term:hover {
    border-color: var(--lr-color-primary);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .lr-landing__help-term--featured {
        grid-column: span 3;
        padding: var(--lr-space-6) var(--lr-space-8);
        background:
            linear-gradient(90deg, var(--lr-color-primary-soft) 0%, var(--lr-color-neutral-card) 60%);
        border-color: var(--lr-color-primary-soft);
    }
}

.lr-landing__help-term-mark {
    grid-row: span 3;
    align-self: start;
    font-family: var(--lr-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--lr-color-primary);
    background: var(--lr-color-primary-soft);
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1;
}

.lr-landing__help-term--featured .lr-landing__help-term-mark {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-primary-strong);
    border: 1px solid var(--lr-color-primary);
}

.lr-landing__help-term-eyebrow {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    align-self: center;
}

.lr-landing__help-term-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lr-color-neutral-ink);
}

.lr-landing__help-term--featured .lr-landing__help-term-title {
    font-size: clamp(22px, 2.6vw, 28px);
}

.lr-landing__help-term-def {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--lr-color-neutral-mute);
    max-width: 48ch;
}

.lr-landing__help-term--featured .lr-landing__help-term-def {
    color: var(--lr-color-neutral-ink);
    font-size: 16px;
    max-width: 56ch;
}

/* Closing email-us band. */
.lr-landing__help-closing {
    padding: var(--lr-space-10) var(--lr-space-5);
}

@media (min-width: 1024px) {
    .lr-landing__help-closing {
        padding: 96px var(--lr-space-6) 104px;
    }
}

.lr-landing__help-closing-inner {
    max-width: calc(var(--lr-mk-cap) - 2 * var(--lr-mk-gutter));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-5);
    align-items: end;
}

@media (min-width: 1024px) {
    .lr-landing__help-closing-inner {
        grid-template-columns: 1.4fr 0.6fr;
        gap: 96px;
    }
}

.lr-landing__help-closing-copy {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    max-width: 640px;
}

.lr-landing__help-closing-title {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--lr-color-on-primary);
    text-wrap: balance;
}

.lr-landing__help-closing-em {
    font-style: normal;
    color: var(--lr-color-primary-soft);
}

.lr-landing__help-closing-meta {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    padding-top: var(--lr-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (min-width: 1024px) {
    .lr-landing__help-closing-meta {
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        padding-top: 0;
        padding-left: var(--lr-space-6);
    }
}

.lr-landing__help-closing-meta dt {
    font-family: var(--lr-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.lr-landing__help-closing-meta dd {
    margin: 0 0 var(--lr-space-3);
    color: var(--lr-color-on-primary);
    font-size: 15px;
    line-height: 1.4;
}

.lr-landing__help-closing-meta dd:last-child {
    margin-bottom: 0;
}

.lr-landing__help-closing-meta a {
    color: var(--lr-color-primary-soft);
    text-decoration: none;
    border-bottom: 1px solid rgba(227, 239, 230, 0.4);
    padding-bottom: 1px;
}

.lr-landing__help-closing-meta a:hover {
    color: var(--lr-color-on-primary);
    border-bottom-color: var(--lr-color-on-primary);
}

/* Inline link for regulated-term mentions in body copy across the
   marketing surfaces (Index, Demo, footer). Reads as part of running
   text via currentColor; a dotted underline signals "this is a link"
   without breaking the typographic rhythm. On hover the color shifts
   to the primary and the underline becomes solid. Works on both light
   and inverted bands because the base color is inherited. */
.lr-landing__term-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
    transition: color var(--lr-motion-fast) var(--lr-ease-enter),
                border-bottom-color var(--lr-motion-fast) var(--lr-ease-enter),
                border-bottom-style var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-landing__term-link:hover,
.lr-landing__term-link:focus-visible {
    color: var(--lr-color-primary);
    border-bottom-style: solid;
    border-bottom-color: currentColor;
}

.lr-landing__band--ink .lr-landing__term-link:hover,
.lr-landing__band--ink .lr-landing__term-link:focus-visible,
.lr-app-footer--marketing .lr-landing__term-link:hover,
.lr-app-footer--marketing .lr-landing__term-link:focus-visible {
    color: var(--lr-color-primary-soft);
}

.lr-landing__term-link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 3px;
    border-radius: var(--lr-radius-sm);
}

/* ============================================================
   10. Scroll-reveal motion.
   Wrapped in prefers-reduced-motion. The script tags reveal targets
   with the .lr-landing__reveal class on mount and .lr-landing__reveal--in
   when they enter the viewport.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    .lr-landing__reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 600ms cubic-bezier(0.2, 0, 0, 1),
            transform 600ms cubic-bezier(0.2, 0, 0, 1);
        will-change: opacity, transform;
    }

    .lr-landing__reveal--in {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lr-landing__hero-specimen {
        transform: none;
    }

    .lr-landing__cta,
    .lr-landing__inline-link {
        transition: none;
    }
}