/* ============================================================
   Clearview — Modern SaaS design system
   Light, trust-led, screenshot-first. Inter throughout.
   ============================================================ */

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
    /* Surfaces — bg-alt and bg-soft bumped one slate step darker so
       white cards, icons and text gain visible contrast on tinted
       sections. Main bg stays pure white. */
    --white:        #ffffff;
    --bg:           #ffffff;
    --bg-alt:       #f1f5f9;
    --bg-soft:      #e2e8f0;

    /* Ink */
    --ink:          #0f172a;
    --ink-2:        #1e293b;
    --text:         #334155;
    --text-2:       #64748b;
    --text-3:       #94a3b8;

    /* Brand */
    --brand:        #00b386;
    --brand-hover:  #009970;
    --brand-dark:   #006b4f;
    --brand-soft:   #e6f9f4;
    --brand-deep:   #0d3a2c;

    /* Status */
    --green:        #10b981;
    --amber:        #f59e0b;
    --red:          #ef4444;

    /* Lines / shadows */
    --line:         #e2e8f0;
    --line-strong:  #cbd5e1;
    --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:    0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg:    0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --shadow-xl:    0 25px 50px -12px rgba(15, 23, 42, 0.18);

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    /* Type */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Consolas, monospace;
}

/* ─── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button { font: inherit; cursor: pointer; }

/* Skip-link */
.skip-link {
    position: absolute; left: -9999px;
    top: 8px; padding: 10px 14px;
    background: var(--ink); color: white;
    border-radius: var(--r-sm); z-index: 100;
}
.skip-link:focus { left: 8px; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 0.5em;
    line-height: 1.15;
}
h1 {
    font-size: clamp(2.25rem, 4.5vw + 1rem, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 800;
}
h2 { font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin: 0 0 1em; }

.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--text-2); }
@media (min-width: 768px) { .lead { font-size: 1.3125rem; } }

.eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.text-brand { color: var(--brand-dark); }
.text-ink   { color: var(--ink); }
.text-dim   { color: var(--text-2); }
.center     { text-align: center; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* ─── Layout ──────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* All standard sections share the same vertical rhythm so starts and ends
   line up visually as you scroll. Override only when the section needs to
   feel "tighter" (trust bar) or "taller" (hero with screenshot). */
section { padding: 56px 0; }
@media (min-width: 768px)  { section { padding: 72px 0; } }
@media (min-width: 1200px) { section { padding: 88px 0; } }

.section-alt  { background: var(--bg-alt); }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--ink); color: rgba(255,255,255,0.85); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: white; }
.section-dark .lead { color: rgba(255,255,255,0.7); }
.section-dark .eyebrow { color: #4ade80; }

.section-head { max-width: 720px; margin: 0 0 48px; position: relative; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead { margin-top: 0.5em; }
.section-head h2 { margin-bottom: 16px; }

/* Brand-green accent line under section eyebrows — only applied when the
   eyebrow is inside a .section-head OR has .with-rule. Bare .eyebrow stays
   compact (no extra bottom padding) so it can be used as a small label. */
.section-head .eyebrow,
.eyebrow.with-rule {
    position: relative;
    padding-bottom: 14px;
}
.section-head .eyebrow::after,
.eyebrow.with-rule::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 32px; height: 3px;
    background: var(--brand);
    border-radius: 2px;
}
.section-head.center .eyebrow::after { left: 50%; transform: translateX(-50%); }
.eyebrow.with-rule.center { display: inline-block; }
.eyebrow.with-rule.center::after { left: 50%; transform: translateX(-50%); }

/* Narrow prose container — replaces inline style="max-width: 820px" so all
   prose-width content blocks share one width across every section. */
.container-prose {
    max-width: 820px;
    margin-left: auto; margin-right: auto;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: all 150ms ease;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn-lg { padding: 14px 26px; font-size: 1rem; border-radius: var(--r-md); }
.btn-sm { padding: 9px 16px; font-size: 0.875rem; }

.btn-primary {
    background: var(--brand);
    color: white;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--brand-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: white;
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-outline:hover {
    background: var(--bg-alt);
    color: var(--ink);
    border-color: var(--text-3);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
}
.btn-ghost:hover {
    background: var(--bg-alt);
    color: var(--ink);
}

.btn-dark {
    background: var(--ink);
    color: white;
}
.btn-dark:hover {
    background: var(--ink-2);
    color: white;
}

.btn-arrow {
    transition: transform 150ms ease;
}
.btn:hover .btn-arrow { transform: translateX(2px); }

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ─── Site header (nav) ───────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
/* JS toggles .is-hidden when the user scrolls DOWN past ~120px.
   Snaps back into view as soon as they scroll up — modern editorial
   header behaviour. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled {
    box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
}

/* ─── Scroll-progress bar (top of viewport) ───────────────────
   2px brand-green bar that fills as the user scrolls the page.
   Fixed-position so it sits above the (potentially hidden) header. */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 100;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 120ms linear;
}
@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none !important; }
    .scroll-progress span { transition: none !important; }
}
.site-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    /* Top/bottom only — do NOT override the .container's left/right
       padding (which is 24px mobile / 32px tablet+). */
    padding-top: 14px;
    padding-bottom: 14px;
}
.site-brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink); font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}
.site-brand:hover { color: var(--ink); }
.site-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: var(--brand);
    color: white; border-radius: 7px;
}
.site-brand-text { font-weight: 700; }
/* Uploaded logo image. Height comes from /studio settings via the
   --logo-h-header / --logo-h-footer CSS vars emitted by theme.php.
   max-width scales with height (up to ~5:1 aspect) so wider logos
   still fit but don't push the nav off-screen. Mobile shrinks via
   the responsive override below. */
.site-brand-logo {
    display: block;
    height: var(--logo-h-header, 52px);
    width: auto;
    max-width: calc(var(--logo-h-header, 52px) * 5);
    object-fit: contain;
}
.site-brand-footer .site-brand-logo {
    height: var(--logo-h-footer, 52px);
    max-width: calc(var(--logo-h-footer, 52px) * 5);
}
@media (max-width: 640px) {
    .site-brand-logo {
        height: calc(var(--logo-h-header, 52px) * 0.77);
        max-width: calc(var(--logo-h-header, 52px) * 3.5);
    }
    .site-brand-footer .site-brand-logo {
        height: calc(var(--logo-h-footer, 52px) * 0.77);
        max-width: calc(var(--logo-h-footer, 52px) * 3.5);
    }
}

.site-nav {
    display: flex; align-items: center; gap: 28px;
}
.site-nav-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 24px;
}
.site-nav-list a {
    color: var(--text-2);
    font-size: 1.0625rem;
    font-weight: 500;
    padding: 4px 0;
    transition: color 150ms ease;
}
.site-nav-list a:hover, .site-nav-list a[aria-current="page"] { color: var(--ink); }

/* Header CTA area holds the Log-in button + the primary CTA button
   side-by-side. Mobile stacks them via the existing override. */
.site-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Log-in button defaults to navy-ink bg + white text so it stands
   out next to the green primary CTA. Colours are editor-controlled
   via --login-bg / --login-color CSS vars emitted by theme.php. */
.site-nav-login {
    background: var(--login-bg, #0f172a);
    color: var(--login-color, #ffffff);
    border-color: var(--login-bg, #0f172a);
}
.site-nav-login:hover {
    background: var(--login-bg-hover, #1e293b);
    border-color: var(--login-bg-hover, #1e293b);
    color: var(--login-color, #ffffff);
}

.site-nav-toggle {
    display: none;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    width: 44px; height: 44px;    /* WCAG min tap target */
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 200ms ease;
    position: relative;
    box-shadow: var(--shadow-xs);
}
.site-nav-toggle:hover { border-color: var(--line-strong); background: var(--bg-alt); }
.site-nav-toggle:active { transform: scale(0.96); }
.site-nav-toggle[aria-expanded="true"] {
    border-color: var(--ink);
    background: var(--ink);
}
.site-nav-toggle-bar {
    display: block; width: 18px; height: 2px;
    background: var(--ink); border-radius: 1px;
    transition: transform 240ms ease, opacity 200ms ease, background 200ms ease;
    transform-origin: center;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar { background: white; }
/* Hamburger morphs into an X when nav is open */
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(3) {
    opacity: 0;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 840px) {
    /* Bigger top padding + safe-area support for notched phones —
       so the logo / hamburger never sit flush against the viewport. */
    .site-header-inner {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: 14px;
    }
    .site-nav-toggle { display: flex; }
    /* Backdrop overlay behind the open menu so body content recedes */
    .site-header::after {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.32);
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 200ms ease;
        z-index: -1;
        pointer-events: none;
    }
    .site-header:has(.site-nav.is-open)::after {
        opacity: 1;
        visibility: visible;
    }
    .site-nav {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: white;
        border-bottom: 1px solid var(--line);
        padding: 16px 20px 24px;
        box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.25);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    .site-nav.is-open {
        display: flex;
        animation: nav-slide-in 220ms cubic-bezier(.4,.0,.2,1);
    }
    @keyframes nav-slide-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .site-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-nav-list li { border-bottom: 1px solid var(--line); }
    .site-nav-list li:last-child { border-bottom: none; }
    .site-nav-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 4px;
        color: var(--ink);
        font-size: 1.0625rem;
        font-weight: 500;
    }
    .site-nav-list a::after {
        content: '→';
        font-family: var(--font-mono);
        color: var(--text-3);
        font-size: 0.875rem;
        transition: transform 200ms ease, color 200ms ease;
    }
    .site-nav-list a:hover::after,
    .site-nav-list a[aria-current="page"]::after {
        color: var(--brand);
        transform: translateX(2px);
    }
    .site-nav-list a[aria-current="page"] { color: var(--brand-dark); font-weight: 600; }
    .site-nav-cta { margin-top: 16px; }
    .site-nav-cta .btn { width: 100%; padding-top: 14px; padding-bottom: 14px; }
}

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
    padding: 64px 0 72px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-alt) 0%, white 100%);
}
@media (min-width: 768px)  { .hero { padding: 88px 0 96px; } }
@media (min-width: 1200px) { .hero { padding: 104px 0 112px; } }
/* Two soft brand-tinted orbs in the hero — drives the glass effect on the
   audit screenshot card sitting on top. */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    z-index: 0;
}
.hero::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0, 179, 134, 0.18), transparent 65%);
    top: 100px; left: -160px;
}
.hero::after {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(125, 240, 201, 0.30), transparent 65%);
    top: 240px; right: -120px;
}
.hero > .container { position: relative; z-index: 1; }

.hero-inner {
    text-align: center;
    max-width: 880px;
}
.hero h1 {
    margin-bottom: 20px;
}
.hero .accent {
    color: var(--brand-dark);
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero .lead {
    margin: 0 auto 32px;
    max-width: 640px;
}
.hero .btn-group {
    justify-content: center;
}
.hero-microcopy {
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--text-2);
    display: inline-flex; align-items: center; gap: 8px;
}
.hero-microcopy .ok {
    color: var(--brand);
    font-size: 0.625rem;
}

.hero-visual {
    margin-top: 48px;
    padding: 0;
}
@media (min-width: 768px) { .hero-visual { margin-top: 64px; } }

