/* =============================================================
   Baselines v2 — Editorial × Document design system.

   All styles scoped under `body.b2` (or class `b2-*`) so this
   file ships zero visual change to pages that don't opt in.
   Pass 1 opt-ins: landing.html. Pass 2: portal/info/reference.

   Conventions:
   - Tokens live in :root so they're inspectable everywhere
   - Component classes are prefixed `b2-*`
   - Motion uses --b2-easing throughout for consistency
   - No drop-shadows on cards. Hairlines only.
   - One signature element: the line-numbered audit artifact (.b2-doc-card)
   ============================================================= */

:root {
    /* Canvas / ink */
    --b2-canvas: #FAFAF7;
    --b2-canvas-2: #F4F0E6;       /* cream — document callouts */
    --b2-ink: #0E0E0C;
    --b2-ink-2: #2A2A28;
    --b2-ink-mute: #6B6B66;
    --b2-ink-faint: #94908A;

    /* Hairlines */
    --b2-hairline: #E5E2D8;
    --b2-hairline-strong: #C9C3B5;

    /* Audit green — primary accent (deep, authoritative) */
    --b2-audit: #134E3A;
    --b2-audit-2: #1B6B4F;
    --b2-audit-line: #C7D9CF;
    --b2-audit-tint: #E8F0EC;

    /* Fresh green — secondary accent (lighter, "live / success / active").
       Used for ✓ checkmarks, "running" indicators, comparison-table
       success cells, the H1 italic-phrase highlight sweep, and pill
       variants. Pairs with audit-green: deep = "audit-verified",
       fresh = "live activity". */
    --b2-fresh: #3FB683;
    --b2-fresh-2: #2E9E70;
    --b2-fresh-tint: #E1F4EB;
    --b2-fresh-line: #A8DCC2;

    /* Status */
    --b2-attention: #B45309;
    --b2-attention-tint: #FEF3C7;
    --b2-fail: #991B1B;
    --b2-fail-tint: #FEE2E2;

    /* Dark canvas (used for hero / footer) */
    --b2-dark: #0E0E0C;
    --b2-dark-2: #1A1A17;
    --b2-dark-line: #2A2A26;
    --b2-dark-text: #E5E2D8;
    --b2-dark-text-mute: #8E8A82;

    /* Geometry */
    --b2-radius: 6px;
    --b2-radius-lg: 10px;
    --b2-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --b2-fast: 180ms;
    --b2-slow: 360ms;

    /* Type stacks */
    --b2-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --b2-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --b2-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}

/* =============================================================
   GLOBAL RESET (scoped to .b2)
   ============================================================= */
body.b2 {
    background: var(--b2-canvas);
    color: var(--b2-ink-2);
    font-family: var(--b2-sans);
    font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv01';
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* =========================================================
       Legacy --tgg-* variable overrides — re-route every legacy class
       (bg-light-fluid-flat, tgg-btn-primary, .text-primary, etc.) to
       v2 tokens. This is a single point of cascade so we don't have
       to chase every old reference one-by-one. */
    --tgg-blue: var(--b2-audit);
    --tgg-blue-hover: var(--b2-audit-2);
    --tgg-blue-light: var(--b2-audit-tint);
    --tgg-blue-pale: var(--b2-audit-line);
    --tgg-navy: var(--b2-dark);
    --tgg-navy-light: var(--b2-dark-2);
    --tgg-text: var(--b2-ink);
    --tgg-text-muted: var(--b2-ink-mute);
    --tgg-text-light: var(--b2-ink-faint);
    --tgg-border: var(--b2-hairline);
    --tgg-bg-white: #FFFFFF;
    --tgg-bg-light: var(--b2-canvas);
    --tgg-bg-alt: var(--b2-canvas-2);
    --tgg-green: var(--b2-audit-2);
    --tgg-yellow: #F59E0B;        /* keep for genuine attention states */
    --tgg-purple: var(--b2-audit);
    --tgg-pink: var(--b2-audit);

    /* Bootstrap variable shadows — neutralizes blue accent in any Bootstrap
       component that respects --bs-primary (badges, focus rings, etc.).
       Bootstrap 5.3 ships per-variant *-rgb tokens that get composited
       into focus box-shadows; if any one of these stays at the default
       (49,132,253) the blue Bootstrap focus ring bleeds through, which
       is what was happening on .tgg-status-card buttons after click. */
    --bs-primary: var(--b2-audit);
    --bs-primary-rgb: 19, 78, 58;
    --bs-primary-text-emphasis: var(--b2-audit);
    --bs-link-color: var(--b2-audit);
    --bs-link-color-rgb: 19, 78, 58;
    --bs-link-hover-color: var(--b2-audit-2);
    --bs-link-hover-color-rgb: 27, 107, 79;
    --bs-btn-focus-shadow-rgb: 14, 14, 12;
    --bs-focus-ring-color: rgba(14, 14, 12, 0.18);
    --bs-focus-ring-opacity: 0.18;
}

/* Per-variant Bootstrap focus-shadow tokens — Bootstrap 5.3 sets a separate
   --bs-btn-{variant}-focus-shadow-rgb for primary/info/etc. that takes
   precedence over the global --bs-btn-focus-shadow-rgb on certain elements.
   Routing all of them to ink so no blue ring can sneak through. */
body.b2 .btn-primary,
body.b2 .btn-secondary,
body.b2 .btn-info,
body.b2 .btn-success,
body.b2 .btn-light,
body.b2 .btn-dark,
body.b2 .btn-outline-primary,
body.b2 .btn-outline-secondary,
body.b2 .btn-outline-info {
    --bs-btn-focus-shadow-rgb: 14, 14, 12;
    --bs-btn-active-bg: var(--b2-audit-2);
    --bs-btn-active-border-color: var(--b2-audit-2);
}

/* Bootstrap class overrides — catch the canonical .btn-primary / .text-primary
   anywhere they slip through. Required because Bootstrap's bundle CSS loads
   after legacy.css but before this file in some contexts. */
body.b2 .btn.btn-primary,
body.b2 .btn.btn-primary:focus {
    background-color: var(--b2-audit) !important;
    border-color: var(--b2-audit) !important;
    color: #FFFFFF !important;
}
body.b2 .btn.btn-primary:hover,
body.b2 .btn.btn-primary:active {
    background-color: var(--b2-audit-2) !important;
    border-color: var(--b2-audit-2) !important;
    color: #FFFFFF !important;
}
body.b2 .btn.btn-outline-primary {
    color: var(--b2-audit) !important;
    border-color: var(--b2-audit) !important;
    background: transparent !important;
}
body.b2 .btn.btn-outline-primary:hover {
    background: var(--b2-audit) !important;
    color: #FFFFFF !important;
}
body.b2 .text-primary { color: var(--b2-audit) !important; }
body.b2 a.text-primary:hover { color: var(--b2-audit-2) !important; }
body.b2 .bg-primary { background-color: var(--b2-audit) !important; }
body.b2 .border-primary { border-color: var(--b2-audit) !important; }

/* Portal primary buttons go INK BLACK (not audit-green).
   Reserves audit-green for brand surfaces (landing CTAs, links, accents)
   so the portal feels more like a tool than a marketing page. */
body.b2 .tgg-btn-primary,
body.b2 .tgg-btn-primary:focus {
    background-color: var(--b2-ink) !important;
    background: var(--b2-ink) !important;
    border-color: var(--b2-ink) !important;
    color: #FFFFFF !important;
}
body.b2 .tgg-btn-primary:hover {
    background-color: var(--b2-ink-2) !important;
    background: var(--b2-ink-2) !important;
    border-color: var(--b2-ink-2) !important;
    color: #FFFFFF !important;
    /* Override baselines.css's hardcoded blue hover-shadow
       (rgba(37, 99, 235, 0.25) — Tailwind blue-600). Ink-tinted shadow
       keeps the lift feedback without the blue glow. */
    box-shadow: 0 6px 18px -4px rgba(14, 14, 12, 0.18) !important;
}
body.b2 .tgg-btn-primary:active {
    box-shadow: none !important;
}

/* Focus styling — faint ink ring at low opacity. Cohesive with the
   ink-black portal buttons; no colored glow that competes with the palette.
   `outline: none` kills the browser's default blue ring, then we replace it
   with a soft 12% ink box-shadow. */
