/* Design tokens — compiled per site from its theme. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/public-sans/PublicSans-Variable.woff2') format('woff2');
}

:root {
  --color-primary-50: #f8f9fc;
  --ca-primary-50: 248, 249, 252;
  --color-primary-100: #d8dff0;
  --ca-primary-100: 216, 223, 240;
  --color-primary-200: #b5c2e9;
  --ca-primary-200: 181, 194, 233;
  --color-primary-300: #8ba2e4;
  --ca-primary-300: 139, 162, 228;
  --color-primary-400: #557ae2;
  --ca-primary-400: 85, 122, 226;
  --color-primary-500: #1d4ed8;
  --ca-primary-500: 29, 78, 216;
  --color-primary-600: #1a42b0;
  --ca-primary-600: 26, 66, 176;
  --color-primary-700: #18368b;
  --ca-primary-700: 24, 54, 139;
  --color-primary-800: #162b67;
  --ca-primary-800: 22, 43, 103;
  --color-primary-900: #111f44;
  --ca-primary-900: 17, 31, 68;
  --color-primary: #1d4ed8;
  --ca-primary: 29, 78, 216;
  --color-accent-50: #fcfaf8;
  --ca-accent-50: 252, 250, 248;
  --color-accent-100: #f4e4d9;
  --ca-accent-100: 244, 228, 217;
  --color-accent-200: #f0ceb6;
  --ca-accent-200: 240, 206, 182;
  --color-accent-300: #f1b58c;
  --ca-accent-300: 241, 181, 140;
  --color-accent-400: #f49756;
  --ca-accent-400: 244, 151, 86;
  --color-accent-500: #f97316;
  --ca-accent-500: 249, 115, 22;
  --color-accent-600: #d65d09;
  --ca-accent-600: 214, 93, 9;
  --color-accent-700: #a74b0b;
  --ca-accent-700: 167, 75, 11;
  --color-accent-800: #7a390d;
  --ca-accent-800: 122, 57, 13;
  --color-accent-900: #4f270c;
  --ca-accent-900: 79, 39, 12;
  --color-accent: #f97316;
  --ca-accent: 249, 115, 22;
  --color-neutral-50: #fafafa;
  --ca-neutral-50: 250, 250, 250;
  --color-neutral-100: #e4e5e6;
  --ca-neutral-100: 228, 229, 230;
  --color-neutral-200: #cecfd2;
  --ca-neutral-200: 206, 207, 210;
  --color-neutral-300: #b7b9be;
  --ca-neutral-300: 183, 185, 190;
  --color-neutral-400: #9a9da5;
  --ca-neutral-400: 154, 157, 165;
  --color-neutral-500: #787c87;
  --ca-neutral-500: 120, 124, 135;
  --color-neutral-600: #63666f;
  --ca-neutral-600: 99, 102, 111;
  --color-neutral-700: #505359;
  --ca-neutral-700: 80, 83, 89;
  --color-neutral-800: #3d3f43;
  --ca-neutral-800: 61, 63, 67;
  --color-neutral-900: #2a2b2e;
  --ca-neutral-900: 42, 43, 46;
  --color-neutral: #787c87;
  --ca-neutral: 120, 124, 135;
  --color-on-primary: #ffffff;
  --color-on-accent: #0a0a0a;

  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: clamp(0.7901rem, 0.8702rem + -0.3415vw, 0.5628rem);
  --tracking-xs: 0em;
  --text-sm: clamp(0.8889rem, 0.9377rem + -0.2084vw, 0.7502rem);
  --tracking-sm: 0em;
  --text-base: clamp(1rem, 1rem + 0vw, 1rem);
  --tracking-base: 0em;
  --text-lg: clamp(1.125rem, 1.0518rem + 0.3125vw, 1.333rem);
  --tracking-lg: clamp(-0.011em, -0.00154em + -0.01052vw, -0.004em);
  --text-xl: clamp(1.2656rem, 1.0856rem + 0.7681vw, 1.7769rem);
  --tracking-xl: clamp(-0.022em, -0.00307em + -0.02103vw, -0.008em);
  --text-2xl: clamp(1.4238rem, 1.0912rem + 1.4194vw, 2.3686rem);
  --tracking-2xl: clamp(-0.033em, -0.00461em + -0.03155vw, -0.012em);
  --text-3xl: clamp(1.6018rem, 1.0541rem + 2.3369vw, 3.1573rem);
  --tracking-3xl: clamp(-0.044em, -0.00614em + -0.04207vw, -0.016em);
  --text-4xl: clamp(1.802rem, 0.9546rem + 3.6157vw, 4.2087rem);
  --tracking-4xl: clamp(-0.045em, -0.0112em + -0.03756vw, -0.02em);
  --text-5xl: clamp(2.0273rem, 0.7657rem + 5.3828vw, 5.6102rem);
  --tracking-5xl: clamp(-0.045em, -0.01661em + -0.03155vw, -0.024em);
  --text-6xl: clamp(2.2807rem, 0.4505rem + 7.8088vw, 7.4784rem);
  --tracking-6xl: clamp(-0.045em, -0.02201em + -0.02554vw, -0.028em);

  --space-0: 0rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 6rem;
  --space-6xl: 8rem;
  --space-7xl: 12rem;
  --radius-none: 0rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --radius-control: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(42, 43, 46, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(42, 43, 46, 0.08), 0 2px 4px -2px rgba(42, 43, 46, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(42, 43, 46, 0.10), 0 4px 6px -4px rgba(42, 43, 46, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(42, 43, 46, 0.12), 0 8px 10px -6px rgba(42, 43, 46, 0.08);
}



/*
 * Base + section styles for published sites.
 *
 * MOBILE-FIRST, without exception: base rules target small screens and
 * min-width queries layer up. This convention is set once here and enforced
 * in review — retrofitting a max-width-first codebase means rewriting every
 * section (PLAN.md M1 step 2).
 *
 * Every value comes from a design token (var(--*)) compiled per site by
 * App\DesignTokens\TokenCompiler. No hardcoded colors, type sizes, or
 * spacing.
 */

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-neutral-800);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 var(--space-lg);
    color: var(--color-neutral-900);
}

h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-4xl);
}

h2 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-3xl);
}

h3 {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-2xl);
}

h4 {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-xl);
}

p {
    margin: 0 0 var(--space-lg);
}

a {
    color: var(--color-primary-600);
}

img {
    max-width: 100%;
    height: auto;
}

/*
 * <x-section-image> wraps every image in a <picture> for its AVIF/WebP
 * sources. `display: contents` takes that wrapper out of the box tree, so the
 * <img> still sizes against its real parent — otherwise any section sizing an
 * image with `height: 100%` resolves against an unsized wrapper and the image
 * renders at its intrinsic size, overflowing everything around it.
 *
 * Fixed here rather than per section: the wrapper is a rendering detail of the
 * component, so no section should have to know about it.
 */
picture {
    display: contents;
}

/* Respect a user's reduced-motion preference everywhere, not per component. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visible focus for keyboard users — never removed. */
:focus-visible {
    outline: 3px solid var(--color-accent-500);
    outline-offset: 2px;
}

.lf-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-primary-600);
    color: var(--color-on-primary);
    padding: var(--space-md) var(--space-lg);
    z-index: 100;
}

.lf-skip-link:focus {
    left: 0;
}

/* ---------------------------------------------------------------------- *
 * Section shell — renders the shared `layout` property block
 * ---------------------------------------------------------------------- */

.lf-section {
    position: relative;
}

.lf-section--bg {
    background-color: var(--lf-section-bg, transparent);
}

.lf-section--bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--lf-section-bg-rgb, 255, 255, 255), var(--lf-section-overlay, 0));
    pointer-events: none;
}

.lf-section__inner {
    position: relative;
    margin-inline: auto;
    padding-inline: var(--space-xl);
    width: 100%;
}

.lf-section--contained .lf-section__inner {
    max-width: 78rem;
}

.lf-section--wide .lf-section__inner {
    max-width: 96rem;
}

.lf-section--full-bleed .lf-section__inner {
    max-width: none;
    padding-inline: 0;
}

/*
 * Padding scale. NOTE: every section applies BOTH top and bottom, so the gap
 * between two stacked sections is double the value below. These are calibrated
 * so a default section pair (md + md) reads as ~5rem apart on desktop, not 8.
 */
.lf-pt-none { padding-top: 0; }
.lf-pt-sm { padding-top: var(--space-xl); }
.lf-pt-md { padding-top: var(--space-3xl); }
.lf-pt-lg { padding-top: var(--space-4xl); }
.lf-pt-xl { padding-top: var(--space-5xl); }
.lf-pt-2xl { padding-top: var(--space-6xl); }

.lf-pb-none { padding-bottom: 0; }
.lf-pb-sm { padding-bottom: var(--space-xl); }
.lf-pb-md { padding-bottom: var(--space-3xl); }
.lf-pb-lg { padding-bottom: var(--space-4xl); }
.lf-pb-xl { padding-bottom: var(--space-5xl); }
.lf-pb-2xl { padding-bottom: var(--space-6xl); }

/*
 * A section that has left the scale. The value arrives as an inline custom
 * property from LayoutAttributes, already converted from the pixels the author
 * typed into the rem everything else on the page is measured in.
 */
.lf-pt-custom { padding-top: var(--lf-pt, 0); }
.lf-pb-custom { padding-bottom: var(--lf-pb, 0); }

/*
 * Adjacent sections sharing a tone are one visual band, so the seam between
 * them collapses rather than stacking two lots of padding.
 *
 * Only same-tone pairs collapse. An earlier version also collapsed any light
 * section following anything, which removed the breathing room after a
 * coloured band and made the two collide.
 *
 * A custom top padding is exempt. Collapsing is a sensible default about two
 * sections nobody has said anything specific about; a typed pixel value IS
 * something specific, and silently zeroing it is how a control comes to look
 * broken. This mattered immediately: header.company and nav.primary are both
 * light and always adjacent, so the navigation bar's top padding was collapsed
 * away no matter what it was set to.
 */
.lf-tone-light + .lf-tone-light:not(.lf-section--bg):not(.lf-pt-custom),
.lf-tone-tinted + .lf-tone-tinted:not(.lf-pt-custom),
.lf-tone-dark + .lf-tone-dark:not(.lf-pt-custom),
.lf-tone-brand + .lf-tone-brand:not(.lf-pt-custom),
.lf-tone-brand-soft + .lf-tone-brand-soft:not(.lf-pt-custom) { padding-top: 0; }

/* Minimum heights (covers t6's fixed-height panes) */
.lf-minh-sm { min-height: 18rem; }
.lf-minh-md { min-height: 24rem; }
.lf-minh-lg { min-height: 32rem; }
.lf-minh-screen { min-height: 100svh; }

.lf-minh-sm,
.lf-minh-md,
.lf-minh-lg,
.lf-minh-screen {
    display: flex;
    flex-direction: column;
}

.lf-valign-top { justify-content: flex-start; }
.lf-valign-center { justify-content: center; }
.lf-valign-bottom { justify-content: flex-end; }

/* Per-breakpoint visibility (covers t6's visible-xs / hidden-xs) */
.lf-hide-mobile { display: none; }

@media (min-width: 48rem) {
    .lf-hide-mobile { display: block; }
    .lf-hide-tablet { display: none; }
}

@media (min-width: 64rem) {
    .lf-hide-tablet { display: block; }
    .lf-hide-desktop { display: none; }
}

/* Alignment helpers */
.lf-align-left { text-align: left; }
.lf-align-center { text-align: center; }
.lf-align-right { text-align: right; }

/*
 * DESIGN SYSTEM — shared primitives every section must use.
 *
 * This layer exists because the first pass gave sections design *tokens* but no
 * design *language*: each section rolled its own button, its own card, its own
 * spacing. Ten button implementations later the page read as a document rather
 * than a designed artefact. A section must never define its own button, card,
 * eyebrow, or section tone — it composes these.
 *
 * Mobile-first throughout. Tokens only.
 */

/* ---------------------------------------------------------------------- *
 * Section tone — the page's visual rhythm
 *
 * A page reads as designed when it has anchors: bands of colour that break the
 * scroll into chapters. Tone sets background AND foreground together, so a
 * section placed on a dark band never has to think about its own text colour,
 * and text-on-dark contrast is a property of the system rather than of each
 * section's CSS.
 * ---------------------------------------------------------------------- */

