/* ==========================================================================
   landing.css — anonymous marketing surface composition.

   Page-specific layout for `/`.  Composes existing patterns (button,
   card) plus marketing-only blocks: hero (with chart-personality SVG),
   pillar grid, capability comparison matrix, credibility column,
   viewport showcase, unified pricing card, final CTA.  All values
   reference --biq-* tokens — no raw colors / sizes / spacings.

   Voice + positioning locked in
   ARCHITECTURE_DECISIONS.md → Marketing Voice and Positioning v1.0.

   Breakpoints used here: tablet 720px, desktop 1024px.  These are the
   project's existing --biq-bp-* values; the spec called for 640/1280
   but the principle (phone companion / tablet+desktop primary) is
   identical and aligning to the project breakpoints keeps the
   marketing surface consistent with the rest of the app.

   Session history visible in this file:
   - 2C: phased-offer table + credibility + viewport showcase scaffold
   - 2F: recognition-first hero + pain/pillar grid + tension transition
   - 2G:  visual polish (gradient hero, card character, line-icons)
   - 2G.1: warm/cool section rhythm, tension removed, hero tan/white CTAs,
           honesty section gained a card layout with line-icons
   - 2G.3: honesty section REPLACED by capability comparison matrix,
           unified pricing card (single elevated container), hero chart
           gains slate-family personality, hero headline forced to two
           lines
   ========================================================================== */

/* ── Page wrapper ────────────────────────────────────────────────────────── */

.biq-marketing {
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-8);
}

.biq-marketing__section {
    padding-block: var(--biq-space-7);
}

/* Section rhythm — Session 2G added tinted backgrounds so the page
   alternates between cool / warm / dark instead of one flat surface.
   Session 2G.3 dropped --honesty-warm + --alt when the honesty section
   was replaced by the capability matrix.  Each modifier scopes a
   single section. */

.biq-marketing__section--inverse {
    background: var(--biq-color-surface-inverse);
    color: var(--biq-color-text-on-inverse);
    border-radius: var(--biq-radius-lg);
    padding-inline: var(--biq-space-5);
}

/* Pain-section: very light slate-green tint, warmer than pure white,
   sets the recognition mood without competing with the cards above it. */
.biq-marketing__section--pain {
    background: var(--biq-slate-green-50);
    border-radius: var(--biq-radius-lg);
    padding-inline: var(--biq-space-5);
}

/* Credibility section — slate-blue-50 (cool counter-point to the
   capability matrix's white background).  Session 2G.1. */
.biq-marketing__section--credibility-tint {
    background: var(--biq-slate-blue-50);
    border-radius: var(--biq-radius-lg);
    padding-inline: var(--biq-space-5);
}

/* Final CTA dark band — slate-green-700 instead of slate-900 inverse,
   so the closing visual rhymes with the hero gradient. */
.biq-marketing__section--cta-dark {
    background: var(--biq-slate-green-700);
    color: var(--biq-color-text-on-inverse);
    border-radius: var(--biq-radius-lg);
    padding-inline: var(--biq-space-5);
}

.biq-marketing__title {
    font-size: var(--biq-fs-2xl);
    line-height: var(--biq-lh-tight);
    letter-spacing: var(--biq-tracking-tight);
    margin: 0 0 var(--biq-space-3);
    color: inherit;
}

.biq-marketing__lede {
    font-size: var(--biq-fs-lg);
    line-height: var(--biq-lh-snug);
    color: var(--biq-color-text-secondary);
    margin: 0 0 var(--biq-space-6);
    max-width: 64ch;
}

.biq-marketing__section--inverse .biq-marketing__lede,
.biq-marketing__section--cta-dark .biq-marketing__lede {
    color: var(--biq-color-text-on-inverse);
    opacity: 0.85;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.biq-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--biq-space-7);
    padding: var(--biq-space-8) var(--biq-space-6) var(--biq-space-7);
    align-items: center;
    background: linear-gradient(
        135deg,
        var(--biq-slate-green-700) 0%,
        var(--biq-slate-green-800) 100%
    );
    color: var(--biq-color-text-on-inverse);
    border-radius: var(--biq-radius-lg);
    box-shadow: var(--biq-shadow-lg);
}