body.b2 *:focus,
body.b2 *:focus-visible,
body.b2 .btn-check:focus + .btn {
    outline: none !important;
}
body.b2 .btn:focus,
body.b2 .btn:focus-visible,
body.b2 .tgg-btn:focus,
body.b2 .tgg-btn:focus-visible,
body.b2 .b2-btn:focus,
body.b2 .b2-btn:focus-visible,
body.b2 button:focus-visible,
body.b2 a.tgg-btn:focus,
body.b2 a.b2-btn:focus,
body.b2 a:focus-visible {
    box-shadow: 0 0 0 3px rgba(14, 14, 12, 0.12) !important;
}
body.b2 .form-control:focus,
body.b2 .form-select:focus,
body.b2 input:focus,
body.b2 textarea:focus,
body.b2 select:focus {
    border-color: var(--b2-ink) !important;
    box-shadow: 0 0 0 3px rgba(14, 14, 12, 0.10) !important;
}
/* Active state suppresses the focus ring (avoids the stuck-glow look
   right after clicking — cleaner press-down feel). */
body.b2 .btn:active,
body.b2 .btn:active:focus,
body.b2 .tgg-btn:active,
body.b2 .tgg-btn:active:focus,
body.b2 .b2-btn:active,
body.b2 .b2-btn:active:focus,
body.b2 button:active,
body.b2 a:active {
    box-shadow: none !important;
}

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

body.b2 a { color: var(--b2-audit); text-decoration: none; }

body.b2 ::selection { background: var(--b2-audit); color: #FFFFFF; }

/* =============================================================
   LAYOUT — wide editorial container
   ============================================================= */
.b2-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}
.b2-wrap-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 28px;
}
@media (max-width: 700px) {
    .b2-wrap, .b2-wrap-narrow { padding: 0 20px; }
}

.b2-section {
    padding: 80px 0;
    border-top: 1px solid var(--b2-hairline);
}
.b2-section.b2-section-tight { padding: 56px 0; }
.b2-section.b2-section-pad-top-only { padding-bottom: 0; border-bottom: 0; }
.b2-section.b2-section-no-rule { border-top: 0; }
@media (max-width: 700px) {
    .b2-section { padding: 56px 0; }
    .b2-section.b2-section-tight { padding: 40px 0; }
}

.b2-section-dark {
    background: var(--b2-dark);
    color: var(--b2-dark-text);
    border-color: var(--b2-dark-line);
}
.b2-section-cream {
    background: var(--b2-canvas-2);
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
.b2-section-ref {
    font-family: var(--b2-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--b2-ink-mute);
    text-transform: uppercase;
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.b2-section-ref::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--b2-ink-mute);
}
.b2-section-dark .b2-section-ref { color: var(--b2-dark-text-mute); }
.b2-section-dark .b2-section-ref::before { background: var(--b2-dark-text-mute); }

.b2-eyebrow {
    font-family: var(--b2-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--b2-ink-mute);
    text-transform: uppercase;
    margin: 0 0 12px;
}

.b2-h1 {
    font-family: var(--b2-sans);
    font-size: clamp(34px, 3.6vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.022em;
    font-weight: 600;
    color: var(--b2-ink);
    margin: 0 0 8px;
}
/* Italic-serif accent inside the H1 — single editorial flourish that
   carries the design's "publication" voice without demanding the
   reader parse a long italic-serif passage. */
.b2-h1 em {
    font-family: var(--b2-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--b2-ink);
    letter-spacing: -0.01em;
}

/* Subhead under the H1 — clarifying beat that complements the factual H1.
   Sans (Geist) at editorial size/leading so the long line is comfortable to
   skim. Italic-serif flourish is preserved for inline <em> emphasis. */
.b2-h1-sub {
    font-family: var(--b2-sans);
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--b2-ink-2);
    margin: 0 0 20px;
    max-width: 56ch;
}
.b2-h1-sub em {
    font-family: var(--b2-serif);
    font-style: italic;
    color: var(--b2-ink);
}
.b2-section-dark .b2-h1 { color: #FFFFFF; }

.b2-h2 {
    font-family: var(--b2-sans);
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--b2-ink);
    margin: 0 0 20px;
}
.b2-section-dark .b2-h2 { color: #FFFFFF; }

/* Editorial-italic h2 — used sparingly for one or two moments */
.b2-h2-serif {
    font-family: var(--b2-serif);
    font-size: clamp(32px, 4vw, 52px);
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--b2-ink);
    margin: 0 0 20px;
}
.b2-section-dark .b2-h2-serif { color: #FFFFFF; }

.b2-h3 {
    font-family: var(--b2-sans);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--b2-ink);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}
.b2-section-dark .b2-h3 { color: #FFFFFF; }

.b2-lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--b2-ink-2);
    margin: 0 0 28px;
    max-width: 64ch;
}
.b2-section-dark .b2-lede { color: var(--b2-dark-text); }

.b2-body { font-size: 16px; line-height: 1.6; color: var(--b2-ink-2); margin: 0 0 16px; }
.b2-section-dark .b2-body { color: var(--b2-dark-text); }

.b2-mute { color: var(--b2-ink-mute); font-size: 14px; }
.b2-section-dark .b2-mute { color: var(--b2-dark-text-mute); }

.b2-mono { font-family: var(--b2-mono); }

/* Editorial pull quote (founder block).
   Sans body for legibility at length; italic-serif <em> retains the editorial
   flourish on emphasized words. Left rule + larger size + open leading carries
   the "publication" feel without forcing the reader through italic serif. */
.b2-pullquote {
    font-family: var(--b2-sans);
    font-size: clamp(19px, 2.1vw, 24px);
    line-height: 1.55;
    color: var(--b2-ink);
    letter-spacing: -0.005em;
    font-weight: 400;
    margin: 0;
    padding-left: 22px;
    border-left: 2px solid var(--b2-audit-line, var(--b2-ink));
}
.b2-pullquote em {
    font-family: var(--b2-serif);
    font-style: italic;
    color: var(--b2-ink);
}

/* =============================================================
   LINKS — animated underline wipe
   ============================================================= */
.b2-link {
    color: var(--b2-audit);
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 200ms var(--b2-easing);
    padding-bottom: 1px;
    font-weight: 500;
}
.b2-link:hover {
    background-size: 100% 1px;
    color: var(--b2-audit);
}
.b2-link::after { content: " ↗"; opacity: 0; margin-left: 2px; transition: opacity 200ms var(--b2-easing); }
.b2-link.b2-link-arrow::after { opacity: 1; }
.b2-link.b2-link-arrow:hover::after { transform: translateX(2px); }
.b2-link-bare { color: inherit; }
.b2-section-dark .b2-link { color: var(--b2-audit-line); }
.b2-section-dark .b2-link:hover { color: #FFFFFF; }

/* =============================================================
   BUTTONS
   ============================================================= */
.b2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--b2-radius);
    font-family: var(--b2-sans);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms var(--b2-easing),
                border-color 150ms var(--b2-easing),
                color 150ms var(--b2-easing),
                transform 80ms var(--b2-easing);
    text-decoration: none !important;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.b2-btn:active { transform: scale(0.985); }

.b2-btn-primary {
    background: var(--b2-audit);
    color: #FFFFFF !important;
    border-color: var(--b2-audit);
}
.b2-btn-primary:hover { background: var(--b2-audit-2); border-color: var(--b2-audit-2); }

.b2-btn-secondary {
    background: transparent;
    color: var(--b2-ink) !important;
    border-color: var(--b2-hairline-strong);
}
.b2-btn-secondary:hover { background: var(--b2-canvas-2); border-color: var(--b2-ink-mute); }
.b2-section-dark .b2-btn-secondary {
    color: #FFFFFF !important;
    border-color: var(--b2-dark-line);
}
.b2-section-dark .b2-btn-secondary:hover {
    background: var(--b2-dark-2);
    border-color: var(--b2-dark-text-mute);
}