.lf-section {
    --lf-fg: var(--color-neutral-800);
    --lf-fg-strong: var(--color-neutral-900);
    --lf-fg-muted: var(--color-neutral-600);
    --lf-surface: #fff;
    --lf-border: var(--color-neutral-200);

    background-color: var(--lf-bg, transparent);
    color: var(--lf-fg);
}

.lf-tone-tinted {
    --lf-bg: var(--color-neutral-50);
    --lf-surface: #fff;
}

.lf-tone-brand-soft {
    --lf-bg: var(--color-primary-50);
    --lf-surface: #fff;
    --lf-border: var(--color-primary-100);
}

/*
 * Dark and brand bands are what the reference sites use to anchor a page.
 * Foreground flips wholesale so every descendant inherits legible colour.
 */
.lf-tone-dark {
    --lf-bg: var(--color-neutral-900);
    --lf-fg: var(--color-neutral-200);
    --lf-fg-strong: #fff;
    --lf-fg-muted: var(--color-neutral-400);
    --lf-surface: var(--color-neutral-800);
    --lf-border: var(--color-neutral-700);
}

.lf-tone-brand {
    --lf-bg: var(--color-primary-800);
    --lf-fg: var(--color-primary-100);
    --lf-fg-strong: #fff;
    --lf-fg-muted: var(--color-primary-200);
    --lf-surface: var(--color-primary-700);
    --lf-border: var(--color-primary-600);
}

.lf-section h1,
.lf-section h2,
.lf-section h3,
.lf-section h4 {
    color: var(--lf-fg-strong);
}

/* ---------------------------------------------------------------------- *
 * Eyebrow — the small label above a heading
 * ---------------------------------------------------------------------- */

.lf-eyebrow {
    display: block;
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Follows the local band: anything that re-points the foreground vars —
       a tone class or a hero scrim — also re-points the eyebrow. */
    color: var(--lf-eyebrow, var(--color-accent-600));
}

.lf-tone-dark,
.lf-tone-brand {
    --lf-eyebrow: var(--color-accent-400);
}

/* ---------------------------------------------------------------------- *
 * Display type — where the "modern" actually comes from
 *
 * The look is heavy weight and tight tracking at large sizes, not merely big
 * numbers. Paired with a deliberately restrained body size, the contrast is
 * what makes a page feel designed.
 * ---------------------------------------------------------------------- */

.lf-display {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.02;
    margin: 0 0 var(--space-xl);
    text-wrap: balance;
}

.lf-display--xl {
    font-size: var(--text-6xl);
    letter-spacing: var(--tracking-6xl);
}

.lf-display--lg {
    font-size: var(--text-5xl);
    letter-spacing: var(--tracking-5xl);
}

.lf-display--md {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-4xl);
}

/* Section-level heading, used by most content sections. */
.lf-section-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-3xl);
    line-height: 1.08;
    margin: 0 0 var(--space-lg);
    text-wrap: balance;
}

.lf-lede {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--lf-fg-muted);
    margin: 0 0 var(--space-2xl);
    max-width: 46ch;
}

.lf-section-header {
    max-width: 52rem;
    margin-bottom: var(--space-3xl);
}

.lf-section-header--center {
    margin-inline: auto;
    text-align: center;
}

.lf-section-header--center .lf-lede {
    margin-inline: auto;
}

/* ---------------------------------------------------------------------- *
 * Buttons — ONE implementation. Sections compose .lf-btn, never redefine it.
 * ---------------------------------------------------------------------- */

.lf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    padding: var(--space-lg) var(--space-2xl);
    border: 2px solid transparent;
    /* Controls have their own token: a pill squared to 0 changes its character
       far more than a card losing a few pixels, so 'sharp' gives buttons a
       small radius rather than none. */
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.lf-btn:hover {
    transform: translateY(-2px);
}

.lf-btn--primary {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-on-primary);
}

.lf-btn--primary:hover {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

.lf-btn--accent {
    background: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: var(--color-on-accent);
}

.lf-btn--accent:hover {
    background: var(--color-accent-600);
    border-color: var(--color-accent-600);
}

.lf-btn--secondary {
    background: transparent;
    border-color: var(--lf-border);
    color: var(--lf-fg-strong);
}

.lf-btn--secondary:hover {
    border-color: var(--lf-fg-strong);
}

/*
 * Size is a modifier on the one implementation, not a second button. A
 * standalone call to action needs to be able to shout; a supporting link in a
 * sidebar needs to not. Both read from the same scales, so a theme change moves
 * all three sizes together.
 */
.lf-btn--sm {
    font-size: var(--text-sm);
    padding: var(--space-md) var(--space-xl);
}

.lf-btn--lg {
    font-size: var(--text-lg);
    padding: var(--space-xl) var(--space-3xl);
}

.lf-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--lf-fg-strong);
    padding-inline: var(--space-lg);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.lf-btn[disabled] {
    opacity: 0.55;
    cursor: progress;
    transform: none;
}

.lf-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.lf-btn-group--center {
    justify-content: center;
}

/* ---------------------------------------------------------------------- *
 * Cards and panels — ONE implementation
 * ---------------------------------------------------------------------- */

.lf-card {
    display: flex;
    flex-direction: column;
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lf-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.lf-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-xl);
    margin: 0 0 var(--space-md);
}

.lf-card__body {
    margin: 0;
    color: var(--lf-fg-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

.lf-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

.lf-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.lf-tone-dark .lf-card__icon,
.lf-tone-brand .lf-card__icon {
    background: rgba(var(--ca-primary-400), 0.18);
    color: var(--color-primary-200);
}

.lf-panel {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
}

/* Responsive grid used by card rows. */
.lf-grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .lf-grid--2,
    .lf-grid--3,
    .lf-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .lf-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lf-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------- *
 * Link and text helpers on tinted/dark bands
 * ---------------------------------------------------------------------- */

.lf-section a:not(.lf-btn) {
    color: inherit;
}

.lf-tone-dark a:not(.lf-btn),
.lf-tone-brand a:not(.lf-btn) {
    color: var(--lf-fg-strong);
}

.lf-muted {
    color: var(--lf-fg-muted);
}

/* ----------------------------------------------------------------------- *
 * Prose blocks
 *
 * The shared typography for any section that renders authored formatting —
 * text.rich, the column texts, image+text, accordion answers, tab panels.
 * Defined once here rather than per section, for the same reason .lf-card and
 * .lf-btn are: six near-identical copies is how two of them quietly stop
 * looking related.
 *
 * Consumes tokens only. Nothing here hardcodes a colour or a size.
 * ---------------------------------------------------------------------- */
.lf-prose > :first-child {
    margin-top: 0;
}

.lf-prose > :last-child {
    margin-bottom: 0;
}

.lf-prose p {
    margin: 0 0 var(--space-md);
}

.lf-prose h2,
.lf-prose h3,
.lf-prose h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: var(--space-lg) 0 var(--space-sm);
}

.lf-prose h2 { font-size: var(--text-2xl); }
.lf-prose h3 { font-size: var(--text-xl); }
.lf-prose h4 { font-size: var(--text-lg); }

.lf-prose ul,
.lf-prose ol {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-lg);
}

.lf-prose ul { list-style: disc; }
.lf-prose ol { list-style: decimal; }

.lf-prose li {
    margin-bottom: var(--space-xs);
}

.lf-prose a {
    color: var(--lf-fg-link, var(--color-primary-600));
    text-underline-offset: 0.15em;
}

.lf-prose strong { font-weight: 700; }

.lf-prose blockquote {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: 3px solid var(--lf-border, var(--color-neutral-200));
    color: var(--lf-fg-muted);
}

/*
 * Template shells. Mobile-first: the sidebar shell stacks its sidebar below
 * main content on small screens and only becomes two columns once there is
 * room for it.
 */

.lf-shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.lf-shell__main {
    flex: 1;
}

.lf-shell__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    flex: 1;
}

.lf-shell--sidebar .lf-shell__sidebar {
    padding-inline: var(--space-xl);
    padding-bottom: var(--space-3xl);
}

@media (min-width: 64rem) {
    .lf-shell--sidebar .lf-shell__body {
        grid-template-columns: minmax(0, 1fr) 20rem;
        max-width: 90rem;
        margin-inline: auto;
        width: 100%;
    }

    .lf-shell--sidebar .lf-shell__sidebar {
        padding-inline: 0;
        padding-right: var(--space-xl);
    }

    /* Inside the narrow sidebar column, sections shouldn't re-apply the
       page-level container width or gutters. */
    .lf-shell--sidebar .lf-shell__sidebar .lf-section__inner {
        padding-inline: 0;
        max-width: none;
    }
}

/* ---------------------------------------------------------------------- *
 * left-nav shell — a persistent rail carrying brand, contact and navigation
 *
 * Mobile-first: the rail stacks above the content, because a left column on a
 * phone would consume the viewport before a visitor saw anything. It becomes
 * a real column only once there is width for one.
 * ---------------------------------------------------------------------- */

.lf-shell--left-nav .lf-shell__body {
    grid-template-columns: 1fr;
    gap: 0;
}

.lf-shell--left-nav .lf-shell__rail {
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

/* Inside the rail, sections are already in a narrow column — they must not
   re-apply the page container's width or gutters. */
.lf-shell--left-nav .lf-shell__rail .lf-section__inner {
    max-width: none;
}

@media (min-width: 64rem) {
    .lf-shell--left-nav .lf-shell__body {
        grid-template-columns: 19rem minmax(0, 1fr);
    }

    .lf-shell--left-nav .lf-shell__rail {
        border-bottom: 0;
        border-right: 1px solid var(--color-neutral-200);
        /* Sticky rather than fixed, so it scrolls with a long rail but stays
           put through a long page. */
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100svh;
        overflow-y: auto;
    }

    .lf-shell--left-nav .lf-shell__rail .lf-section__inner {
        padding-inline: var(--space-xl);
    }

    /* The rail is the whole nav, so its links stack instead of running
       horizontally as they would in a top bar. */
    .lf-shell--left-nav .lf-shell__rail .lf-nav__list,
    .lf-shell--left-nav .lf-shell__rail .lf-nav-primary__list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
}

/*
 * Rail-scoped overrides.
 *
 * Sections are written for a full-width container. Dropped into a 19rem rail
 * their multi-column grids and horizontal header bars collide, so the rail
 * collapses everything to a single stacked column. This lives with the shell
 * rather than in each section: the constraint comes from the shell, and no
 * section should have to know it might be placed in one.
 */
.lf-shell--left-nav .lf-shell__rail .lf-grid,
.lf-shell--left-nav .lf-shell__rail .lf-contact__grid,
.lf-shell--left-nav .lf-shell__rail [class*='__grid'],
.lf-shell--left-nav .lf-shell__rail [class*='__columns'] {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.lf-shell--left-nav .lf-shell__rail .lf-header-company,
.lf-shell--left-nav .lf-shell__rail .lf-header-company__brand,
.lf-shell--left-nav .lf-shell__rail .lf-header-company__contact,
.lf-shell--left-nav .lf-shell__rail .lf-header-company__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    text-align: left;
}

/* A full-width CTA reads as intentional in a rail; an inline one gets clipped. */
.lf-shell--left-nav .lf-shell__rail .lf-btn {
    width: 100%;
    justify-content: center;
}

/* The rail is a narrow column, so display type would wrap to shreds. */
.lf-shell--left-nav .lf-shell__rail .lf-section-heading {
    font-size: var(--text-lg);
    letter-spacing: 0;
}

.lf-shell--left-nav .lf-shell__rail .lf-section-header {
    margin-bottom: var(--space-lg);
}

/*
 * Form rendering. Mobile-first, tokens only.
 */

.lf-form {
    display: grid;
    gap: var(--space-xl);
    background: var(--lf-surface, #fff);
    border: 1px solid var(--lf-border, var(--color-neutral-200));
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
}

/*
 * Two columns from the tablet breakpoint. A single narrow stack of inputs
 * left most of a desktop viewport empty, which read as unfinished.
 */
.lf-form {
    max-width: 56rem;
}

@media (min-width: 48rem) {
    .lf-form {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-2xl);
    }

    /* Long-form controls and anything consent-bearing span the full width. */
    .lf-form__field--textarea,
    .lf-form__field:has(.lf-form__consent),
    .lf-form__submit,
    .lf-form__status {
        grid-column: 1 / -1;
    }
}

/* Honeypot: hidden from sight and from assistive technology alike. */
.lf-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lf-form__field {
    display: grid;
    gap: var(--space-sm);
}

.lf-form__label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--lf-fg);
}

