/* =====================================================================
 * AI Search Rankings, Google Ads Landing Page Design System
 * ---------------------------------------------------------------------
 * Scope: /lp/ only. Loaded by lp/_lp-template.php.
 *
 * Why this file exists
 *   Landing pages for paid clicks are served standalone, without the site
 *   header, so they cannot inherit assets/styles.css. This file carries the
 *   same design language the public pricing page uses, with the same token
 *   names, the same class names, and the same values, so a visitor who moves
 *   from an ad landing page to /pricing.php sees one continuous brand.
 *   /pricing.php remains the reference implementation of the visual system and
 *   is not modified by this file.
 *
 * Brand rules enforced here
 *   Dark teal #003737 is the primary. Forest green #036d4a and gold #d4af37
 *   are the only accents. Purple, violet, lavender, lilac, plum, purple
 *   leaning indigo and purple leaning magenta never appear.
 *   Icons come from an inline SVG sprite, never an icon font and never emoji.
 *
 * Structure
 *   1  Tokens and base
 *   2  Shared primitives carried over from /pricing.php
 *   3  Landing page chrome: skip link, top bar, section nav, sticky bar
 *   4  Sections
 *   5  Interactive: package fit finder, form, accordion
 *   6  Responsive
 *   7  Motion, print, forced colors
 * ===================================================================== */