.b2-btn-ghost {
    background: transparent;
    color: var(--b2-ink-mute) !important;
    border-color: transparent;
    height: 36px;
    padding: 0 6px;
    font-size: 13.5px;
}
.b2-btn-ghost:hover { color: var(--b2-ink) !important; }
.b2-section-dark .b2-btn-ghost { color: var(--b2-dark-text-mute) !important; }
.b2-section-dark .b2-btn-ghost:hover { color: #FFFFFF !important; }

.b2-btn-lg { height: 52px; padding: 0 24px; font-size: 15.5px; }

/* =============================================================
   PILLS / BADGES — mono, hairline, no fill
   ============================================================= */
.b2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--b2-hairline-strong);
    background: transparent;
    font-family: var(--b2-mono);
    font-size: 11px;
    color: var(--b2-ink);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.b2-pill-audit {
    border-color: var(--b2-audit);
    color: var(--b2-audit);
}
.b2-pill-audit::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b2-audit);
    display: inline-block;
}
.b2-section-dark .b2-pill {
    border-color: var(--b2-dark-line);
    color: var(--b2-dark-text);
}
.b2-section-dark .b2-pill-audit {
    border-color: var(--b2-audit-line);
    color: var(--b2-audit-line);
}
.b2-section-dark .b2-pill-audit::before { background: var(--b2-audit-line); }

/* =============================================================
   CARDS — paper, hairline only, no shadow
   ============================================================= */
.b2-card {
    background: #FFFFFF;
    border: 1px solid var(--b2-hairline);
    border-radius: var(--b2-radius);
    padding: 28px 30px;
}
.b2-section-cream .b2-card { background: #FFFFFF; }
.b2-section-dark .b2-card {
    background: var(--b2-dark-2);
    border-color: var(--b2-dark-line);
    color: var(--b2-dark-text);
}

.b2-card-flush { padding: 0; }
.b2-card-tight { padding: 18px 20px; }

/* =============================================================
   CALLOUT — cream-bg with hairline + ink rule on the left
   ============================================================= */
.b2-callout {
    background: var(--b2-canvas-2);
    border: 1px solid var(--b2-hairline);
    border-left: 2px solid var(--b2-audit);
    border-radius: var(--b2-radius);
    padding: 16px 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--b2-ink-2);
}
.b2-callout strong { color: var(--b2-ink); }
.b2-callout.b2-callout-attention { border-left-color: var(--b2-attention); background: var(--b2-attention-tint); color: #78350F; }
.b2-callout.b2-callout-attention strong { color: #78350F; }

/* =============================================================
   TABLES — mono numerics, hairline only
   ============================================================= */
.b2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.b2-table th, .b2-table td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--b2-hairline);
    vertical-align: top;
    color: var(--b2-ink-2);
}
.b2-table th {
    font-family: var(--b2-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b2-ink-mute);
    font-weight: 500;
    background: var(--b2-canvas-2);
    border-bottom: 1px solid var(--b2-hairline-strong);
}
.b2-table td.b2-td-mono { font-family: var(--b2-mono); font-size: 13px; color: var(--b2-ink); }
.b2-table tr:last-child td { border-bottom: 0; }
.b2-table tfoot td {
    background: var(--b2-canvas-2);
    border-top: 1px solid var(--b2-hairline-strong);
    font-weight: 600;
    color: var(--b2-ink);
}

/* =============================================================
   THE SIGNATURE — line-numbered audit-reference document card
   ============================================================= */
.b2-doc-card {
    background: #FFFFFF;
    border: 1px solid var(--b2-hairline);
    border-radius: var(--b2-radius-lg);
    overflow: hidden;
    font-family: var(--b2-mono);
    font-size: 13px;
    line-height: 1.85;
    color: var(--b2-ink-2);
    /* Resting shadow — gives the card visual depth without needing
       hover. Modern card pattern (Linear / Vercel / Cursor): subtle
       top-shadow + larger soft drop, both at low alpha. */
    box-shadow: 0 1px 2px rgba(14, 14, 12, 0.04),
                0 8px 24px -12px rgba(14, 14, 12, 0.10);
    /* Subtle paper grain */
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.012) 100%);
}
.b2-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--b2-hairline);
    background: transparent;
    font-family: var(--b2-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--b2-ink-mute);
    text-transform: uppercase;
}
.b2-doc-head .b2-doc-title { color: var(--b2-ink); font-weight: 500; }
.b2-doc-head a { color: var(--b2-audit); text-decoration: none; }
.b2-doc-head a:hover { text-decoration: underline; }

.b2-doc-body {
    padding: 14px 0 18px;
    min-height: 520px;
    max-height: 620px;
    overflow: hidden;
    position: relative;
}

/* Marketing-language caption above the doc artifact — turns the line-numbered
   excerpt from "design detail" into "this is what you hand your auditor." */
.b2-doc-caption {
    font-family: var(--b2-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--b2-ink-mute);
    text-transform: uppercase;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.b2-doc-caption::before {
    content: "→";
    color: var(--b2-audit);
}

/* Tied caption — drops the leading "→" and uses an inline step
   badge instead, so the doc preview reads as the explicit output of
   a specific step on the left rail. The fresh-tint pill mirrors the
   "running" status pill in the deploy log, creating a consistent
   "label + content" pattern across both card types. */
.b2-doc-caption-tied::before { content: none; }
.b2-doc-caption-tied {
    align-items: center;
    gap: 10px;
}
.b2-doc-caption-step {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--b2-fresh-tint);
    color: var(--b2-fresh-2);
    font-family: var(--b2-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}
.b2-doc-line {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 4px;
    padding: 2px 18px;
    min-height: 26px;
    color: var(--b2-ink-2);
}
.b2-doc-line.b2-doc-line-blank { min-height: 14px; padding: 0 18px; }
.b2-doc-line .b2-doc-lineno {
    text-align: right;
    color: var(--b2-ink-faint);
    user-select: none;
    padding-right: 14px;
    border-right: 1px solid var(--b2-hairline);
    line-height: 1.85;
}
.b2-doc-line .b2-doc-text { padding-left: 14px; white-space: pre-wrap; word-break: break-word; line-height: 1.85; }
.b2-doc-line .b2-doc-text .b2-doc-section { color: var(--b2-audit); font-weight: 500; }
.b2-doc-line .b2-doc-text .b2-doc-key { color: var(--b2-ink); }
.b2-doc-line .b2-doc-text .b2-doc-tag {
    color: var(--b2-ink-mute);
    font-size: 11px;
    margin-left: 4px;
}
.b2-doc-cursor {
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--b2-audit);
    vertical-align: middle;
    margin-left: 2px;
    animation: b2-blink 1.05s steps(1, end) infinite;
}
@keyframes b2-blink { 50% { opacity: 0; } }

/* PDF-like section header inside the doc — full-width, no line number gutter */
.b2-doc-section-header {
    padding: 14px 18px 4px;
    font-family: var(--b2-mono);
    font-size: 12.5px;
    color: var(--b2-audit);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
}
.b2-doc-body > .b2-doc-section-header:first-child { padding-top: 6px; }

/* Section divider under each header — solid hairline (was dashed,
   which read as "spec sheet"). */
.b2-doc-rule {
    margin: 4px 20px 8px;
    border: 0;
    border-top: 1px solid var(--b2-hairline);
    height: 0;
}

/* Colored inline framework pills for cross-references (SOC 2 / ISO / CIS / NIST).
   Restrained tinted backgrounds with hairline borders so they don't shout. */