@media (min-width: 1024px) {
    .biq-hero {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--biq-space-8);
    }
}

.biq-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-4);
    max-width: 60ch;
}

.biq-hero__eyebrow {
    /* Session 2G — slate-tan-500 (warm) for the eyebrow against the
       dark green gradient.  The single warm note in the dark band
       reads as field-credibility, not SaaS gloss. */
    color: var(--biq-slate-tan-500);
    font-size: var(--biq-fs-sm);
    font-weight: var(--biq-fw-semibold);
    letter-spacing: var(--biq-tracking-wide);
    text-transform: uppercase;
    margin: 0;
}

.biq-hero__headline {
    font-size: var(--biq-fs-3xl);
    line-height: var(--biq-lh-tight);
    letter-spacing: var(--biq-tracking-tight);
    color: var(--biq-color-text-on-inverse);
    margin: 0;
}

/* Session 2G.3 — force the hero headline onto two lines.  Each line
   is its own block-level span so the two phrases ("Field data in." +
   "Certified report out.") read as a paired statement rather than
   one wrapping sentence.  No font weight or size shift — the line
   break is the only treatment. */
.biq-hero__headline-line {
    display: block;
}

/* ── Hero chart personality (Session 2G.3) ─────────────────────────────────
   Inline SVG classes that replace the prior currentColor + opacity
   palette with explicit slate-family hues.  The tablet outline keeps
   currentColor (white) — the chart internals get tan / blue / green
   so the visual reads as a stylized boring-log preview, not a
   generic chart. */

/* Header bar (the "title row" inside the tablet) — kept white/visible. */
.biq-hero__chart-bar--white {
    fill: var(--biq-color-text-on-inverse);
    opacity: 0.85;
}

/* Three header lines below the title row — light tan / blue / green. */
.biq-hero__chart-line--tan   { fill: var(--biq-slate-tan-300); }
.biq-hero__chart-line--blue  { fill: var(--biq-slate-blue-300); }
.biq-hero__chart-line--green { fill: var(--biq-slate-green-300); }

/* Six bottom bars — alternate tan / blue with one green-300 highlight. */
.biq-hero__chart-bar--tan   { fill: var(--biq-slate-tan-500); }
.biq-hero__chart-bar--blue  { fill: var(--biq-slate-blue-500); }
.biq-hero__chart-bar--green { fill: var(--biq-slate-green-300); }

/* Right-edge dot indicators — one each tan / blue / green. */
.biq-hero__chart-dot--tan   { fill: var(--biq-slate-tan-500); }
.biq-hero__chart-dot--blue  { fill: var(--biq-slate-blue-500); }
.biq-hero__chart-dot--green { fill: var(--biq-slate-green-300); }

.biq-hero__sub-headline {
    font-size: var(--biq-fs-xl);
    font-weight: var(--biq-fw-medium);
    line-height: var(--biq-lh-snug);
    color: var(--biq-color-text-on-inverse);
    opacity: 0.85;
    margin: 0;
}

.biq-hero__body {
    font-size: var(--biq-fs-lg);
    line-height: var(--biq-lh-snug);
    color: var(--biq-color-text-primary);
    margin: 0;
}

.biq-hero__price {
    font-size: var(--biq-fs-lg);
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-action);
    margin: 0;
}

.biq-hero__price-sub {
    font-size: var(--biq-fs-md);
    color: var(--biq-color-text-secondary);
    margin: 0;
}

.biq-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--biq-space-4);
    align-items: center;
    margin-top: var(--biq-space-3);
}

/* Hero CTA pair (Session 2G.1) — primary is tan, secondary is white.
   Both use the substantial .biq-btn--lg shape; the colour pair adds
   warmth to the dark-green band and gives the secondary equal visual
   weight to the primary so the hero reads as a clear binary choice
   ("start" / "log in").  Scoped under .biq-hero so the ordinary
   --primary / --secondary tokens stay correct everywhere else. */