/* ─── Audit dashboard mockup (used in hero + step 2) ──── */
.audit-screenshot {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--r-xl);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 32px 80px -28px rgba(15, 23, 42, 0.32),
        0 8px 20px -8px rgba(15, 23, 42, 0.12);
    padding: 4px;
    overflow: hidden;
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
}
.audit-screenshot-bar {
    display: flex; align-items: center;
    background: var(--bg-alt);
    padding: 10px 16px;
    border-radius: 16px 16px 0 0;
    gap: 10px;
}
.audit-dots { display: inline-flex; gap: 6px; }
.audit-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: #e2e8f0;
}
.audit-dots span:nth-child(1) { background: #ff5f57; }
.audit-dots span:nth-child(2) { background: #ffbd2e; }
.audit-dots span:nth-child(3) { background: #28c941; }
.audit-url {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audit-body {
    padding: 28px;
}
@media (min-width: 768px) { .audit-body { padding: 36px 40px; } }
.audit-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.audit-head-info { min-width: 0; }
.audit-head-info h4 {
    margin: 0 0 4px; font-size: 1.0625rem; color: var(--ink);
}
.audit-head-info p {
    margin: 0; font-size: 0.875rem; color: var(--text-2);
}
.audit-score {
    text-align: right;
}
.audit-score-value {
    font-size: 2.5rem; font-weight: 700; color: var(--ink);
    line-height: 1; letter-spacing: -0.02em;
}
.audit-score-value .green { color: var(--green); }
.audit-score-value .amber { color: var(--amber); }
.audit-score-value .red { color: var(--red); }
.audit-score-label {
    font-size: 0.6875rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    font-weight: 600;
}
.audit-channels {
    display: grid; gap: 10px;
}
.audit-channel {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg-alt);
}
@media (min-width: 640px) {
    .audit-channel { gap: 12px; padding: 12px 14px; }
}
/* On very narrow screens, hide the "Healthy/Watch list" status label
   (the coloured dot still conveys the status). */
@media (max-width: 480px) {
    .audit-channel-status { font-size: 0; }
    .audit-channel-status .dot { width: 10px; height: 10px; }
    .audit-channel-name small { font-size: 0.6875rem; }
}
.audit-channel-icon {
    width: 28px; height: 28px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--ink);
}
.audit-channel-name {
    font-size: 0.9375rem; font-weight: 500; color: var(--ink);
}
.audit-channel-name small {
    display: block; font-weight: 400;
    font-size: 0.75rem; color: var(--text-2); margin-top: 2px;
}
.audit-channel-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 600;
}
.audit-channel-status.g { color: var(--green); }
.audit-channel-status.a { color: var(--amber); }
.audit-channel-status.r { color: var(--red); }
.audit-channel-status .dot {
    width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.audit-channel-score {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 44px; text-align: right;
}

/* ─── Trust bar ───────────────────────────────────────────── */
/* Trust bar: a deliberate thin band — kept narrower than full sections so it
   reads as a "supporting strip" under the hero, not as its own section. */
.trust-bar {
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-alt);
}
.trust-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .trust-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}
.trust-strip-item {
    display: inline-flex;
    align-items: flex-start;     /* icon aligns to top of multi-line text */
    justify-content: center;
    gap: 10px;
    color: var(--ink-2);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
}
.trust-strip-item svg {
    flex-shrink: 0;
    color: var(--brand);
    margin-top: 2px;            /* visually align icon with first line baseline */
}

/* On mobile, left-align the strip so all 3 icons line up vertically on the
   left edge — feels intentional regardless of how many lines each item wraps. */
@media (max-width: 767px) {
    .trust-strip {
        text-align: left;
        max-width: 320px;
        margin: 0 auto;
    }
    .trust-strip-item {
        justify-content: flex-start;
    }
}

/* ─── Problem list (Section 1) ────────────────────────────── */
/* Problem section: 2-column layout with copy on left, dashboards-chaos visual
   on right. The visual is the distinctive element of this section — it shows
   the "before" state in one glance and makes the section non-generic. */
.problem-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 1024px) {
    .problem-layout {
        grid-template-columns: 1fr 1fr;
        gap: 72px;
    }
}
.problem-copy h2 { margin-bottom: 20px; }
.problem-copy .lead { margin-bottom: 24px; }

/* Stacked browser windows representing the "many dashboards" problem.
   Pure HTML/CSS so it scales crisply and stays themable. */
.dashboards-chaos {
    position: relative;
    height: 380px;
    perspective: 1200px;
    margin-top: 8px;
}
@media (min-width: 768px) { .dashboards-chaos { height: 460px; margin-top: 0; } }
.dashboards-chaos .window {
    position: absolute;
    width: 78%;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 200ms ease;
}
.dashboards-chaos .window-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}
.dashboards-chaos .window-head .dots {
    display: inline-flex; gap: 4px;
}
.dashboards-chaos .window-head .dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--line-strong);
}
.dashboards-chaos .window-head .title {
    font-size: 0.6875rem;
    color: var(--text-2);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dashboards-chaos .window-body {
    padding: 12px;
    display: grid; gap: 6px;
}
.dashboards-chaos .row {
    height: 8px;
    border-radius: 3px;
    background: var(--bg-alt);
}
.dashboards-chaos .row.w70 { width: 70%; }
.dashboards-chaos .row.w50 { width: 50%; }
.dashboards-chaos .row.w90 { width: 90%; }
.dashboards-chaos .row.accent { background: var(--brand-soft); }
.dashboards-chaos .row.amber  { background: #fef3c7; }
.dashboards-chaos .row.red    { background: #fee2e2; }

/* Each window positioned at a different angle/offset to convey "chaos". */
.dashboards-chaos .window-1 { top: 0;   left: 0;   transform: rotate(-3deg); z-index: 1; }
.dashboards-chaos .window-2 { top: 32px; right: 0; transform: rotate(2.5deg); z-index: 2; }
.dashboards-chaos .window-3 { top: 130px; left: 8%; transform: rotate(-1.5deg); z-index: 3; }
.dashboards-chaos .window-4 { top: 200px; right: 6%; transform: rotate(3deg); z-index: 4; }
.dashboards-chaos .window-5 { top: 290px; left: 4%; transform: rotate(-2deg); z-index: 5; }

.dashboards-chaos .channel-pill {
    position: absolute;
    background: white;
    border: 1px solid var(--line);
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 0.6875rem;
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.dashboards-chaos .channel-pill.p1 { top: 12px; left: 56%; z-index: 10; }
.dashboards-chaos .channel-pill.p2 { top: 80px; left: 4%; z-index: 10; }
.dashboards-chaos .channel-pill.p3 { top: 170px; right: 4%; z-index: 10; color: var(--amber); }
.dashboards-chaos .channel-pill.p4 { top: 270px; left: 50%; z-index: 10; }
.dashboards-chaos .channel-pill.p5 { bottom: 8px; right: 12%; z-index: 10; color: var(--red); }

/* "8 dashboards" floating badge */
.dashboards-chaos-badge {
    position: absolute;
    bottom: -16px; left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 20;
    white-space: nowrap;
}
.dashboards-chaos-badge .pulse {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--red);
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.problem-list {
    list-style: none; padding: 0; margin: 28px 0 0;
    display: grid; gap: 14px;
}
.problem-list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 20px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.problem-list li:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.problem-list li::before {
    content: '';
    flex-shrink: 0;
    width: 22px; height: 22px;
    margin-top: 2px;
    background: #fee2e2;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ─── Step blocks (Section 2 — How it works) ───────────── */
.step-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin: 56px 0;
}
.step-block:first-of-type { margin-top: 0; }
.step-block:last-of-type  { margin-bottom: 0; }
@media (min-width: 900px) {
    .step-block {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        margin: 80px 0;
    }
    .step-block.reverse .step-content { order: 2; }
    .step-block.reverse .step-visual  { order: 1; }

    /* `.stack` variant — content above, visual below at full container
       width. Used for steps where the visual needs real estate (e.g.
       Step 3's side-by-side bad/good cards). */
    .step-block.stack {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .step-block.stack .step-content {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }
    .step-block.stack .step-content .step-number { margin-left: auto; margin-right: auto; }
    .step-block.stack .example-box { text-align: left; }
}
.step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 18px;
    border: 1px solid rgba(0, 179, 134, 0.2);
}
.step-content h3 {
    font-size: 1.625rem;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.015em;
    font-weight: 700;
}
@media (min-width: 900px) {
    .step-content h3 { font-size: 1.875rem; }
}
.step-content p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
}
.step-content .channel-list {
    color: var(--text-2);
    font-size: 0.9375rem;
}
.example-box {
    background: var(--bg-alt);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 16px 20px;
    margin: 16px 0;
    font-size: 0.9375rem;
}
.example-box p { margin: 0; color: var(--text); }
.example-box strong { color: var(--ink); }

.check-list {
    list-style: none; padding: 0;
    margin: 16px 0;
    display: grid; gap: 12px;
}
.check-list li {
    display: flex; gap: 12px; align-items: flex-start;
    color: var(--text); font-size: 1rem;
}
.check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: var(--brand-soft);
    border-radius: 50%;
    margin-top: 2px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300b386' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ─── Channel logos grid (Step 1 visual) ──────────────────── */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 24px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
@media (min-width: 480px) {
    .channels-grid { grid-template-columns: repeat(4, 1fr); }
}
.channel-tile {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 8px;
    line-height: 1.2;
    transition: all 200ms ease;
}
.channel-tile:hover {
    background: white;
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.channel-tile svg {
    max-width: 32px;
    max-height: 32px;
}

/* ─── Issues split-screen (Step 3 visual) ─────────────────── */
/* ─── Step 3 split panes — designed to feel like real product UI, not
       generic wireframes. Bad side reads as noisy SEO dashboard.
       Good side reads as ranked Clearview action queue. ─────────────── */
.split-pane {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}
@media (min-width: 540px) { .split-pane { grid-template-columns: 1fr 1fr; gap: 24px; } }

.issues-pane {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.issues-pane.bad {
    background: white;
    border-color: var(--line);
    transform: rotate(-0.6deg);
}
.issues-pane.good {
    border-color: var(--brand);
    box-shadow: var(--shadow-lg), 0 0 0 4px var(--brand-soft);
    transform: rotate(0.4deg);
    position: relative; z-index: 2;
}

/* Window-style header with status meta */
.pane-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.issues-pane.bad .pane-head { background: #fef2f2; border-bottom-color: #fecaca; }
.issues-pane.good .pane-head { background: #ecfdf5; border-bottom-color: #a7f3d0; }
.pane-head-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; font-weight: 700;
    color: var(--ink);
}
.pane-head-meta {
    font-size: 0.6875rem; font-weight: 600;
    color: var(--text-2);
    font-family: var(--font-mono);
    background: white;
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid var(--line);
}
.issues-pane.bad .pane-head-label svg { color: var(--red); }
.issues-pane.good .pane-head-label svg { color: var(--brand-dark); }

/* Bad list — noisy SEO dashboard rows */
.issues-pane.bad ul {
    list-style: none; padding: 10px; margin: 0;
    display: grid; gap: 4px;
    max-height: 320px;
    overflow: hidden;
    position: relative;
}
.issues-pane.bad ul li {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.8125rem;
    line-height: 1.3;
}
.issues-pane.bad ul li .sev-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
}
.issues-pane.bad ul li .sev-dot.h { background: var(--red); }
.issues-pane.bad ul li .sev-dot.m { background: var(--amber); }
.issues-pane.bad ul li .sev-dot.l { background: var(--text-3); }
.issues-pane.bad ul li .sev-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-3);
    padding: 2px 6px;
    background: var(--bg-alt);
    border-radius: 3px;
    letter-spacing: 0.04em;
}
.issues-pane.bad ul li .sev-label.h { background: #fee2e2; color: var(--red); }
.issues-pane.bad ul li .sev-label.m { background: #fef3c7; color: #b45309; }
.issues-pane.bad ul li .sev-label.l { background: #f1f5f9; color: var(--text-2); }
.issues-pane.bad .fade-out {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent, white);
    pointer-events: none;
}
.pane-footer-bad {
    padding: 10px 16px 14px;
    text-align: center;
    border-top: 1px solid var(--line);
    background: var(--bg-alt);
    font-size: 0.75rem;
    color: var(--text-3);
    font-family: var(--font-mono);
}

/* Good list — clean numbered priority queue */
.issues-pane.good ul {
    list-style: none; padding: 10px; margin: 0;
    display: grid; gap: 6px;
}
.issues-pane.good ul li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 12px 12px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: background 200ms ease;
}
.issues-pane.good ul li:hover { background: var(--bg-alt); }
.issues-pane.good ul li .rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: var(--brand);
    color: white;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.issues-pane.good ul li .action {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}
.issues-pane.good ul li .impact {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 99px;
    color: var(--brand-dark);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ─── Persona cards (Section 3) ───────────────────────────── */
.persona-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) { .persona-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }

.persona-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: all 200ms ease;
}
.persona-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}
@media (min-width: 768px) { .persona-card { padding: 40px; } }
.persona-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.persona-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--ink);
}
.persona-card p {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 24px;
}

/* ─── AI Position section ─────────────────────────────────── */
/* ─── AI position section — full-container-width layout, no gimmicks.
       Matches the section rhythm of How-it-works, Personas, Founder etc:
       section-head on top, multi-column grid below filling the container. */
.section-ai {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-alt) 0%, #ecfdf5 100%);
}
.section-ai::before,
.section-ai::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
.section-ai::before {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(0, 179, 134, 0.18), transparent 65%);
    top: -120px; left: -100px;
}
.section-ai::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(125, 240, 201, 0.35), transparent 65%);
    bottom: -180px; right: -100px;
}
.section-ai > .container { position: relative; z-index: 1; }