.b2-doc-pill {
    display: inline-block;
    padding: 0px 6px;
    border-radius: 3px;
    font-family: var(--b2-mono);
    font-size: 10.5px;
    line-height: 1.7;
    border: 1px solid;
    margin: 0 2px 2px 0;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: 1px;
}
.b2-doc-pill-soc2 { background: #FEF3C7; border-color: #FCD34D; color: #78350F; }
.b2-doc-pill-iso  { background: #E0F7FA; border-color: #67E8F9; color: #155E75; }
.b2-doc-pill-cis  { background: #E0E7FF; border-color: #A5B4FC; color: #3730A3; }
.b2-doc-pill-nist { background: #F3E8FF; border-color: #D8B4FE; color: #6B21A8; }

/* Document footer — page count + link to full reference */
.b2-doc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--b2-hairline);
    background: transparent;
    font-family: var(--b2-mono);
    font-size: 11px;
    color: var(--b2-ink-mute);
    letter-spacing: 0.04em;
}
.b2-doc-foot a { color: var(--b2-audit); text-decoration: none; }
.b2-doc-foot a:hover { text-decoration: underline; }

/* =============================================================
   STATIC DOC PREVIEW — mirrors /reference document styling
   inside the .b2-doc-card chrome. Replaces the line-numbered
   "IDE excerpt" preview with section headings + property
   tables, matching the actual audit-reference page so visitors
   see what they'd actually receive (instead of an IDE animation).
   ============================================================= */
.b2-doc-card-static .b2-doc-head {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--b2-sans);
    font-size: 12.5px;
    color: var(--b2-ink-mute);
}
.b2-doc-card-static .b2-doc-head .b2-doc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--b2-ink);
}
.b2-doc-card-static .b2-doc-version {
    font-family: var(--b2-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--b2-ink-mute);
    text-transform: uppercase;
}
.b2-doc-body-static {
    padding: 22px 24px 18px;
    min-height: 460px;
    max-height: 540px;
    overflow: hidden;
    font-family: var(--b2-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--b2-ink-2);
    background: #FFFFFF;
}

/* Top metadata block — mirrors /reference's .audit-meta */
.b2-doc-meta {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 14px;
    row-gap: 6px;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--b2-canvas-2);
    border: 1px solid var(--b2-hairline);
    border-radius: var(--b2-radius);
    font-size: 12.5px;
}
.b2-doc-meta dt {
    font-family: var(--b2-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b2-ink-mute);
    margin: 0;
    line-height: 1.6;
}
.b2-doc-meta dd {
    margin: 0;
    color: var(--b2-ink-2);
    line-height: 1.45;
}

/* Section heading inside the static doc — mirrors /reference's .audit-h
   (sans semibold with hairline accent underline). */
.b2-doc-section {
    font-family: var(--b2-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--b2-ink);
    letter-spacing: -0.005em;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--b2-audit-line);
}
.b2-doc-section:first-child { margin-top: 0; }

/* Property rows — mirrors /reference's .audit-table style without
   the table chrome. Two-column grid: label left, value right. */
.b2-doc-props {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 14px;
    row-gap: 8px;
    margin: 0 0 14px;
}
.b2-doc-props dt {
    font-family: var(--b2-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b2-ink-mute);
    padding-top: 2px;
    line-height: 1.5;
}
.b2-doc-props dd {
    margin: 0;
    color: var(--b2-ink);
    font-size: 12.5px;
    line-height: 1.55;
}

/* =============================================================
   LIVE DEPLOY LOG — hero RHS animation
   Reuses .b2-doc-card / .b2-doc-head / .b2-doc-foot chrome so the
   deploy log feels like the same publication as the audit doc.
   Lines reveal one at a time on page load (initDeployLog in JS).
   ============================================================= */
.b2-log-body {
    padding: 16px 22px 18px;
    max-height: 480px;
    overflow: hidden;
    font-family: var(--b2-mono);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--b2-ink-2);
    background: #FFFFFF;
}
.b2-log-line {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    column-gap: 10px;
    align-items: baseline;
    padding: 1px 0;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 260ms ease, transform 260ms ease;
}
.b2-log-line.b2-log-shown { opacity: 1; transform: translateY(0); }
.b2-log-icon {
    text-align: center;
    color: var(--b2-fresh);
    font-weight: 700;
    line-height: inherit;
}
.b2-log-text { color: var(--b2-ink-2); }
.b2-log-time {
    color: var(--b2-ink-faint);
    font-size: 11px;
    letter-spacing: 0.02em;
}
.b2-log-line.b2-log-active .b2-log-icon {
    color: var(--b2-fresh-2);
    animation: b2-log-pulse 1.4s ease-in-out infinite;
}
.b2-log-line.b2-log-pending .b2-log-icon { color: var(--b2-ink-faint); }
.b2-log-line.b2-log-pending .b2-log-text { color: var(--b2-ink-mute); }
.b2-log-line.b2-log-pending .b2-log-time { color: var(--b2-ink-faint); }
.b2-log-divider {
    margin: 10px 0 8px;
    border: 0;
    border-top: 1px dashed var(--b2-hairline);
    height: 0;
    opacity: 0;
    transition: opacity 260ms ease;
}
.b2-log-divider.b2-log-shown { opacity: 1; }
.b2-log-line.b2-log-summary {
    color: var(--b2-fresh-2);
    font-weight: 500;
}
.b2-log-line.b2-log-summary .b2-log-icon { color: var(--b2-fresh-2); }
.b2-log-line.b2-log-summary .b2-log-text { color: var(--b2-fresh-2); }

@keyframes b2-log-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Reduced motion: render everything visible up-front. */
@media (prefers-reduced-motion: reduce) {
    .b2-log-line, .b2-log-divider { opacity: 1 !important; transform: none !important; }
    .b2-log-line.b2-log-active .b2-log-icon { animation: none !important; }
}

/* =============================================================
   NAV — minimal, hairline bottom
   ============================================================= */
.b2-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 250, 247, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--b2-hairline);
}
.b2-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}
.b2-nav-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--b2-ink) !important;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    text-decoration: none;
}
/* Two-layer diamond — matches favicon, sidebar, and signin bigmark */
.b2-nav-brand .b2-nav-brand-mark {
    width: 18px;
    height: 18px;
    position: relative;
    background: transparent;
    align-self: center;
    flex-shrink: 0;
}
.b2-nav-brand .b2-nav-brand-mark::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    background: var(--b2-audit-2);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 1;
}
.b2-nav-brand .b2-nav-brand-mark::after {
    content: "";
    position: absolute;
    top: calc(50% + 2px);
    left: calc(50% + 2px);
    width: 11px;
    height: 11px;
    border: 1px solid var(--b2-audit-2);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.4;
}
.b2-nav-brand .b2-nav-brand-sub {
    font-family: var(--b2-mono);
    font-size: 11px;
    color: var(--b2-ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 400;
}
.b2-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}
.b2-nav-link {
    color: var(--b2-ink-2) !important;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--b2-radius);
    transition: background 150ms var(--b2-easing), color 150ms var(--b2-easing);
}
.b2-nav-link:hover { background: var(--b2-canvas-2); color: var(--b2-ink) !important; }
@media (max-width: 720px) {
    .b2-nav-link.b2-nav-hide-mobile { display: none; }
}

/* =============================================================
   FOOTER — build stamp signature
   ============================================================= */
.b2-footer {
    background: var(--b2-dark);
    color: var(--b2-dark-text);
    padding: 56px 0 36px;
    border-top: 1px solid var(--b2-dark-line);
    margin-top: 0;
}
.b2-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: start;
}
@media (max-width: 720px) {
    .b2-footer-inner { grid-template-columns: 1fr; }
}
.b2-footer-brand .b2-footer-brand-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
}
.b2-footer-brand p { color: var(--b2-dark-text-mute); font-size: 13.5px; max-width: 44ch; margin: 6px 0 0; line-height: 1.55; }
.b2-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    justify-content: flex-end;
    align-items: center;
}
.b2-footer-links a {
    color: var(--b2-dark-text-mute);
    text-decoration: none;
    font-size: 13.5px;
    transition: color 150ms var(--b2-easing);
}
.b2-footer-links a:hover { color: #FFFFFF; }
@media (max-width: 720px) {
    .b2-footer-links { justify-content: flex-start; }
}

.b2-build-stamp {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--b2-dark-line);
    font-family: var(--b2-mono);
    font-size: 11px;
    color: var(--b2-dark-text-mute);
    letter-spacing: 0.04em;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    justify-content: space-between;
    grid-column: 1 / -1;
}
.b2-build-stamp span::before { content: "/ "; color: #4A4A45; margin-right: 4px; }
.b2-build-stamp span:first-child::before { content: ""; margin-right: 0; }

/* =============================================================
   HERO — first viewport
   ============================================================= */
.b2-hero {
    padding: 56px 0;
    border-top: 0;
    background: var(--b2-canvas);
}
@media (max-width: 700px) { .b2-hero { padding: 40px 0; } }

.b2-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 960px) {
    .b2-hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
    /* Hide the deploy-log aside on tablet/mobile so the hero stays
       focused on the headline + CTA. The deploy-log is a desktop-
       decorative element; mobile visitors are optimized for the
       fastest path to "Get started". */
    .b2-hero-aside { display: none; }
}