.lf-form__required {
    color: var(--color-accent-700);
}

.lf-form__control {
    width: 100%;
    font: inherit;
    font-size: var(--text-base);
    color: var(--lf-fg-strong);
    background: var(--lf-surface);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--lf-border);
    /* --radius-md, not --radius-control: the control token goes fully pill on
       the rounded style, which suits a button and looks wrong on a text field.
       md still scales with the corner style. */
    border-radius: var(--radius-md);
}

.lf-form__control:focus-visible {
    border-color: var(--color-primary-500);
}

/*
 * TCPA consent block. Sits directly beneath the mobile phone field, never at
 * the foot of the form — the consumer sees what they are agreeing to at the
 * moment they hand over the number.
 */
.lf-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: start;
    margin-top: var(--space-sm);
    padding: var(--space-lg);
    background: var(--lf-surface);
    border-radius: var(--radius-md);
}

.lf-form__consent-label {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--lf-fg-muted);
}

.lf-form__status:empty {
    display: none;
}

.lf-form__status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

/*
 * The anti-spam widget. Turnstile draws its own fixed-size frame inside this,
 * so all that is wanted here is the same rhythm as the fields above it.
 */
.lf-form__captcha {
    margin-top: var(--space-md);
}

/*
 * The stand-in shown in the admin preview. Turnstile keys are locked to the
 * customer's own hostnames, so a real widget on the admin host renders an error
 * box — this holds the space instead, and says what it is.
 */
.lf-form__captcha--placeholder {
    padding: var(--space-md);
    font-size: var(--text-xs);
    color: var(--lf-fg-muted);
    text-align: center;
    background: var(--lf-surface);
    border: 1px dashed var(--lf-border);
    border-radius: var(--radius-md);
}

/*
 * Entrance motion for sections.
 *
 * Three commitments, all of them architectural rather than decorative:
 *
 * 1. NO JAVASCRIPT. These are CSS scroll-driven animations, so a published page
 *    runs them with the same zero-PHP, zero-JS budget every other page has.
 *    Nothing observes scroll position; the browser drives it.
 *
 * 2. NOTHING IS EVER HIDDEN WITHOUT MOTION TO REVEAL IT. The animation only
 *    exists inside `prefers-reduced-motion: no-preference` AND inside a
 *    `@supports (animation-timeline: view())` guard. A browser without support,
 *    or a visitor who has asked for less motion, sees the section normally —
 *    they never see a blank space where content should be. That failure mode is
 *    the reason scroll animation gets a bad name, and it is entirely avoidable.
 *
 * 3. THE MENU IS FIXED. none | fade | rise | stagger, chosen from the editor
 *    like any other layout property. There is no duration, easing, or delay to
 *    get wrong, for the same reason there is no free-form colour picker.
 */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .lf-reveal {
            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
            animation-fill-mode: both;
            animation-timeline: view();

            /* Runs as the section enters the viewport and is finished well
               before it is centred — a reveal that is still moving when you
               start reading is a reveal that is too slow. */
            animation-range: entry 10% cover 32%;
        }

        .lf-reveal--fade {
            animation-name: lf-fade-in;
        }

        .lf-reveal--rise {
            animation-name: lf-rise-in;
        }

        /*
         * Stagger animates the section's direct children rather than the
         * section, so a card grid arrives one card at a time. The delay is
         * expressed with sibling-index() where it is supported and falls back
         * to a fixed nth-child ramp, because a stagger that collapses to
         * "everything at once" is still perfectly usable.
         */
        .lf-reveal--stagger > .lf-section__inner > * > * {
            animation-name: lf-rise-in;
            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: entry 5% cover 30%;
        }

        .lf-reveal--stagger > .lf-section__inner > * > *:nth-child(2) {
            animation-range: entry 5% cover 36%;
        }

        .lf-reveal--stagger > .lf-section__inner > * > *:nth-child(3) {
            animation-range: entry 5% cover 42%;
        }

        .lf-reveal--stagger > .lf-section__inner > * > *:nth-child(n + 4) {
            animation-range: entry 5% cover 48%;
        }
    }
}

@keyframes lf-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lf-rise-in {
    from {
        opacity: 0;
        /* Small on purpose. A section sliding 60px reads as a website showing
           off; 12px reads as the page settling. */
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ----------------------------------------------------------------------- *
 * contact.details
 *
 * Composes .lf-grid, .lf-section-heading, .lf-lede and .lf-eyebrow. Every
 * colour reads from the section's tone variables — this block is routinely
 * dropped onto a dark band next to the footer.
 * ---------------------------------------------------------------------- */

.lf-contact__label {
    /* .lf-eyebrow supplies the type; only the rhythm differs here. */
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
}

.lf-contact__address {
    font-style: normal;
    color: var(--lf-fg);
}

.lf-contact__map {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-sm);
}

.lf-contact__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--lf-fg);
}

.lf-contact__term {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lf-fg-muted);
}

/* ----------------------------------------------------------------------- *
 * content.accordion — native <details>/<summary>, so all of this is
 * presentation only: the open/close behaviour is the browser's.
 * ---------------------------------------------------------------------- */

.lf-accordion__item {
    border-bottom: 1px solid var(--lf-border);
}

.lf-accordion__item:first-of-type {
    border-top: 1px solid var(--lf-border);
}

.lf-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-lg);
    color: var(--lf-fg-strong);
}

/* Hide the platform disclosure triangle; the marker below replaces it. */
.lf-accordion__summary::-webkit-details-marker {
    display: none;
}

.lf-accordion__summary::marker {
    content: '';
}

.lf-accordion__marker {
    position: relative;
    flex: 0 0 auto;
    width: var(--space-lg);
    height: var(--space-lg);
    color: var(--color-primary-600);
}

/* The brand blue disappears against a dark or brand band. */
.lf-tone-dark .lf-accordion__marker,
.lf-tone-brand .lf-accordion__marker {
    color: var(--lf-fg-strong);
}

.lf-accordion__marker::before,
.lf-accordion__marker::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 2px;
    background: currentColor;
    transition: transform 200ms ease;
}

.lf-accordion__marker::after {
    transform: rotate(90deg);
}

.lf-accordion__item[open] .lf-accordion__marker::after {
    transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .lf-accordion__marker::before,
    .lf-accordion__marker::after {
        transition: none;
    }
}

.lf-accordion__answer {
    padding-bottom: var(--space-xl);
    color: var(--lf-fg-muted);
    max-width: 52rem;
}

/* ----------------------------------------------------------------------- *
 * content.article-list — sibling posts, resolved at publish time. The card,
 * the grid, the heading block and the button come from the design system;
 * only the post's media and meta line are specific to this section.
 * ---------------------------------------------------------------------- */

.lf-articles__grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-article__media {
    margin-bottom: var(--space-lg);
}

.lf-article__img {
    display: block;
    width: 100%;
    height: 100%;
    /* A fixed ratio holds the card's height before the image arrives. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.lf-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-xs);
    text-transform: uppercase;
    color: var(--lf-fg-muted);
}

.lf-article__category {
    color: var(--color-primary-600);
    font-weight: 600;
}

/* The brand blue disappears against a dark or brand band. */
.lf-tone-dark .lf-article__category,
.lf-tone-brand .lf-article__category {
    color: var(--lf-fg-strong);
}

.lf-article__link {
    color: inherit;
    text-decoration: none;
}

.lf-article__link:hover,
.lf-article__link:focus-visible {
    text-decoration: underline;
}

/* Keeps the excerpt filling the card so a row of cards lines up. */
.lf-article__excerpt {
    flex: 1;
}

.lf-articles__actions {
    margin-top: var(--space-2xl);
}

/* ----------------------------------------------------------------------- *
 * content.card-grid — the Purchase / Refinance / Apply row.
 *
 * The card, the grid, the heading block and the buttons all come from the
 * design system (.lf-card / .lf-grid / .lf-section-header / .lf-btn). Only
 * the three surface treatments the schema exposes, and the card's own media
 * and text link, live here.
 * ---------------------------------------------------------------------- */

.lf-card-grid__grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* `bordered` is exactly the design-system card, so it needs no rule. */
.lf-card-grid__card--plain {
    background: transparent;
    border-color: transparent;
    padding: 0;
}

.lf-card-grid__card--elevated {
    box-shadow: var(--shadow-md);
}

.lf-card-grid__media {
    margin-bottom: var(--space-lg);
}

.lf-card-grid__img {
    display: block;
    width: 100%;
    height: 100%;
    /* A fixed ratio holds the card's height before the image arrives. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Pushes the link to the bottom so a row of cards lines up. */
.lf-card-grid__text {
    flex: 1;
}

.lf-card-grid__link {
    margin-top: var(--space-lg);
    align-self: flex-start;
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    text-decoration: none;
    color: var(--color-primary-600);
}

.lf-card-grid__link::after {
    content: ' →';
}

.lf-card-grid__link:hover,
.lf-card-grid__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* The brand blue disappears against a dark or brand band. */
.lf-tone-dark .lf-card-grid__link,
.lf-tone-brand .lf-card-grid__link {
    color: var(--lf-fg-strong);
}

.lf-card-grid__actions {
    margin-top: var(--space-lg);
}

.lf-card-grid.lf-align-center .lf-card {
    align-items: center;
    text-align: center;
}

.lf-card-grid.lf-align-center .lf-card-grid__link,
.lf-card-grid.lf-align-center .lf-card-grid__actions {
    align-self: center;
}

/* ----------------------------------------------------------------------- *
 * content.logo-strip — partner lenders and trust badges. Wraps rather than
 * scrolls, so nothing is hidden off-screen on a phone. The label composes
 * .lf-eyebrow, whose colour already follows the section's tone.
 * ---------------------------------------------------------------------- */

.lf-logos__heading {
    margin-bottom: var(--space-xl);
}

.lf-logos__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.lf-align-left .lf-logos__list { justify-content: flex-start; }
.lf-align-right .lf-logos__list { justify-content: flex-end; }

/*
 * The item reserves the row's height before any logo has loaded, so the
 * strip never shifts the page as images arrive.
 */
.lf-logos__item {
    display: flex;
    align-items: center;
}

.lf-logos__link {
    display: flex;
    align-items: center;
    height: 100%;
}

.lf-logos__img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 10rem;
    object-fit: contain;
}

.lf-logos__list--sm .lf-logos__item { height: 1.75rem; }
.lf-logos__list--md .lf-logos__item { height: 2.5rem; }
.lf-logos__list--lg .lf-logos__item { height: 3.5rem; }

/* Opt-in: desaturation lowers contrast, so it is never the default. */
.lf-logos__list--muted .lf-logos__img {
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 200ms ease, opacity 200ms ease;
}

.lf-logos__list--muted .lf-logos__item:hover .lf-logos__img,
.lf-logos__list--muted .lf-logos__link:focus-visible .lf-logos__img {
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lf-logos__list--muted .lf-logos__img {
        transition: none;
    }
}

@media (min-width: 48rem) {
    .lf-logos__list {
        gap: var(--space-3xl);
    }
}

/* ----------------------------------------------------------------------- *
 * content.quote — pull quote with attribution. The `panel` style composes
 * .lf-panel; every colour here is a tone variable, so the quote stays
 * legible when the section sits on a dark or brand band.
 * ---------------------------------------------------------------------- */

.lf-quote {
    margin: 0;
    max-width: 52rem;
}

.lf-quote.lf-align-center {
    margin-inline: auto;
}

.lf-quote.lf-align-right {
    margin-inline-start: auto;
}

.lf-quote--bordered {
    border-inline-start: 3px solid var(--color-accent-500);
    padding-inline-start: var(--space-xl);
}

.lf-quote__body {
    margin: 0;
}

.lf-quote__text {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.3;
    color: var(--lf-fg-strong);
    margin-bottom: var(--space-xl);
    /* Author line breaks are preserved without unescaping the value. */
    white-space: pre-line;
}

.lf-quote--md .lf-quote__text {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-lg);
}

.lf-quote--lg .lf-quote__text {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-xl);
}

.lf-quote--xl .lf-quote__text {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-2xl);
}

.lf-quote__attribution {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    color: var(--lf-fg-muted);
}

.lf-quote.lf-align-center .lf-quote__attribution {
    justify-content: center;
}

.lf-quote.lf-align-right .lf-quote__attribution {
    justify-content: flex-end;
}

.lf-quote__avatar {
    flex: 0 0 auto;
}