.biq-hero .biq-btn--primary {
    background: var(--biq-slate-tan-700);
    border-color: var(--biq-slate-tan-700);
    color: var(--biq-color-text-on-inverse);
}
.biq-hero .biq-btn--primary:hover:not(:disabled) {
    background: var(--biq-slate-tan-600);
    border-color: var(--biq-slate-tan-600);
}
.biq-hero .biq-btn--primary:active:not(:disabled) {
    background: var(--biq-slate-tan-700);
    border-color: var(--biq-slate-tan-700);
}

.biq-hero .biq-btn--secondary {
    background: var(--biq-color-surface-raised);
    border-color: var(--biq-color-surface-raised);
    color: var(--biq-slate-green-700);
}
.biq-hero .biq-btn--secondary:hover:not(:disabled) {
    background: var(--biq-slate-green-50);
    border-color: var(--biq-slate-green-50);
    color: var(--biq-slate-green-800);
}

/* Hero visual — the inline tablet-mockup SVG sits on the dark gradient.
   The thin white panel lifts it off the gradient just enough to read
   without competing with the headline. */
.biq-hero__visual {
    display: none;
    background: var(--biq-color-overlay-light);
    border: 1px solid var(--biq-color-overlay-light-strong);
    border-radius: var(--biq-radius-lg);
    padding: var(--biq-space-5);
    align-items: center;
    justify-content: center;
    min-height: 320px;
    color: var(--biq-color-text-on-inverse);
}

@media (min-width: 1024px) {
    .biq-hero__visual {
        display: flex;
    }
}

.biq-hero__visual svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}

/* ── Pillar grid (2x2 desktop, stacked mobile) ───────────────────────────── */

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

@media (min-width: 1024px) {
    .biq-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--biq-space-6);
    }
}

.biq-pillar {
    background: var(--biq-color-surface-raised);
    border: 1px solid var(--biq-color-rule);
    /* Session 2G — slate-green left strip mirrors the rust strip on
       the matched pain card above; same shape, different color, tells
       the reader "this is the answer side" at a glance. */
    border-left: 4px solid var(--biq-slate-green-600);
    border-radius: var(--biq-radius-md);
    padding: var(--biq-space-6);
    box-shadow: var(--biq-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-3);
    transition: box-shadow var(--biq-duration-normal) var(--biq-ease-standard);
}

.biq-pillar:hover { box-shadow: var(--biq-shadow-lg); }

/* Session 2G — pillar icons retain their existing 48-viewBox stroke
   weight (3) because the prior outline shapes render correctly at that
   weight; the matched pain-card icons (24-viewBox, stroke 1.5) sit in
   the row above and read as a different, lighter family.  Both
   colours inherit currentColor so the pillar's slate-green and the
   pain card's rust both flow through. */
.biq-pillar__icon {
    width: 40px;
    height: 40px;
    color: var(--biq-slate-green-700);
}

.biq-pillar__title {
    font-size: var(--biq-fs-xl);
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-text-primary);
    margin: 0;
}

.biq-pillar__body {
    font-size: var(--biq-fs-md);
    line-height: var(--biq-lh-normal);
    color: var(--biq-color-text-secondary);
    margin: 0;
}

/* ── Capability comparison matrix (Session 2G.3) ─────────────────────────
   Replaces the v2G.1 honesty section.  Four-column / fifteen-row table
   organized into three zones (differentiators / parity / design-infra).
   BoreholeIQ column gets a slate-green-50 tint and bolder header.
   "No" cells inside the differentiator zone use a muted slate so the
   contrast lands without aggression; "Limited" / "Add-on" / "N/A" /
   "Roadmap" cells share a slate-tan italic treatment. */

.biq-comparison__wrap {
    /* Allow the table to scroll horizontally on phones so a narrow
       viewport doesn't truncate cell content. */
    overflow-x: auto;
    margin-bottom: var(--biq-space-3);
}

.biq-comparison__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--biq-fs-md);
}

.biq-comparison__table caption {
    /* Visually hidden via the .biq-visually-hidden helper that is
       authored on the element directly; this rule is a fallback. */
    text-align: left;
}