.b2-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 28px;
}

/* Narrow single-column hero (des-cpa style). Used for the stripped-down
   hero where everything except H1 / sub / CTAs / one trust line has
   been moved into its own section below. */
.b2-hero-narrow {
    max-width: 720px;
    padding: 32px 0 24px;
}
.b2-hero-narrow .b2-h1 { margin-bottom: 18px; }
.b2-hero-narrow .b2-h1-sub { margin-bottom: 8px; }

/* Single trust line that lives under the hero CTAs in place of the
   old multi-line price/guarantee/license block. Plain mute text, mono
   middle dots, no border chrome — keeps the hero airy. */
.b2-hero-trust {
    margin-top: 24px;
    color: var(--b2-ink-mute);
    font-size: 14px;
    line-height: 1.55;
}

/* Price + pitch line — establishes "what / how much" within 5 seconds. */
.b2-hero-pricepitch {
    font-size: 17px;
    line-height: 1.55;
    color: var(--b2-ink-2);
    margin: 0 0 22px;
    padding: 14px 0;
    border-top: 1px solid var(--b2-hairline);
    border-bottom: 1px solid var(--b2-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
}
.b2-hero-pricepitch .b2-hero-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--b2-ink);
    letter-spacing: -0.015em;
}
.b2-hero-pricepitch .b2-hero-price-sep {
    color: var(--b2-ink-faint);
    font-family: var(--b2-mono);
    font-size: 14px;
}
.b2-hero-pricepitch .b2-hero-price-note {
    color: var(--b2-ink-mute);
    font-size: 14.5px;
}
.b2-hero-pricepitch .b2-hero-price-note button {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--b2-audit);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.b2-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--b2-hairline);
}
.b2-hero-meta-item .b2-hero-meta-label {
    font-family: var(--b2-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--b2-ink-mute);
    margin-bottom: 4px;
}
.b2-hero-meta-item .b2-hero-meta-value {
    font-size: 16px;
    color: var(--b2-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Compact founder block in hero (deprecated; founder now has a full-width
   band immediately below the hero. Keeping the class in case it's used
   elsewhere.) */
.b2-hero-founder {
    margin-top: 22px;
    padding: 14px 18px;
    border-left: 2px solid var(--b2-audit);
    background: var(--b2-canvas-2);
    border-radius: 0 var(--b2-radius) var(--b2-radius) 0;
    font-size: 14.5px;
    color: var(--b2-ink-2);
    line-height: 1.55;
}
.b2-hero-founder em {
    font-family: var(--b2-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--b2-ink);
}
.b2-hero-founder .b2-hero-founder-attr {
    font-family: var(--b2-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--b2-ink-mute);
    margin-top: 6px;
}

/* Risk-reversal microcopy under hero CTAs — closes the purchase decision. */
.b2-hero-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--b2-audit-tint);
    border: 1px solid var(--b2-audit-line);
    border-radius: var(--b2-radius);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--b2-ink-2);
}
.b2-hero-guarantee::before {
    content: "✓";
    color: var(--b2-audit);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
}
.b2-hero-guarantee strong { color: var(--b2-audit); font-weight: 600; }

/* =============================================================
   STAGGERED ENTER MOTION
   ============================================================= */
.b2-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(2px);
    animation: b2-stagger-in 720ms var(--b2-easing) forwards;
}
.b2-stagger > *:nth-child(1) { animation-delay: 0ms; }
.b2-stagger > *:nth-child(2) { animation-delay: 80ms; }
.b2-stagger > *:nth-child(3) { animation-delay: 160ms; }
.b2-stagger > *:nth-child(4) { animation-delay: 240ms; }
.b2-stagger > *:nth-child(5) { animation-delay: 320ms; }
.b2-stagger > *:nth-child(6) { animation-delay: 400ms; }
.b2-stagger > *:nth-child(7) { animation-delay: 480ms; }
.b2-stagger > *:nth-child(8) { animation-delay: 560ms; }
@keyframes b2-stagger-in {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Scroll-reveal for major H2s — JS adds .b2-revealed when in view.
   Subtle blur fade on top of the existing translate gives the reveal
   a "settling into focus" feel, modernizing the editorial entry. */
.b2-reveal {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(3px);
    transition: opacity 720ms var(--b2-easing),
                transform 720ms var(--b2-easing),
                filter 720ms var(--b2-easing);
}
.b2-reveal.b2-revealed { opacity: 1; transform: translateY(0); filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
    .b2-stagger > *,
    .b2-reveal,
    .b2-doc-cursor { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* =============================================================
   LISTS — used for "what's included" rows
   ============================================================= */
.b2-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.b2-list li {
    position: relative;
    padding: 10px 0 10px 26px;
    border-bottom: 1px solid var(--b2-hairline);
    color: var(--b2-ink-2);
    font-size: 15px;
    line-height: 1.5;
}
.b2-list li:last-child { border-bottom: 0; }
.b2-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 14px;
    height: 1px;
    background: var(--b2-audit);
}

/* =============================================================
   FAQ — numbered like a doc
   ============================================================= */
.b2-faq-item {
    border-bottom: 1px solid var(--b2-hairline);
    padding: 0;
}
.b2-faq-item:first-child { border-top: 1px solid var(--b2-hairline); }
.b2-faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 4px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    color: var(--b2-ink);
    font-family: var(--b2-sans);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    transition: color 150ms var(--b2-easing);
}
.b2-faq-q:hover { color: var(--b2-audit); }
.b2-faq-q-num {
    font-family: var(--b2-mono);
    font-size: 12px;
    color: var(--b2-ink-mute);
    margin-top: 4px;
    flex-shrink: 0;
    min-width: 36px;
    letter-spacing: 0.04em;
}
.b2-faq-q-chev {
    margin-left: auto;
    font-size: 14px;
    color: var(--b2-ink-mute);
    transition: transform 200ms var(--b2-easing);
}
.b2-faq-item.b2-open .b2-faq-q-chev { transform: rotate(45deg); }
.b2-faq-a {
    display: none;
    padding: 0 4px 24px 56px;
    color: var(--b2-ink-2);
    font-size: 15.5px;
    line-height: 1.62;
    max-width: 75ch;
}
.b2-faq-item.b2-open .b2-faq-a { display: block; }

/* =============================================================
   STEPS — numbered process
   ============================================================= */
.b2-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    padding: 22px 0;
    border-bottom: 1px solid var(--b2-hairline);
}
.b2-step:last-child { border-bottom: 0; }
.b2-step-num {
    font-family: var(--b2-mono);
    font-size: 12px;
    color: var(--b2-audit);
    letter-spacing: 0.04em;
    padding-top: 4px;
}

/* =============================================================
   STATS — restrained, mono-flavored
   ============================================================= */