.lf-quote__avatar-img {
    display: block;
    width: var(--space-4xl);
    height: var(--space-4xl);
    object-fit: cover;
    border-radius: var(--radius-full);
}

.lf-quote__names {
    display: flex;
    flex-direction: column;
    text-align: start;
}

.lf-quote__cite {
    font-style: normal;
    font-weight: 600;
    color: var(--lf-fg-strong);
}

@media (min-width: 64rem) {
    .lf-quote--xl .lf-quote__text {
        font-size: var(--text-3xl);
        letter-spacing: var(--tracking-3xl);
    }
}

/* ----------------------------------------------------------------------- *
 * content.social-links — a row of profile links, drawn with the shared
 * <x-social-icon> brand glyphs. Every link carries its platform name in the
 * markup; `--hidden` only removes it visually, so the accessible name is
 * never missing.
 * ---------------------------------------------------------------------- */

.lf-social__heading {
    margin-bottom: var(--space-lg);
}

.lf-social__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.lf-align-center .lf-social__list { justify-content: center; }
.lf-align-right .lf-social__list { justify-content: flex-end; }

.lf-social__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-full);
    color: var(--color-primary-600);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.lf-social__list--outlined .lf-social__link {
    border: 1px solid var(--lf-border);
}

.lf-social__list--filled .lf-social__link {
    background: var(--color-primary-600);
    color: var(--color-on-primary);
}

.lf-social__link:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.lf-social__list--filled .lf-social__link:hover {
    background: var(--color-primary-700);
    color: var(--color-on-primary);
}

/*
 * On a dark or brand band the brand blue reads as a hole; the glyph follows
 * the tone's foreground instead. `filled` keeps its own solid background,
 * which is legible on every band.
 */
.lf-tone-dark .lf-social__list:not(.lf-social__list--filled) .lf-social__link,
.lf-tone-brand .lf-social__list:not(.lf-social__list--filled) .lf-social__link {
    color: var(--lf-fg-strong);
}

.lf-tone-dark .lf-social__list:not(.lf-social__list--filled) .lf-social__link:hover,
.lf-tone-brand .lf-social__list:not(.lf-social__list--filled) .lf-social__link:hover {
    background: var(--lf-surface);
    color: var(--lf-fg-strong);
}

@media (prefers-reduced-motion: reduce) {
    .lf-social__link {
        transition: none;
    }
}

.lf-social__icon {
    display: inline-flex;
}

.lf-social__glyph {
    display: block;
}

.lf-social__list--sm .lf-social__glyph { width: var(--space-lg); height: var(--space-lg); }
.lf-social__list--md .lf-social__glyph { width: var(--space-xl); height: var(--space-xl); }
.lf-social__list--lg .lf-social__glyph { width: var(--space-2xl); height: var(--space-2xl); }

.lf-social__name {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    font-weight: 600;
}

/* Visually hidden, still announced — the link keeps its accessible name
   when only the icon is shown. */
.lf-social__name--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

/* ----------------------------------------------------------------------- *
 * content.stats — number + label pairs. Two up on phones (a single column
 * wastes a lot of vertical space for very short content), then one row.
 *
 * This section is a common candidate for a dark or brand band, so the figure
 * colour is tone-aware rather than a fixed brand blue.
 * ---------------------------------------------------------------------- */

.lf-stats__list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.lf-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.lf-stats__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-3xl);
    line-height: 1.1;
    color: var(--color-primary-600);
}

.lf-tone-dark .lf-stats__value,
.lf-tone-brand .lf-stats__value {
    color: var(--lf-fg-strong);
}

.lf-stats__label {
    margin: 0;
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    color: var(--lf-fg-muted);
}

.lf-stats__detail {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-xs);
    color: var(--lf-fg-muted);
}

@media (min-width: 48rem) {
    .lf-stats__list {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-template-columns: none;
        gap: var(--space-2xl);
    }

    /* Dividers only make sense once the items sit in a single row. */
    .lf-stats__list--dividers .lf-stats__item + .lf-stats__item {
        border-inline-start: 1px solid var(--lf-border);
        padding-inline-start: var(--space-2xl);
    }

    .lf-stats__value {
        font-size: var(--text-4xl);
        letter-spacing: var(--tracking-4xl);
    }
}

/* ----------------------------------------------------------------------- *
 * content.steps — numbered how-it-works. The card, the grid, the heading
 * block and the button all come from the design system; only the numbered
 * badge is specific to this section.
 * ---------------------------------------------------------------------- */

.lf-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-steps__number {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-3xl);
    height: var(--space-3xl);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
    color: var(--color-on-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: var(--tracking-base);
}

.lf-steps__actions {
    margin-top: var(--space-2xl);
}

/* ----------------------------------------------------------------------- *
 * content.tabs — CSS-only, driven by a radio group. No JavaScript: the
 * label row is a native radio group, so arrow keys move between tabs and
 * the checked state is the browser's. The radios stay in the accessibility
 * tree and focusable (clipped, never display:none) so keyboard users get a
 * visible focus ring on the label.
 * ---------------------------------------------------------------------- */

.lf-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--lf-border);
    padding-bottom: 0;
}

.lf-tabs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.lf-tabs__label {
    order: 1;
    display: inline-block;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 2px solid transparent;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    letter-spacing: var(--tracking-base);
    color: var(--lf-fg-muted);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.lf-tabs__label:hover {
    color: var(--lf-fg-strong);
}

.lf-tabs__radio:checked + .lf-tabs__label {
    color: var(--color-primary-600);
    border-bottom-color: var(--color-primary-600);
}

/* The brand blue disappears against a dark or brand band. */
.lf-tone-dark .lf-tabs__radio:checked + .lf-tabs__label,
.lf-tone-brand .lf-tabs__radio:checked + .lf-tabs__label {
    color: var(--lf-fg-strong);
    border-bottom-color: var(--color-accent-400);
}

.lf-tabs__radio:focus-visible + .lf-tabs__label {
    outline: 3px solid var(--color-accent-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lf-tabs__label {
        transition: none;
    }
}

.lf-tabs__panel {
    order: 2;
    width: 100%;
    display: none;
    padding-top: var(--space-xl);
}

.lf-tabs__radio:checked + .lf-tabs__label + .lf-tabs__panel {
    display: block;
}

.lf-tabs__panel-heading {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-xl);
    margin-bottom: var(--space-md);
}

.lf-tabs__content {
    max-width: 52rem;
    color: var(--lf-fg-muted);
}

.lf-tabs__actions {
    margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
    .lf-tabs {
        gap: var(--space-lg);
    }

    .lf-tabs__label {
        font-size: var(--text-lg);
        letter-spacing: var(--tracking-lg);
    }
}

/* ----------------------------------------------------------------------- *
 * cta.banner — stacked on mobile, copy-left / buttons-right from tablet.
 *
 * A tone is a local band: it re-points the foreground variables instead of
 * colouring the heading, body and buttons one by one, so .lf-section-heading
 * and .lf-btn--secondary land legible on it without being redefined here.
 * ---------------------------------------------------------------------- */

.lf-cta-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-2xl);
    border-radius: var(--radius-2xl);
}

.lf-cta-banner--primary {
    --lf-fg: var(--color-on-primary);
    --lf-fg-strong: var(--color-on-primary);
    --lf-fg-muted: var(--color-on-primary);
    --lf-border: var(--color-on-primary);

    background: var(--color-primary-600);
    color: var(--lf-fg);
}

.lf-cta-banner--accent {
    --lf-fg: var(--color-on-accent);
    --lf-fg-strong: var(--color-on-accent);
    --lf-fg-muted: var(--color-on-accent);
    --lf-border: var(--color-on-accent);

    background: var(--color-accent-500);
    color: var(--lf-fg);
}

/* The neutral tone inherits the surrounding band rather than fixing a colour. */
.lf-cta-banner--neutral {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
}

.lf-cta-banner__heading {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-2xl);
}

.lf-cta-banner__body {
    margin: 0;
    color: var(--lf-fg-muted);
}

.lf-cta-banner__buttons {
    flex: none;
}

@media (min-width: 48rem) {
    .lf-cta-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-2xl) var(--space-3xl);
    }

    .lf-cta-banner.lf-align-center {
        flex-direction: column;
    }
}

/* ----------------------------------------------------------------------- *
 * cta.button — one button and the wrapper that positions it.
 *
 * Nothing here restyles .lf-btn. Colour, padding and size are the design
 * system's single button implementation; this file only decides where that
 * button sits and how wide it is allowed to get, which are properties of the
 * section rather than of the button.
 * ---------------------------------------------------------------------- */

.lf-cta-button {
    /* .lf-btn is inline-flex, so the shared text-align utility already
       positions it — there is no second alignment mechanism to keep in sync. */
    display: block;
}

.lf-cta-button__note {
    margin: var(--space-md) 0 0;
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

/*
 * Full width is capped. A button stretched across a full-bleed band is a
 * 90rem-wide target that reads as a coloured stripe rather than a control, and
 * on phones — where the option actually earns its keep — the cap never binds.
 */
.lf-cta-button--block .lf-cta-button__link {
    display: flex;
    width: 100%;
    max-width: 28rem;
}

.lf-cta-button--block.lf-align-center .lf-cta-button__link {
    margin-inline: auto;
}

.lf-cta-button--block.lf-align-right .lf-cta-button__link {
    margin-inline-start: auto;
}

/* ----------------------------------------------------------------------- *
 * custom.html — the escape hatch. Styling is deliberately minimal: content
 * here is user-authored and unaudited, so we don't pretend to normalise it.
 * ---------------------------------------------------------------------- */

.lf-custom-html img {
    max-width: 100%;
    height: auto;
}

.lf-custom-html iframe {
    max-width: 100%;
    border: 0;
}

.lf-custom-html table {
    width: 100%;
    border-collapse: collapse;
}

/* ----------------------------------------------------------------------- *
 * embed.map — the frame reserves its height before the iframe loads.
 * ---------------------------------------------------------------------- */

.lf-map {
    margin: 0;
}

/* The well behind the embed follows the band's tone rather than flashing
   a light rectangle on a dark section while the iframe loads. */
.lf-map__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
}

.lf-map__frame--sm { height: 14rem; }
.lf-map__frame--md { height: 20rem; }
.lf-map__frame--lg { height: 28rem; }

.lf-map__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lf-map__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    color: var(--lf-fg-muted);
}

.lf-map__link {
    font-weight: 600;
    color: var(--color-primary-600);
}

/* The brand blue disappears against a dark or brand band. */
.lf-tone-dark .lf-map__link,
.lf-tone-brand .lf-map__link {
    color: var(--lf-fg-strong);
}

@media (min-width: 48rem) {
    .lf-map__frame--sm { height: 18rem; }
    .lf-map__frame--md { height: 26rem; }
    .lf-map__frame--lg { height: 36rem; }
}

/* ----------------------------------------------------------------------- *
 * footer.standard — the fat footer, with the compliance/disclosure block
 * given its own visually distinct band so it can never be mistaken for
 * marketing copy.
 *
 * A footer is the section most often placed on a dark band, so nothing here
 * names a colour: every value resolves through the tone variables, and the
 * social and Equal Housing marks are drawn in currentColor.
 * ---------------------------------------------------------------------- */

.lf-footer {
    color: var(--lf-fg-muted);
    font-size: var(--text-sm);
}

/*
 * Links carry the strong foreground so they separate from the muted body
 * copy on any band. Same specificity as the design system's link reset and
 * loaded after it, so this wins without !important.
 */
.lf-footer a:not(.lf-btn) {
    color: var(--lf-fg-strong);
}

.lf-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

/* <x-section-image> wraps its <img> in a <picture>. */

.lf-footer__logo {
    display: block;
    max-height: var(--space-3xl);
    width: auto;
    margin-bottom: var(--space-lg);
}

.lf-footer__column-heading {
    margin: 0 0 var(--space-md);
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lf-fg-strong);
}

.lf-footer__about-text {
    margin: 0;
    max-width: 32rem;
}

.lf-footer__links,
.lf-footer__contact,
.lf-footer__legal-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-footer__address {
    font-style: normal;
    margin-bottom: var(--space-md);
}

.lf-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: var(--space-lg) 0 0;
    padding: 0;
}