/* Two big cards filling the container width — each describes one side
   of our AI position. No dark pull-quote, no glass wrapper. */
.ai-do-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
}
@media (min-width: 768px) { .ai-do-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

.ai-do-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: all 200ms ease;
    display: flex; flex-direction: column;
}
.ai-do-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) { .ai-do-card { padding: 40px; } }

.ai-do-card.do   { border-top: 4px solid var(--brand); }
.ai-do-card.dont { border-top: 4px solid var(--red); }

.ai-do-card-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}
.ai-do-card.do .ai-do-card-head   { color: var(--brand-dark); }
.ai-do-card.dont .ai-do-card-head { color: var(--red); }
.ai-do-card-head svg {
    width: 22px; height: 22px;
    padding: 4px;
    border-radius: 6px;
}
.ai-do-card.do .ai-do-card-head svg   { background: var(--brand-soft); color: var(--brand-dark); }
.ai-do-card.dont .ai-do-card-head svg { background: #fee2e2; color: var(--red); }

.ai-do-card h3 {
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.ai-do-card-intro {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 24px;
    line-height: 1.6;
}
.ai-do-card-intro strong { color: var(--ink); }

.ai-do-card ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px;
}
.ai-do-card li {
    display: flex; gap: 12px; align-items: flex-start;
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.ai-do-card li:first-child { padding-top: 0; border-top: 0; }
.ai-do-card li svg {
    flex-shrink: 0; margin-top: 2px;
    width: 16px; height: 16px;
}
.ai-do-card.do li svg   { color: var(--brand); }
.ai-do-card.dont li svg { color: var(--red); }

/* Closing one-liner — centered statement, full-width section feel */
.ai-position-close {
    margin: 48px auto 0;
    text-align: center;
    max-width: 760px;
    font-size: 1.125rem;
    color: var(--text);
    line-height: 1.65;
}
.ai-position-close strong { color: var(--ink); }

/* ─── Founder block (Section 5 — dark) ────────────────────── */
.founder-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 900px) {
    .founder-block {
        grid-template-columns: 340px 1fr;
        gap: 72px;
    }
}
.founder-photo {
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #334155 0%, #1e293b 60%, #0f172a 100%);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
    position: relative;
}
@media (min-width: 900px) { .founder-photo { margin: 0; } }
.founder-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.founder-content {
    max-width: 760px;
}
.founder-content .eyebrow { color: #4ade80; }
.founder-content h2 { margin-bottom: 20px; }
.founder-content p {
    color: rgba(255,255,255,0.8);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 16px;
}
.founder-content .btn-primary {
    margin-top: 12px;
}
.founder-companies {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 8px 0 20px;
}
.founder-companies-label {
    width: 100%;
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
    font-weight: 600;
}
.founder-companies span {
    font-size: 0.75rem;
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 99px;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.03);
    font-weight: 500;
}

/* ─── Pricing teaser (Section 6) ──────────────────────────── */
.pricing-teaser {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.pricing-teaser .lead {
    margin-bottom: 16px;
}
.pricing-teaser p {
    color: var(--text);
    margin-bottom: 24px;
}
.pricing-teaser .btn { margin-top: 8px; }


/* Reusable pricing card (used on pricing.php, sme.php, agencies.php) */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.pricing-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition:
        transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 320ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    will-change: transform;
}
@media (min-width: 768px) { .pricing-card { padding: 28px; } }
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 24px 48px -20px rgba(13, 58, 44, 0.18),
        0 4px 12px rgba(15, 23, 42, 0.05);
    border-color: rgba(0, 179, 134, 0.35);
}
.pricing-card-featured {
    border-color: var(--brand);
    box-shadow: var(--shadow-md), 0 0 0 4px var(--brand-soft);
}
.pricing-card-featured:hover {
    transform: translateY(-4px);
    box-shadow:
        0 28px 56px -20px rgba(0, 179, 134, 0.32),
        0 4px 12px rgba(15, 23, 42, 0.05),
        0 0 0 4px var(--brand-soft);
}
.pricing-card-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--brand);
    color: white;
    padding: 4px 14px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.pricing-card-name {
    color: var(--text-2);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.pricing-card-name .prompt { display: none; }
.pricing-card-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: 8px;
}
.pricing-card-price small {
    font-size: 0.875rem;
    color: var(--text-2);
    font-weight: 500;
}
.pricing-card ul {
    list-style: none; padding: 0;
    margin: 20px 0;
    display: flex; flex-direction: column; gap: 10px;
    /* No flex-grow — list items stay packed together. The CTA
       button gets pushed to the bottom via `margin-top: auto`. */
}
.pricing-card ul li {
    display: flex; gap: 10px; align-items: flex-start;
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.pricing-card ul li svg { flex-shrink: 0; color: var(--brand); margin-top: 4px; }
.pricing-card .btn {
    width: 100%;
    margin-top: auto;  /* push to bottom of the flex column card */
}

/* Teaser variant: just tier name + price, no feature list. Used on
   /sme and /agencies where the brief asks for a teaser, not full
   detail (full detail lives on /pricing). */
.pricing-grid-teaser .pricing-card {
    padding: 32px 28px;
    text-align: center;
    align-items: center;
}
.pricing-grid-teaser .pricing-card-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}
.pricing-grid-teaser .pricing-card-price {
    margin-bottom: 0;
}
.pricing-grid-teaser .pricing-card .pricing-card-badge {
    /* keep badge anchored to top */
}

/* ─── FAQ ─────────────────────────────────────────────────── */
/* FAQ — accordion. Single column at full container width. One question
   per row, click to expand. Uses native <details>/<summary>. */
.faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.faq-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition:
        border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item[open] {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand-soft) 0%, white 80px);
    box-shadow:
        0 12px 28px -12px rgba(0, 179, 134, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.04);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-alt); }
.faq-item[open] summary:hover { background: transparent; }

/* Q chip — left side */
.faq-item summary .faq-q {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.faq-item[open] summary .faq-q { background: var(--brand); color: white; }

/* Question text — grows to fill row */
.faq-item summary .faq-q-text {
    flex: 1;
    line-height: 1.4;
}

/* Caret — right side, rotates on open */
.faq-item summary .faq-caret {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-alt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 320ms cubic-bezier(0.65, 0, 0.35, 1),
        background-color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item summary .faq-caret svg { color: var(--text-2); transition: color 200ms ease; }
.faq-item summary:hover .faq-caret { background: white; }
.faq-item summary:hover .faq-caret svg { color: var(--brand-dark); }
.faq-item[open] summary .faq-caret {
    background: var(--brand);
    transform: rotate(180deg);
}
.faq-item[open] summary .faq-caret svg { color: white; }

.faq-answer {
    padding: 0 24px 22px 68px;
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.75;
    animation: faq-fade 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer p { margin: 0; }
@keyframes faq-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item, .faq-item summary, .faq-item summary .faq-caret,
    .faq-item summary .faq-caret svg, .faq-answer {
        transition: none !important;
        animation: none !important;
    }
}

/* ─── Final CTA ───────────────────────────────────────────── */
.final-cta {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-dark) 100%);
    border-radius: var(--r-xl);
    padding: 40px 24px;
    text-align: center;
    color: white;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}
@media (min-width: 540px) { .final-cta { padding: 48px 32px; } }
@media (min-width: 768px) { .final-cta { padding: 80px 56px; } }
.final-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,0.08), transparent 60%);
    pointer-events: none;
}
.final-cta-inner { position: relative; max-width: 700px; margin: 0 auto; }
.final-cta h2 { color: white; margin-bottom: 16px; }
.final-cta .lead {
    color: rgba(255,255,255,0.85);
    margin-bottom: 28px;
}
.final-cta .btn-primary {
    background: white;
    color: var(--brand-dark);
}
.final-cta .btn-primary:hover {
    background: #f1f5f9;
    color: var(--brand-dark);
}

/* ─── Site footer ─────────────────────────────────────────── */
.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,0.65);
    padding: 64px 0 32px;
}
.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 48px;
}
@media (min-width: 768px) {
    .site-footer-grid {
        grid-template-columns: 1.6fr repeat(3, 1fr);
    }
}
.site-footer-brand .site-brand { color: white; }
.site-footer-brand .site-brand:hover { color: white; }
.site-footer-tagline {
    color: rgba(255,255,255,0.55);
    font-size: 0.875rem;
    margin: 14px 0 0;
    max-width: 320px;
    line-height: 1.55;
}
.site-footer-tagline a { color: rgba(255,255,255,0.8); }
.site-footer-tagline a:hover { color: white; }
.site-footer-col h4 {
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.site-footer-col ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 10px;
}
.site-footer-col a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
}
.site-footer-col a:hover { color: white; }
.site-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
    color: rgba(255,255,255,0.5);
    font-size: 0.8125rem;
}
.site-footer-bottom p { margin: 0; color: inherit; }
.site-footer-author a { color: rgba(255,255,255,0.7); }
.site-footer-author a:hover { color: white; }

/* ─── Founding cohort banner — brief §6.3
     Full-bleed section. Dark navy background spans the full viewport
     width edge-to-edge. Content inside is constrained to .container. */
.founding-section {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 60%, #0b1d28 100%);
    color: rgba(255, 255, 255, 0.85);
    border-top: 2px solid var(--brand);
    /* No bottom border — the section's own padding gives breathing room
       to the next section (toggle controls) instead. */
    position: relative;
    overflow: hidden;
    /* padding inherited from `section` rule (56/72/88) */
}
.founding-section::before,
.founding-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
.founding-section::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0, 179, 134, 0.32), transparent 65%);
    top: -120px; left: -100px;
}
.founding-section::after {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.22), transparent 65%);
    bottom: -200px; right: -120px;
}
.founding-section > .container { position: relative; z-index: 1; }

.fb-head { max-width: 720px; }
.fb-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(0, 179, 134, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.4);
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.fb-head h2 {
    color: white;
    font-size: clamp(1.625rem, 1.8vw + 1rem, 2.25rem);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.fb-head p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
}
.fb-head p strong { color: white; font-weight: 600; }

.fb-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 28px 0;
}
@media (min-width: 768px) { .fb-cards { grid-template-columns: 1fr 1fr; gap: 20px; } }

.fb-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: var(--r-lg);
    padding: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.fb-card-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fb-card-price {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 8px 0 0;
}
.fb-card-price small {
    font-family: var(--font);
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    margin-left: 4px;
}
.fb-card-rows {
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.fb-card-rows > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.fb-card-rows > div:last-child { border-bottom: 0; }
.fb-card-rows dt {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.fb-card-rows dd {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.92);
    text-align: right;
    font-weight: 500;
}
/* On narrow mobile, label and value would collide horizontally —
   stack them vertically with the value on its own line. */
@media (max-width: 540px) {
    .fb-card-rows > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }
    .fb-card-rows dd { text-align: left; }
}
.fb-spots {
    color: #4ade80 !important;
    font-family: var(--font-mono);
    font-weight: 700;
}

.fb-foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(74, 222, 128, 0.18);
}
@media (min-width: 800px) {
    .fb-foot {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 32px;
    }
}
.fb-foot p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    line-height: 1.55;
    margin: 0 0 10px;
}
.fb-foot p:last-child { margin-bottom: 0; }
.fb-foot p strong { color: white; font-weight: 600; }
.fb-foot .btn-primary { white-space: nowrap; }

/* Tier card additions for brief §6.4/§6.5 (sub-line + tagline + note) */
.pricing-card-sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-2);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.pricing-card-tagline {
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 14px 0 0;
}
.pricing-card-note {
    font-size: 0.75rem;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin: 12px 0 16px;
    font-weight: 600;
    text-align: center;
}
.pricing-card-soon {
    border-style: dashed !important;
    opacity: 0.95;
}

/* ─── Founding cohort callout (legacy — kept for the old .founding-cohort
       class on early versions; safe to delete after sweep) ──────────── */
.founding-cohort {
    position: relative;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-radius: var(--r-xl);
    padding: 32px 24px;
    box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) { .founding-cohort { padding: 48px 56px; } }
.founding-cohort-head .eyebrow { color: var(--brand-dark); }
.founding-cohort-head h2 { color: var(--ink); }
.founding-cohort-head p { color: var(--text); }
.founding-cohort-grid {
    display: grid; gap: 16px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}