.b2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--b2-hairline);
    border-radius: var(--b2-radius);
    background: #FFFFFF;
}
@media (max-width: 700px) { .b2-stats { grid-template-columns: repeat(2, 1fr); } }
.b2-stat {
    padding: 22px 24px;
    border-right: 1px solid var(--b2-hairline);
}
.b2-stat:last-child { border-right: 0; }
@media (max-width: 700px) {
    .b2-stat:nth-child(2) { border-right: 0; }
    .b2-stat:nth-child(1), .b2-stat:nth-child(2) { border-bottom: 1px solid var(--b2-hairline); }
}
.b2-stat-label {
    font-family: var(--b2-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b2-ink-mute);
    margin-bottom: 8px;
}
.b2-stat-value {
    font-size: 24px;
    line-height: 1.1;
    color: var(--b2-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* =============================================================
   PRICE BLOCK — compact, no card
   ============================================================= */
.b2-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-top: 18px;
}
.b2-price-amount {
    font-family: var(--b2-sans);
    font-size: 36px;
    font-weight: 600;
    color: var(--b2-ink);
    letter-spacing: -0.02em;
    line-height: 1;
}
.b2-price-note {
    font-family: var(--b2-mono);
    font-size: 12px;
    color: var(--b2-ink-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* =============================================================
   MODAL — partner request
   ============================================================= */
.b2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 12, 0.62);
    backdrop-filter: blur(2px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px 24px;
    z-index: 1080;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 200ms var(--b2-easing);
}
.b2-modal-overlay.b2-open { display: flex; opacity: 1; }
.b2-modal {
    background: #FFFFFF;
    border: 1px solid var(--b2-hairline-strong);
    border-radius: var(--b2-radius);
    width: 100%;
    max-width: 540px;
    overflow: hidden;
    color: var(--b2-ink);
}
.b2-modal-head {
    padding: 24px 28px 12px;
    border-bottom: 1px solid var(--b2-hairline);
    position: relative;
    background: var(--b2-canvas-2);
}
.b2-modal-head .b2-eyebrow { margin-bottom: 8px; }
.b2-modal-head h3 {
    margin: 0 0 6px;
    font-family: var(--b2-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--b2-ink);
}
.b2-modal-head p { margin: 0; color: var(--b2-ink-mute); font-size: 14px; line-height: 1.55; }
.b2-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: 0;
    color: var(--b2-ink-mute);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 10px;
    border-radius: var(--b2-radius);
    transition: background 150ms var(--b2-easing), color 150ms var(--b2-easing);
}
.b2-modal-close:hover { background: rgba(14, 14, 12, 0.06); color: var(--b2-ink); }
.b2-modal-body { padding: 22px 28px 28px; }

.b2-form-row { margin-bottom: 14px; }
.b2-form-row.b2-form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b2-form-row label {
    display: block;
    font-family: var(--b2-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--b2-ink-mute);
    margin-bottom: 6px;
}
.b2-input, .b2-textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--b2-canvas);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: var(--b2-radius);
    font-family: var(--b2-sans);
    font-size: 14.5px;
    color: var(--b2-ink);
    transition: border-color 150ms var(--b2-easing), box-shadow 150ms var(--b2-easing);
}
.b2-input:focus, .b2-textarea:focus {
    outline: none;
    border-color: var(--b2-audit);
    box-shadow: 0 0 0 3px var(--b2-audit-tint);
    background: #FFFFFF;
}
.b2-textarea { resize: vertical; min-height: 90px; font-family: var(--b2-sans); }

.b2-modal-error {
    background: var(--b2-fail-tint);
    border: 1px solid #FCA5A5;
    color: var(--b2-fail);
    border-radius: var(--b2-radius);
    padding: 11px 13px;
    font-size: 13.5px;
    margin-bottom: 16px;
    display: none;
}
.b2-modal-foot {
    margin-top: 14px;
    font-family: var(--b2-mono);
    font-size: 11px;
    color: var(--b2-ink-mute);
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.b2-modal-success { text-align: center; padding: 20px 0 8px; }
.b2-modal-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--b2-audit-tint);
    color: var(--b2-audit);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    border: 1px solid var(--b2-audit-line);
}

/* =============================================================
   LEGAL DOC — used by /eula, /terms, /privacy
   Long-form prose with light document-style chrome.
   ============================================================= */
body.b2 .b2-legal-doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 28px 96px;
    font-family: var(--b2-sans);
    color: var(--b2-ink-2);
    line-height: 1.65;
}
body.b2 .b2-legal-doc p { font-size: 14.5px; margin: 0 0 14px; }
body.b2 .b2-legal-doc strong { color: var(--b2-ink); font-weight: 600; }
body.b2 .b2-legal-doc ol, body.b2 .b2-legal-doc ul { margin: 0 0 16px; padding-left: 26px; }
body.b2 .b2-legal-doc li { font-size: 14.5px; margin-bottom: 10px; line-height: 1.6; }
body.b2 .b2-legal-doc u { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
body.b2 .b2-legal-doc a { color: var(--b2-audit); }
body.b2 .b2-legal-doc a:hover { text-decoration: underline; }
.b2-legal-header {
    padding-bottom: 28px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--b2-hairline);
}
.b2-legal-header .b2-eyebrow { margin-bottom: 8px; }
.b2-legal-header h1 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--b2-ink);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-family: var(--b2-sans);
}

/* =============================================================
   COMPARE TABLE — special variant for the MSP comparison
   ============================================================= */
/* Modernized comparison: drop the cream/beige headers and the
   outer card chrome; emphasis lives in a single solid fresh-tint
   column running header-through-footer, with the Jumpstart text
   bold + green. Numbers stay mono for legibility but render in the
   muted ink so they don't shout. Hairlines are the only row
   separators — no boxed cells, no uppercase-mono accountancy feel. */
.b2-compare {
    border: 0;
    background: transparent;
    overflow: visible;
}
.b2-compare table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}
.b2-compare th {
    text-align: left;
    padding: 14px 22px 14px;
    font-family: var(--b2-sans);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--b2-ink-mute);
    background: transparent;
    border-bottom: 1px solid var(--b2-hairline);
    font-weight: 600;
    text-transform: none;
}
.b2-compare th.b2-compare-ours {
    background: var(--b2-fresh-tint);
    color: var(--b2-fresh-2);
    font-weight: 700;
    border-top-left-radius: var(--b2-radius-lg);
    border-top-right-radius: var(--b2-radius-lg);
    border-bottom-color: transparent;
    padding-top: 18px;
}
.b2-compare td {
    padding: 18px 22px;
    border-bottom: 1px solid var(--b2-hairline);
    color: var(--b2-ink-2);
    vertical-align: middle;
}
.b2-compare td.b2-compare-ours {
    background: var(--b2-fresh-tint);
    color: var(--b2-fresh-2);
    font-weight: 500;
    border-bottom-color: rgba(168, 220, 194, 0.5);  /* fresh-line at half alpha */
}
.b2-compare td.b2-compare-num {
    font-family: var(--b2-mono);
    font-size: 13.5px;
    color: var(--b2-ink-mute);
}
.b2-compare tbody tr:last-child td { border-bottom: 0; }
.b2-compare tfoot td {
    background: transparent;
    border-top: 2px solid var(--b2-ink);
    font-weight: 600;
    color: var(--b2-ink);
    padding: 20px 22px;
}
.b2-compare tfoot td.b2-compare-ours {
    background: var(--b2-fresh-tint);
    color: var(--b2-fresh-2);
    border-top-color: var(--b2-fresh-2);
}
.b2-compare tfoot tr:last-child td.b2-compare-ours {
    border-bottom-left-radius: var(--b2-radius-lg);
    border-bottom-right-radius: var(--b2-radius-lg);
    padding-bottom: 22px;
}

/* =============================================================
   POLISH PASS — fresh-green accents + micro-interactions

   Goal: more color and "pop" without crossing into busy. The
   fresh-green token (defined in :root) signals live activity and
   success states; the existing audit-green keeps signaling
   authority/audit. Everything below is purely additive — old
   classes still work; new states layer on top. All animations
   are disabled inside prefers-reduced-motion so the page is calm
   for users who request it.
   ============================================================= */

/* Smooth scroll for in-page anchors (e.g. hero "How it works" -> §03). */
html { scroll-behavior: smooth; }

/* Live "running" pill in the deploy-log header — fresh-tint badge
   with pulsing dot. Modern status-pill pattern (Linear / Vercel
   deploy panels). */
.b2-log-running {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 9px;
    border-radius: 999px;
    background: var(--b2-fresh-tint);
    color: var(--b2-fresh-2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}
.b2-log-running::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b2-fresh);
    box-shadow: 0 0 0 0 rgba(63, 182, 131, 0.55);
    animation: b2-pulse-dot 1.6s ease-out infinite;
}
@keyframes b2-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(63, 182, 131, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(63, 182, 131, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 182, 131, 0); }
}

/* Highlighter sweep behind the H1 italic phrase. CSS marker-pen
   effect: a fresh-tint background grows from 0% to 100% width on
   load, painted only on the bottom third so it reads like a
   highlighter line under the italic words rather than a full block. */