.biq-comparison__table thead th {
    padding: var(--biq-space-3) var(--biq-space-4);
    border-bottom: 2px solid var(--biq-color-border-strong);
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-text-secondary);
    font-size: var(--biq-fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--biq-tracking-wide);
    vertical-align: bottom;
    white-space: nowrap;
}

/* BoreholeIQ column — bolder header, slightly larger, slate-green hue.
   The td:nth-child(5) tint below picks up the column body. */
.biq-comparison__table thead th.biq-comparison__biq-header {
    color: var(--biq-slate-green-700);
    font-size: var(--biq-fs-md);
    font-weight: var(--biq-fw-bold);
    text-transform: none;
    letter-spacing: var(--biq-tracking-tight);
}

.biq-comparison__table tbody th {
    /* Row label cells — quiet but readable, left-aligned. */
    padding: var(--biq-space-3) var(--biq-space-4);
    font-weight: var(--biq-fw-medium);
    color: var(--biq-color-text-primary);
    border-bottom: 1px solid var(--biq-color-rule);
    text-align: left;
    vertical-align: top;
}

.biq-comparison__table tbody td {
    padding: var(--biq-space-3) var(--biq-space-4);
    border-bottom: 1px solid var(--biq-color-rule);
    color: var(--biq-color-text-primary);
    vertical-align: top;
    line-height: var(--biq-lh-normal);
}

/* BoreholeIQ column tint (5th column overall: 1 row-header + 4 vendor
   columns; BoreholeIQ is the 5th). */
.biq-comparison__table thead th:nth-child(5),
.biq-comparison__table tbody td:nth-child(5) {
    background: var(--biq-slate-green-50);
}

/* Cell modifiers — applied per cell to reflect capability state. */
.biq-comparison__cell--no {
    color: var(--biq-color-text-muted);
}

.biq-comparison__cell--limited {
    color: var(--biq-slate-tan-700);
    font-style: italic;
}

/* Zone-break rows — extra top padding + thicker rule above so the
   differentiators / parity / design-infra zones read as three groups. */
.biq-comparison__row--zone-break > th,
.biq-comparison__row--zone-break > td {
    padding-top: var(--biq-space-6);
    border-top: 2px solid var(--biq-color-border-strong);
}

.biq-comparison__footnote {
    font-size: var(--biq-fs-sm);
    color: var(--biq-color-text-muted);
    margin: var(--biq-space-3) 0 0;
}

@media (prefers-contrast: more) {
    .biq-comparison__cell--no { color: var(--biq-color-text-secondary); }
    .biq-comparison__cell--limited { color: var(--biq-slate-tan-700); }
    .biq-comparison__table thead th { border-bottom-color: var(--biq-color-text-primary); }
}

/* ── Phased offer ────────────────────────────────────────────────────────── */

.biq-phased-offer {
    background: var(--biq-color-surface-raised);
    border: 1px solid var(--biq-color-rule);
    border-radius: var(--biq-radius-lg);
    padding: var(--biq-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-5);
}

.biq-phased-offer__counter {
    font-size: var(--biq-fs-lg);
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-action);
    margin: 0;
    padding: var(--biq-space-3) var(--biq-space-4);
    background: var(--biq-color-action-soft);
    border-radius: var(--biq-radius-md);
}

.biq-phased-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.biq-phased-table th,
.biq-phased-table td {
    padding: var(--biq-space-3) var(--biq-space-4);
    border-bottom: 1px solid var(--biq-color-rule);
    vertical-align: top;
    font-size: var(--biq-fs-md);
}

.biq-phased-table th {
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-text-secondary);
    font-size: var(--biq-fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--biq-tracking-wide);
}

.biq-phased-table tr:last-child td {
    border-bottom: none;
}

.biq-phased-table__tier-name {
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-text-primary);
}

.biq-phased-table__price {
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-action);
    white-space: nowrap;
}

.biq-phased-table__notes {
    color: var(--biq-color-text-secondary);
    line-height: var(--biq-lh-normal);
}

.biq-phased-table__status--current {
    color: var(--biq-color-action);
    font-weight: var(--biq-fw-semibold);
}

.biq-phased-table__status--upcoming {
    color: var(--biq-color-text-secondary);
}