@media (min-width: 768px) { .founding-cohort-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.founding-cohort-card {
    background: white;
    border: 1px solid #6ee7b7;
    border-radius: var(--r-lg);
    padding: 24px;
}
.founding-cohort-card-name {
    font-size: 0.8125rem;
    color: var(--brand-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.founding-cohort-card-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1;
    margin-top: 8px;
}
.founding-cohort-card-price small {
    font-size: 0.875rem;
    color: var(--text-2);
    font-weight: 500;
}
.founding-cohort-card dl { margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.founding-cohort-card dt {
    font-size: 0.6875rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0;
}
.founding-cohort-card dd {
    margin: 2px 0 0; padding: 0;
    color: var(--text);
    font-size: 0.9375rem;
}
.founding-cohort-footnote {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid rgba(13, 58, 44, 0.15);
    color: var(--text);
    font-size: 0.875rem;
}

/* ═════════════════════════════════════════════════════════
   COMPARISON PAGES — TL;DR + decision grid (editorial)
   ═════════════════════════════════════════════════════════ */

/* TL;DR — 2-column verdict block: heading left, body right */
/* Quick verdict — centered heading + two side-by-side decision cards.
   Replaces the old TL;DR block. One card per product, branded card
   shows brand-green top border + soft-tinted tag. */
.compare-verdict {
    max-width: 1080px;
    margin: 0 auto;
}
.compare-verdict-head {
    text-align: center;
    margin-bottom: 32px;
}
.compare-verdict-head .eyebrow { margin-bottom: 14px; }
.compare-verdict-head h2 {
    font-size: clamp(1.625rem, 1.5vw + 1rem, 2.125rem);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.compare-verdict-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .compare-verdict-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.compare-pick {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow-sm);
    transition:
        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) { .compare-pick { padding: 30px 28px; } }
.compare-pick:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.16),
                0 4px 12px rgba(15, 23, 42, 0.04);
}
.compare-pick--accent {
    border-top: 3px solid var(--brand);
    padding-top: 23px;
}
@media (min-width: 768px) {
    .compare-pick--accent { padding-top: 27px; }
}
.compare-pick--accent:hover {
    border-color: rgba(0, 179, 134, 0.35);
    border-top-color: var(--brand);
    box-shadow: 0 24px 48px -20px rgba(0, 179, 134, 0.22),
                0 4px 12px rgba(15, 23, 42, 0.04);
}
.compare-pick-tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--bg-alt);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.compare-pick--accent .compare-pick-tag {
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.compare-pick-lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
}
.compare-pick-best {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 0;
}
.cpb-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin-bottom: 6px;
}
.cpb-text {
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.55;
}
.compare-verdict-aside {
    margin: 28px auto 0;
    text-align: center;
    max-width: 640px;
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
    .compare-pick { transition: none !important; }
    .compare-pick:hover { transform: none !important; }
}

/* Decision grid — two pick-cards side by side. "pick" variant is the
   Clearview side (brand-green top border + tag); the other side is
   neutral so the page reads as "if you want X choose us, if Y choose
   them" without feeling biased. */
.decide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
}
@media (min-width: 800px) {
    .decide-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.decide-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: all 200ms ease;
}
.decide-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .decide-card { padding: 32px; } }
.decide-card.pick {
    border-top: 4px solid var(--brand);
    box-shadow: var(--shadow-md);
}
.decide-card header { display: flex; flex-direction: column; gap: 12px; }
.dc-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dc-tag-alt {
    color: var(--text-2);
    background: var(--bg-alt);
    border: 1px solid var(--line);
}
.decide-card h3 {
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.decide-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.decide-card li {
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.55;
    padding-left: 22px;
    position: relative;
}
.decide-card.pick li::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--brand-soft);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300b386' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.decide-card:not(.pick) li::before {
    content: '';
    position: absolute;
    left: 3px; top: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
}

/* ─── Comparison table — premium product UI feel.
   Highlighted Clearview column (brand-tinted), visual indicators
   (check/dash/x) prepended to status text, hover row highlight. */
.compare-wrap {
    /* Desktop: overflow visible so sticky thead can escape this
       container and pin to the viewport. Mobile: overflow-x auto
       restored below so the wide table can be swiped horizontally. */
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: white;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 16px 32px -16px rgba(15, 23, 42, 0.12),
        0 4px 12px rgba(15, 23, 42, 0.04);
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}
@media (max-width: 720px) {
    .compare-wrap { overflow-x: auto; }
}

/* Mobile scroll hint — small label above the table on narrow screens */
@media (max-width: 720px) {
    .compare-wrap::before {
        content: '← Swipe to see full table →';
        display: block;
        padding: 10px 16px;
        background: var(--bg-alt);
        border-bottom: 1px solid var(--line);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-3);
        text-align: center;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 680px;  /* horizontal scroll on narrow screens */
    table-layout: fixed;
}
/* Three equal columns — first col slightly narrower so capability labels
   stay tight and the two answer columns get the real estate. */
.compare-table th:first-child,
.compare-table td:first-child { width: 30%; }
.compare-table th:nth-child(2),
.compare-table td:nth-child(2),
.compare-table th:nth-child(3),
.compare-table td:nth-child(3) { width: 35%; }
.compare-table th, .compare-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--text);
}
.compare-table thead th {
    background: var(--bg-alt);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    font-weight: 700;
    padding: 14px 20px;
    /* Sticky thead removed: `position: sticky` on individual <th>
       cells leaves the cells un-aligned vertically when the table
       scrolls past — the brand-tinted Clearview cell (z-index 5)
       overlapped the two neutral cells (z-index 4), making them
       appear mid-table. The table is short enough that a pinned
       header is unnecessary. */
}
.compare-table thead th.col-clearview {
    color: var(--brand-dark);
    background: linear-gradient(180deg, #d1fae5 0%, #ecfdf5 100%);
    position: relative;
}
.compare-table thead th.col-clearview::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--brand);
}

/* Highlight the Clearview column in tbody too — brand-soft tint */
.compare-table tbody td:nth-child(2) {
    background: rgba(0, 179, 134, 0.05);
    font-weight: 500;
    color: var(--ink);
    border-left: 1px solid rgba(0, 179, 134, 0.18);
    border-right: 1px solid rgba(0, 179, 134, 0.18);
}
/* Row hover — full row gets a slate tint, Clearview cell deepens, and
   the capability label cell gets a brand-green left-border accent that
   slides in. Subtle but draws the eye across the row. */