.b2-h1 em {
    position: relative;
    background-image: linear-gradient(transparent 62%, var(--b2-fresh-tint) 62%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: b2-h1-marker 900ms 700ms var(--b2-easing) forwards;
}
@keyframes b2-h1-marker {
    to { background-size: 100% 100%; }
}

/* Card hover lift — modern card-pattern with resting depth on the
   signature .b2-doc-card (audit doc + deploy log) and a lighter
   lift on regular .b2-card. Both transitions share a long, settled
   easing curve so the lift feels deliberate, not springy. */
.b2-card,
.b2-doc-card {
    transition: transform 320ms var(--b2-easing),
                box-shadow 320ms var(--b2-easing),
                border-color 320ms var(--b2-easing);
}
.b2-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px -10px rgba(14, 14, 12, 0.14),
                0 2px 6px -2px rgba(14, 14, 12, 0.06);
}
.b2-doc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(14, 14, 12, 0.05),
                0 18px 40px -14px rgba(14, 14, 12, 0.18);
}
.b2-section-dark .b2-card:hover {
    box-shadow: 0 6px 28px -10px rgba(0, 0, 0, 0.5);
    border-color: var(--b2-fresh-line);
}

/* Step row hover — light fresh tint behind the row + step number
   shifts to fresh-green. Makes the "how it works" list feel
   interactive even though steps aren't clickable. */
.b2-step {
    margin: 0 -16px;
    padding: 22px 16px;
    border-radius: var(--b2-radius);
    transition: background-color 220ms var(--b2-easing);
}
.b2-step:hover {
    background: var(--b2-fresh-tint);
}
.b2-step-num {
    transition: color 220ms var(--b2-easing), transform 220ms var(--b2-easing);
}
.b2-step:hover .b2-step-num {
    color: var(--b2-fresh-2);
    transform: scale(1.08);
}

/* Comparison row hover — subtle neutral wash on the non-ours cells.
   The "ours" column keeps its solid fresh-tint background unchanged
   on hover so the column emphasis stays consistent. */
.b2-compare tbody tr td:not(.b2-compare-ours) {
    transition: background-color 180ms var(--b2-easing);
}
.b2-compare tbody tr:hover td:not(.b2-compare-ours) {
    background: var(--b2-canvas);
}

/* Framework pill bounce on hover — applied to .b2-doc-pill (inside the
   audit-reference doc) and .b2-pill (everywhere else). Tiny lift +
   slight bg shift. The pills already have semantic colors per
   framework (SOC 2 amber, ISO cyan, CIS indigo); this just adds tactile
   feedback when the eye lands on them. */
.b2-doc-pill,
.b2-pill {
    transition: transform 180ms var(--b2-easing),
                box-shadow 180ms var(--b2-easing);
}
.b2-doc-pill:hover,
.b2-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px -2px rgba(14, 14, 12, 0.12);
}

/* Fresh-green pill variant — for "live" / "active" / "success" tags. */
.b2-pill-fresh {
    background: var(--b2-fresh-tint);
    border-color: var(--b2-fresh-line);
    color: var(--b2-fresh-2);
}

/* Primary button — animate the trailing arrow on hover. Selector
   targets buttons whose text ends in "→" via attribute trick is fragile;
   easier to move the arrow effect to the whole button: subtle background
   brightening on hover already exists, so we just add a small lift. */
.b2-btn-primary { transition: background-color 150ms var(--b2-easing),
                              border-color 150ms var(--b2-easing),
                              color 150ms var(--b2-easing),
                              transform 200ms var(--b2-easing),
                              box-shadow 200ms var(--b2-easing); }
.b2-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(19, 78, 58, 0.6);
}

/* FAQ row hover — soft hairline highlight on the question button. */
.b2-faq-q {
    transition: background-color 180ms var(--b2-easing),
                color 180ms var(--b2-easing);
}
.b2-faq-q:hover { background: var(--b2-canvas-2); }
.b2-faq-item.b2-open .b2-faq-q { color: var(--b2-fresh-2); }
.b2-faq-item.b2-open .b2-faq-q-chev { color: var(--b2-fresh-2); }

/* Section ref bullet — make the leading ¶ glyph feel "alive" with a
   subtle fresh-green sweep on hover (only when wrapped in interactive
   contexts; harmless otherwise). */
.b2-section-ref { transition: color 180ms var(--b2-easing); }

/* =============================================================
   REVIEWS MARQUEE — under-hero scrolling strip of pull-quotes.

   Cards are stripped of card chrome (no border, no bg, no padding
   box) so the strip reads as a continuous editorial scroll rather
   than a row of testimonial cards. The marquee section itself is
   on a pure-white band that breaks up the warm-canvas hero from
   the cream founder section below.

   Track contains each review twice; CSS animation translates from
   0 to -50%, so when the first set scrolls off the second (identical)
   set is in the same screen position — seamless loop. Animation runs
   continuously (no hover pause) per the page's "fast-moving editorial"
   vibe; reduced-motion swaps to a manually-scrollable strip.
   ============================================================= */
.b2-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%);
            mask-image: linear-gradient(90deg,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%);
}
.b2-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 40px;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: stretch;
    /* 110s for 10 unique reviews (×2 in track). Desktop visitors see
       3+ cards at once so the ticker feels gentle. On mobile only
       one card is in-view at a time so the same px/s reads as too
       fast — bumped to 180s under 700px so each quote stays on
       screen long enough to read fully. */
    animation: b2-marquee-scroll 110s linear infinite;
}
@media (max-width: 700px) {
    .b2-marquee-track { animation-duration: 180s; }
}
@media (max-width: 400px) {
    .b2-marquee-track { animation-duration: 220s; }
}
@keyframes b2-marquee-scroll {
    from { transform: translateX(0); }
    /* -50% = exactly one full "set 1" width, since the duplicate
       set 2 is the same width — seamless loop. */
    to   { transform: translateX(-50%); }
}

.b2-review {
    flex: 0 0 clamp(260px, 70vw, 320px);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Vertical hairline rule between quotes — replaces card chrome.
       Last card's rule is cut off via the marquee mask anyway. */
    padding-right: 40px;
    border-right: 1px solid var(--b2-hairline);
}
.b2-review:last-child {
    border-right: 0;
    padding-right: 0;
}
.b2-review-quote {
    font-family: var(--b2-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--b2-ink-2);
    margin: 0;
    flex: 1;
}
/* Curly opening quote glyph — fresh-green editorial flourish.
   The visual signature now that the cards have no border. */
.b2-review-quote::before {
    content: "\201C";
    font-family: var(--b2-serif);
    font-style: italic;
    font-size: 28px;
    color: var(--b2-fresh-2);
    line-height: 0;
    vertical-align: -8px;
    margin-right: 3px;
}
.b2-review-cite {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--b2-ink-mute);
    font-family: var(--b2-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: auto;
}

/* Reduced motion: no horizontal auto-scroll — manually scrollable. */
@media (prefers-reduced-motion: reduce) {
    .b2-marquee { overflow-x: auto; }
    .b2-marquee-track { animation: none; }
}

/* Reduced motion: pin everything to a static end state. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .b2-log-running::before,
    .b2-h1 em,
    .b2-card,
    .b2-doc-card,
    .b2-step,
    .b2-step-num,
    .b2-compare tbody tr,
    .b2-doc-pill,
    .b2-pill,
    .b2-btn-primary,
    .b2-faq-q { animation: none !important; transition: none !important; transform: none !important; }
    .b2-h1 em { background-size: 100% 100% !important; }
}

/* =============================================================
   GHOSTED NUMERAL — modern card pattern (des-cpa-style).
   Giant faint numeral in the bottom-right corner of cards. Two
   ways to invoke:

   1. Auto-numbering via parent grid + CSS counter — used by the
      §06 helpers grid (cards become 01 / 02 automatically).
   2. Manual via .b2-card-ghost with data-ghost="<text>" — used
      for one-off cards that want a custom glyph (e.g., "$" on the
      partner pricing card).

   Cards using this need position:relative + overflow:hidden so the
   absolute-positioned ghost stays within the card chrome. Card
   children are pushed to z-index:1 so they paint above the ghost.
   ============================================================= */