/* -------------------------------------------------- 1. Tokens and base */
.lp-page {
    --ink: #020305;

    /* Secondary body text. Measured 12.37:1 on white and 11.64:1 on the wash,
       so supporting copy reads as text rather than as greyed out filler. The
       token keeps its name because the whole stylesheet references it, but it is
       deliberately not a low contrast grey. */
    --muted: #2b3545;

    /* The smallest text on the page: field hints, notes, privacy lines. It was
       #6a7787, which measured 4.11:1 on the teal tint and therefore failed
       WCAG AA at the sizes it is used. This measures 8.71:1 on white and
       7.68:1 on the tint. */
    --ink-quiet: #414c5c;

    --teal: #003737;
    --teal-deep: #07504d;
    --teal-light: #e8f6f3;
    --mint: #baffc9;
    --green: #036d4a;
    --green-bright: #188b45;
    --gold: #d4af37;

    /* Gold is a fill color, not an outline color. On white it measures 2.10:1,
       which fails the 3:1 that WCAG 1.4.11 requires of a focus indicator and of
       a selection outline. This darker gold measures 4.97:1 on white and 3.46:1
       on the teal sections, so one value works on every background the pages
       use. */
    --gold-deep: #8a6a00;

    /* Decorative divider between surfaces. Not a UI component boundary, so the
       3:1 rule does not apply to it. Form control borders use --field-line. */
    --line: #dce6e4;

    /* Form control boundaries. A control's edge is a UI component under WCAG
       1.4.11 and needs 3:1. The previous #ccd9d6 and #c7d4d1 measured about
       1.45:1, so the fields were effectively borderless for anyone with reduced
       contrast sensitivity. These measure 3.39:1 at rest and 7.16:1 on hover. */
    --field-line: #7d918c;
    --field-line-hover: #3f5d57;

    --paper: #ffffff;
    --wash: #f5f9f8;
    --shell: 1240px;

    background: var(--paper);
    color: var(--ink);
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

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

.lp-page h1,
.lp-page h2,
.lp-page h3,
.lp-page h4 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.lp-page img { max-width: 100%; }
.lp-page p { text-wrap: pretty; }

.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.lp-ico {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    vertical-align: -.22em;
}
.lp-ico-sm { width: 16px; height: 16px; }
.lp-ico-lg { width: 26px; height: 26px; }

.pricing-shell { width: min(100% - 32px, var(--shell)); margin-inline: auto; }

/* Visually hidden but available to assistive technology. */
.lp-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ------------------------- 2. Shared primitives carried from /pricing.php */
.pricing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid rgba(0, 55, 55, .16);
    border-radius: 999px;
    background: rgba(232, 246, 243, .8);
    color: var(--teal);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.pricing-kicker .lp-ico { width: 15px; height: 15px; }

.pricing-btn {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border: 2px solid var(--teal);
    border-radius: 12px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    cursor: pointer;
}
.pricing-btn:hover { transform: translateY(-2px); }
.pricing-btn-primary { background: var(--teal); color: #ffffff; box-shadow: 0 9px 24px rgba(0, 55, 55, .18); }
.pricing-btn-primary:hover { background: var(--teal-deep); color: #ffffff; }
.pricing-btn-secondary { background: #ffffff; color: var(--teal); }
.pricing-btn-secondary:hover { background: var(--teal-light); color: var(--teal); }
.pricing-btn-ghost { border-color: rgba(255, 255, 255, .62); background: transparent; color: #ffffff; }
.pricing-btn-ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, .12); color: #ffffff; }
.pricing-btn[aria-disabled="true"],
.pricing-btn[disabled] { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }

.lp-page a:focus-visible,
.lp-page button:focus-visible,
.lp-page summary:focus-visible,
.lp-page input:focus-visible,
.lp-page select:focus-visible,
.lp-page textarea:focus-visible,
.package-option input:focus-visible + .package-select,
.lp-choice input:focus-visible + .lp-choice-label {
    /*
     * A two tone focus indicator.
     *
     * These pages have both white sections and dark teal sections, and no single
     * color clears 3:1 on both. Dark gold measures 4.97:1 on white but only
     * 2.59:1 on the teal, and a light ring has the opposite problem. A keyboard
     * user would lose the indicator on half the page.
     *
     * WCAG 2.1 allows a focus indicator built from two adjacent colors as long
     * as one of them meets 3:1 against what is behind it. The box shadow paints
     * a white band in the outline offset gap, so on the teal sections the white
     * band carries the contrast at 13.11:1, and on the white sections the gold
     * ring carries it at 4.97:1. The indicator is always clearly visible.
     *
     * The shadow deliberately replaces any resting shadow on the control. A
     * focused control should read as focused first.
     */
    outline: 3px solid var(--gold-deep);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--paper);
    border-radius: 6px;
}

/* Windows high contrast mode paints its own focus indicator and ignores custom
   colors. Restoring the system outline keeps the indicator visible there. */
@media (forced-colors: active) {
    .lp-page a:focus-visible,
    .lp-page button:focus-visible,
    .lp-page summary:focus-visible,
    .lp-page input:focus-visible,
    .lp-page select:focus-visible,
    .lp-page textarea:focus-visible,
    .package-option input:focus-visible + .package-select,
    .lp-choice input:focus-visible + .lp-choice-label {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
}

.pricing-section-heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.pricing-section-heading h2 { margin: 13px 0 12px; font-size: clamp(1.85rem, 5.4vw, 2.85rem); font-weight: 600; line-height: 1.1; }
.pricing-section-heading p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.72; }

/* ------------------------------------------------ 3. Landing page chrome */
.lp-skip {
    position: absolute;
    left: 16px; top: -80px;
    z-index: 90;
    padding: 12px 18px;
    border-radius: 0 0 12px 12px;
    background: var(--teal);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: top .18s ease;
}
.lp-skip:focus { top: 0; }

.lp-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
}
.lp-topbar-inner {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.lp-brandmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.lp-brandmark img { width: auto; height: 74px; }
.lp-brandmark-text { display: grid; line-height: 1.15; }
.lp-brandmark-text strong { font-family: 'Space Grotesk', sans-serif; font-size: .96rem; font-weight: 600; letter-spacing: -.02em; }
.lp-brandmark-text span { color: var(--muted); font-size: .68rem; font-weight: 600; }
.lp-topbar-actions { display: flex; align-items: center; gap: 10px; }
.lp-topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--teal);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.lp-topbar-phone:hover { text-decoration: underline; }
.lp-topbar .pricing-btn { min-height: 42px; padding: 9px 16px; font-size: .84rem; }

/* Section navigation. Enterprise buyers scan before they read, so the page
   exposes its own map instead of hiding it. */
.lp-sectionnav { border-bottom: 1px solid var(--line); background: var(--wash); }
.lp-sectionnav ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.lp-sectionnav a {
    display: inline-block;
    padding: 13px 14px;
    border-bottom: 3px solid transparent;
    color: #33424f;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.lp-sectionnav a:hover { color: var(--teal); border-bottom-color: rgba(0, 55, 55, .3); }
.lp-sectionnav a[aria-current="true"] { color: var(--teal); border-bottom-color: var(--teal); }

.lp-stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    gap: 9px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 24px rgba(2, 3, 5, .1);
    transform: translateY(115%);
    transition: transform .26s ease;
}
.lp-stickybar.is-visible { transform: translateY(0); }
.lp-stickybar .pricing-btn { flex: 1 1 0; min-height: 48px; padding: 11px 12px; font-size: .86rem; }

/* --------------------------------------------------------- 4. Sections */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 46px 0 40px;
    background:white;
}
.lp-hero::after {
    content: '';
    position: absolute;
    right: -95px; bottom: -120px;
    width: 260px; height: 260px;
    border: 52px solid rgba(0, 55, 55, .035);
    border-radius: 50%;
    pointer-events: none;
}
.lp-hero-grid { display: grid; gap: 32px; align-items: center; }
.lp-hero h1 {
    max-width: 15ch;
    margin: 16px 0 14px;
    color: var(--ink);
    font-size: clamp(2.1rem, 7.4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.04;
    max-width: none;
}
.lp-hero h1 .lp-rotate { color: var(--teal); }
.lp-hero-copy { max-width: 62ch; margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.lp-hero-copy strong { color: var(--ink); }

.hero-capabilities { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.hero-capabilities li { display: flex; align-items: center; gap: 7px; color: #405064; font-size: .79rem; font-weight: 600; }
.hero-capabilities li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green-bright); }

.hero-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }
.lp-hero-reassure { margin: 14px 0 0; color: var(--ink-quiet); font-size: .78rem; line-height: 1.55; }

.hero-media {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
}
.hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.lp-proofbar { border-block: 1px solid var(--line); background: #ffffff; }
.lp-proofbar ul { display: grid; gap: 12px; margin: 0; padding: 18px 0; list-style: none; }
.lp-proofbar li { display: flex; align-items: flex-start; gap: 10px; color: #334155; font-size: .85rem; line-height: 1.5; }
.lp-proofbar .lp-ico { color: var(--green); margin-top: 1px; }
.lp-proofbar strong { display: block; color: var(--ink); font-size: .88rem; }

/* AI engine logo strip.
   These are the exact class names and values used by
   includes/partials/ai-engine-logo-strip.php, which renders this same strip on
   the home page, the services hub, and the pricing page. The rules are restated
   here because a landing page is standalone and does not load the shared
   partial, and keeping the names identical means the two implementations stay
   visually interchangeable. */
.ai-logostrip { padding: 80px 0 80px 0px; border-block: 1px solid #dbe7e2; background: #ffffff; }
.ai-logostrip-wrap { width: min(100% - 32px, 1180px); margin-inline: auto; text-align: center; }
.ai-logostrip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 55, 55, .16);
    border-radius: 100px;
    background: rgba(232, 246, 243, .7);
    color: var(--teal);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ai-logostrip-eyebrow .lp-ico { color: var(--green-bright); width: 15px; height: 15px; }
.ai-logostrip h2 {
    max-width: 820px;
    margin: 14px auto 6px;
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.02em;
    color: var(--ink);
}
.ai-logostrip h2 .lp-accent { color: var(--teal); }
.ai-logostrip-note { max-width: 74ch; margin: 0 auto 26px; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.ai-logostrip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ai-logostrip-item {
    display: flex;
    min-width: 0;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 10px;
    border: 1px solid #e3ebe9;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.ai-logostrip-item:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 6, 23, .07); }
.ai-logostrip-item img { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.ai-logostrip-item span { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: .82rem; font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ai-logostrip-item { transition: none; } }

/* Compact engine chip, retained for the package cards where a full strip would
   crowd the layout. Values carried from /pricing.php. */
.engine-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.engine-chip {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid #d7e0e4;
    border-radius: 12px;
    background: #ffffff;
    color: #202938;
    font-size: .72rem;
    font-weight: 600;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .035);
}
.engine-chip img { width: 27px; height: 27px; flex: 0 0 auto; object-fit: contain; }
.engine-chip span { min-width: 0; line-height: 1.25; }

/* Answer first components. Class names and values carried from
   assets/css/aeo-components.css so the answer block on a landing page looks
   identical to the one EliteAEO renders on a service page. */
.aeo-answer-intro {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    border-left: 4px solid var(--teal);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ink);
}
.aeo-answer-intro p:last-child { margin-bottom: 0; }
.aeo-key-takeaway {
    margin: 0;
    padding: 1.5rem;
    border-radius: 0 12px 12px 0;
    background: #f8fafc;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05);
}
.aeo-key-takeaway-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    color: var(--teal);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
}
.aeo-key-takeaway-header h2 { margin: 0; font-size: inherit; font-weight: 600; letter-spacing: -.02em; }
.aeo-key-takeaway-content { color: #334155; font-size: 1rem; line-height: 1.65; }
.aeo-key-takeaway-content p { margin: 0 0 12px; }
.aeo-key-takeaway-content p:last-child { margin-bottom: 0; }

/* Page freshness bar. Class names and values carried from aeo-components.css. */
.aeo-freshness-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0 0;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: .875rem;
}
.aeo-freshness-item { display: flex; align-items: center; gap: .5rem; }
.aeo-freshness-item .lp-ico { color: var(--green); width: 16px; height: 16px; }
.aeo-freshness-item a { color: var(--green); font-weight: 500; text-decoration: none; }
.aeo-freshness-item a:hover { text-decoration: underline; }

/* Six local visibility pillars, class names shared with /pricing.php */
.lp-pillars { padding: 80px 0 80px 0px; background: #ffffff; }
.pillar6-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pillar6-card { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #f7faf9; }
.pillar6-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--teal-light); color: var(--teal); }
.pillar6-card h3 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pillar6-card p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }

/* Answer first callout */
.lp-answer { padding: 80px 0 80px 0px; background: var(--wash); }
.lp-answer-card {
    max-width: 900px;
    margin-inline: auto;
    padding: 26px;
    border: 4px solid #b8d8d2;
    border-top: 6px solid var(--teal);
    border-bottom: 6px solid var(--teal);
    border-radius: 18px;
    background: linear-gradient(145deg, #effaf7, #ffffff);
}
.lp-answer-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--teal); }
.lp-answer-head h2 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; }
.lp-answer-card p { margin: 0 0 12px; color: #1d2733; font-size: 1.02rem; line-height: 1.78; }
.lp-answer-card p:last-child { margin-bottom: 0; }

/* Media split, alternating rhythm */
.lp-split { padding: 80px 0 80px 0px; }
.lp-split-a { background: #ffffff; }
.lp-split-b { background: var(--wash); }
.lp-split-grid { display: grid; gap: 32px; align-items: center; }
.lp-split-media { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #f5faf9; box-shadow: 0 18px 48px rgba(2, 3, 5, .07); }
.lp-split-media img { display: block; width: auto; height: auto; aspect-ratio: 1 / 1; object-fit: scale-down; }
.lp-split h2 { margin: 13px 0 14px; font-size: clamp(1.65rem, 4.6vw, 2.4rem); font-weight: 600; line-height: 1.12; }
.lp-split > .pricing-shell > .lp-split-grid p { color: var(--muted); line-height: 1.75; }
.lp-painlist { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.lp-painlist li { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; }
.lp-painlist .lp-painicon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(0, 55, 55, .14); border-radius: 12px; background: var(--teal-light); color: var(--teal); }
.lp-painlist h3 { margin: 2px 0 4px; font-size: .98rem; font-weight: 600; }
.lp-painlist p { margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.6; }

/* Deliverables grid */
.lp-deliver { padding: 80px 0 80px 0px; background: #ffffff; }
.lp-cardgrid { display: grid; gap: 16px; }
.lp-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(2, 3, 5, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lp-card:hover { border-color: rgba(0, 55, 55, .35); box-shadow: 0 16px 40px rgba(0, 55, 55, .1); transform: translateY(-3px); }
.lp-card-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 15px; border: 1px solid rgba(0, 55, 55, .16); border-radius: 13px; background: var(--teal-light); color: var(--teal); }
.lp-card h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 600; line-height: 1.3; }
.lp-card p { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.lp-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font-size: .84rem; font-weight: 800; text-decoration: none; }
.lp-card-link:hover { text-decoration: underline; }
.lp-card-link .lp-ico { width: 17px; height: 17px; transition: transform .2s ease; }
.lp-card-link:hover .lp-ico { transform: translateX(3px); }

/* Objection handling. Each doubt sits next to the answer for that doubt. */
.lp-objections { padding: 80px 0 80px 0px; background: var(--wash); }
.lp-objection-grid { display: grid; gap: 16px; }
.lp-objection {
    padding: 24px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
}
.lp-objection-doubt {
    display: flex;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px dashed #cfdcd9;
    color: #6b2b2b;
    font-size: .92rem;
    font-style: italic;
    line-height: 1.55;
}
.lp-objection-doubt .lp-ico { color: #9a4a4a; margin-top: 2px; }
.lp-objection h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--teal); }
.lp-objection p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.68; }
.lp-objection p:last-child { margin-bottom: 0; }
.lp-objection-proof {
    display: flex;
    gap: 9px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--teal-light);
    color: #12463f;
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.55;
}
.lp-objection-proof .lp-ico { color: var(--green); flex: 0 0 auto; margin-top: 1px; }

/* Benefit line. One plain sentence saying what the buyer actually gets, placed
   where a scanning reader looks first. */
.lp-benefit {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 11px;
    align-items: start;
    margin: 20px 0 0;
    padding: 15px 17px;
    border: 1px solid #b8d8d2;
    border-left: 5px solid var(--green);
    border-radius: 12px;
    background: #effaf7;
    color: #12463f;
    font-size: .97rem;
    line-height: 1.62;
}
.lp-benefit .lp-ico { color: var(--green); margin-top: 3px; }
.lp-benefit strong { color: #0b3830; }

/* What goes wrong, and how we prevent it. The trust argument: a buyer choosing
   an agency is buying the avoidance of expensive mistakes. */
.lp-risks { padding: 80px 0 80px 0px; background: #ffffff; }
.lp-risk-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-risk {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(2, 3, 5, .05);
}
.lp-risk-half { padding: 20px 22px; }
.lp-risk-bad { background: #fffafa; border-bottom: 1px solid #f0dcdc; }
.lp-risk-good { background: #f6fcfa; }
.lp-risk-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lp-risk-bad .lp-risk-label { color: #8f2632; }
.lp-risk-bad .lp-risk-label .lp-ico { color: #b2242f; }
.lp-risk-good .lp-risk-label { color: var(--green); }
.lp-risk-good .lp-risk-label .lp-ico { color: var(--green); }
.lp-risk h3 { margin: 0 0 7px; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.lp-risk-bad h3 { color: #6b2b2b; }
.lp-risk-good h3 { color: var(--teal); }
.lp-risk p { margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.66; }
.lp-risk-close {
    max-width: 74ch;
    margin: 26px auto 0;
    padding: 18px 20px;
    border: 1px solid #b8d8d2;
    border-radius: 14px;
    background: linear-gradient(145deg, #effaf7, #ffffff);
    color: #12463f;
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
}
.lp-risk-close strong { color: #0b3830; }
.lp-risk-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top:70px; }

/* Process, The Local Answer System */
.lp-process { padding: 80px 0 80px 0px; background: #ffffff; }
.lp-process-grid { display: grid; gap: 34px; align-items: start; }
.lp-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: lpstep; }
.lp-step {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 114px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #ffffff;
}
.lp-step-num {
    display: grid;
    width: 146px; height: 46px;
    place-items: center;
    border-radius: 13px;
    background: var(--teal);
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lp-step h3 { margin: 0 0 4px; font-size: 1.4rem; font-weight: 600; }
.lp-step p { margin: 0 0 8px; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.lp-step-output { display: flex; gap: 8px; margin: 0; color: #12463f; font-size: .82rem; font-weight: 600; line-height: 1.5; }
.lp-step-output .lp-ico { color: var(--green); flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px; }

/* Documented proof */
.lp-proof { padding: 80px 0 80px 0px; background: var(--teal); color: #ffffff; }
.lp-proof .pricing-section-heading h2 { color: #ffffff; }
.lp-proof .pricing-section-heading p { color: rgba(255, 255, 255, .92); }
.lp-proof .pricing-kicker { border-color: rgba(186, 255, 201, .25); background: rgba(186, 255, 201, .1); color: var(--mint); }
.lp-proof-grid { display: grid; gap: 16px; }
.lp-proof-card { display: flex; flex-direction: column; padding: 24px 22px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.lp-proof-label { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-bottom: 13px; padding: 5px 11px; border-radius: 999px; background: var(--mint); color: #06382b; font-size: .88rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lp-proof-card h3 { margin: 0 0 10px; color: #ffffff; font-size: 1.08rem; font-weight: 600; }
.lp-proof-card p { margin: 0 0 12px; color: rgba(255, 255, 255, .94); font-size: .9rem; line-height: 1.7; }
.lp-proof-limit { margin: auto 0 14px; padding: 11px 13px; border-radius: 10px; background: rgba(0, 0, 0, .28); color: rgba(255, 255, 255, .94); font-size: .79rem; line-height: 1.55; }
.lp-proof-card a { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); font-size: .84rem; font-weight: 800; text-decoration: none; }
.lp-proof-card a:hover { text-decoration: underline; }

/* Founder credibility */
.lp-author { padding: 80px 0 80px 0px; background: #ffffff; border-bottom: 1px solid var(--line); }
.lp-author-row { display: grid; gap: 18px; align-items: center; max-width: 950px; margin-inline: auto; }
.lp-author-avatar { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--teal-light); object-fit: cover; }
.lp-author-body h2 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; }
.lp-author-body p { margin: 0 0 8px; color: var(--muted); font-size: .89rem; line-height: 1.65; }
.lp-author-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.lp-author-meta li { display: flex; align-items: center; gap: 7px; color: #46535f; font-size: .8rem; font-weight: 600; }
.lp-author-meta .lp-ico { color: var(--green); width: 16px; height: 16px; }
.lp-author-body a { color: var(--teal); font-weight: 600; }

/* Packages, carried from /pricing.php */
.packages-section { padding: 66px 0 72px; background: var(--wash); }
.package-grid { display: grid; gap: 20px; }
.package-card {
    --package-accent: var(--teal);
    --package-accent-dark: var(--teal);
    --package-soft: var(--teal-light);
    --package-rgb: 0, 55, 55;
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 25px 20px 21px;
    border: 2px solid var(--package-accent);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 12px 34px rgba(var(--package-rgb), .09);
}
.package-card.featured { box-shadow: 0 20px 50px rgba(var(--package-rgb), .16); }
.package-card.is-recommended { outline: 3px solid var(--gold-deep); outline-offset: 4px; }
.popular-badge {
    position: absolute;
    top: 0; left: 50%;
    display: inline-flex;
    min-width: 160px;
    justify-content: center;
    transform: translate(-50%, -50%);
    padding: 7px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--package-accent), var(--package-accent-dark));
    color: #ffffff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 7px 18px rgba(var(--package-rgb), .22);
}
.package-card.featured .package-heading { padding-top: 8px; }
.package-heading { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 13px; align-items: center; }
.package-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(var(--package-rgb), .18); border-radius: 50%; background: var(--package-soft); color: var(--package-accent-dark); }
.package-audience { margin: 0 0 4px; color: var(--package-accent-dark); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.package-card h3 { margin: 0; font-size: 1.42rem; font-weight: 600; line-height: 1.2; }
.package-summary { margin: 11px 0 18px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.package-price { display: flex; align-items: flex-end; gap: 8px; margin: 19px 0 4px; padding-bottom: 17px; border-bottom: 1px solid #dfe6e8; }
.package-price strong { color: var(--package-accent-dark); font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; line-height: 1; letter-spacing: -.05em; }
.package-price span { padding-bottom: 4px; color: var(--muted); font-size: .84rem; }
.package-outcome { margin: 12px 0 17px; padding: 11px 13px; border-radius: 10px; background: var(--package-soft); color: var(--package-accent-dark); font-size: .8rem; font-weight: 800; line-height: 1.45; }
.package-features { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.package-features li { display: flex; align-items: flex-start; gap: 9px; color: #334155; font-size: .84rem; line-height: 1.5; }
.package-features .lp-ico { flex: 0 0 auto; margin-top: 2px; width: 17px; height: 17px; color: var(--package-accent); }
.package-engine-row { display: flex; align-items: center; gap: 10px; margin: auto 0 17px; padding-top: 17px; border-top: 1px solid #dfe6e8; }
.package-engine-row img { width: 24px; height: 24px; object-fit: contain; }
.package-card .pricing-btn { width: 100%; margin-top: auto; }
.package-note { margin: 11px 0 0; color: var(--ink-quiet); font-size: .73rem; line-height: 1.45; text-align: center; }
.lp-package-foot { margin: 26px auto 0; max-width: 760px; color: var(--muted); font-size: .86rem; line-height: 1.7; text-align: center; }
.lp-package-foot a { color: var(--teal); font-weight: 600; }

/* Scope matrix */
.lp-scope { padding: 80px 0 80px 0px; background: #ffffff; }
.lp-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; }
.lp-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .87rem; }
.lp-table caption { padding: 16px 18px; color: var(--muted); font-size: .84rem; line-height: 1.6; text-align: left; }
.lp-table th, .lp-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lp-table thead th { background: var(--wash); color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: .84rem; font-weight: 600; }
.lp-table thead th span { display: block; margin-top: 3px; color: var(--teal); font-size: .95rem; font-weight: 800; }
.lp-table tbody th { width: 30%; color: var(--ink); font-weight: 600; }
.lp-table tbody tr:last-child th, .lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table tbody tr:nth-child(even) { background: #fbfdfc; }
.lp-table .is-featured-col { background: rgba(232, 246, 243, .55); }
.lp-scopehint { margin: 14px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }

/* Audience triage */
.lp-audience { padding: 80px 0 80px 0px; background: var(--wash); }
.lp-audience-grid { display: grid; gap: 18px; }
.lp-audience-col { padding: 24px 22px; border: 1px solid var(--line); border-radius: 18px; background: #ffffff; }
.lp-audience-col h3 { margin: 0 0 10px; color: var(--teal); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.lp-audience-col p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.lp-notfit {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    max-width: 900px;
    margin: 24px auto 0;
    padding: 20px 22px;
    border: 1px solid #e3d9b8;
    border-radius: 16px;
    background: #fdfaf0;
}
.lp-notfit .lp-ico { color: #6b5416; width: 26px; height: 26px; }
.lp-notfit h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #5f4a10; }
.lp-notfit p { margin: 0; color: #574616; font-size: .89rem; line-height: 1.68; }

/* FAQ, carried from /pricing.php */
.faq-section { padding: 80px 0 80px 0px; background: #ffffff; }
.faq-list { display: grid; max-width: 860px; gap: 10px; margin: 0 auto; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #ffffff; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px; font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: 0 0 auto; color: var(--teal); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin: 0; padding: 0 18px 19px; color: var(--muted); font-size: .89rem; line-height: 1.72; }
.faq-item p + p { padding-top: 0; }

/* Related services */
.lp-related { padding: 80px 0 80px 0px; background: var(--wash); }
.lp-related-grid { display: grid; gap: 14px; }
.lp-related-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.lp-related-card:hover { border-color: rgba(0, 55, 55, .35); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 55, 55, .1); }
.lp-related-card .lp-card-icon { width: 40px; height: 40px; margin-bottom: 12px; }
.lp-related-card h3 { margin: 0 0 7px; font-size: .98rem; font-weight: 600; line-height: 1.3; }
.lp-related-card p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }

/* Final call to action */
.lp-final { padding: 80px 0 80px 0px; background: #ffffff; text-align: center; }
.lp-final h2 { margin: 13px auto 12px; max-width: 22ch; font-size: clamp(1.8rem, 5.2vw, 2.7rem); font-weight: 600; line-height: 1.1; }
.lp-final > .pricing-shell > p { max-width: 62ch; margin: 0 auto 22px; color: var(--muted); line-height: 1.72; }
.lp-final-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0 0 24px; padding: 0; list-style: none; }
.lp-final-trust li { display: flex; align-items: center; gap: 8px; color: #405064; font-size: .84rem; font-weight: 600; }
.lp-final-trust .lp-ico { color: var(--green); }
.final-actions { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.lp-final-phone { margin: 18px 0 0; color: var(--muted); font-size: .89rem; }
.lp-final-phone a { color: var(--teal); font-weight: 800; text-decoration: none; }
.lp-final-phone a:hover { text-decoration: underline; }

/* Footer */
.lp-footer { padding: 40px 0 100px; background: #041f1f; color: rgba(255, 255, 255, .88); font-size: .84rem; }
.lp-footer-grid { display: grid; gap: 22px; }
.lp-footer h2 { margin: 0 0 10px; color: #ffffff; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.lp-footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-footer a { color: rgba(255, 255, 255, .95); text-decoration: none; }
.lp-footer a:hover { color: #ffffff; text-decoration: underline; }
.lp-footer-legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .86); font-size: .78rem; line-height: 1.7; }
.lp-footer-legal p { margin: 0 0 8px; }
.lp-footer-legal p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ 5. Interactive */
/* Package fit finder. A deterministic recommendation, not a guess. */
.lp-finder { padding: 80px 0 80px 0px; background: var(--wash); }
.lp-finder-card { max-width: 980px; margin-inline: auto; padding: 26px 22px; border: 1px solid #b8d8d2; border-radius: 22px; background: #ffffff; box-shadow: 0 18px 50px rgba(0, 55, 55, .09); }
.lp-finder-q { padding: 18px 18px 18px 18px; border: 1px solid #000000; margin: 40px 0px 40px 0px;}
.lp-finder-q:last-of-type { border-bottom: 0; }
.lp-finder-q > legend { padding: 0; margin: 0 0 12px; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; color: var(--ink); }
.lp-finder-q .lp-qnum { display: inline-grid; width: 26px; height: 26px; place-items: center; margin-right: 9px; border-radius: 8px; background: var(--teal); color: #ffffff; font-size: .78rem; vertical-align: -.25em; }
.lp-choices { display: grid; gap: 9px; }
.lp-choice { position: relative; }
.lp-choice input { position: absolute; opacity: 0; pointer-events: none;border: 1px solid #030c0b; }
.lp-choice-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--field-line);
    border-radius: 11px;
    color: #33424f;
    font-size: .87rem;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.lp-choice-label:hover { border-color: var(--teal); background: #f4faf9; }
.lp-choice input:checked + .lp-choice-label { border: 2px solid var(--teal); padding: 10px 12px; background: var(--teal-light); color: var(--teal); font-weight: 600; }
.lp-finder-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lp-finder-result {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--wash);
}
.lp-finder-result[hidden] { display: none; }
.lp-finder-empty { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.lp-finder-answer h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 600; color: var(--teal); }
.lp-finder-price { margin: 0 0 12px; color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.lp-finder-why { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.lp-finder-why li { display: flex; gap: 9px; color: #33424f; font-size: .86rem; line-height: 1.55; }
.lp-finder-why .lp-ico { color: var(--green); flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px; }
.lp-finder-progress { margin: 0 0 4px; color: var(--muted); font-size: .78rem; font-weight: 600; }

/* Lead form, carried from /pricing.php with progressive disclosure added */
.lead-section { padding: 80px 0 80px 0px; background: var(--teal); }
.lead-grid { display: grid; gap: 30px; align-items: start; }
.lead-copy { color: #ffffff; }
.lead-copy .pricing-kicker { border-color: rgba(186, 255, 201, .25); background: rgba(186, 255, 201, .1); color: var(--mint); }
.lead-copy h2 { margin: 16px 0 14px; font-size: clamp(1.9rem, 5.6vw, 3.05rem); font-weight: 600; line-height: 1.06; }
.lead-copy > p { margin: 0; color: rgba(255, 255, 255, .92); line-height: 1.75; }
.lead-benefits { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.lead-benefits li { display: flex; align-items: flex-start; gap: 10px; color: #ffffff; font-size: .88rem; font-weight: 600; line-height: 1.55; }
.lead-benefits .lp-ico { color: var(--mint); margin-top: 2px; }

.lead-form-card { padding: 22px 18px; border-radius: 22px; background: #ffffff; box-shadow: 0 26px 70px rgba(0, 0, 0, .23); }
.form-eyebrow { margin: 0 0 5px; color: #08775e; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lead-form-card h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 600; }
.form-intro { margin: 7px 0 18px; color: #000000; font-size: .84rem; line-height: 1.55; }

.lp-steps-rail { display: flex; gap: 16px; margin: 0 0 18px; padding: 0; list-style: none; }
.lp-steps-rail li { flex: 1 1 0; padding-top: 7px; border-top: 4px solid #dbe7e4; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.lp-steps-rail li[data-state="current"] { border-top-color: var(--teal); color: var(--teal); }
.lp-steps-rail li[data-state="done"] { border-top-color: var(--green-bright); color: var(--green-bright); }

.lp-fieldset { border: 0; margin: 0; padding: 0; }
.lp-fieldset[hidden] { display: none; }
.lp-fieldset > legend { padding: 0; margin: 0 0 4px; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; color: var(--ink); }
.lp-fieldset > .lp-legend-help { margin: 0 0 15px; color: var(--muted); font-size: .82rem; line-height: 1.55; }

.package-selector { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.package-selector legend { margin-bottom: 8px; color: var(--ink); font-size: 1.1rem; font-weight: 800; }
.package-option { position: relative; padding: 10px 10px 10px 0px;}
.package-option input { position: absolute; opacity: 0; pointer-events: none; }
.package-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 11px 12px; border: 1px solid #033529; border-radius: 10px; color: #000000; cursor: pointer; transition: border .2s ease, background .2s ease; }
.package-select strong { font-size: .98rem; }
.package-select span { color: #000000; font-size: .99rem; white-space: nowrap; }
.package-option input:checked + .package-select { border: 2px solid var(--teal); padding: 10px 11px; background: var(--teal-light); color: var(--teal); }
.package-select .lp-reco { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: #3d2f00; font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.form-grid { display: grid; gap: 14px; }
.form-field { display: grid; gap: 6px; }
.form-field label { color: #263548; font-size: .78rem; font-weight: 800; }
.form-field .lp-optional { color: var(--ink-quiet); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    min-height: 47px;
    padding: 11px 12px;
    border: 1px solid var(--field-line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: .89rem;
}
.form-field textarea { min-height: 104px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #5a6675; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--field-line-hover); }
.form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border: 2px solid #b2242f; background: #fffafa; }
.form-error { display: none; color: #a01824; font-size: .76rem; font-weight: 600; line-height: 1.4; }
.form-field.has-error .form-error { display: block; }
.form-wide { grid-column: 1 / -1; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.consent-row { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.consent-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); flex: 0 0 auto; }
.lp-form-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lp-form-nav .pricing-btn { flex: 1 1 160px; }
.lead-submit[disabled] { cursor: wait; opacity: .72; transform: none; }
.form-privacy { margin: 12px 0 0; color: var(--ink-quiet); font-size: .72rem; line-height: 1.5; text-align: center; }
.form-privacy a { color: var(--teal); font-weight: 600; }
.form-status { display: none; margin-top: 14px; padding: 13px; border-radius: 10px; font-size: .83rem; font-weight: 600; line-height: 1.55; }
.form-status.is-visible { display: block; }
.form-status.success { background: #e8f8ee; color: #14603a; }
.form-status.error { background: #fff0f0; color: #92202b; }
.form-status a { color: inherit; text-decoration: underline; }

.lp-form-success { display: none; padding: 26px 6px; text-align: center; }
.lp-form-success.is-visible { display: block; }
.lp-form-success .lp-successmark { display: grid; width: 70px; height: 70px; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: var(--teal-light); color: var(--green); }
.lp-form-success .lp-successmark .lp-ico { width: 34px; height: 34px; }
.lp-form-success h3 { margin: 0 0 10px; font-size: 1.28rem; font-weight: 600; }
.lp-form-success p { margin: 0 0 10px; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.lp-form-success ul { display: grid; gap: 9px; max-width: 420px; margin: 16px auto 0; padding: 0; list-style: none; text-align: left; }
.lp-form-success li { display: flex; gap: 9px; color: #33424f; font-size: .86rem; line-height: 1.55; }
.lp-form-success li .lp-ico { color: var(--green); flex: 0 0 auto; margin-top: 2px; width: 17px; height: 17px; }

/* --------------------------------------------------------- 6. Responsive */
@media (min-width: 600px) {
    .pricing-shell { width: min(100% - 48px, var(--shell)); }
    .hero-actions, .final-actions { flex-direction: row; flex-wrap: wrap; }
    .lp-proofbar ul { grid-template-columns: 1fr 1fr; }
    .engine-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ai-logostrip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .lead-form-card { padding: 30px; }
    .lp-cardgrid, .lp-objection-grid, .lp-related-grid, .lp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-risk { grid-template-columns: 1fr 1fr; }
    .lp-risk-bad { border-bottom: 0; border-right: 1px solid #f0dcdc; }
    .lp-audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pillar6-grid { grid-template-columns: 1fr 1fr; }
    .lp-finder-card { padding: 32px; }
    .lp-choices { grid-template-columns: 1fr 1fr; }
    .lp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-author-row { grid-template-columns: 84px 1fr; gap: 24px; }
}

@media (min-width: 820px) {
    .lp-hero { padding: 72px 0 60px; }
    .lp-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 52px; }
    .lp-proofbar ul { grid-template-columns: repeat(3, 1fr); }
    .lp-split-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
    .lp-split-reverse .lp-split-media { order: 2; }
    .lp-process-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
    .lead-grid { grid-template-columns: .82fr 1.18fr; gap: 52px; }
    .lead-copy { position: sticky; top: 92px; }
    .lp-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-stickybar { display: none; }
}

@media (min-width: 980px) {
    .ai-logostrip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .engine-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .package-card { padding: 31px 25px 24px; }
    .package-card.featured { transform: translateY(-8px); }
    .package-summary { min-height: 72px; }
    .lp-cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-cardgrid.lp-cardgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-objection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------- 7. Motion, print, forced colors */
@media (prefers-reduced-motion: reduce) {
    .lp-page *, .lp-page *::before, .lp-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .pricing-btn:hover, .lp-card:hover, .lp-related-card:hover { transform: none; }
    .lp-stickybar { transition: none; }
}

@media (forced-colors: active) {
    .pricing-btn, .lp-card, .package-card, .faq-item, .lp-choice-label { border: 1px solid ButtonBorder; }
    .lp-ico { forced-color-adjust: auto; }
}

@media print {
    .lp-topbar, .lp-sectionnav, .lp-stickybar, .lp-skip, .lead-section, .lp-finder { display: none !important; }
    .lp-page { color: #000000; }
    .lp-hero, .lp-split-b, .lp-answer, .packages-section { background: #ffffff !important; }
}

/* =====================================================================
 * 8. Layout variants
 * ---------------------------------------------------------------------
 * One renderer serving 28 pages produces 28 identical looking pages. Each
 * catalog group therefore gets its own arrangement of the same sections,
 * resolved by lp_layout(). The content, the order of the argument, and the
 * accessibility behavior never change. Only the shape does.
 * ===================================================================== */

/* ---- Hero variants -------------------------------------------------- */

/* split-reverse: image on the left, copy on the right. */
@media (min-width: 820px) {
    .lp-hero[data-hero="split-reverse"] .lp-hero-grid { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); }
    .lp-hero[data-hero="split-reverse"] .hero-media { order: -1; }
}

/* centered: no image, one large statement. Used where the argument is the
   product, so a stock photograph would weaken rather than support it. */
.lp-hero[data-hero="centered"] { text-align: center; }
.lp-hero[data-hero="centered"] .lp-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; }
.lp-hero[data-hero="centered"] h1 { max-width: 20ch; margin-inline: auto; font-size: clamp(2.3rem, 8vw, 4rem); }
.lp-hero[data-hero="centered"] .lp-hero-copy { margin-inline: auto; }
.lp-hero[data-hero="centered"] .hero-capabilities { justify-content: center; }
.lp-hero[data-hero="centered"] .hero-actions { justify-content: center; }
.lp-hero[data-hero="centered"] .lp-benefit { max-width: 62ch; margin-inline: auto; text-align: left; }
.lp-hero[data-hero="centered"] .lp-hero-reassure { max-width: 62ch; margin-inline: auto; }

/* stacked: image sits full width beneath the copy, so the headline owns the
   first screen on desktop as well as mobile. */
.lp-hero[data-hero="stacked"] .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
.lp-hero[data-hero="stacked"] .hero-media img { aspect-ratio: 1 / 1; }
@media (min-width: 820px) {
    .lp-hero[data-hero="stacked"] .lp-hero-grid { gap: 40px; }
    .lp-hero[data-hero="stacked"] h1 { max-width: 24ch; }
}

/* ---- Problem section variants --------------------------------------- */

@media (min-width: 820px) {
    .lp-split[data-problem="media-right"] .lp-split-media { order: 2; }
}

/* no-media: the four failure modes become a four card grid. Used where a
   photograph adds nothing and the failures themselves are the content. */
.lp-split[data-problem="no-media"] .lp-split-grid { grid-template-columns: minmax(0, 1fr); }
.lp-split[data-problem="no-media"] .lp-split-media { display: none; }
.lp-split[data-problem="no-media"] .lp-problem-copy { max-width: 760px; margin-inline: auto; text-align: center; }
.lp-split[data-problem="no-media"] .lp-painlist { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; text-align: left; }
.lp-split[data-problem="no-media"] .lp-painlist li {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(2, 3, 5, .04);
}
.lp-split[data-problem="no-media"] .lp-painicon { margin-bottom: 13px; }
@media (min-width: 720px) {
    .lp-split[data-problem="no-media"] .lp-painlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .lp-split[data-problem="no-media"] .lp-painlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Deliverables variants ------------------------------------------ */

/* zigzag: alternating rows with the icon on opposite sides, which reads more
   like a walkthrough than a product grid. */
.lp-cardgrid[data-deliverables="zigzag"] { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 940px; margin-inline: auto; }
.lp-cardgrid[data-deliverables="zigzag"] .lp-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px 24px;
}
.lp-cardgrid[data-deliverables="zigzag"] .lp-card-icon { width: 56px; height: 56px; margin-bottom: 0; }
.lp-cardgrid[data-deliverables="zigzag"] .lp-card h3 { margin-top: 4px; }
.lp-cardgrid[data-deliverables="zigzag"] .lp-card:hover { transform: translateX(3px); }
@media (min-width: 820px) {
    .lp-cardgrid[data-deliverables="zigzag"] .lp-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) 56px; }
    .lp-cardgrid[data-deliverables="zigzag"] .lp-card:nth-child(even) .lp-card-icon { order: 2; }
    .lp-cardgrid[data-deliverables="zigzag"] .lp-card:nth-child(even) .lp-card-body { text-align: right; }
    .lp-cardgrid[data-deliverables="zigzag"] .lp-card:nth-child(even) .lp-card-link { justify-content: flex-end; }
    .lp-cardgrid[data-deliverables="zigzag"] .lp-card:nth-child(even):hover { transform: translateX(-3px); }
}

/* list: a numbered vertical list with a hairline rule, which suits technical
   readers who want to scan a specification rather than browse cards. */
.lp-cardgrid[data-deliverables="list"] { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 900px; margin-inline: auto; counter-reset: lpdeliver; }
.lp-cardgrid[data-deliverables="list"] .lp-card {
    counter-increment: lpdeliver;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 26px 4px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.lp-cardgrid[data-deliverables="list"] .lp-card:last-child { border-bottom: 0; }
.lp-cardgrid[data-deliverables="list"] .lp-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.lp-cardgrid[data-deliverables="list"] .lp-card-icon {
    position: relative;
    width: 46px;
    height: 46px;
    margin-bottom: 0;
    border-radius: 50%;
}
.lp-cardgrid[data-deliverables="list"] .lp-card-icon::after {
    content: counter(lpdeliver);
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: var(--teal);
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 600;
}

/* ---- Risk section variants ------------------------------------------ */

/* flip: the safeguard is read first, so the failure reads as the thing that
   has already been handled. */
.lp-risk-grid[data-risks="flip"] .lp-risk-bad { order: 2; border-bottom: 0; border-top: 1px solid #f0dcdc; }
.lp-risk-grid[data-risks="flip"] .lp-risk-good { order: 1; }
@media (min-width: 600px) {
    .lp-risk-grid[data-risks="flip"] .lp-risk-bad { border-top: 0; border-left: 1px solid #f0dcdc; border-right: 0; }
}

/* table: one row per risk, which reads as an audit checklist. Suits technical
   buyers comparing suppliers on rigor. */
.lp-risk-grid[data-risks="table"] { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; }
.lp-risk-grid[data-risks="table"] .lp-risk { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.lp-risk-grid[data-risks="table"] .lp-risk:last-child { border-bottom: 0; }
.lp-risk-grid[data-risks="table"] .lp-risk-half { padding: 20px 24px; }
.lp-risk-grid[data-risks="table"] .lp-risk-bad { background: #fffbfb; }
.lp-risk-grid[data-risks="table"] .lp-risk-good { background: #ffffff; }
@media (min-width: 600px) {
    .lp-risk-grid[data-risks="table"] .lp-risk-bad { border-right: 1px solid var(--line); }
}

/* ---- Process variants ----------------------------------------------- */

/* timeline: a single column with a connecting rule, read top to bottom. */
.lp-process[data-process="timeline"] .lp-process-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.lp-process[data-process="timeline"] .lp-process-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.lp-process[data-process="timeline"] .lp-process-intro .lp-split-media { max-width: 620px; margin-inline: auto; }
.lp-process[data-process="timeline"] .lp-steps { position: relative; max-width: 820px; margin-inline: auto; gap: 0; }
.lp-process[data-process="timeline"] .lp-step {
    position: relative;
    padding: 22px 0 22px 20px;
    border: 0;
    border-radius: 0;
    background: none;
}
.lp-process[data-process="timeline"] .lp-step::before {
    content: '';
    position: absolute;
    left: 43px;
    top: 68px;
    bottom: -10px;
    width: 2px;
    background: linear-gradient(180deg, rgba(0, 55, 55, .22), rgba(0, 55, 55, .05));
}
.lp-process[data-process="timeline"] .lp-step:last-child::before { display: none; }
.lp-process[data-process="timeline"] .lp-step-num { z-index: 1; border: 3px solid var(--paper); }

/* stack: three across on wide screens, compressing the method into one
   scannable band for readers who do not want a narrative. */
.lp-process[data-process="stack"] .lp-process-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.lp-process[data-process="stack"] .lp-process-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.lp-process[data-process="stack"] .lp-process-intro .lp-split-media { max-width: 620px; margin-inline: auto; }
.lp-process[data-process="stack"] .lp-steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .lp-process[data-process="stack"] .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .lp-process[data-process="stack"] .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-process[data-process="stack"] .lp-step { grid-template-columns: minmax(0, 1fr); }
.lp-process[data-process="stack"] .lp-step-num { margin-bottom: 12px; }

/* ---- Background rhythm ----------------------------------------------
 * Three alternation patterns, so consecutive pages in the same ad account do
 * not share the same light and dark cadence as the visitor scrolls. */
.lp-page[data-rhythm="b"] .lp-answer { background: #ffffff; }
.lp-page[data-rhythm="b"] .lp-deliver { background: var(--wash); }
.lp-page[data-rhythm="b"] .lp-pillars { background: var(--wash); }
.lp-page[data-rhythm="b"] .lp-risks { background: var(--wash); }
.lp-page[data-rhythm="b"] .lp-objections { background: #ffffff; }
.lp-page[data-rhythm="b"] .lp-scope { background: var(--wash); }
.lp-page[data-rhythm="b"] .faq-section { background: var(--wash); }

.lp-page[data-rhythm="c"] .lp-answer { background: #ffffff; }
.lp-page[data-rhythm="c"] .lp-split-a { background: var(--wash); }
.lp-page[data-rhythm="c"] .lp-deliver { background: #ffffff; }
.lp-page[data-rhythm="c"] .lp-pillars { background: var(--wash); }
.lp-page[data-rhythm="c"] .lp-risks { background: #ffffff; }
.lp-page[data-rhythm="c"] .lp-objections { background: var(--wash); }
.lp-page[data-rhythm="c"] .lp-process { background: var(--wash); }
.lp-page[data-rhythm="c"] .lp-audience { background: #ffffff; }
.lp-page[data-rhythm="c"] .faq-section { background: var(--wash); }

/* =====================================================================
 * 9. Polish
 * ---------------------------------------------------------------------
 * Classes replacing inline styles previously set in the renderer, plus
 * spacing corrections found while reviewing the rendered pages.
 * ===================================================================== */

.lp-process-title { margin: 13px 0 14px; font-size: clamp(1.7rem, 4.6vw, 2.4rem); font-weight: 600; line-height: 1.12; }
.lp-process-lede { margin: 0 0 20px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.lp-process-intro .lp-split-media { margin: 0; }

.package-entry-note { background: #fdf6e0; color: #5f4a10; }
.package-note a { color: var(--teal); font-weight: 600; }

.lp-final-benefit {
    max-width: 62ch;
    margin: 0 auto 22px;
    color: var(--teal);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.6;
}

/* Consecutive sections sharing a background were reading as one long block,
   so a matched pair gets a tighter seam while a changed background keeps the
   full gap. */
.lp-deliver + .lp-pillars,
.lp-risks + .lp-process,
.lp-audience + .faq-section { padding-top: 48px; }

/* The problem list icons sat optically high against multi line text. */
.lp-painlist .lp-painicon { margin-top: 2px; }

/* Long scope tables were clipping their focus ring at the container edge. */
.lp-tablewrap { padding: 1px; }

/* The finder result heading collided with the progress line on small screens. */
.lp-finder-progress + h3 { margin-top: 4px; }

/* Keep the sticky action bar clear of the footer legal text on short screens. */
@media (max-width: 819px) {
    .lp-footer { padding-bottom: 108px; }
}

/* =====================================================================
 * 10. Call to action strategy for high intent traffic
 * ---------------------------------------------------------------------
 * These pages receive people who already know what they want and are
 * choosing a supplier. That audience does not need to be pushed. It needs
 * the action to be permanently within reach and never repeated at them.
 *
 * So there is exactly ONE persistent call to action at any screen width,
 * never two:
 *
 *   Desktop and tablet, 820px and up
 *     The sticky top bar carries the button and the phone number. No bottom
 *     bar, because a second fixed strip is redundant chrome that eats the
 *     viewport and reads as pressure to an analytical buyer.
 *
 *   Mobile, below 820px
 *     The bottom bar carries Call and Get my fit review, because that is
 *     where a thumb rests. The top bar therefore drops its button and keeps
 *     only the logo and the phone number, which also stops the header
 *     crowding on a 360px screen.
 *
 * The in page calls to action are unchanged. They sit at points of rising
 * confidence, after the proof, after the risk section, and after pricing,
 * rather than at fixed intervals.
 * ===================================================================== */

@media (max-width: 819px) {
    /* The bottom bar owns the primary action on mobile, so the header button
       would be a duplicate of it and costs space the logo needs. */
    .lp-topbar .pricing-btn { display: none; }
    .lp-topbar-inner { min-height: 58px; }
    .lp-brandmark img {width: auto;
    height: 74px;
    margin-bottom: 20px; }
    .lp-topbar-phone { font-size: .92rem; }
}

/* Below 380px the phone number and the logo compete. The number wins,
   because a call is the highest value action this traffic can take. */
@media (max-width: 379px) {
    .lp-brandmark img {width: auto;
    height: 74px;
    margin-bottom: 20px; }
    .lp-topbar-phone span { font-size: .86rem; }
}

/* The source line that replaced the review bar. It states something that can
   actually be checked, rather than asserting a review that never happened. */
.lp-answer-source {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 18px 0 0;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #ffffff;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.6;
}
.lp-answer-source .lp-ico { color: var(--green); margin-top: 3px; }
.lp-answer-source a { color: var(--teal); font-weight: 600; }

/* =====================================================================
 * 9. Motion: scroll reveal and metric count up
 * ---------------------------------------------------------------------
 * Opt in per page with data-reveal="on" on the body. The 28 service
 * landing pages do not opt in, so their rendering is unchanged.
 *
 * The no script guard is the important part of this block.
 * ---------------------------------------------------------------
 * A reveal system that hides content in CSS and reveals it in JavaScript
 * renders a blank page whenever the script does not run: a blocked CDN, a
 * JavaScript error earlier in the page, a text only browser, or a crawler
 * that does not execute script. That is a total content loss, and it is
 * invisible in normal testing.
 *
 * So nothing here hides anything until the script has run and added
 * .is-reveal-ready to the body. Without JavaScript the class never
 * appears, every [data-reveal] block renders at full opacity in its final
 * position, and the page is complete. The animation is strictly an
 * enhancement layered on top of a page that already works.
 *
 * Reduced motion is honored by the script, which reveals everything at
 * once instead of on scroll, and by the rules below, which drop the
 * transform and shorten the fade to nothing.
 * ===================================================================== */

.lp-page[data-reveal="on"].is-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.lp-page[data-reveal="on"].is-reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Staggered children. The delay is small on purpose: a long stagger reads
   as a slow page rather than a considered one, and it delays the moment a
   visitor can start reading. */
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
}
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: none;
}
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 55ms; }
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 110ms; }
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 165ms; }
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 220ms; }
.lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger].is-revealed > *:nth-child(n+6) { transition-delay: 275ms; }

/* A counting number must not resize its container while it counts, which
   would push the rest of the card around on every frame. */
.lp-countup { font-variant-numeric: tabular-nums; }

/* Print and reduced motion both need the content, not the choreography. */
@media (prefers-reduced-motion: reduce) {
    .lp-page[data-reveal="on"].is-reveal-ready [data-reveal],
    .lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media print {
    .lp-page[data-reveal="on"].is-reveal-ready [data-reveal],
    .lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Forced colors mode paints its own palette. Motion still applies, but the
   opacity change must not be allowed to erase text. */
@media (forced-colors: active) {
    .lp-page[data-reveal="on"].is-reveal-ready [data-reveal],
    .lp-page[data-reveal="on"].is-reveal-ready [data-reveal-stagger] > * {
        opacity: 1;
        transform: none;
    }
}