.compare-table tbody tr {
    transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-table tbody td {
    transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-table tbody tr:hover { background: rgba(15, 23, 42, 0.025); }
.compare-table tbody tr:hover td:nth-child(2) {
    background: rgba(0, 179, 134, 0.11);
}
.compare-table tbody td:first-child {
    color: var(--ink);
    font-weight: 600;
    background: white;
    position: relative;
}
.compare-table tbody td:first-child::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-table tbody tr:hover td:first-child::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
    .compare-table tbody tr,
    .compare-table tbody td,
    .compare-table tbody td:first-child::before {
        transition: none !important;
    }
}
.compare-table tbody tr:hover td:first-child { background: var(--bg-alt); }
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* Status indicators — small circular icon inlined BEFORE the text via
   ::before pseudo-element. Uses inline-block + vertical-align so the
   icon stays on the same baseline as the first line of text in a
   multi-line cell, instead of floating absolutely. */
.compare-table .yes,
.compare-table .no,
.compare-table .meh {
    font-weight: 600;
}
.compare-table .yes::before,
.compare-table .no::before,
.compare-table .meh::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -3px;
}
.compare-table .yes { color: var(--brand-dark); }
.compare-table .yes::before {
    background-color: var(--brand-soft);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300b386' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.compare-table .no { color: var(--text-3); }
.compare-table .no::before {
    background-color: #fee2e2;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.compare-table .meh { color: #b45309; }
.compare-table .meh::before {
    background-color: #fef3c7;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* ─── Form ────────────────────────────────────────────────── */
.form-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .form-card { padding: 36px; } }
.form-row {
    display: grid; gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}
@media (min-width: 768px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.form-input, .form-textarea, .form-select {
    width: 100%; box-sizing: border-box;
    background: white;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: 11px 14px;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    transition:
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.form-input:hover, .form-textarea:hover, .form-select:hover {
    border-color: #cbd5d1;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--brand);
    background-color: #fbfdfc;
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.form-help { font-size: 0.75rem; color: var(--text-2); margin-top: 4px; }

/* (Removed: before/after .ba-active overlay + drag-handle CSS. The
   plain side-by-side .split-pane layout above is the canonical view.
   The slider used clip-path to overlay both panes and was removed
   because the clip ended up hiding half of each pane's content.) */

/* ─── Health-score dial + channel bars (v3 brief §7.8 Element 1) ────
   Replaces the static screenshot in homepage Step 2 "See what's broken".
   Pure SVG dial + 3 channel bars. CSS-only animation, fires once when
   .in-view is set by the IntersectionObserver in main.js. */
.hs-dial-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 32px 28px 28px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 56px -24px rgba(15, 23, 42, 0.18),
        0 6px 16px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 420px;
    margin: 0 auto;
}
.hs-dial {
    width: 200px;
    height: 200px;
    display: block;
}
.hs-dial-track {
    fill: none;
    stroke: var(--line);
    stroke-width: 14;
}
.hs-dial-fill {
    fill: none;
    stroke: var(--amber);
    stroke-width: 14;
    stroke-linecap: round;
    /* circumference = 2π·80 ≈ 502.65 — start with the dasharray
       fully empty (offset = full circumference). */
    stroke-dasharray: 502.65;
    stroke-dashoffset: 502.65;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-dial-card.in-view .hs-dial-fill {
    /* 67% filled → 502.65 × (1 − 0.67) = 165.87 */
    stroke-dashoffset: 165.87;
}
.hs-dial-num {
    font: 700 56px/1 var(--font);
    fill: var(--ink);
    letter-spacing: -0.02em;
}
.hs-dial-suffix {
    font: 500 12px/1 var(--font);
    fill: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hs-dial-label {
    font: 600 11px/1 var(--font-mono);
    fill: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.hs-channels {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hs-channel {
    display: grid;
    grid-template-columns: minmax(0, 140px) 1fr 28px;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--text);
}
.hs-channel-name {
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-channel-bar {
    height: 8px;
    background: var(--bg-soft);
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.hs-channel-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-channel[data-channel="seo"] .hs-channel-fill { background: var(--green); }
.hs-channel[data-channel="gmb"] .hs-channel-fill { background: var(--amber); }
.hs-channel[data-channel="ads"] .hs-channel-fill { background: var(--red); }
.hs-channel-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8125rem;
    text-align: right;
}
.hs-channel-score.g { color: var(--green); }
.hs-channel-score.a { color: var(--amber); }
.hs-channel-score.r { color: var(--red); }

/* Staggered fill — bars animate in sequence after the dial starts */
.hs-dial-card.in-view .hs-channel[data-channel="seo"] .hs-channel-fill { width: 82%; transition-delay: 0.7s; }
.hs-dial-card.in-view .hs-channel[data-channel="gmb"] .hs-channel-fill { width: 58%; transition-delay: 1.0s; }
.hs-dial-card.in-view .hs-channel[data-channel="ads"] .hs-channel-fill { width: 31%; transition-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
    .hs-dial-fill {
        transition: none !important;
        stroke-dashoffset: 165.87 !important;
    }
    .hs-channel-fill { transition: none !important; }
    .hs-dial-card .hs-channel[data-channel="seo"] .hs-channel-fill { width: 82%; }
    .hs-dial-card .hs-channel[data-channel="gmb"] .hs-channel-fill { width: 58%; }
    .hs-dial-card .hs-channel[data-channel="ads"] .hs-channel-fill { width: 31%; }
}

/* Inline validation error — red border + red message below the field */
.form-input.has-error, .form-textarea.has-error, .form-select.has-error {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.03);
}
.form-input.has-error:focus, .form-textarea.has-error:focus, .form-select.has-error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form-error-msg {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 6px;
    line-height: 1.4;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 180ms ease, opacity 180ms ease, margin-top 180ms ease;
}
.form-error-msg.is-visible {
    max-height: 60px;
    opacity: 1;
}

/* Submit button — disabled state + inline spinner during AJAX */
.btn[disabled], .btn.is-loading {
    cursor: not-allowed;
    opacity: 0.85;
}
.btn.is-loading { pointer-events: none; }
.btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -2px;
    animation: btn-spin 720ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ─── Glossary, prose ─────────────────────────────────────── */
.prose { max-width: 720px; }
.prose p { color: var(--text); margin: 0 0 16px; }
.prose h3 { margin: 32px 0 12px; color: var(--ink); font-size: 1.25rem; }
.prose ul { margin: 0 0 16px 1.2em; padding: 0; }
.prose ul li { color: var(--text); margin: 4px 0; }
.prose blockquote {
    border-left: 3px solid var(--brand);
    padding-left: 20px;
    margin: 24px 0;
    color: var(--ink);
    font-style: italic;
    font-size: 1.0625rem;
}

/* ═══════════════════════════════════════════════════════════
   GLOSSARY — editorial reference document
   Hairline-separated entries, mono term names, jump-nav at top.
   Reads like a real glossary (Stripe Docs, MDN), not a card grid.
   ═══════════════════════════════════════════════════════════ */

/* Jump nav — pill links at the top.
   On mobile, switch from full pill (999px radius) to a rounded card
   shape since the chips will wrap onto multiple lines. */
.glossary-jump {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    position: sticky;
    top: 70px;
    z-index: 10;
    transition: box-shadow 240ms ease;
}
.glossary-jump.is-stuck {
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
@media (max-width: 768px) {
    .glossary-jump {
        padding: 12px 16px;
        margin-top: 24px;
    }
    .gj-label {
        width: 100%;
        margin-right: 0;
        padding-right: 0;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-right: 0;
        border-bottom: 1px dashed var(--line);
    }
}
.gj-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
    padding-right: 12px;
    border-right: 1px solid var(--line-strong);
}
.gj-link {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    transition:
        background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
        color 220ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gj-link:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
    transform: translateY(-1px);
}
/* Active state — set by JS as the matching group scrolls into view.
   Soft brand tint + brand border + brand-dark text. Stays in the same
   tonal family as the inactive pills so it reads as "you are here"
   rather than a pressed button. */
.gj-link.is-active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.gj-link.is-active small { color: var(--brand-dark); opacity: 0.7; }
.gj-link small {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-3);
    transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gj-link:hover small { color: var(--brand-dark); }

/* Document container */
.glossary-doc {
    max-width: 980px;
    margin: 0 auto;
}

/* Group header — like a chapter heading */
.glossary-group + .glossary-group { margin-top: 64px; }
.glossary-group-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-strong);
}
.ggh-num {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.glossary-group-head h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--ink);
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* Entries — hairline-separated dl rows */
.glossary-entries {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}
.glossary-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 80px;  /* offset for sticky header on anchor jump */
}
.glossary-entry:last-child { border-bottom: 0; }
@media (min-width: 768px) {
    .glossary-entry {
        grid-template-columns: 220px 1fr;
        gap: 32px;
        padding: 28px 0;
    }
}

/* Term name — mono accent, anchor link visible on hover */
.glossary-term {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: relative;
    padding-left: 22px;
    margin-left: -22px;
}
.glossary-anchor {
    position: absolute;
    left: 0;
    top: 2px;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--line-strong);
    font-weight: 700;
    opacity: 0;
    transition: opacity 200ms ease, color 200ms ease;
    line-height: 1;
}
.glossary-entry:hover .glossary-anchor { opacity: 1; }
.glossary-anchor:hover { color: var(--brand); }
.gt-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.gt-long {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Definition body */
.glossary-def {
    margin: 0;
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ═════════════════════════════════════════════════════════
   EDITORIAL DESIGN LANGUAGE
   Type-led, magazine-style. Hairline dividers, oversized
   numerals as design moments, almost no card chrome.
   Used wherever the brief is a list / structured argument.
   ═════════════════════════════════════════════════════════ */

/* ─── Marketing-trap ledger ──────────────────────────────
   Magazine-style: header on top, numbered ledger of channels,
   closing pull-statement at the bottom. No cards, no icons. */
.trap-layout {
    max-width: 980px;
    margin: 0 auto;
}
.trap-header {
    text-align: center;
    margin-bottom: 56px;
}
.trap-header h2 {
    max-width: 720px;
    margin: 16px auto 0;
}
.trap-ledger {
    list-style: none;
    padding: 0;
    margin: 0 0 56px;
    border-top: 1px solid var(--line-strong);
}
.trap-ledger li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 32px;
    align-items: baseline;
    padding: 28px 0;
    border-bottom: 1px solid var(--line-strong);
    transition: padding-left 250ms cubic-bezier(.2,.7,.3,1);
}
.trap-ledger li:hover { padding-left: 12px; }
.trap-ledger-num {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    padding-top: 6px;
}
.trap-ledger-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 18px;
}
.trap-ledger-body h3 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.2;
}
.trap-ledger-body p {
    margin: 0;
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.5;
}
@media (max-width: 600px) {
    .trap-ledger li { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
    .trap-ledger-body { display: block; }
    .trap-ledger-body p { margin-top: 6px; }
}

/* Closing pull-statement — full-width emphasis, no box */
.trap-footer {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.trap-footer p {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
}
.trap-footer p strong { color: var(--ink); }
.trap-statement {
    margin-top: 32px !important;
    color: var(--ink) !important;
    font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
}

/* ─── Outcomes (editorial) — stacked horizontal blocks
   Big mono numeral on the left as a design moment. No fake
   product mockups; the typography does all the work. */
.outcomes-editorial {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
    counter-reset: outcome-counter;
}
.outcomes-editorial li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 56px 0;
    border-bottom: 1px solid var(--line);
}
.outcomes-editorial li:first-child { padding-top: 0; border-top: 1px solid var(--line); }
.outcomes-editorial li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 768px) {
    .outcomes-editorial li {
        grid-template-columns: 160px 1fr;
        gap: 48px;
        padding: 72px 0;
        align-items: start;
    }
    .outcomes-editorial li:first-child { padding-top: 16px; }
}
.outcome-numeral {
    font-family: var(--font-mono);
    font-size: clamp(3.5rem, 6vw + 1rem, 6rem);
    font-weight: 300;
    color: var(--ink);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    align-self: start;
}
.outcomes-editorial .outcome-body h3 {
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 18px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.outcomes-editorial .outcome-body p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
    max-width: 580px;
}
.outcomes-editorial .outcome-body strong { color: var(--ink); }

/* ═════════════════════════════════════════════════════════
   PRODUCT-SHOWCASE LANGUAGE (sme.php — show, don't tell)
   The page IS the product. These mockups are big, refined,
   and read as actual product UI, not template decoration.
   ═════════════════════════════════════════════════════════ */

/* ─── Marketing-trap intro + audit report ────────────────── */
.trap-intro {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}
.trap-intro h2 { margin: 12px 0 14px; }
.trap-intro .lead { margin: 0; color: var(--text-2); }

/* The "sample audit" article — full-bleed product window */
.audit-report {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 32px 80px -28px rgba(15, 23, 42, 0.22),
        0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.audit-report-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 32px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-alt);
    flex-wrap: wrap;
}
@media (min-width: 768px) { .audit-report-head { padding: 32px 40px; } }
.audit-report-meta { min-width: 0; }
.arm-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.audit-report-meta h3 {
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.arm-sep { color: var(--text-3); margin: 0 4px; font-weight: 400; }
.arm-sector { color: var(--text-2); font-weight: 400; font-size: 0.9375rem; }
.audit-report-score { text-align: right; }
.ars-num {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ars-num small { font-size: 1rem; color: var(--text-3); font-weight: 500; }
.ars-num .red { color: var(--red); }
.ars-num .amber { color: var(--amber); }
.ars-num .green { color: var(--green); }
.ars-label {
    font-size: 0.75rem;
    color: var(--text-2);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.ars-trend {
    display: inline-block;
    margin-left: 6px;
    color: var(--red);
    font-family: var(--font-mono);
    font-weight: 700;
}

/* Channel rows inside the audit */
.audit-report-channels {
    list-style: none;
    margin: 0;
    padding: 0;
}
.audit-report-channels li {
    display: grid;
    grid-template-columns: 200px 1fr 140px;
    align-items: center;
    gap: 24px;
    padding: 20px 32px;
    border-bottom: 1px solid var(--line);
    transition: background 200ms ease;
}
.audit-report-channels li:hover { background: var(--bg-alt); }
.audit-report-channels li:last-child { border-bottom: 0; }
@media (min-width: 768px) { .audit-report-channels li { padding: 22px 40px; } }

/* Channel rows — stagger fade-in once the report scrolls into view.
   JS toggles .in-view on .audit-report; rows then animate one by one
   with a 60ms delay between each. */
.audit-report .audit-report-channels li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.audit-report.in-view .audit-report-channels li { opacity: 1; transform: none; }
.audit-report.in-view .audit-report-channels li:nth-child(1) { transition-delay: 220ms; }
.audit-report.in-view .audit-report-channels li:nth-child(2) { transition-delay: 280ms; }
.audit-report.in-view .audit-report-channels li:nth-child(3) { transition-delay: 340ms; }
.audit-report.in-view .audit-report-channels li:nth-child(4) { transition-delay: 400ms; }
.audit-report.in-view .audit-report-channels li:nth-child(5) { transition-delay: 460ms; }
.audit-report.in-view .audit-report-channels li:nth-child(6) { transition-delay: 520ms; }

/* Severity dots — quick scale pulse when the row first appears */
.audit-report .arc-status .dot {
    transform-origin: center;
}
.audit-report.in-view .arc-status .dot {
    animation: arc-dot-pulse 900ms cubic-bezier(0.4, 0, 0.2, 1) 800ms;
}
@keyframes arc-dot-pulse {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
    .audit-report .audit-report-channels li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .audit-report.in-view .arc-status .dot { animation: none !important; }
}
@media (max-width: 720px) {
    /* Restructure to: [name | score] top row, issue text full-width below.
       Keeps name+score visually grouped instead of stacked disconnected. */
    .audit-report-channels li {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "meta score"
            "issue issue";
        gap: 8px 14px;
        padding: 16px 20px;
    }
    .arc-meta { grid-area: meta; }
    .arc-issue { grid-area: issue; font-size: 0.8125rem; }
    .arc-score { grid-area: score; justify-content: flex-end; gap: 8px; }
}
.arc-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.arc-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.04em;
}
.arc-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}
.arc-name small {
    display: block;
    font-weight: 400;
    color: var(--text-3);
    font-size: 0.75rem;
    margin-top: 1px;
}
.arc-issue {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.55;
}
.arc-issue strong { color: var(--ink); font-weight: 600; }
.arc-score {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
@media (max-width: 720px) {
    .arc-score { justify-content: flex-start; }
}
.arc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.arc-status.r { color: var(--red); }
.arc-status.a { color: var(--amber); }
.arc-status.g { color: var(--green); }
.arc-status .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.arc-num-score {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.audit-report-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px;
    border-top: 1px solid var(--line);
    background: var(--bg-alt);
    flex-wrap: wrap;
}
@media (min-width: 768px) { .audit-report-foot { padding: 28px 40px; } }
.audit-report-foot span {
    font-size: 0.9375rem;
    color: var(--text-2);
}
.audit-report-foot strong { color: var(--ink); font-weight: 600; }
.arf-statement {
    font-weight: 700 !important;
    color: var(--ink) !important;
    font-size: 1.0625rem !important;
    letter-spacing: -0.01em;
}

/* ═════════════════════════════════════════════════════════
   SHOWCASE — 3 stacked product previews for "what you get"
   ═════════════════════════════════════════════════════════ */
.showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    padding: 40px 0;
}
@media (min-width: 900px) {
    /* text in narrower column, visual in wider column — consistent
       on EVERY showcase regardless of reverse, so all 3 product
       mockups render at the same width. */
    .showcase {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 64px;
        padding: 48px 0;
    }
    .showcase.reverse {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }
    .showcase.reverse .showcase-text   { order: 2; }
    .showcase.reverse .showcase-visual { order: 1; }
}
.showcase + .showcase {
    border-top: 1px solid var(--line);
}

.showcase-text { max-width: 520px; }
.showcase-step {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.showcase-text h3 {
    font-size: clamp(1.625rem, 1.4vw + 1rem, 2.125rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 18px;
}
.showcase-text p {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0 0 12px;
}
.showcase-emphasis {
    color: var(--ink) !important;
    font-weight: 600;
}

.showcase-visual { margin: 0; }

/* Product-window mockup chrome */
.product-window {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 56px -24px rgba(15, 23, 42, 0.22),
        0 6px 16px rgba(15, 23, 42, 0.06);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}
.showcase .product-window:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 32px 64px -24px rgba(13, 58, 44, 0.28),
        0 8px 20px rgba(15, 23, 42, 0.08);
}
@media (prefers-reduced-motion: reduce) {
    .product-window { transition: none !important; transform: none !important; }
}
.product-window-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}
.product-window-bar .pw-dots { display: inline-flex; gap: 6px; }
.product-window-bar .pw-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--line-strong);
}
.product-window-bar .pw-dots span:nth-child(1) { background: #ff5f57; }
.product-window-bar .pw-dots span:nth-child(2) { background: #ffbd2e; }
.product-window-bar .pw-dots span:nth-child(3) { background: #28c941; }
.product-window-bar .pw-url {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-3);
}
.product-window-body { padding: 24px; }
@media (min-width: 768px) { .product-window-body { padding: 28px; } }

/* Shared header inside product mockups */
.pw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.pw-title {
    font-size: 1.0625rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.pw-sub {
    font-size: 0.8125rem;
    color: var(--text-2);
    margin-top: 4px;
}
.pw-pill {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-2);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 99px;
    font-weight: 600;
    white-space: nowrap;
}
.pw-score { text-align: right; }
.pw-score-num {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em;
}
.pw-score-num .red   { color: var(--red); }
.pw-score-num .amber { color: var(--amber); }
.pw-score-num .green { color: var(--green); }
.pw-score-trend {
    font-size: 0.6875rem;
    color: var(--brand-dark);
    margin-top: 4px;
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Showcase 01: channel bars */
.pw-channels { display: grid; gap: 10px; }
.pw-channel {
    display: grid;
    grid-template-columns: 12px 1fr 100px 28px;
    align-items: center;
    gap: 12px;
}
@media (max-width: 480px) {
    .pw-channel { grid-template-columns: 12px 1fr 60px 28px; }
}
.pwc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-3);
}
.pwc-dot.g { background: var(--green); }
.pwc-dot.a { background: var(--amber); }
.pwc-dot.r { background: var(--red); }
.pwc-name {
    font-size: 0.8125rem;
    color: var(--ink);
    font-weight: 500;
}
.pwc-bar {
    height: 6px;
    background: var(--bg-alt);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.pwc-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: var(--green);
    border-radius: 3px;
}
.pwc-score {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Showcase 02: ranked actions */
.pw-actions { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pw-actions li {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: var(--bg-alt);
    border-radius: var(--r-sm);
}
/* Narrow screens: impact pill drops below body so the title has room. */
@media (max-width: 540px) {
    .pw-actions li {
        grid-template-columns: 28px 1fr;
        grid-template-areas:
            "rank body"
            ".    impact";
        gap: 6px 12px;
        align-items: start;
    }
    .pwa-rank { grid-area: rank; align-self: start; }
    .pwa-body { grid-area: body; }
    .pwa-impact { grid-area: impact; justify-self: start; margin-top: 2px; }
}
.pwa-rank {
    width: 28px; height: 28px;
    background: var(--ink);
    color: white;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
}
.pwa-body { min-width: 0; }
.pwa-title { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.pwa-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-3);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pwa-impact {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
}
.pwa-impact.good { background: var(--brand-soft); color: var(--brand-dark); }
.pwa-impact.neutral { background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--line); }

/* Showcase 03: content posts */
.pw-posts { display: grid; gap: 10px; }
.pw-post {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-alt);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--line);
}
/* Narrow screens: status pill drops below the post text for breathing room. */
@media (max-width: 540px) {
    .pw-post {
        grid-template-columns: 32px 1fr;
        grid-template-areas:
            "ch body"
            ".  when";
        gap: 6px 12px;
        align-items: start;
    }
    .pwp-ch { grid-area: ch; align-self: start; }
    .pwp-body { grid-area: body; }
    .pwp-when { grid-area: when; justify-self: start; margin-top: 2px; }
}
.pwp-ch {
    width: 32px; height: 28px;
    border-radius: 6px;
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.pwp-ch.ig  { background: #E1306C; }
.pwp-ch.li  { background: #0A66C2; }
.pwp-ch.gbp { background: #34A853; }
.pwp-ch.fb  { background: #1877F2; }
.pwp-body { min-width: 0; }
.pwp-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pwp-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-3);
    margin-top: 2px;
}
.pwp-when {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 99px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pwp-when.sched  { background: var(--brand-soft); color: var(--brand-dark); }
.pwp-when.draft  { background: #fef3c7; color: #b45309; }
.pwp-when.queued { background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--line); }

/* ─── SME "marketing trap" channel list (legacy — keep until
   any page still uses it; safe to delete later) ──────────── */
.sme-trap-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 10px;
    counter-reset: trap-counter;
}
.sme-trap-list li {
    display: grid;
    grid-template-columns: 28px 36px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
}
.sme-trap-list li:hover {
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand);
}
.sme-trap-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--red);
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity 200ms ease;
}
.sme-trap-list li:hover::before { opacity: 1; }
.sme-trap-list li > div {
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.45;
}
.sme-trap-list li strong { color: var(--ink); font-weight: 600; }
.sme-trap-num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.04em;
}
.sme-trap-icon {
    width: 36px; height: 36px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
}