.biq-phased-table__status--closed {
    color: var(--biq-color-text-muted);
    text-decoration: line-through;
}

.biq-phased-offer__footnote {
    font-size: var(--biq-fs-sm);
    color: var(--biq-color-text-muted);
    line-height: var(--biq-lh-normal);
    max-width: 70ch;
    margin: 0;
}

/* ── Unified pricing card (Session 2G.3) ─────────────────────────────────
   Single elevated container that holds the v2F section's previously
   disconnected pieces (banner, lede, table) as one designed object.
   Top header strip in slate-green-700, prominent stat block, the
   _PhasedOfferTable partial inlined and restyled per-row inside the
   card, and the partial's existing footnote serving as the card's
   muted micro-copy footer.

   Layout shape:
     ┌─────────────────────────────┐
     │ Header strip (dark green)   │
     ├─────────────────────────────┤
     │   Stat block (centered)     │
     ├─────────────────────────────┤
     │ Tier rows (founding/EA/std) │
     │   ↳ partial render with     │
     │     left-border colour per  │
     │     row, scoped to .card    │
     ├─────────────────────────────┤
     │ Footnote (FM retire copy)   │
     └─────────────────────────────┘
*/

.biq-pricing-card {
    background: var(--biq-slate-green-50);
    border: 1px solid var(--biq-color-rule);
    border-radius: var(--biq-radius-lg);
    box-shadow: var(--biq-shadow-md);
    overflow: hidden;
    /* Outermost padding handled by inner blocks so the header strip
       can paint edge-to-edge across the card top. */
    padding: 0;
}

.biq-pricing-card__header {
    background: var(--biq-slate-green-700);
    color: var(--biq-color-text-on-inverse);
    padding: var(--biq-space-6) var(--biq-space-7);
}

.biq-pricing-card__title {
    font-size: var(--biq-fs-2xl);
    line-height: var(--biq-lh-tight);
    color: inherit;
    margin: 0 0 var(--biq-space-2);
}

.biq-pricing-card__sub {
    font-size: var(--biq-fs-md);
    line-height: var(--biq-lh-snug);
    color: inherit;
    opacity: 0.85;
    margin: 0;
}

.biq-pricing-card__stat {
    text-align: center;
    padding: var(--biq-space-7) var(--biq-space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--biq-space-1);
}

.biq-pricing-card__stat-number {
    font-size: var(--biq-fs-display);
    font-weight: var(--biq-fw-bold);
    line-height: 1;
    color: var(--biq-slate-tan-700);
    margin: 0;
    letter-spacing: var(--biq-tracking-tight);
}

.biq-pricing-card__stat-label {
    font-size: var(--biq-fs-lg);
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-text-primary);
    margin: 0;
}

.biq-pricing-card__stat-sub {
    font-size: var(--biq-fs-md);
    color: var(--biq-color-text-secondary);
    margin: 0;
}

/* Standard-phase variant — no big number, subtler stat block. */
.biq-pricing-card__stat--standard {
    padding-block: var(--biq-space-5);
}

.biq-pricing-card__tiers {
    background: var(--biq-color-surface-raised);
    padding: var(--biq-space-5) var(--biq-space-6);
}

/* The partial's outer container loses its standalone styling when
   nested inside the card — the card already provides the surface. */
.biq-pricing-card__tiers .biq-phased-offer {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: var(--biq-space-4);
}

/* Counter line is replaced by the card's stat block — hide it inside
   the card while leaving it visible at /design-system. */
.biq-pricing-card__tiers .biq-phased-offer__counter {
    display: none;
}

/* The partial's footnote (FM-numbers-retire micro-copy) IS the card's
   bottom matter; let it render but tighten the spacing and bump the
   colour from --text-muted (slate-500) to --text-secondary (slate-700)
   per the Session 2G.3 spec. */
.biq-pricing-card__tiers .biq-phased-offer__footnote {
    margin-top: var(--biq-space-4);
    padding-top: var(--biq-space-4);
    border-top: 1px solid var(--biq-color-rule);
    color: var(--biq-color-text-secondary);
}