.lf-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-2xl);
    height: var(--space-2xl);
    border-radius: var(--radius-full);
    border: 1px solid var(--lf-border);
    color: var(--lf-fg-muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.lf-footer__social-link:hover,
.lf-footer__social-link:focus-visible {
    color: var(--lf-fg-strong);
    border-color: var(--lf-fg-strong);
}

.lf-footer__social-glyph {
    width: 1.15rem;
    height: 1.15rem;
}

.lf-footer__social-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Compliance/disclosure band. */
.lf-footer__disclosure {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--lf-border);
    font-size: var(--text-xs);
    color: var(--lf-fg-muted);
}

.lf-footer__disclosure p {
    margin: 0 0 var(--space-md);
}

.lf-footer__equal-housing {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--lf-fg-muted);
}

.lf-footer__equal-housing-mark {
    flex: none;
    width: var(--space-xl);
    height: var(--space-xl);
    color: var(--lf-fg);
}

.lf-footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--lf-border);
    font-size: var(--text-xs);
}

.lf-footer__copyright {
    margin: 0;
    color: var(--lf-fg-muted);
}

@media (min-width: 48rem) {
    .lf-footer__columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .lf-footer__legal-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .lf-footer__legal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 64rem) {
    .lf-footer__columns {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* ----------------------------------------------------------------------- *
 * form.embed — the section owns the framing only; the resolved form brings
 * its own markup and styling.
 *
 * The form is the page's conversion point, so it is centred and given real
 * width rather than left as a narrow stack against a wide empty margin.
 * ---------------------------------------------------------------------- */

.lf-form-embed {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Wide enough for the two-column form, and centred in the section — a
       max-width without an auto margin left it hugging the left edge with
       dead space beside it. */
    max-width: 56rem;
    margin-inline: auto;
}

.lf-form-embed.lf-align-center {
    margin-inline: auto;
}

.lf-form-embed .lf-form {
    width: 100%;
    text-align: left;
}

/* Shown when no form is resolvable — visible in the editor, honest on a
   preview, and never a silently blank section. */
.lf-form-embed__placeholder {
    margin: 0;
    padding: var(--space-xl);
    border: 1px dashed var(--lf-border);
    border-radius: var(--radius-lg);
    background: var(--lf-surface);
    color: var(--lf-fg-muted);
    font-size: var(--text-sm);
}

/* ----------------------------------------------------------------------- *
 * header.company — stacked on mobile, brand-left / contact-right from
 * tablet up. The phone is styled as a conversion element, not a detail.
 * ---------------------------------------------------------------------- */

.lf-header-company {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: flex-start;
}

.lf-header-company__brand-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.lf-header-company__logo {
    display: block;
    max-height: var(--space-4xl);
    width: auto;
}

.lf-header-company__name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-xl);
    font-weight: 700;
    color: var(--lf-fg-strong);
}

.lf-header-company__tagline {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

.lf-header-company__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    width: 100%;
}

.lf-header-company__phone,
.lf-header-company__phone-label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lf-fg-muted);
}

.lf-header-company__phone-link {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-xl);
    font-weight: 700;
    color: var(--color-primary-700);
    text-decoration: none;
}

.lf-header-company__phone-link:hover,
.lf-header-company__phone-link:focus-visible {
    text-decoration: underline;
}

.lf-header-company__cta {
    padding-block: var(--space-md);
    font-size: var(--text-sm);
}

.lf-header-company__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-header-company__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    color: var(--lf-fg-muted);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lf-header-company__social-link:hover {
    color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.lf-header-company__social-link:hover,
.lf-header-company__social-link:focus-visible {
    background: var(--color-primary-50);
    border-color: var(--color-primary-600);
}

.lf-header-company__social-glyph {
    width: 1.15rem;
    height: 1.15rem;
}

/* The icon's accessible name — announced, never seen. */
.lf-header-company__social-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 48rem) {
    .lf-header-company {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xl);
    }

    .lf-header-company__contact {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }

    .lf-header-company--center {
        flex-direction: column;
        text-align: center;
    }

    .lf-header-company--center .lf-header-company__contact {
        justify-content: center;
    }
}

/* ----------------------------------------------------------------------- *
 * header.person — the loan officer's personal-brand header. Same rhythm as
 * header.company so the two are visually interchangeable.
 *
 * The CTA composes .lf-btn from the design system; only its size is tuned
 * here. Every colour reads from the section's tone variables so the header
 * stays legible on a light, tinted, or dark band.
 * ---------------------------------------------------------------------- */

.lf-header-person {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: flex-start;
}

/*
 * <x-section-image> wraps its <img> in a <picture>; the wrapper is a source
 * container, not a box, so it steps out of the layout and the image stays
 * the flex item it was.
 */

.lf-header-person__photo {
    width: var(--space-6xl);
    height: var(--space-6xl);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
}

.lf-header-person__identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lf-header-person__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-2xl);
    font-weight: 700;
    color: var(--lf-fg-strong);
}

.lf-header-person__title {
    margin: 0;
    font-size: var(--text-base);
    color: var(--lf-fg-muted);
}

.lf-header-person__nmls {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lf-fg-muted);
}

.lf-header-person__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.lf-header-person__phone,
.lf-header-person__email {
    margin: 0;
}

.lf-header-person__phone-label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lf-fg-muted);
}

.lf-header-person__phone-link {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-xl);
    font-weight: 700;
    color: var(--lf-fg-strong);
    text-decoration: none;
}

.lf-header-person__phone-link:hover,
.lf-header-person__phone-link:focus-visible {
    text-decoration: underline;
}

.lf-header-person__email a {
    font-size: var(--text-sm);
}

/* Only the size differs from the shared button. */
.lf-header-person__cta {
    padding-block: var(--space-md);
    font-size: var(--text-sm);
}

.lf-header-person__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-header-person__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-2xl);
    height: var(--space-2xl);
    border-radius: var(--radius-full);
    border: 1px solid var(--lf-border);
    color: var(--lf-fg-muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.lf-header-person__social-link:hover,
.lf-header-person__social-link:focus-visible {
    color: var(--lf-fg-strong);
    border-color: var(--lf-fg-strong);
}

.lf-header-person__social-glyph {
    width: 1.15rem;
    height: 1.15rem;
}

/* The icon's accessible name — announced, never seen. */
.lf-header-person__social-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lf-header-person__company {
    display: flex;
    align-items: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--lf-border);
    width: 100%;
}

.lf-header-person__company-logo {
    max-height: var(--space-3xl);
    width: auto;
}

.lf-header-person__company-name {
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

@media (min-width: 48rem) {
    .lf-header-person {
        flex-direction: row;
        align-items: center;
        gap: var(--space-xl);
    }

    .lf-header-person__identity {
        margin-inline-end: auto;
    }

    .lf-header-person__contact {
        align-items: flex-end;
    }

    .lf-header-person__company {
        width: auto;
        padding-top: 0;
        padding-inline-start: var(--space-xl);
        border-top: 0;
        border-inline-start: 1px solid var(--lf-border);
    }
}

/* ----------------------------------------------------------------------- *
 * hero.background-image
 *
 * The scrim is load-bearing, not decorative: text over photography is the
 * most common contrast failure on sites of this kind, so the overlay always
 * renders and only its opacity (--lf-hero-bg-scrim, floor 0.3) is tunable.
 *
 * The scrim tone is a *local band*: it re-points the section's foreground
 * variables rather than colouring each element, so .lf-display, .lf-eyebrow,
 * .lf-lede and .lf-btn--secondary all land legible on top of it without this
 * file naming a single colour of its own.
 * ---------------------------------------------------------------------- */

.lf-hero-bg {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 24rem;
    overflow: hidden;
    border-radius: var(--radius-2xl);
}

.lf-hero-bg--dark {
    --lf-fg: var(--color-neutral-100);
    --lf-fg-strong: var(--color-neutral-50);
    --lf-eyebrow: var(--color-accent-400);
    --lf-fg-muted: var(--color-neutral-200);
    --lf-border: var(--color-neutral-200);

    color: var(--lf-fg);
}

.lf-hero-bg--light {
    --lf-fg: var(--color-neutral-800);
    --lf-fg-strong: var(--color-neutral-900);
    --lf-eyebrow: var(--color-accent-700);
    --lf-fg-muted: var(--color-neutral-700);
    --lf-border: var(--color-neutral-700);

    color: var(--lf-fg);
}

.lf-hero-bg__media,
.lf-hero-bg__scrim {
    position: absolute;
    inset: 0;
}

/* <x-section-image> wraps its <img> in a <picture>. */

.lf-hero-bg__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lf-hero-bg--dark .lf-hero-bg__scrim {
    background: linear-gradient(
        to bottom,
        rgba(var(--ca-neutral-900), var(--lf-hero-bg-scrim, 0.55)),
        rgba(var(--ca-neutral-900), calc(var(--lf-hero-bg-scrim, 0.55) * 1.15))
    );
}

.lf-hero-bg--light .lf-hero-bg__scrim {
    background: linear-gradient(
        to bottom,
        rgba(var(--ca-neutral-50), calc(var(--lf-hero-bg-scrim, 0.55) * 0.75)),
        rgba(var(--ca-neutral-50), var(--lf-hero-bg-scrim, 0.55))
    );
}

.lf-hero-bg__content {
    position: relative;
    padding: var(--space-3xl) var(--space-xl);
    max-width: 48rem;
    margin-inline: auto;
    width: 100%;
}

/* Centred copy needs its lede centred with it. */
.lf-hero-bg__content.lf-align-center .lf-hero-bg__subheading {
    margin-inline: auto;
}

.lf-hero-bg__ctas {
    margin-top: var(--space-2xl);
}

@media (min-width: 48rem) {
    .lf-hero-bg {
        min-height: 32rem;
    }

    .lf-hero-bg__content {
        padding: var(--space-4xl) var(--space-2xl);
    }

    .lf-hero-bg__content.lf-align-right .lf-hero-bg__ctas {
        justify-content: flex-end;
    }
}

/* ----------------------------------------------------------------------- *
 * hero.centered
 *
 * Carries the page. Composes .lf-display / .lf-btn / .lf-eyebrow from the
 * design system rather than defining its own type or buttons.
 * ---------------------------------------------------------------------- */

.lf-hero {
    max-width: 60rem;
    margin-inline: auto;
    text-align: center;
    padding-block: var(--space-3xl);
}

.lf-hero__lede {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--lf-fg-muted);
    max-width: 44ch;
    margin: 0 auto var(--space-3xl);
    text-wrap: balance;
}

.lf-hero__actions {
    margin-top: var(--space-2xl);
}

@media (min-width: 64rem) {
    .lf-hero {
        padding-block: var(--space-5xl);
    }
}

/* ----------------------------------------------------------------------- *
 * hero.split-image — text over image on mobile, side by side from tablet.
 *
 * Type comes from .lf-display / .lf-eyebrow / .lf-lede and the buttons from
 * .lf-btn, so only the split layout and the image frame live here.
 * ---------------------------------------------------------------------- */

.lf-hero-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.lf-hero-split__ctas {
    margin-top: var(--space-2xl);
}

/*
 * The wrapper owns the aspect ratio so the row does not reflow once the
 * image decodes, whatever intrinsic size the pipeline ends up emitting.
 */
.lf-hero-split__media {
    aspect-ratio: 4 / 3;
}

/* <x-section-image> wraps its <img> in a <picture>. */

.lf-hero-split__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 48rem) {
    .lf-hero-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
    }

    /* Image first in source order stays second visually unless asked. */
    .lf-hero-split--image-left .lf-hero-split__media {
        order: -1;
    }
}

/* ----------------------------------------------------------------------- *
 * layout.columns — one column on mobile, two on tablet, the declared count
 * on desktop. Three or four columns never appear below 64rem, whatever the
 * author chose, because they don't survive the width.
 * ---------------------------------------------------------------------- */

.lf-columns {
    display: grid;
    grid-template-columns: 1fr;
}

.lf-columns--gap-none { gap: 0; }
.lf-columns--gap-sm { gap: var(--space-lg); }
.lf-columns--gap-md { gap: var(--space-xl); }
.lf-columns--gap-lg { gap: var(--space-2xl); }
.lf-columns--gap-xl { gap: var(--space-3xl); }

@media (min-width: 48rem) {
    .lf-columns--2,
    .lf-columns--3,
    .lf-columns--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lf-columns--valign-top { align-items: start; }
    .lf-columns--valign-center { align-items: center; }
    .lf-columns--valign-bottom { align-items: end; }
    .lf-columns--valign-stretch { align-items: stretch; }
}