/* The "You can't fix what you can't see." pull-quote */
.trap-pullquote {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    background: var(--ink);
    color: white;
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.4);
}
.trap-pullquote::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--brand);
}
.trap-pullquote-mark {
    flex-shrink: 0;
    color: var(--red);
    margin-top: 2px;
}
.trap-pullquote p {
    margin: 0;
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

/* ─── Outcomes grid (SME §4.4 + reusable) ──────────────── */
.outcomes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) { .outcomes-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.outcome-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: all 200ms ease;
}
.outcome-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}
@media (min-width: 768px) { .outcome-card { padding: 32px; } }
/* Outcome card header — number + verb tag, top of every card */
.outcome-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.outcome-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    background: var(--ink);
    color: white;
    font-family: var(--font-mono);
    font-weight: 700;
    border-radius: 6px;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}
.outcome-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.outcome-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.outcome-card p {
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}
.outcome-card p strong { color: var(--ink); }

/* Mini product preview inside each outcome card — gives the section
   real product feel instead of three generic feature boxes. */
.outcome-preview {
    margin-top: 22px;
    padding: 4px 4px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: grid;
    gap: 4px;
}
.outcome-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--line);
}
.outcome-preview-head .oph-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.outcome-preview-head .oph-meta {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-3);
    background: white;
    padding: 2px 7px;
    border-radius: 99px;
    border: 1px solid var(--line);
}
.outcome-preview > div:not(.outcome-preview-head) { margin: 0 8px; }