/* Per-tier left strip — gold for Founding (FM-only colour, Standing
   Order #10), slate-blue for Early Adopter, slate-tan for Standard.
   Scoped so design-system rendering of the partial stays unchanged. */
.biq-pricing-card__tiers .biq-phased-table__row--founding td:first-child {
    border-left: 4px solid var(--biq-color-fm);
}
.biq-pricing-card__tiers .biq-phased-table__row--founding td {
    background: var(--biq-slate-green-50);
}

.biq-pricing-card__tiers .biq-phased-table__row--ea td:first-child {
    border-left: 4px solid var(--biq-slate-blue-600);
}

.biq-pricing-card__tiers .biq-phased-table__row--standard td:first-child {
    border-left: 4px solid var(--biq-slate-tan-600);
}

@media (max-width: 720px) {
    .biq-pricing-card__header {
        padding: var(--biq-space-5);
    }
    .biq-pricing-card__stat {
        padding: var(--biq-space-5);
    }
    .biq-pricing-card__tiers {
        padding: var(--biq-space-4);
    }
}

/* ── Credibility section (text + visual two-column) ─────────────────────── */

.biq-credibility {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--biq-space-6);
    align-items: center;
}

@media (min-width: 1024px) {
    .biq-credibility {
        grid-template-columns: 1.2fr 1fr;
    }
}

.biq-credibility__copy {
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-4);
    max-width: 60ch;
}

.biq-credibility__copy p {
    font-size: var(--biq-fs-md);
    line-height: var(--biq-lh-normal);
    color: var(--biq-color-text-secondary);
    margin: 0;
}

.biq-credibility__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--biq-color-surface-sunk);
    border-radius: var(--biq-radius-lg);
    padding: var(--biq-space-5);
    color: var(--biq-color-action);
    min-height: 240px;
}

.biq-credibility__visual svg {
    width: 100%;
    max-width: 360px;
    height: auto;
}

/* ── Viewport showcase (3-column on desktop) ────────────────────────────── */

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

@media (min-width: 1024px) {
    .biq-viewports {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--biq-space-6);
    }
}

.biq-viewport-card {
    background: var(--biq-color-surface-raised);
    border: 1px solid var(--biq-color-rule);
    border-radius: var(--biq-radius-lg);
    padding: var(--biq-space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--biq-space-3);
    text-align: center;
}

.biq-viewport-card__art {
    width: 100%;
    max-width: 240px;
    height: auto;
    color: var(--biq-color-action);
}

.biq-viewport-card__label {
    font-size: var(--biq-fs-lg);
    font-weight: var(--biq-fw-semibold);
    color: var(--biq-color-text-primary);
    margin: 0;
}

.biq-viewport-card__role {
    font-size: var(--biq-fs-sm);
    color: var(--biq-color-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--biq-tracking-wide);
}

/* ── Final CTA (inverse panel) ──────────────────────────────────────────── */

.biq-final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--biq-space-4);
    padding-block: var(--biq-space-7);
}

.biq-final-cta__title {
    font-size: var(--biq-fs-3xl);
    line-height: var(--biq-lh-tight);
    color: inherit;
    margin: 0;
}

.biq-final-cta__sub {
    font-size: var(--biq-fs-lg);
    color: inherit;
    opacity: 0.85;
    margin: 0;
    max-width: 60ch;
}

.biq-final-cta__sub-link {
    color: inherit;
    opacity: 0.85;
    font-size: var(--biq-fs-sm);
    text-decoration: underline;
    margin-top: var(--biq-space-2);
}


/* ── Glove-friendly touch targets across the marketing surface ───────────
   Marketing CTAs already use the .biq-btn pattern which respects the
   44px minimum on tablet via button.css; nothing additional to do here. */

/* ── prefers-reduced-motion / prefers-contrast ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* No animations are used on the marketing surface — nothing to disable. */
}

@media (prefers-contrast: more) {
    .biq-pillar,
    .biq-phased-offer,
    .biq-viewport-card,
    .biq-pricing-card {
        border-color: var(--biq-color-border-strong);
    }
    .biq-phased-offer__counter {
        outline: 2px solid var(--biq-color-action);
    }
}