@media (min-width: 64rem) {
    .lf-columns--3 { grid-template-columns: repeat(3, 1fr); }
    .lf-columns--4 { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Sections nested inside a container slot shouldn't re-apply the outer
 * container's horizontal padding or max-width — they're already inside one.
 */
.lf-columns__slot .lf-section__inner {
    padding-inline: 0;
    max-width: none;
}

/* ----------------------------------------------------------------------- *
 * layout.divider — a real <hr>. Widths are keyword thicknesses rather than
 * pixel values, so nothing here is hardcoded.
 * ---------------------------------------------------------------------- */

.lf-divider {
    border: 0;
    border-top-style: solid;
    border-top-width: thin;
    /* Tone-aware: a divider is chrome, so it follows the band it sits on
       rather than pinning itself to a light-mode neutral. */
    border-top-color: var(--lf-border);
    margin-block: 0;
    width: 100%;
}

.lf-divider--subtle { border-top-color: var(--lf-border); }
.lf-divider--strong { border-top-color: var(--lf-fg-muted); }
.lf-divider--primary { border-top-color: var(--color-primary-500); }
.lf-divider--accent { border-top-color: var(--color-accent-500); }

.lf-divider--solid { border-top-style: solid; }
.lf-divider--dashed { border-top-style: dashed; }
.lf-divider--dotted { border-top-style: dotted; }

.lf-divider--thin { border-top-width: thin; }
.lf-divider--medium { border-top-width: medium; }
.lf-divider--thick { border-top-width: thick; }

/* Short rules read as decoration rather than as a section break, so they get
   a little more room to breathe on a narrow screen. */
.lf-divider--full { width: 100%; }
.lf-divider--half { width: 70%; }
.lf-divider--short { width: 40%; }

.lf-divider--align-left { margin-inline: 0 auto; }
.lf-divider--align-center { margin-inline: auto; }
.lf-divider--align-right { margin-inline: auto 0; }

@media (min-width: 48rem) {
    .lf-divider--half { width: 50%; }
    .lf-divider--short { width: 25%; }
}

/* ----------------------------------------------------------------------- *
 * layout.image-text — stacks image over text on mobile, side by side from
 * the tablet breakpoint. The frame carries the aspect ratio, so the space is
 * reserved before the image lands and layout shift stays at zero.
 *
 * Eyebrow, heading and the call to action all come from the design system
 * (.lf-eyebrow, .lf-section-heading, .lf-btn); nothing here restates them.
 * ---------------------------------------------------------------------- */

.lf-image-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

.lf-image-text__figure {
    margin: 0;
}

.lf-image-text__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    /* Tone-aware placeholder: reads as a subtle block on a light band and on
       a dark one, rather than punching a white hole through a dark section. */
    background-color: var(--lf-border);
}

.lf-image-text__frame--16-9 { aspect-ratio: 16 / 9; }
.lf-image-text__frame--4-3 { aspect-ratio: 4 / 3; }
.lf-image-text__frame--1-1 { aspect-ratio: 1 / 1; }
.lf-image-text__frame--3-4 { aspect-ratio: 3 / 4; }

/* The shared image component emits a <picture>; it is inline by default, so
   it is blocked out to keep a stray line box out of the frame. */

.lf-image-text__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lf-image-text__caption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

.lf-image-text__text {
    margin-bottom: var(--space-xl);
}

@media (min-width: 48rem) {
    .lf-image-text--valign-top { align-items: start; }
    .lf-image-text--valign-center { align-items: center; }
    .lf-image-text--valign-bottom { align-items: end; }

    /* Ratios are declared per position because `order` moves the figure
       between tracks without changing the track sizes. */
    .lf-image-text--left.lf-image-text--one-third { grid-template-columns: 1fr 2fr; }
    .lf-image-text--left.lf-image-text--half { grid-template-columns: 1fr 1fr; }
    .lf-image-text--left.lf-image-text--two-thirds { grid-template-columns: 2fr 1fr; }

    .lf-image-text--right.lf-image-text--one-third { grid-template-columns: 2fr 1fr; }
    .lf-image-text--right.lf-image-text--half { grid-template-columns: 1fr 1fr; }
    .lf-image-text--right.lf-image-text--two-thirds { grid-template-columns: 1fr 2fr; }

    .lf-image-text--right .lf-image-text__figure {
        order: 2;
    }
}

@media (min-width: 64rem) {
    .lf-image-text {
        gap: var(--space-3xl);
    }
}

/* ----------------------------------------------------------------------- *
 * layout.sidebar-row — stacked on mobile with main first, side by side from
 * the desktop breakpoint. A sidebar beside main content needs more room than
 * an even split, so it waits for 64rem rather than 48rem.
 * ---------------------------------------------------------------------- */

.lf-sidebar-row {
    display: grid;
    grid-template-columns: 1fr;
}

.lf-sidebar-row--gap-none { gap: 0; }
.lf-sidebar-row--gap-sm { gap: var(--space-lg); }
.lf-sidebar-row--gap-md { gap: var(--space-xl); }
.lf-sidebar-row--gap-lg { gap: var(--space-2xl); }
.lf-sidebar-row--gap-xl { gap: var(--space-3xl); }

@media (min-width: 64rem) {
    .lf-sidebar-row--aside-right.lf-sidebar-row--narrow { grid-template-columns: 4fr 1fr; }
    .lf-sidebar-row--aside-right.lf-sidebar-row--medium { grid-template-columns: 3fr 1fr; }
    .lf-sidebar-row--aside-right.lf-sidebar-row--wide { grid-template-columns: 2fr 1fr; }

    /* Main stays first in source order; only the visual order flips. */
    .lf-sidebar-row--aside-left.lf-sidebar-row--narrow { grid-template-columns: 1fr 4fr; }
    .lf-sidebar-row--aside-left.lf-sidebar-row--medium { grid-template-columns: 1fr 3fr; }
    .lf-sidebar-row--aside-left.lf-sidebar-row--wide { grid-template-columns: 1fr 2fr; }

    .lf-sidebar-row--aside-left .lf-sidebar-row__slot--aside {
        order: -1;
    }

    .lf-sidebar-row__slot--sticky {
        position: sticky;
        top: var(--space-2xl);
        align-self: start;
    }
}

/*
 * Sections nested inside a container slot shouldn't re-apply the outer
 * container's horizontal padding or max-width — they're already inside one.
 */
.lf-sidebar-row__slot .lf-section__inner {
    padding-inline: 0;
    max-width: none;
}

/* ----------------------------------------------------------------------- *
 * layout.slider — a CSS scroll-snap carousel. No JavaScript, nothing
 * auto-advances, and every slide is in the DOM and readable if styles or
 * scripts never load. Smooth scrolling is the only motion, and it is dropped
 * entirely under prefers-reduced-motion.
 * ---------------------------------------------------------------------- */

.lf-slider {
    --lf-slide-gap: var(--space-2xl);
}

.lf-slider--gap-none { --lf-slide-gap: 0rem; }
.lf-slider--gap-sm { --lf-slide-gap: var(--space-lg); }
.lf-slider--gap-md { --lf-slide-gap: var(--space-xl); }
.lf-slider--gap-lg { --lf-slide-gap: var(--space-2xl); }
.lf-slider--gap-xl { --lf-slide-gap: var(--space-3xl); }

.lf-slider__track {
    overflow-x: auto;
    overflow-y: hidden;
    /* Same guarantee the other two scrollers carry: slides past the edge belong
       to this box's scroll, not the page's. */
    contain: paint;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* The track is focusable so the carousel is operable by keyboard alone. */
    outline-offset: var(--space-xs);
}

.lf-slider__list {
    display: flex;
    gap: var(--lf-slide-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lf-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.lf-slider--align-center .lf-slider__slide {
    scroll-snap-align: center;
}

/* A sliver of the next slide is what tells a touch user there is more,
   without arrows or a script. */
.lf-slider--peek .lf-slider__slide {
    flex-basis: 85%;
}

@media (min-width: 48rem) {
    .lf-slider--peek .lf-slider__slide {
        flex-basis: 100%;
    }

    .lf-slider--per-2 .lf-slider__slide,
    .lf-slider--per-3 .lf-slider__slide,
    .lf-slider--per-4 .lf-slider__slide {
        flex-basis: calc((100% - var(--lf-slide-gap)) / 2);
    }
}

@media (min-width: 64rem) {
    .lf-slider--per-3 .lf-slider__slide {
        flex-basis: calc((100% - 2 * var(--lf-slide-gap)) / 3);
    }

    .lf-slider--per-4 .lf-slider__slide {
        flex-basis: calc((100% - 3 * var(--lf-slide-gap)) / 4);
    }
}

/* Stated here as well as in base.css: this section is the one most likely to
   be given motion later, and the guard should live with it. */
@media (prefers-reduced-motion: reduce) {
    .lf-slider__track {
        scroll-behavior: auto;
    }
}

/*
 * Sections nested inside a container slot shouldn't re-apply the outer
 * container's horizontal padding or max-width — they're already inside one.
 */
.lf-slider__slide .lf-section__inner {
    padding-inline: 0;
    max-width: none;
}

/* ----------------------------------------------------------------------- *
 * layout.spacer — vertical space drawn from the spacing scale, so it can
 * never break the rhythm the tokens establish. Smaller on a phone, stepping
 * up with the viewport.
 * ---------------------------------------------------------------------- */

.lf-spacer {
    display: block;
    width: 100%;
}

.lf-spacer--sm { height: var(--space-lg); }
.lf-spacer--md { height: var(--space-xl); }
.lf-spacer--lg { height: var(--space-2xl); }
.lf-spacer--xl { height: var(--space-3xl); }
.lf-spacer--2xl { height: var(--space-4xl); }

@media (min-width: 48rem) {
    .lf-spacer--sm { height: var(--space-xl); }
    .lf-spacer--md { height: var(--space-2xl); }
    .lf-spacer--lg { height: var(--space-3xl); }
    .lf-spacer--xl { height: var(--space-4xl); }
    .lf-spacer--2xl { height: var(--space-5xl); }
}

@media (min-width: 64rem) {
    .lf-spacer--xl { height: var(--space-5xl); }
    .lf-spacer--2xl { height: var(--space-6xl); }
}

/* ----------------------------------------------------------------------- *
 * layout.split — stacks on mobile, side by side from the tablet breakpoint
 * ---------------------------------------------------------------------- */

.lf-split {
    display: grid;
    grid-template-columns: 1fr;
}

.lf-split--gap-none { gap: 0; }
.lf-split--gap-sm { gap: var(--space-lg); }
.lf-split--gap-md { gap: var(--space-xl); }
.lf-split--gap-lg { gap: var(--space-2xl); }
.lf-split--gap-xl { gap: var(--space-3xl); }

.lf-split--right-first .lf-split__slot--right {
    order: -1;
}

@media (min-width: 48rem) {
    .lf-split--50-50 { grid-template-columns: 1fr 1fr; }
    .lf-split--60-40 { grid-template-columns: 3fr 2fr; }
    .lf-split--40-60 { grid-template-columns: 2fr 3fr; }
    .lf-split--70-30 { grid-template-columns: 7fr 3fr; }
    .lf-split--30-70 { grid-template-columns: 3fr 7fr; }

    /* Side by side, so the mobile stack order no longer applies. */
    .lf-split--right-first .lf-split__slot--right {
        order: 0;
    }
}

/*
 * Sections nested inside a container slot shouldn't re-apply the outer
 * container's horizontal padding or max-width — they're already inside one.
 */
.lf-split__slot .lf-section__inner {
    padding-inline: 0;
    max-width: none;
}

/* ----------------------------------------------------------------------- *
 * media.gallery — the column count comes from .lf-grid; only the gap
 * choice and the fixed aspect ratios are gallery-specific. Fixed ratios
 * keep layout shift at zero even before the images have loaded.
 * ---------------------------------------------------------------------- */

.lf-gallery__grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Overrides .lf-grid's default gap — the gap is author-selectable here. */
.lf-gallery__grid--gap-sm { gap: var(--space-sm); }
.lf-gallery__grid--gap-md { gap: var(--space-lg); }
.lf-gallery__grid--gap-lg { gap: var(--space-xl); }

.lf-gallery__item {
    margin: 0;
}

.lf-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.lf-gallery__grid--square .lf-gallery__img { aspect-ratio: 1 / 1; }
.lf-gallery__grid--landscape .lf-gallery__img { aspect-ratio: 4 / 3; }
.lf-gallery__grid--portrait .lf-gallery__img { aspect-ratio: 3 / 4; }

.lf-gallery__grid--natural .lf-gallery__img {
    height: auto;
    object-fit: contain;
}

/* ----------------------------------------------------------------------- *
 * media.image — one image, optionally captioned. Mobile-first: full width
 * by default, constrained only once there is room for it.
 * ---------------------------------------------------------------------- */

.lf-media-image {
    margin: 0;
}

.lf-media-image__img {
    display: block;
    width: 100%;
    height: auto;
}

.lf-media-image--rounded .lf-media-image__img {
    border-radius: var(--radius-lg);
}

.lf-media-image__link {
    display: block;
}

.lf-media-image__caption {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    color: var(--lf-fg-muted);
}

/* Centre the constrained image within the section, honouring the text
   alignment class the view puts on the same element. */
.lf-media-image.lf-align-center .lf-media-image__img,
.lf-media-image.lf-align-center .lf-media-image__link {
    margin-inline: auto;
}

.lf-media-image.lf-align-right .lf-media-image__img,
.lf-media-image.lf-align-right .lf-media-image__link {
    margin-inline-start: auto;
}

@media (min-width: 48rem) {
    .lf-media-image--sm .lf-media-image__img,
    .lf-media-image--sm .lf-media-image__link {
        max-width: 24rem;
    }

    .lf-media-image--md .lf-media-image__img,
    .lf-media-image--md .lf-media-image__link {
        max-width: 36rem;
    }

    .lf-media-image--lg .lf-media-image__img,
    .lf-media-image--lg .lf-media-image__link {
        max-width: 52rem;
    }
}

/* ----------------------------------------------------------------------- *
 * media.video — the frame reserves its aspect ratio before the iframe
 * loads, so an embed never pushes the page around.
 * ---------------------------------------------------------------------- */

.lf-video {
    margin: 0;
}

/*
 * A media well, not a surface: it is the letterbox behind the player, so it
 * stays dark on every tone rather than following --lf-surface.
 */
.lf-video__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-neutral-900);
}

.lf-video__frame--16-9 { aspect-ratio: 16 / 9; }
.lf-video__frame--4-3 { aspect-ratio: 4 / 3; }
.lf-video__frame--1-1 { aspect-ratio: 1 / 1; }

.lf-video__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lf-video__caption {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    color: var(--lf-fg-muted);
}

/* ----------------------------------------------------------------------- *
 * mortgage.apply-cta — full-width stacked button on mobile, inline from the
 * tablet breakpoint up.
 * ---------------------------------------------------------------------- */

/*
 * On a toned section the band itself is the panel — a pale inner box fights
 * it and, worse, leaves white heading text on a light background. Only the
 * default light tone draws its own surface.
 */
.lf-apply-cta--banner {
    padding: var(--space-3xl) var(--space-2xl);
    border-radius: var(--radius-2xl);
    background: transparent;
}

.lf-tone-light .lf-apply-cta--banner {
    background: var(--color-primary-50);
}

.lf-apply-cta--card {
    padding: var(--space-2xl) var(--space-xl);
    border: 1px solid var(--lf-border);
    border-radius: var(--radius-lg);
    background: var(--lf-surface);
    box-shadow: var(--shadow-sm);
}

.lf-apply-cta__icon {
    width: var(--space-2xl);
    height: var(--space-2xl);
    color: var(--color-primary-600);
    margin-bottom: var(--space-md);
}

.lf-apply-cta.lf-align-center .lf-apply-cta__icon {
    margin-inline: auto;
}

.lf-apply-cta.lf-align-right .lf-apply-cta__icon {
    margin-inline-start: auto;
}

.lf-apply-cta__eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-600);
    margin-bottom: var(--space-sm);
}