/* Preview row: tiny health-score line */
.outcome-preview-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: white;
    border-radius: 4px;
    font-size: 0.75rem;
}
.outcome-preview-row .opr-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--text-3);
}
.outcome-preview-row .opr-dot.g { background: var(--green); }
.outcome-preview-row .opr-dot.a { background: var(--amber); }
.outcome-preview-row .opr-dot.r { background: var(--red); }
.outcome-preview-row .opr-name { color: var(--ink); font-weight: 500; }
.outcome-preview-row .opr-score {
    font-family: var(--font-mono);
    color: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Preview action: ranked action item */
.outcome-preview-action {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: white;
    border-radius: 4px;
    font-size: 0.75rem;
}
.outcome-preview-action .opa-rank {
    width: 22px; height: 22px;
    background: var(--brand);
    color: white;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
}
.outcome-preview-action .opa-text {
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.outcome-preview-action .opa-impact {
    font-family: var(--font-mono);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 0.6875rem;
    background: var(--brand-soft);
    padding: 2px 6px;
    border-radius: 99px;
    white-space: nowrap;
}

/* Preview post: queued content */
.outcome-preview-post {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: white;
    border-radius: 4px;
    font-size: 0.75rem;
}
.outcome-preview-post .opp-ch {
    width: 28px; height: 22px;
    color: white;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
}
.outcome-preview-post .opp-ch.ig  { background: #E1306C; }
.outcome-preview-post .opp-ch.li  { background: #0A66C2; }
.outcome-preview-post .opp-ch.gbp { background: #34A853; }
.outcome-preview-post .opp-text {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.outcome-preview-post .opp-status {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Agency dashboard mockup — the visual proof of the section.
   Sits inside .product-window; the 5-feature text list lives below. */
.agency-mockup {
    max-width: 1000px;
    margin: 0 auto 56px;
}
.agency-mockup-cap {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Multi-client portfolio table */
.agency-clients {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.agency-clients thead th {
    text-align: left;
    padding: 10px 16px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.agency-clients tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: middle;
}
.agency-clients tbody tr:last-child td { border-bottom: 0; }
.agency-clients tbody tr { transition: background 200ms ease; }
.agency-clients tbody tr:hover { background: var(--bg-alt); }
.agency-clients tbody td:first-child { color: var(--ink); }
.agency-clients tbody td:nth-child(2) {
    color: var(--text-2);
    font-size: 0.8125rem;
}

/* Score chip */
.ac-score {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    min-width: 38px;
    text-align: center;
}
.ac-score.g { color: var(--green); background: rgba(16, 185, 129, 0.08); }
.ac-score.a { color: var(--amber); background: rgba(245, 158, 11, 0.08); }
.ac-score.r { color: var(--red);   background: rgba(239, 68, 68, 0.08); }

/* Upsell flag */
.ac-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 99px;
    letter-spacing: 0.02em;
}
.ac-flag.upsell {
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.ac-flag.upsell::before {
    content: '↑';
    font-weight: 700;
}

/* Retention risk pill */
.ac-risk {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ac-risk.low  { background: rgba(16, 185, 129, 0.1); color: var(--green); }
.ac-risk.med  { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.ac-risk.high { background: rgba(239, 68, 68, 0.1); color: var(--red); }

/* Mobile: collapse to card-style stack */
@media (max-width: 720px) {
    .agency-clients thead { display: none; }
    .agency-clients,
    .agency-clients tbody,
    .agency-clients tr,
    .agency-clients td { display: block; }
    .agency-clients tr {
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }
    .agency-clients tr:last-child { border-bottom: 0; }
    .agency-clients td {
        padding: 4px 16px;
        border: none;
    }
    .agency-clients td:first-child { font-weight: 600; }
}

/* ─── Agency features (5 items, no cards, no icons) ───── */
.agency-features {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
    .agency-features {
        grid-template-columns: repeat(2, 1fr);
    }
    .agency-features .agency-feature:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
}
@media (min-width: 1024px) {
    .agency-features {
        grid-template-columns: repeat(5, 1fr);
    }
    .agency-features .agency-feature {
        border-right: 1px solid var(--line);
    }
    .agency-features .agency-feature:last-child {
        border-right: 0;
    }
    .agency-features .agency-feature:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
}
.agency-features .agency-feature {
    padding: 24px 22px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transition: background 200ms ease;
}
.agency-features .agency-feature:hover { background: var(--bg-alt); transform: none; }
@media (min-width: 1024px) {
    .agency-features .agency-feature { border-bottom: 0; }
}
.agency-features .agency-feature h4 {
    font-size: 0.9375rem;
    color: var(--ink);
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.agency-features .agency-feature h4 .tier {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 2px 7px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agency-features .agency-feature p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* ═════════════════════════════════════════════════════════
   BOOK-A-CALL PAGE  (v2 — booking is the centerpiece)
   The page focuses entirely on getting a single click on
   "Open my calendar". Charles is a small byline below.
   ═════════════════════════════════════════════════════════ */

/* Hero stage — confident, centered, focused on the action */
.bc-stage { padding-bottom: 40px; }
.bc-stage-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.bc-stage-inner h1 {
    margin: 14px 0 18px;
    font-size: clamp(2rem, 2.4vw + 1rem, 3rem);
    line-height: 1.08;
}
.bc-stage-inner .lead {
    margin: 0 auto 32px;
    max-width: 600px;
}

/* Primary action area — big button, supporting email link below */
.bc-primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 44px;
}
.bc-primary .btn-primary {
    padding: 16px 32px;
    font-size: 1.0625rem;
    border-radius: 12px;
    box-shadow: 0 10px 24px -10px rgba(0, 179, 134, 0.55);
}
.bc-primary .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -12px rgba(0, 179, 134, 0.65);
}
.bc-or {
    color: var(--text-2);
    font-size: 0.875rem;
}
.bc-or a {
    color: var(--ink);
    font-weight: 600;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 1px;
    transition: border-color 200ms ease, color 200ms ease;
}
.bc-or a:hover { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* Founder byline — small, supporting credit row, not a card.
   On very narrow mobile, allow it to wrap to a rounded card so the
   name + role don't get cut off. */
.bc-byline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 12px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-xs);
    max-width: 100%;
}
@media (max-width: 480px) {
    .bc-byline {
        border-radius: 14px;
        padding: 14px 16px;
    }
    .bc-byline-meta { min-width: 0; }
    .bc-byline-meta strong,
    .bc-byline-meta span { white-space: normal; word-wrap: break-word; }
}
.bc-byline-photo {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #334155 0%, #1e293b 60%, #0f172a 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.bc-byline-dot {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 12px; height: 12px;
    background: var(--green);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.bc-byline-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    text-align: left;
}
.bc-byline-meta strong {
    font-size: 0.875rem;
    color: var(--ink);
    font-weight: 600;
}
.bc-byline-meta span {
    font-size: 0.75rem;
    color: var(--text-2);
}

/* What you'll get — tighter editorial list */
.bc-list-wrap {
    max-width: 880px;
    margin: 0 auto;
}
.bc-list-head { text-align: center; margin-bottom: 28px; }
.bc-list-head .eyebrow {
    display: inline-block;
    padding-bottom: 12px;
    position: relative;
}
.bc-list-head .eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 3px;
    background: var(--brand);
    border-radius: 2px;
}
.bc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}
.bc-list li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
@media (min-width: 768px) {
    .bc-list li {
        grid-template-columns: 80px 1fr;
        gap: 32px;
        padding: 28px 0;
    }
}
.bc-list-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-dark);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .bc-list-num { font-size: 1.75rem; } }
.bc-list li > div h4 {
    font-size: 1.125rem;
    color: var(--ink);
    margin: 0 0 8px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.bc-list li > div p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 620px;
}

/* Founder promise — editorial pull-quote, left-aligned with brand bar.
   No giant quote glyph (it renders broken in Georgia at large size). */
.bc-promise {
    max-width: 820px;
    margin: 0 auto;
    padding: 36px 32px;
    background: white;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}
@media (min-width: 768px) { .bc-promise { padding: 44px 48px; } }
.bc-promise-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.bc-promise blockquote {
    margin: 0 0 28px;
    font-size: clamp(1.1875rem, 1.4vw + 1rem, 1.5rem);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.012em;
    quotes: "“" "”" "‘" "’";
    text-wrap: balance;
}
.bc-promise figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.bc-promise .bcp-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #334155 0%, #1e293b 60%, #0f172a 100%);
    color: rgba(255,255,255,0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.bc-promise .bcp-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.bc-promise .bcp-meta strong {
    font-size: 0.9375rem;
    color: var(--ink);
    font-weight: 600;
}
.bc-promise .bcp-meta span {
    font-size: 0.75rem;
    color: var(--text-2);
}

/* Single clickable alt-CTA card — text left, big arrow right */
.bc-alt-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 28px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    color: var(--ink);
    transition: all 220ms cubic-bezier(.2,.7,.3,1);
    text-decoration: none;
}
.bc-alt-card:hover {
    color: var(--ink);
    border-color: var(--brand);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.bc-alt-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.bc-alt-card-text .bc-alt-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bc-alt-card-text strong {
    font-size: 1.0625rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.bc-alt-card-text .bc-alt-meta {
    font-size: 0.8125rem;
    color: var(--text-2);
    margin-top: 2px;
}
.bc-alt-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: var(--bg-alt);
    border-radius: 50%;
    color: var(--text-2);
    flex-shrink: 0;
    transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.bc-alt-card:hover .bc-alt-card-arrow {
    background: var(--brand);
    color: white;
    transform: translateX(4px);
}

/* ═════════════════════════════════════════════════════════
   FAQ PAGE — grouped accordion + still-got-a-question card
   ═════════════════════════════════════════════════════════ */
.faq-page-wrap {
    max-width: 920px;
    margin: 0 auto;
}
.faq-group + .faq-group { margin-top: 48px; }
.faq-group-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-strong);
}
.faq-group-num {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.faq-group-head h2 {
    font-size: 1.375rem;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* "Question not covered here?" — clean editorial closing.
   No card chrome, no avatar. Confident typography only. */
.faq-closing {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.faq-closing h2 {
    margin: 14px 0 16px;
    font-size: clamp(1.875rem, 2vw + 1rem, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.faq-closing > p {
    margin: 0 auto 28px;
    color: var(--text-2);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 600px;
}
.faq-closing-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
    margin-bottom: 24px;
}
.faq-closing-alt {
    font-size: 0.9375rem;
    color: var(--text-2);
    font-weight: 600;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 1px;
    transition: color 200ms ease, border-color 200ms ease;
    display: inline-flex;
    align-items: baseline;
}
.faq-closing-alt:hover {
    color: var(--brand-dark);
    border-bottom-color: var(--brand);
}
.faq-closing-alt span {
    display: inline-block;
    transition: transform 200ms ease;
}
.faq-closing-alt:hover span { transform: translateX(3px); }

.faq-closing-sig {
    margin: 0 !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.02em;
}

/* ─── Legacy faq-stillq (kept until removed everywhere) ─── */
.faq-stillq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: flex-start;
    max-width: 880px;
    margin: 0;
    padding: 36px 28px;
    background: white;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    position: relative;
}
@media (min-width: 720px) {
    .faq-stillq {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 32px;
        padding: 40px 44px;
        margin: 0 auto;
    }
}

/* Avatar block with live "available" dot */
.faq-stillq-id {
    position: relative;
    width: 80px;
    height: 80px;
}
@media (min-width: 720px) { .faq-stillq-id { width: 96px; height: 96px; } }
.faq-stillq-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #334155 0%, #1e293b 60%, #0f172a 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 8px 20px -8px rgba(15,23,42,0.4);
}
.faq-stillq-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--green);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
.faq-stillq-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0.35;
    animation: faq-pulse 2.2s ease-in-out infinite;
}
@keyframes faq-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.35; }
    50%      { transform: scale(1.6); opacity: 0;    }
}

/* Quote body */
.faq-stillq-body {
    margin: 0;
}
.faq-stillq-body .eyebrow {
    margin-bottom: 14px;
}
.faq-stillq-quote {
    font-size: clamp(1.125rem, 0.8vw + 1rem, 1.375rem);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: -0.012em;
    margin: 0 0 20px;
    text-wrap: balance;
}
.faq-stillq-attr {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.faq-stillq-attr .fsa-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.faq-stillq-attr .fsa-role {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 2px;
}

/* CTA row — primary button + quiet secondary link */
.faq-stillq-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
}
.faq-stillq-cta .btn-primary {
    padding: 12px 22px;
}
.faq-stillq-alt {
    font-size: 0.875rem;
    color: var(--text-2);
    font-weight: 600;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 1px;
    transition: color 200ms ease, border-color 200ms ease;
}
.faq-stillq-alt:hover {
    color: var(--brand-dark);
    border-bottom-color: var(--brand);
}
.faq-stillq-alt span {
    display: inline-block;
    margin-left: 4px;
    transition: transform 200ms ease;
}
.faq-stillq-alt:hover span { transform: translateX(3px); }

/* ═════════════════════════════════════════════════════════
   ABOUT PAGE
   ═════════════════════════════════════════════════════════ */

/* Stats strip below the hero */
.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    max-width: 980px;
    margin: 0 auto;
}
@media (min-width: 720px) { .about-stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.about-stat {
    text-align: center;
    padding: 4px 0;
    border-left: 1px solid var(--line);
    padding-left: 16px;
}
.about-stats .about-stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 719px) {
    .about-stat { border-left: 0; padding-left: 0; }
    .about-stat:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 16px; }
}
.about-stat-num {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(2rem, 2.4vw + 1rem, 2.75rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.about-stat-label {
    font-size: 0.75rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* "The problem we kept seeing" — editorial ledger with solution row */
.about-problems {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 880px;
    border-top: 1px solid var(--line);
}
.about-problems li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
    .about-problems li {
        grid-template-columns: 80px 1fr;
        gap: 32px;
        padding: 32px 0;
    }
}
.about-problems .apb-num {
    font-family: var(--font-mono);
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--text-3);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.about-problems .apb-solution {
    background: linear-gradient(180deg, var(--brand-soft) 0%, transparent 100%);
    margin: 0 -16px;
    padding: 28px 16px;
    border-radius: var(--r-md);
}
@media (min-width: 768px) {
    .about-problems .apb-solution {
        margin: 0 -24px;
        padding: 32px 24px;
    }
}
.about-problems .apb-solution .apb-num {
    color: var(--brand);
    font-size: 2rem;
    font-weight: 400;
}
.about-problems .apb-body h3 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
    margin: 0 0 10px;
    color: var(--ink);
    letter-spacing: -0.015em;
    font-weight: 700;
}
.about-problems .apb-body p {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 640px;
}

/* "What we believe" — 2-column principles */
.about-principles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 768px) { .about-principles { grid-template-columns: 1fr 1fr; gap: 24px; } }
.about-principle {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-xs);
    transition: all 200ms ease;
}
.about-principle:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
@media (min-width: 768px) { .about-principle { padding: 32px; } }
.about-principle .ap-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--brand);
    color: white;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8125rem;
    border-radius: 8px;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.about-principle h3 {
    font-size: 1.1875rem;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.about-principle p {
    margin: 0;
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ═════════════════════════════════════════════════════════
   BOOK-AUDIT PAGE — form + timeline aside
   ═════════════════════════════════════════════════════════ */
.audit-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1024px) {
    .audit-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 48px;
    }
}

/* Form card */
.audit-form {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 56px -24px rgba(15, 23, 42, 0.15),
        0 6px 16px rgba(15, 23, 42, 0.04);
}
@media (min-width: 768px) { .audit-form { padding: 40px; } }
.audit-form-head { margin-bottom: 28px; }
.audit-form-head h2 {
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    margin: 0 0 8px;
    color: var(--ink);
    letter-spacing: -0.015em;
}
.audit-form-head p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.9375rem;
}

/* Flash banner — shown after POST submission (success / error) */
.audit-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 0.9375rem;
    line-height: 1.5;
    border: 1px solid transparent;
    animation: audit-flash-in 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes audit-flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .audit-flash { animation: none; }
    .form-input, .form-textarea, .form-select,
    .form-checkbox, .checkbox-box, .checkbox-box svg,
    .form-error-msg, .btn-spinner {
        transition: none !important;
        animation: none !important;
    }
}
.audit-flash svg {
    flex-shrink: 0;
    margin-top: 1px;
}
.audit-flash-success {
    background: rgba(0, 179, 134, 0.08);
    border-color: rgba(0, 179, 134, 0.28);
    color: #064e3b;
}
.audit-flash-success svg { color: var(--brand-dark); }
.audit-flash-error {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.28);
    color: #7f1d1d;
}
.audit-flash-error svg { color: #dc2626; }

.req {
    color: var(--brand-dark);
    font-weight: 600;
}
.form-hint {
    color: var(--text-3);
    font-weight: 400;
    font-size: 0.75rem;
    margin-left: 4px;
}

/* Channel checkbox grid */
.form-channels {
    display: grid;
    gap: 8px 14px;
    grid-template-columns: 1fr;
    margin-top: 8px;
}
@media (min-width: 540px) { .form-channels { grid-template-columns: 1fr 1fr; } }
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    transition:
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.form-checkbox:hover {
    background: white;
    border-color: var(--brand);
}
/* Native input visually hidden but accessible to screen readers + keyboard */
.form-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
/* Custom box that replaces the native checkbox visual */
.checkbox-box {
    width: 18px; height: 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background: white;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.checkbox-box svg {
    width: 12px; height: 12px;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 280ms cubic-bezier(0.65, 0, 0.45, 1) 40ms;
}
/* Checked state — fill the box, draw the tick, accent the row */
.form-checkbox input:checked ~ .checkbox-box {
    background: var(--brand);
    border-color: var(--brand);
}
.form-checkbox input:checked ~ .checkbox-box svg {
    stroke-dashoffset: 0;
}
.form-checkbox:has(input:checked) {
    background: var(--brand-soft);
    border-color: var(--brand);
    border-left-color: var(--brand);
    color: var(--ink);
    font-weight: 500;
}
/* Keyboard focus ring on the visible box */
.form-checkbox input:focus-visible ~ .checkbox-box {
    box-shadow: 0 0 0 3px var(--brand-soft);
    border-color: var(--brand);
}

.form-submit {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

/* Side panel — timeline + included box */
.audit-side {
    position: sticky;
    top: 88px;
}
.audit-side-head { margin-bottom: 20px; }
.audit-timeline {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 0;
    position: relative;
}
.audit-timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--line);
}
.audit-timeline li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 12px 0;
    position: relative;
}
.atl-num {
    width: 36px; height: 36px;
    background: white;
    border: 2px solid var(--line);
    color: var(--brand-dark);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 1;
}
.audit-timeline li:first-child .atl-num { border-color: var(--brand); background: var(--brand-soft); }
.audit-timeline h4 {
    font-size: 0.9375rem;
    color: var(--ink);
    margin: 4px 0 4px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.audit-timeline p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* Included free box */
.audit-included {
    background: var(--brand-soft);
    border: 1px solid #a7f3d0;
    border-radius: var(--r-md);
    padding: 20px 22px;
}
.audit-included-head {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.audit-included ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.audit-included li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--ink);
    line-height: 1.5;
}
.audit-included li svg {
    flex-shrink: 0;
    color: var(--brand-dark);
    margin-top: 2px;
}