/* Auto-numbered helpers grid (§06 "Also included" — 2 cards) */
.b2-helpers-grid { counter-reset: helper-card; }
.b2-helpers-grid > .b2-card {
    counter-increment: helper-card;
    position: relative;
    overflow: hidden;
}
.b2-helpers-grid > .b2-card::after {
    content: "0" counter(helper-card);
    position: absolute;
    bottom: -34px;
    right: -10px;
    font-family: var(--b2-mono);
    font-size: 168px;
    line-height: 0.82;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: rgba(63, 182, 131, 0.13);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.b2-helpers-grid > .b2-card > * { position: relative; z-index: 1; }

/* Reusable manual variant — apply .b2-card-ghost class with
   data-ghost="<text>" for any card that needs a one-off glyph. */
.b2-card-ghost {
    position: relative;
    overflow: hidden;
}
.b2-card-ghost > * { position: relative; z-index: 1; }
.b2-card-ghost::after {
    content: attr(data-ghost);
    position: absolute;
    bottom: -34px;
    right: -10px;
    font-family: var(--b2-mono);
    font-size: 168px;
    line-height: 0.82;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: rgba(63, 182, 131, 0.13);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* Dark-section variant — for cards on .b2-section-dark backgrounds
   the green tint disappears against navy; bump to a low-alpha white
   so the ghost still reads. */
.b2-section-dark .b2-card-ghost::after {
    color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 700px) {
    .b2-helpers-grid > .b2-card::after,
    .b2-card-ghost::after {
        font-size: 130px;
        bottom: -22px;
        right: -6px;
    }
}

/* =============================================================
   MOBILE OPTIMIZATION — iPhone SE baseline (375 × 667 viewport)

   Industry standards applied:
   - Body text ≥ 16px so iOS Safari doesn't auto-zoom on inputs
   - Touch targets ≥ 44 × 44 px (Apple HIG); CTAs are already 52px tall
   - Reduced section padding so the first CTA is reachable in <2 thumb scrolls
   - Comparison table restructured as stacked cards on <640px (3-column
     tables are the canonical mobile UX failure)
   - Hover-only visuals neutralized so they don't "stick" after a tap
   - Marquee + doc preview content tightened to fit narrow viewports
   ============================================================= */

@media (max-width: 700px) {
    /* Hero CTAs — full-width on phones for one-handed tap accuracy.
       At 375px, two side-by-side buttons just barely fit; stretching
       them to fill the row gives larger hit areas without changing the
       button order. */
    .b2-hero-cta-row .b2-btn-lg {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    /* Reviews marquee — tighter inter-card padding so a card + the
       gutter to the next quote fits comfortably in the viewport. */
    .b2-marquee-track { gap: 28px; }
    .b2-review {
        padding-right: 28px;
        gap: 8px;
        flex-basis: clamp(240px, 78vw, 280px);
    }
    .b2-review-quote { font-size: 14px; line-height: 1.5; }

    /* "How it works" — drop the step-row hover background on touch,
       the hover state was sticking after the user tapped a step. */
    .b2-step:hover { background: transparent; }
    .b2-step:hover .b2-step-num { color: var(--b2-audit); transform: none; }

    /* Doc preview — tighter padding + property column */
    .b2-doc-body-static {
        padding: 18px 18px 16px;
        min-height: 0;
        max-height: none;
    }
    .b2-doc-meta {
        grid-template-columns: 90px 1fr;
        column-gap: 12px;
        row-gap: 5px;
        padding: 12px 14px;
    }
    .b2-doc-props {
        grid-template-columns: 96px 1fr;
        column-gap: 12px;
    }

    /* Bottom CTA — partner pricing card stacks below copy with less gap */
    .b2-bottomcta-grid { gap: 32px !important; }
}

/* Comparison table — stacked card per row on small mobile.
   3-column financial tables are unreadable below ~640px. Each row
   becomes a vertical mini-card: task name, then "MSP / DIY" inline
   value, then a fresh-tint Jumpstart row that visually emphasizes
   the win. Headers are visually hidden but still in the DOM for
   screen readers. */
@media (max-width: 640px) {
    .b2-compare table,
    .b2-compare thead,
    .b2-compare tbody,
    .b2-compare tfoot,
    .b2-compare tr,
    .b2-compare th,
    .b2-compare td {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    /* Visually hide thead but keep accessible to AT */
    .b2-compare thead {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .b2-compare tbody tr {
        background: #FFFFFF;
        border: 1px solid var(--b2-hairline);
        border-radius: var(--b2-radius-lg);
        padding: 14px 16px;
        margin-bottom: 10px;
    }
    .b2-compare tfoot tr {
        background: var(--b2-canvas-2);
        border: 1px solid var(--b2-hairline-strong);
        border-radius: var(--b2-radius-lg);
        padding: 14px 16px;
        margin-bottom: 10px;
    }
    .b2-compare tbody tr td,
    .b2-compare tfoot tr td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    /* First cell — the task name. Heavier than the values below. */
    .b2-compare td:nth-of-type(1) {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--b2-ink);
        margin-bottom: 8px;
    }
    /* Second cell — MSP/DIY. Inline label + value. */
    .b2-compare td:nth-of-type(2) {
        display: flex;
        align-items: baseline;
        gap: 12px;
        font-family: var(--b2-mono);
        font-size: 13px;
        color: var(--b2-ink-mute);
        margin-bottom: 6px !important;
    }
    .b2-compare td:nth-of-type(2)::before {
        content: "MSP / DIY";
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--b2-ink-faint);
        font-weight: 700;
        flex-shrink: 0;
        min-width: 76px;
        font-family: var(--b2-mono);
    }
    /* Third cell — Jumpstart. Fresh-tint pill row that visually wins. */
    .b2-compare td.b2-compare-ours {
        display: flex !important;
        align-items: baseline !important;
        gap: 12px;
        background: var(--b2-fresh-tint) !important;
        color: var(--b2-fresh-2) !important;
        font-weight: 500;
        padding: 8px 12px !important;
        border-radius: var(--b2-radius) !important;
        font-size: 13px;
        font-family: var(--b2-sans);
    }
    .b2-compare td.b2-compare-ours::before {
        content: "JUMPSTART";
        font-family: var(--b2-mono);
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--b2-fresh-2);
        font-weight: 700;
        flex-shrink: 0;
        min-width: 76px;
    }
    /* Tfoot rows get inverted treatment — bold ink for emphasis */
    .b2-compare tfoot td:nth-of-type(2) {
        color: var(--b2-ink);
        font-weight: 600;
    }
    /* Drop the polish-pass row hover on mobile — was bleeding into
       the new card layout */
    .b2-compare tbody tr:hover td:not(.b2-compare-ours) { background: transparent; }
}

/* iPhone SE-class viewports (≤ 400px) — final tightening pass.
   At this size every saved pixel gets the buy button closer to the
   user's thumb. */
@media (max-width: 400px) {
    /* Page gutter tighter — 16px is the iOS/Material standard for
       small phones. */
    .b2-wrap, .b2-wrap-narrow { padding: 0 16px; }

    /* Section padding compacted further. .b2-section base is 80px
       on desktop; we already cut to 56px at 700px — now 44px so
       fewer pixels separate sections on a 667-tall viewport. */
    .b2-section { padding: 44px 0; }
    .b2-section.b2-section-tight { padding: 32px 0; }
    .b2-hero { padding: 32px 0 24px; }

    /* H1: keep punchy but allow a slightly smaller floor so the
       headline doesn't push the CTA below the fold on a 667 viewport. */
    .b2-h1 {
        font-size: 30px;
        line-height: 1.08;
        letter-spacing: -0.02em;
    }
    .b2-h1-sub { font-size: 17px; line-height: 1.4; }
    .b2-h2 { font-size: 25px; }

    /* Hero trust line — smaller mute text */
    .b2-hero-trust { font-size: 13px; }

    /* Stagger CTAs vertically on the very narrow phones for one-handed
       reach — primary on top, secondary below. */
    .b2-hero-cta-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .b2-hero-cta-row .b2-btn-lg { width: 100%; }

    /* Reviews marquee — pull the cards even tighter */
    .b2-review-quote { font-size: 13.5px; }
    .b2-review-cite { font-size: 10.5px; }

    /* Comparison cards tighter */
    .b2-compare tbody tr,
    .b2-compare tfoot tr { padding: 12px 14px; }
}