.lf-apply-cta__heading {
    margin-bottom: var(--space-md);
}

.lf-apply-cta__body {
    max-width: 60ch;
    margin-bottom: var(--space-xl);
    color: var(--lf-fg-muted);
}

.lf-apply-cta.lf-align-center .lf-apply-cta__body {
    margin-inline: auto;
}

.lf-apply-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
}

.lf-apply-cta.lf-align-center .lf-apply-cta__actions {
    align-items: center;
}

.lf-apply-cta.lf-align-right .lf-apply-cta__actions {
    align-items: flex-end;
}

.lf-apply-cta__secondary {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.lf-apply-cta__note {
    margin: var(--space-lg) 0 0;
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

/* Announced but not shown: "(opens in a new tab)". */
.lf-apply-cta__sr {
    position: absolute;
    width: var(--space-xs);
    height: var(--space-xs);
    margin: calc(var(--space-xs) * -1);
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 48rem) {
    .lf-apply-cta--banner,
    .lf-apply-cta--card {
        padding: var(--space-3xl);
    }

    .lf-apply-cta__actions {
        flex-direction: row;
        align-items: center;
    }

    .lf-apply-cta.lf-align-center .lf-apply-cta__actions {
        justify-content: center;
    }

    .lf-apply-cta.lf-align-right .lf-apply-cta__actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    }

/* ----------------------------------------------------------------------- *
 * mortgage.calculator — fields stack on mobile and pair up from the tablet
 * breakpoint; the result panel sits beside the form on desktop.
 *
 * The submit button and the CTA compose .lf-btn, the result box composes
 * .lf-panel, and the heading block composes .lf-section-header — so nothing
 * about the look is redefined here, only the calculator's own layout.
 *
 * The result panel and the submit button ship hidden and are revealed by the
 * section's script, so this rule has to keep beating the class rules below
 * or a visitor without JavaScript would see an empty result panel.
 * ---------------------------------------------------------------------- */

.lf-calc [hidden] {
    display: none;
}

.lf-calc__header {
    margin-bottom: var(--space-2xl);
}

.lf-calc__fields {
    display: grid;
    gap: var(--space-xl);
}

.lf-calc__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lf-calc__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--lf-fg);
}

.lf-calc__control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-inline: var(--space-lg);
    border: 1px solid var(--lf-border);
    border-radius: var(--radius-md);
    background: var(--lf-surface);
}

.lf-calc__control:focus-within {
    border-color: var(--color-primary-600);
}

.lf-calc__prefix,
.lf-calc__suffix {
    color: var(--lf-fg-muted);
}

.lf-calc__input {
    flex: 1;
    min-width: 0;
    padding-block: var(--space-md);
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--lf-fg-strong);
}

.lf-calc__input:focus {
    outline: none;
}

.lf-calc__input--select {
    padding-inline-end: var(--space-sm);
}

.lf-calc__hint {
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

.lf-calc__actions {
    margin-top: var(--space-xl);
}

.lf-calc__notice {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-left: 3px solid var(--color-accent-500);
    background: var(--lf-surface);
    color: var(--lf-fg);
}

.lf-calc__result {
    margin-top: var(--space-2xl);
    padding: var(--space-2xl);
}

.lf-calc__result-label {
    /* .lf-eyebrow supplies the type; only the rhythm differs here. */
    margin: 0;
}

.lf-calc__result-value {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-4xl);
    line-height: 1.1;
    color: var(--lf-fg-strong);
}

.lf-calc__breakdown {
    margin: var(--space-xl) 0 0;
    display: grid;
    gap: var(--space-sm);
}

.lf-calc__breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
    border-top: 1px solid var(--lf-border);
    padding-top: var(--space-sm);
}

.lf-calc__breakdown-row dt,
.lf-calc__breakdown-row dd {
    margin: 0;
}

.lf-calc__breakdown-row dd {
    font-weight: 600;
    color: var(--lf-fg-strong);
}

.lf-calc__cta {
    margin-top: var(--space-xl);
}

.lf-calc__disclaimer {
    margin: var(--space-2xl) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--lf-fg-muted);
}

@media (min-width: 48rem) {
    .lf-calc__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .lf-calc__form {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        column-gap: var(--space-3xl);
        align-items: start;
    }

    .lf-calc__fields {
        grid-column: 1;
    }

    .lf-calc__actions,
    .lf-calc__notice {
        grid-column: 1;
    }

    .lf-calc__result {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-top: 0;
    }
}

/* ----------------------------------------------------------------------- *
 * mortgage.loan-products
 *
 * Composes .lf-card / .lf-grid / .lf-section-heading from the design system.
 * Only genuinely product-specific rules live here.
 * ---------------------------------------------------------------------- */

.lf-loan-products__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-loan-products__description {
    flex: 1;
}

.lf-loan-products__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.lf-loan-products__link {
    margin-top: var(--space-xl);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-primary-600);
    text-decoration: none;
}

.lf-loan-products__link::after {
    content: ' →';
}

.lf-loan-products__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* The list variant is a stack rather than a grid. */
.lf-loan-products--list .lf-loan-products__list {
    grid-template-columns: 1fr;
}

/* ----------------------------------------------------------------------- *
 * mortgage.nmls-disclosure — footer compliance block. Small type, but never
 * smaller than the --text-xs step.
 *
 * This block is nearly always placed on a dark band, so nothing here names a
 * colour: text resolves through the tone variables and the Equal Housing
 * mark is drawn in currentColor, which means it inverts with the band rather
 * than disappearing into it. A compliance mark that is invisible on a dark
 * footer is a compliance failure, not a styling one.
 * ---------------------------------------------------------------------- */

.lf-nmls {
    display: grid;
    gap: var(--space-lg);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--lf-fg-muted);
}

/*
 * Same specificity as the design system's link reset and loaded after it, so
 * disclosure links carry the strong foreground on any band.
 */
.lf-nmls a:not(.lf-btn) {
    color: var(--lf-fg-strong);
}

.lf-nmls__identity {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}

.lf-nmls.lf-align-center .lf-nmls__identity {
    justify-content: center;
}

.lf-nmls.lf-align-right .lf-nmls__identity {
    justify-content: flex-end;
}

.lf-nmls__eho {
    flex: none;
    width: var(--space-3xl);
    height: var(--space-3xl);
    color: var(--lf-fg);
}

.lf-nmls__ids {
    display: grid;
    gap: var(--space-xs);
}

.lf-nmls__entity {
    margin: 0;
    font-weight: 600;
    color: var(--lf-fg);
}

.lf-nmls__id {
    margin: 0;
    color: var(--lf-fg);
}

.lf-nmls__licenses {
    display: grid;
    gap: var(--space-xs);
}

.lf-nmls__licenses-label {
    margin: 0;
    font-weight: 600;
    color: var(--lf-fg);
}

.lf-nmls__license-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin: 0;
    padding: 0;
}

.lf-nmls.lf-align-center .lf-nmls__license-list {
    justify-content: center;
}

.lf-nmls.lf-align-right .lf-nmls__license-list {
    justify-content: flex-end;
}

.lf-nmls__license {
    white-space: nowrap;
}

.lf-nmls__address {
    margin: 0;
    font-style: normal;
}

.lf-nmls__phone {
    font-weight: 600;
}

.lf-nmls__statement {
    margin: 0;
    max-width: 80ch;
}

.lf-nmls.lf-align-center .lf-nmls__statement {
    margin-inline: auto;
}

.lf-nmls__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-xl);
    margin: 0;
    padding: 0;
}

.lf-nmls.lf-align-center .lf-nmls__links {
    justify-content: center;
}

.lf-nmls.lf-align-right .lf-nmls__links {
    justify-content: flex-end;
}

.lf-nmls__links a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Announced but not shown: "(opens in a new tab)". */
.lf-nmls__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 48rem) {
    .lf-nmls {
        gap: var(--space-xl);
    }

    .lf-nmls__licenses {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: var(--space-xs) var(--space-lg);
    }
}

/* ----------------------------------------------------------------------- *
 * mortgage.process-steps — a numbered vertical timeline on mobile; the
 * horizontal variant only unfolds once there is room for it.
 *
 * The heading block, the step title/description type and the link all come
 * from the design system (.lf-section-header, .lf-card__title,
 * .lf-card__body, .lf-btn). What is genuinely specific to this section is
 * the numbered marker and the connector between markers, which is all that
 * remains here.
 * ---------------------------------------------------------------------- */

.lf-process__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xl);
}

.lf-process__step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-lg);
    text-align: left;
}

.lf-process__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-3xl);
    height: var(--space-3xl);
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
    color: var(--color-on-primary);
    font-family: var(--font-heading);
    font-weight: 700;
}

.lf-process__icon {
    width: var(--space-xl);
    height: var(--space-xl);
}

.lf-process__dot {
    width: var(--space-sm);
    height: var(--space-sm);
    border-radius: var(--radius-full);
    background: currentColor;
}