/* ─── Legacy agency 5-feature grid (no longer used; safe to delete) */
.agency-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px)  { .agency-features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .agency-features-grid { grid-template-columns: repeat(5, 1fr); } }
.agency-feature {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--shadow-xs);
    transition: all 200ms ease;
}
.agency-feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand);
}
.agency-feature-icon {
    width: 36px; height: 36px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.agency-feature h3 {
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.agency-feature p {
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
}
.agency-feature-tier {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Per-client maths (agencies §5.5)
   Worksheet-style: calculation laid out left, reasoning right.
   Cream paper feel, mono numerics, hairline rules — reads like a P&L. */
.maths-canvas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: stretch;
}
@media (min-width: 900px) {
    .maths-canvas {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 32px;
    }
}

/* The calculation block — looks like an accountant's worksheet */
.maths-calc {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 56px -24px rgba(15, 23, 42, 0.18),
        0 6px 16px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .maths-calc { padding: 40px 44px; } }
.maths-calc::before {
    /* faint grid texture, paper-like */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15,23,42,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,0.02) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    opacity: 0.6;
}
.maths-calc > * { position: relative; z-index: 1; }

.maths-calc-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.mcc-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.maths-calc-head h3 {
    font-size: 1.125rem;
    color: var(--ink);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Calculation lines */
.calc-list {
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 0;
}
.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    margin: 0;
}
.calc-row:last-child { border-bottom: 0; }
.calc-row.dim dt { color: var(--text-2); }
.calc-row dt {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink);
    font-weight: 500;
}
.calc-op {
    display: inline-block;
    font-family: var(--font-mono);
    color: var(--text-3);
    margin-right: 4px;
}
.calc-row dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.calc-row dd small {
    font-size: 0.6875rem;
    color: var(--text-3);
    font-weight: 500;
    margin-left: 2px;
}

/* The result moment — the answer */
.calc-result {
    padding-top: 8px;
    border-top: 2px solid var(--ink);
    margin-top: 8px;
}
.calc-result-num {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 8vw + 1rem, 6rem);
    font-weight: 700;
    color: var(--brand);
    line-height: 1;
    letter-spacing: -0.05em;
    margin-top: 20px;
    font-variant-numeric: tabular-nums;
}
.calc-result-num .cr-pct {
    color: var(--brand-dark);
    margin-left: 4px;
    font-weight: 500;
}
.calc-result-label {
    font-size: 0.75rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 8px;
}

/* Visual ratio bar */
.calc-bar {
    margin-top: 24px;
    height: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.calc-bar-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: 99px;
}
.calc-bar-legend {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.02em;
}
.calc-bar-legend .bl-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.calc-bar-legend .bl-dot.brand { background: var(--brand); }
.calc-bar-legend .bl-dot.dim   { background: var(--bg-soft); border: 1px solid var(--line-strong); }

/* The reasoning aside — sits next to the worksheet */
.maths-aside {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.82);
    border-radius: var(--r-xl);
    padding: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 768px) { .maths-aside { padding: 40px 44px; } }
.maths-aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(0, 179, 134, 0.22), transparent 65%);
    pointer-events: none;
}
.maths-aside > * { position: relative; z-index: 1; }
.maths-headline {
    font-family: var(--font);
    font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem);
    color: white !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 16px;
    text-wrap: balance;
}
.maths-aside p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0 0 20px;
}
.maths-aside .btn-outline {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
    align-self: flex-start;
}
.maths-aside .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: white;
}

/* ═════════════════════════════════════════════════════════
   PRICING SELECTOR — editorial design
   The audience tabs read as the section heading itself.
   The period toggle reads as prose below it.
   No pill bar. No card chrome. No widget.
   ═════════════════════════════════════════════════════════ */
.ps-selector {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
/* Standalone variant — used on /business + /agencies where the
   period toggle is the only thing above the grid. Needs extra
   bottom space so the "Most popular" badge (positioned at
   top: -12px on featured cards) doesn't overlap the toggle text. */
.ps-selector-standalone {
    margin-bottom: 28px;
}

/* Heading row — two display-sized tabs separated by a slash,
   with a sliding brand-green rule underneath the active one.
   Mobile: smaller type, tighter gap, allow wrap. */
.ps-headline {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0 0 14px;
    font-size: clamp(1.25rem, 1.6vw + 1rem, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    max-width: 100%;
}
@media (min-width: 640px) {
    .ps-headline { gap: 18px; margin-bottom: 22px; padding-bottom: 16px; }
}
.ps-aud {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text-3);
    cursor: pointer;
    transition: color 240ms ease;
    line-height: inherit;
    letter-spacing: inherit;
}
.ps-aud:hover { color: var(--text); }
.ps-aud.active { color: var(--ink); }

/* Forward-slash divider between tabs — soft + thin */
.ps-headline-sep {
    color: var(--line-strong);
    font-weight: 300;
    font-size: 0.85em;
    user-select: none;
}

/* Sliding indicator — sits under the active tab on desktop where the
   tabs fit on a single line. JS positions it via getBoundingClientRect. */
.ps-headline-rule {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--brand);
    border-radius: 3px;
    transition:
        left 320ms cubic-bezier(.4,.0,.2,1),
        width 320ms cubic-bezier(.4,.0,.2,1);
    pointer-events: none;
}

/* On mobile, tabs wrap to two lines so the sliding rule would mis-align
   (it positions at the wrapper bottom = second line). Hide the sliding
   rule and use per-tab underlines instead. */
@media (max-width: 640px) {
    .ps-headline-rule { display: none; }
    .ps-aud {
        position: relative;
        padding-bottom: 6px;
    }
    .ps-aud.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 64%;
        height: 3px;
        background: var(--brand);
        border-radius: 3px;
    }
    /* Hide the slash separator when tabs wrap — looks awkward on mobile */
    .ps-headline-sep { display: none; }
    /* Stack tabs vertically for clear hierarchy on narrow screens */
    .ps-headline {
        flex-direction: column;
        gap: 18px;
        padding-bottom: 4px;
    }
}

/* Period row — prose with two interactive words.
   Reads: "Show prices billed monthly or annually, save 20%". */
.ps-period {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto;
    font-size: 0.9375rem;
    color: var(--text-2);
    line-height: 1.5;
}
.ps-period-lead { color: var(--text-2); }
.ps-period-or { color: var(--text-3); padding: 0 2px; }

.ps-period-opt {
    background: transparent;
    border: 0;
    padding: 2px 2px 4px;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    position: relative;
    transition: color 200ms ease;
    line-height: 1.4;
}
.ps-period-opt:hover { color: var(--ink); }
.ps-period-opt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(.4,.0,.2,1);
}
.ps-period-opt.active {
    color: var(--ink);
}
.ps-period-opt.active::after {
    transform: scaleX(1);
}

.ps-period-save {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin-left: 8px;
    line-height: 1.2;
    border: 1px solid #a7f3d0;
}

/* Legacy classes — keep CSS for old .pc-* until refactor sweep removes them */
.pc-bar {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 6px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    margin: 0 auto;
}
.pc-bar > * { flex-shrink: 0; }

/* Wrap the .pc-bar in flex-center, since it's inline-flex */
section > .container:has(.pc-bar) > .pc-bar {
    /* fallback - container already flexes properly via parent */
}

/* Segmented audience chip — tight, no min-widths */
.pc-segmented {
    position: relative;
    display: inline-flex;
    background: var(--bg-alt);
    border-radius: 999px;
    padding: 3px;
}
.pc-seg {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    padding: 8px 16px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: -0.005em;
    border-radius: 999px;
    cursor: pointer;
    transition: color 200ms ease;
    white-space: nowrap;
}
.pc-seg:hover { color: var(--ink); }
.pc-seg.active { color: white; }
.pc-seg-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    width: calc(50% - 3px);
    background: var(--brand);
    border-radius: 999px;
    box-shadow: 0 4px 10px -4px rgba(0, 179, 134, 0.5);
    transition: transform 280ms cubic-bezier(.4,.0,.2,1);
    z-index: 0;
}
.pc-segmented[data-audience="partner"] .pc-seg-indicator {
    transform: translateX(100%);
}

/* Thin vertical separator between the two halves */
.pc-bar::before {
    content: '';
    /* injected via separator element approach below */
}

/* Billing toggle: inline, compact */
.pc-bill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
}
.pc-bill-label {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    transition: color 200ms ease;
    line-height: 1;
}
.pc-bill-label:hover { color: var(--ink); }
.pc-bill-label.active { color: var(--ink); }

/* Compact iOS toggle: 40×22 pill with 16px knob */
.pc-bill-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: background 220ms ease, border-color 220ms ease;
    flex-shrink: 0;
}
.pc-bill-toggle[aria-checked="true"] {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 3px 8px -3px rgba(0, 179, 134, 0.5);
}
.pc-bill-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    transition: transform 260ms cubic-bezier(.4,.0,.2,1);
}
.pc-bill-toggle[aria-checked="true"] .pc-bill-knob {
    transform: translateX(18px);
}

.pc-bill-save {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* Wrap container — center the inline-flex .pc-bar */
.pc-bar-wrap {
    display: flex;
    justify-content: center;
}

/* Tier grids container — only one shows at a time */
.pricing-tiers {
    margin-top: 40px;
}
.pricing-tiers[data-audience="sme"] .pricing-grid-partner { display: none; }
.pricing-tiers[data-audience="partner"] .pricing-grid-sme { display: none; }

/* ─── Pricing period toggle (pricing.php) ──────────────── */
.pricing-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 4px;
    margin: 0 auto 40px;
    gap: 4px;
}
.pricing-toggle-wrap {
    display: flex;
    justify-content: center;
}
.pricing-toggle button {
    background: transparent;
    border: 0;
    padding: 10px 20px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-2);
    border-radius: 99px;
    cursor: pointer;
    transition: all 200ms ease;
    display: inline-flex; align-items: center; gap: 8px;
}
.pricing-toggle button:hover { color: var(--ink); }
.pricing-toggle button.active {
    background: white;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.pricing-toggle button .save-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pricing-toggle button.active .save-pill { background: var(--brand); color: white; }

/* Show / hide prices based on toggle state */
.pricing-grid[data-period="monthly"] .price-annual { display: none; }
.pricing-grid[data-period="annual"]  .price-monthly { display: none; }
/* Period toggle — fade + slide the newly-visible price into place.
   The keyframe fires whenever the parent's data-period changes because
   the selector match flips from one price element to the other. */
.pricing-grid[data-period="monthly"] .price-monthly,
.pricing-grid[data-period="annual"] .price-annual {
    animation: price-roll 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: left center;
}
@keyframes price-roll {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.price-annual small,
.price-monthly small {
    font-size: 0.875rem;
    color: var(--text-2);
    font-weight: 500;
}
.price-sub {
    display: inline-block;
    color: var(--brand-dark);
    font-size: 0.75rem;
    margin-top: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--brand-soft);
    padding: 3px 9px;
    border-radius: 99px;
    line-height: 1.4;
}
.price-sub + .price-sub { margin-left: 6px; }

/* Reduced-motion respect for pricing transitions */
@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .pricing-grid[data-period="monthly"] .price-monthly,
    .pricing-grid[data-period="annual"] .price-annual {
        transition: none !important;
        animation: none !important;
    }
    .pricing-card:hover { transform: none !important; }
}

/* ─── Founder credentials chips (about.php) ──────────────── */
.founder-credentials {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 12px 0 20px;
}
.founder-credentials span {
    font-size: 0.75rem;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--text);
    background: white;
}

/* ─── Utility ─────────────────────────────────────────────── */
.mono-label { display: none; } /* legacy class, hidden in new design */
.text-mono { font-family: var(--font-mono); }