/* The connector runs from the marker down to the next step. */
.lf-process--connected .lf-process__step::before {
    content: '';
    position: absolute;
    top: var(--space-3xl);
    bottom: calc(var(--space-2xl) * -1);
    left: calc(var(--space-3xl) / 2);
    width: 2px;
    background: var(--lf-border);
}

.lf-process--connected .lf-process__step:last-child::before {
    display: none;
}

.lf-process__title {
    margin: 0 0 var(--space-xs);
}

.lf-process__timeframe {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-600);
}

.lf-tone-dark .lf-process__timeframe,
.lf-tone-brand .lf-process__timeframe {
    color: var(--color-accent-400);
}

.lf-process__description {
    margin: 0;
}

.lf-process__actions {
    margin-top: var(--space-2xl);
}

@media (min-width: 64rem) {
    .lf-process--horizontal .lf-process__list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    .lf-process--horizontal .lf-process__step {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    /* Horizontal steps connect left to right instead of top to bottom. */
    .lf-process--horizontal.lf-process--connected .lf-process__step::before {
        top: calc(var(--space-3xl) / 2);
        bottom: auto;
        left: var(--space-3xl);
        right: calc(var(--space-xl) * -1);
        width: auto;
        height: 2px;
    }
}

/* ----------------------------------------------------------------------- *
 * mortgage.rate-table — a real table, so on a narrow screen it scrolls
 * horizontally inside its own container rather than being reflowed into
 * something a screen reader can no longer navigate by row and column.
 *
 * The heading block composes .lf-section-header / .lf-section-heading /
 * .lf-eyebrow / .lf-lede; rules, borders and the zebra stripe are drawn from
 * the tone variables so the table survives a dark band.
 * ---------------------------------------------------------------------- */

.lf-rate-table__header {
    margin-bottom: var(--space-xl);
}

.lf-rate-table__as-of {
    margin: 0 0 var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--lf-fg-muted);
}

.lf-rate-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* As on the testimonial rail: a wide table scrolls in its own box and does
       not lend its width to the page. A six-column rate table on a phone is
       exactly where this would otherwise show. */
    contain: paint;
}

.lf-rate-table__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.lf-rate-table__caption {
    caption-side: top;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
    padding-bottom: var(--space-md);
}

.lf-rate-table__table th,
.lf-rate-table__table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--lf-border);
    white-space: nowrap;
}

.lf-rate-table__table thead th {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lf-fg-muted);
    border-bottom: 2px solid var(--lf-border);
}

/*
 * A translucent stripe rather than a fixed grey: it darkens a light band and
 * lightens a dark one, so the zebra reads either way.
 */
.lf-rate-table__table tbody tr:nth-child(even) {
    background: rgba(var(--ca-neutral-500), 0.08);
}

.lf-rate-table__loan-type {
    font-weight: 600;
    color: var(--lf-fg-strong);
    white-space: normal;
}

.lf-rate-table__note {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--lf-fg-muted);
}

.lf-rate-table__footnote {
    margin: var(--space-xl) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--lf-fg-muted);
}

@media (min-width: 48rem) {
    .lf-rate-table__table th,
    .lf-rate-table__table td {
        padding: var(--space-lg) var(--space-xl);
    }
}

/* Assumptions behind a representative APR — small, but never hidden. */
.lf-rate-table__assumptions {
    margin: var(--space-lg) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--lf-fg-muted);
}

/* ----------------------------------------------------------------------- *
 * nav.primary — a <details> disclosure on mobile, a horizontal bar from the
 * tablet breakpoint. No JavaScript is involved at either size.
 *
 * The CTA composes .lf-btn; only its size is tuned here. Colours read from
 * the section tone so the bar works on a light or dark band alike.
 * ---------------------------------------------------------------------- */

.lf-nav__disclosure {
    border-block: 1px solid var(--lf-border);
}

.lf-nav__summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--lf-fg-strong);
    cursor: pointer;
    list-style: none;
}

.lf-nav__summary::-webkit-details-marker {
    display: none;
}

/* A hamburger drawn from the type system rather than an icon font. */
.lf-nav__summary::before {
    content: '';
    width: var(--space-xl);
    height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 0 currentColor, 0 -6px 0 0 currentColor;
}

.lf-nav__disclosure[open] .lf-nav__summary::before {
    box-shadow: none;
    transform: rotate(45deg);
}

.lf-nav__panel {
    padding-bottom: var(--space-md);
}

/*
 * Collapse explicitly rather than relying on the UA hiding a closed
 * <details>. The markup ships `open` (so no-JS users always see the links,
 * and so the desktop bar renders without JavaScript), which means the closed
 * state on mobile has to be expressed here.
 */
@media (max-width: 47.999rem) {
    .lf-nav__disclosure:not([open]) .lf-nav__panel {
        display: none;
    }
}

.lf-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-nav__link {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--lf-fg);
    text-decoration: none;
}

.lf-nav__link:hover,
.lf-nav__link:focus-visible {
    color: var(--lf-fg-strong);
}

.lf-nav__cta {
    margin-top: var(--space-sm);
    padding-block: var(--space-md);
    font-size: var(--text-sm);
}

@media (min-width: 48rem) {
    .lf-nav__disclosure {
        border-block: 0;
    }

    /* The disclosure control is a mobile affordance only. */
    .lf-nav__summary {
        display: none;
    }

    /*
     * A closed <details> hides its non-summary children; both declarations
     * are needed to override that across engines so the bar shows whether or
     * not the disclosure was ever opened.
     */
    .lf-nav__panel {
        display: block;
        content-visibility: visible;
        padding-bottom: 0;
    }

    .lf-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xl);
    }

    .lf-nav--center .lf-nav__list {
        justify-content: center;
    }

    .lf-nav--right .lf-nav__list {
        justify-content: flex-end;
    }

    .lf-nav__item--cta {
        margin-inline-start: auto;
    }

    .lf-nav--center .lf-nav__item--cta,
    .lf-nav--right .lf-nav__item--cta {
        margin-inline-start: 0;
    }

    .lf-nav__cta {
        margin-top: 0;
    }
}

/* ----------------------------------------------------------------------- *
 * team.grid
 *
 * Composes .lf-grid / .lf-card / .lf-section-heading from the design system;
 * only the member-specific details live here.
 * ---------------------------------------------------------------------- */

.lf-team-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-team-grid__member {
    gap: var(--space-sm);
}

/*
 * <x-section-image> wraps its <img> in a <picture>; the wrapper is a source
 * container, not a box, so it steps out of the card's flex flow.
 */

.lf-team-grid__photo {
    width: var(--space-6xl);
    height: var(--space-6xl);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.lf-team-grid__name {
    margin: 0;
}

.lf-team-grid__name-link {
    color: inherit;
    text-decoration: none;
}

.lf-team-grid__name-link:hover,
.lf-team-grid__name-link:focus-visible {
    text-decoration: underline;
}

.lf-team-grid__title {
    margin: 0;
    color: var(--lf-fg-muted);
}

.lf-team-grid__nmls {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lf-fg-muted);
}

.lf-team-grid__bio {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-sm);
}

.lf-team-grid__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    margin: auto 0 0;
    padding: var(--space-lg) 0 0;
    font-size: var(--text-sm);
}

/* ----------------------------------------------------------------------- *
 * testimonial.slider
 *
 * A scroll-snap rail rather than a scripted carousel: it works with no
 * JavaScript, scrolls by keyboard because the rail is focusable, and has no
 * autoplay — so there is nothing for prefers-reduced-motion to stop beyond
 * the smooth-scroll hint, which is disabled below.
 *
 * The quote box is a .lf-card; only the rail is section-specific.
 * ---------------------------------------------------------------------- */

/*
 * The scrollable region is the focusable element (a keyboard user must be
 * able to reach and scroll it); the list inside keeps its list semantics so
 * the item count is still announced.
 */
.lf-testimonials__rail {
    overflow-x: auto;
    /*
     * What scrolls inside this box stays inside it. `overflow-x: auto` clips
     * what is painted, and on a phone the slides still counted towards the
     * page's own scrollable width — 774px of document in a 390px viewport,
     * the extra 384 of it blank. Nothing was visible out there; the page just
     * slid sideways under a thumb, which reads as broken.
     */
    contain: paint;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding-bottom: var(--space-lg);
}

.lf-testimonials__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lf-testimonials__item {
    scroll-snap-align: start;
}

.lf-testimonials__figure {
    gap: var(--space-md);
    margin: 0;
}

.lf-testimonials__rating {
    margin: 0;
    color: var(--color-accent-600);
    letter-spacing: 0.1em;
}

/* The accent lightens on a dark band, exactly as .lf-eyebrow does. */
.lf-tone-dark .lf-testimonials__rating,
.lf-tone-brand .lf-testimonials__rating {
    color: var(--color-accent-400);
}

/* The stars are decorative; this is the text an assistive tech reads. */
.lf-testimonials__rating-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lf-testimonials__quote {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--lf-fg);
}

.lf-testimonials__quote p {
    margin: 0;
}

.lf-testimonials__attribution {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--lf-fg-muted);
}

.lf-testimonials__name {
    font-weight: 600;
    color: var(--lf-fg-strong);
}

@media (prefers-reduced-motion: reduce) {
    .lf-testimonials__rail {
        scroll-behavior: auto;
    }
}

@media (min-width: 48rem) {
    .lf-testimonials__track {
        grid-auto-columns: 45%;
    }
}

@media (min-width: 64rem) {
    .lf-testimonials__track {
        grid-auto-columns: 30%;
    }
}

/* ----------------------------------------------------------------------- *
 * text.heading
 *
 * Type and eyebrow come from the design system (.lf-section-heading,
 * .lf-eyebrow). The only thing left is the trailing margin, which a standalone
 * heading section doesn't want — its spacing is the layout padding's job.
 * ---------------------------------------------------------------------- */

.lf-heading__text {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------- *
 * text.rich — body copy
 * ---------------------------------------------------------------------- */

.lf-rich__body {
    margin: 0;
}

.lf-rich--sm {
    font-size: var(--text-sm);
}

.lf-rich--base {
    font-size: var(--text-base);
}

.lf-rich--lg {
    font-size: var(--text-lg);
}

/* A capped measure is the default: long lines are the most common
   readability failure in a full-width text block. */
.lf-rich--prose {
    max-width: 68ch;
}

.lf-rich--full {
    max-width: none;
}

.lf-rich--prose.lf-align-center {
    margin-inline: auto;
}

.lf-rich--prose.lf-align-right {
    margin-inline-start: auto;
}

/* ----------------------------------------------------------------------- *
 * text.three-column — one column on mobile, two on tablet, three on desktop.
 * It steps rather than jumping straight to three, because three columns of
 * prose at tablet width is unreadable.
 * ---------------------------------------------------------------------- */

.lf-text-3col__body {
    margin: 0;
}

.lf-text-3col {
    column-count: 1;
}

.lf-text-3col--gap-sm { column-gap: var(--space-lg); }
.lf-text-3col--gap-md { column-gap: var(--space-xl); }
.lf-text-3col--gap-lg { column-gap: var(--space-2xl); }
.lf-text-3col--gap-xl { column-gap: var(--space-3xl); }

@media (min-width: 48rem) {
    .lf-text-3col {
        column-count: 2;
    }

    /* Tone-aware: the rule has to stay legible when this section sits on a
       dark or brand band, so it takes the tone's border colour. */
    .lf-text-3col--rule {
        column-rule: thin solid var(--lf-border);
    }
}

@media (min-width: 64rem) {
    .lf-text-3col {
        column-count: 3;
    }
}

/* ----------------------------------------------------------------------- *
 * text.two-column — one flow of copy, two columns from the tablet breakpoint
 * ---------------------------------------------------------------------- */

.lf-text-2col__body {
    margin: 0;
}

.lf-text-2col {
    column-count: 1;
}

.lf-text-2col--gap-sm { column-gap: var(--space-lg); }
.lf-text-2col--gap-md { column-gap: var(--space-xl); }
.lf-text-2col--gap-lg { column-gap: var(--space-2xl); }
.lf-text-2col--gap-xl { column-gap: var(--space-3xl); }

@media (min-width: 48rem) {
    .lf-text-2col {
        column-count: 2;
    }

    /* Tone-aware: the rule has to stay legible when this section sits on a
       dark or brand band, so it takes the tone's border colour. */
    .lf-text-2col--rule {
        column-rule: thin solid var(--lf-border);
    }
}