/* ============================================================
   PRICING PAGE — "Warm Editorial Authority" Design
   GrantCompass /pricing — Premium Subscription Plans

   Uses design tokens from main.css (:root variables).
   This file handles all pricing-specific styles with the same
   warm, editorial color palette as explore.css.
   ============================================================ */

:root {
    /* Layout */
    --pricing-max-width: 1100px;
    --pricing-navbar-height: 72px;

    /* Typography */
    --pricing-font-display: 'Fraunces', 'Georgia', serif;
    --pricing-font-body: 'Plus Jakarta Sans', sans-serif;
    --pricing-font-data: 'IBM Plex Mono', 'SF Mono', monospace;

    /* Warm palette */
    --cream: #faf6f0;
    --cream-dark: #f2ebe0;
    --paper: #fffcf7;
    --ink: #1a1714;
    --ink-secondary: #5c5549;
    --ink-muted: #6f665a;        /* was #9a9085: 3.06:1 on white, 2.65:1 on cream-dark, under the plan prices and the guarantee line (axe, 2026-10-17). #6f665a = /explore's fix, 5.2:1 */
    --ink-faint: #c7bfb4;

    /* Accent colors */
    --accent-sienna: #c4532b;
    --accent-forest: #2d6a4f;
    --accent-forest-light: rgba(45, 106, 79, 0.08);
    --accent-forest-deep: #1a4731;
    --accent-gold: #b8860b;
    --accent-peach: #e8a87c;

    /* Shadows */
    --pricing-shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.04);
    --pricing-shadow-md: 0 4px 12px rgba(26, 23, 20, 0.06);
    --pricing-shadow-lg: 0 12px 40px rgba(26, 23, 20, 0.08);

    /* Radii */
    --pricing-radius: 10px;
    --pricing-radius-lg: 16px;
}


/* ============================================================
   0. BODY OVERRIDES & DECORATIVE ELEMENTS
   ============================================================ */

body:has(.pricing-hero) {
    background: var(--cream);
}

/* Subtle grain texture overlay */
body:has(.pricing-hero)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */

.pricing-hero {
    padding: calc(var(--pricing-navbar-height) + 48px) 24px 100px;
    background: var(--accent-forest-deep);
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: pricingSlideUp 0.6s ease-out;
}

/* Grain texture inside hero */
.pricing-hero__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    z-index: 1;
}

/* Subtle radial glow */
.pricing-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(232, 168, 124, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.pricing-hero__inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.pricing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.pricing-hero h1 {
    font-family: var(--pricing-font-display);
    font-size: 3.4rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.pricing-hero h1 em {
    font-style: italic;
    font-weight: 300;
    color: var(--accent-peach);
}

.pricing-hero__subtitle {
    font-family: var(--pricing-font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.65;
}


/* ============================================================
   2. PLAN CARDS SECTION
   ============================================================ */

.pricing-plans {
    position: relative;
    z-index: 2;
    max-width: 840px;
    margin: -60px auto 0;
    padding: 0 24px 80px;
    display: flex;
    gap: 24px;
    align-items: stretch;
    animation: pricingSlideUp 0.6s ease-out 0.15s both;
}

.pricing-card {
    flex: 1;
    background: var(--paper);
    border-radius: var(--pricing-radius-lg);
    box-shadow: var(--pricing-shadow-lg);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(26, 23, 20, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(26, 23, 20, 0.10);
}

.pricing-card--popular {
    border: 2px solid var(--accent-forest);
    transform: scale(1.02);
    z-index: 1;
}

.pricing-card--popular:hover {
    transform: scale(1.02) translateY(-4px);
}

/* Badge */
.pricing-badge {
    position: absolute;
    top: -14px;
    right: 24px;
    background: var(--accent-forest);
    color: var(--cream);
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 100px;
}

.pricing-card__label {
    font-family: var(--pricing-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-bottom: 12px;
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.pricing-card__price-amount {
    font-family: var(--pricing-font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}

.pricing-card__price-period {
    font-family: var(--pricing-font-body);
    font-size: 1rem;
    color: var(--ink-muted);
    font-weight: 400;
}

.pricing-card__subtext {
    font-family: var(--pricing-font-body);
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin-bottom: 28px;
    line-height: 1.5;
}

.pricing-card__subtext strong {
    color: var(--accent-forest);
    font-weight: 600;
}

/* CTA Buttons */
.pricing-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 28px;
    border-radius: var(--pricing-radius);
    font-family: var(--pricing-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 28px;
    border: none;
}

.pricing-card__cta--outline {
    background: transparent;
    border: 2px solid var(--accent-forest);
    color: var(--accent-forest);
}

.pricing-card__cta--outline:hover {
    background: var(--accent-forest-light);
}

.pricing-card__cta--solid {
    background: var(--accent-forest);
    color: var(--cream);
    border: 2px solid var(--accent-forest);
}

.pricing-card__cta--solid:hover {
    background: var(--accent-forest-deep);
    border-color: var(--accent-forest-deep);
}

/* Feature list in cards */
.pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--pricing-font-body);
    font-size: 0.88rem;
    color: var(--ink-secondary);
    line-height: 1.5;
}

.pricing-card__features li svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--accent-forest);
    margin-top: 1px;
}

/* Outcome group section headers within feature list */
.pricing-card__features-section {
    font-family: var(--pricing-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ink, #1C1917);
    margin-top: 0.5rem;
    list-style: none;
    display: block;
}
.pricing-card__features-section::before {
    content: none;
}
.pricing-card__features li:first-child.pricing-card__features-section {
    margin-top: 0;
}

/* "then $29/mo" — visible secondary price, not fine print */
.pricing-card__price-then {
    font-family: var(--pricing-font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink-secondary);
    margin-bottom: 24px;
}

/* Trust signals row (consolidated) */
.pricing-card__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--pricing-font-body);
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-bottom: 0;
}

/* Hero feature callout (Funding Roadmap) */
.pricing-card__feature-hero {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--accent-forest-light, #f0fdf4);
    border-radius: 10px;
    margin-top: 24px;
    margin-bottom: 16px;
    border-top: 1px solid #e5e2dc;
    padding-top: 24px;
}
.pricing-card__feature-hero-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-forest);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pricing-card__feature-hero strong {
    display: block;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.3;
}
.pricing-card__feature-hero span {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin-top: 2px;
}

/* Annual card "includes" note */
.pricing-card__annual-note {
    font-family: var(--pricing-font-body);
    font-size: 0.85rem;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.5;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e2dc;
}


/* ============================================================
   2b. ROADMAP FEATURE CALLOUT
   ============================================================ */

.pricing-roadmap-callout {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #0f2540 0%, #1a3654 50%, #0f2540 100%);
    padding: 80px 24px;
    overflow: hidden;
}

/* Grain overlay */
.pricing-roadmap-callout__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    z-index: 1;
}

.pricing-roadmap-callout__inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Badge */
.pricing-roadmap-callout__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 100px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #34d399;
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

/* Title */
.pricing-roadmap-callout__title {
    font-family: var(--pricing-font-display);
    font-size: 2.6rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

/* Description */
.pricing-roadmap-callout__desc {
    font-family: var(--pricing-font-body);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 1.7;
}

/* Stats row */
.pricing-roadmap-callout__stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
}

.pricing-roadmap-callout__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pricing-roadmap-callout__stat-number {
    font-family: var(--pricing-font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.pricing-roadmap-callout__stat-label {
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

/* Two-tier breakdown */
.pricing-roadmap-callout__tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 48px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-roadmap-callout__tier {
    border-radius: 12px;
    padding: 28px 24px;
    text-align: left;
}

.pricing-roadmap-callout__tier--free {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-roadmap-callout__tier--premium {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.pricing-roadmap-callout__tier-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--pricing-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pricing-roadmap-callout__tier--free .pricing-roadmap-callout__tier-header {
    color: rgba(255, 255, 255, 0.6);
}

.pricing-roadmap-callout__tier--premium .pricing-roadmap-callout__tier-header {
    color: #34d399;
}

.pricing-roadmap-callout__tier-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pricing-roadmap-callout__tier-list li {
    font-family: var(--pricing-font-body);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}

.pricing-roadmap-callout__tier-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pricing-roadmap-callout__tier--free .pricing-roadmap-callout__tier-list li::before {
    background: rgba(255, 255, 255, 0.3);
}

.pricing-roadmap-callout__tier--premium .pricing-roadmap-callout__tier-list li::before {
    background: #34d399;
}

/* CTA button */
.pricing-roadmap-callout__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 10px;
    background: #10b981;
    color: #fff;
    font-family: var(--pricing-font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.pricing-roadmap-callout__cta:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.pricing-roadmap-callout__cta:focus-visible {
    outline: 2px solid #34d399;
    outline-offset: 3px;
}

/* Table partial label */
.pricing-partial {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* Table check with label */
.pricing-check-label {
    color: var(--accent-forest);
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}


/* ============================================================
   3. SECTION HEADINGS (shared)
   ============================================================ */

.pricing-section {
    max-width: var(--pricing-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.pricing-section__heading {
    font-family: var(--pricing-font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 48px;
    line-height: 1.2;
}

.pricing-section__heading em {
    font-style: italic;
    font-weight: 300;
}


/* ============================================================
   4. FEATURE COMPARISON TABLE
   ============================================================ */

.pricing-comparison {
    padding-top: 80px;
    padding-bottom: 80px;
}
@media (max-width: 768px) {
    .pricing-comparison { padding-top: 56px; padding-bottom: 56px; }
}

.pricing-table-wrap {
    background: var(--paper);
    border-radius: var(--pricing-radius-lg);
    box-shadow: var(--pricing-shadow-md);
    overflow: hidden;
    border: 1px solid rgba(26, 23, 20, 0.06);
}

.pricing-table-mobile-labels {
    display: none;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pricing-font-body);
}

.pricing-table thead th {
    padding: 20px 24px;
    font-family: var(--pricing-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    border-bottom: 1px solid rgba(26, 23, 20, 0.08);
    text-align: left;
}

.pricing-table thead th:nth-child(2),
.pricing-table thead th:nth-child(3) {
    text-align: center;
    width: 120px;
}

.pricing-table thead th:nth-child(3) {
    color: var(--accent-forest);
}

.pricing-table tbody tr {
    transition: background 0.15s ease;
}

.pricing-table tbody tr:nth-child(even) {
    background: var(--cream);
}

.pricing-table tbody tr:hover {
    background: var(--accent-forest-light);
}

.pricing-table tbody td {
    padding: 14px 24px;
    font-size: 0.92rem;
    color: var(--ink-secondary);
    border-bottom: 1px solid rgba(26, 23, 20, 0.04);
}

.pricing-table tbody td:nth-child(2),
.pricing-table tbody td:nth-child(3) {
    text-align: center;
    font-size: 1rem;
}

/* Checkmark */
.pricing-check {
    color: var(--accent-forest);
    font-weight: 700;
    font-size: 1.15rem;
}

/* Dash */
.pricing-dash {
    color: var(--ink-faint);
    font-size: 1.15rem;
}

/* Premium-only row highlight */
.pricing-table tbody tr.pricing-table__premium-row td {
    font-weight: 500;
    color: var(--ink);
}

/* Section headers in comparison table */
.pricing-table__section-header td {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 1.5rem 0 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}


/* ============================================================
   5. FEATURE SPOTLIGHT CARDS
   ============================================================ */

.pricing-spotlights {
    padding-top: 80px;
    padding-bottom: 80px;
}
@media (max-width: 768px) {
    .pricing-spotlights { padding-top: 56px; padding-bottom: 56px; }
}

/* Stats strip footnote (May 6 2026) — for substantiation of the 3x claim */
.pricing-stats__note {
    max-width: var(--pricing-max-width, 1100px);
    margin: 14px auto 0;
    padding: 0 24px;
    font-size: 0.74rem;
    color: var(--ink-2, #57534E);
    text-align: center;
    line-height: 1.5;
    font-style: italic;
}
.pricing-stats__asterisk {
    font-size: 0.55em;
    vertical-align: super;
    font-style: normal;
    color: var(--ink-2, #57534E);
    margin-left: 1px;
}

/* pc-playbook bridge — links the $19 tile to Premium upsell (May 6 2026) */
.pc-playbook__bridge {
    grid-column: 1 / -1;
    padding: 14px 18px;
    margin: 18px 4px 0;
    background: linear-gradient(135deg, rgba(196, 83, 43, 0.07), rgba(31, 58, 46, 0.04));
    border-radius: 6px;
    border-left: 3px solid var(--sienna, #C4532B);
    font-size: 0.9rem;
    color: var(--ink, #1a1714);
    text-align: center;
    line-height: 1.55;
}
.pc-playbook__bridge a {
    color: var(--forest, #1F3A2E);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pc-playbook__bridge a:hover {
    color: var(--sienna, #C4532B);
}

.pricing-spotlights__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pricing-spotlight {
    background: var(--paper);
    border-radius: var(--pricing-radius-lg);
    box-shadow: var(--pricing-shadow-sm);
    border: 1px solid rgba(26, 23, 20, 0.06);
    padding: 36px 32px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-spotlight:hover {
    transform: translateY(-4px);
    box-shadow: var(--pricing-shadow-md);
}

.pricing-spotlight__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-forest-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pricing-spotlight__icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-forest);
    stroke-width: 1.5;
}

.pricing-spotlight h3 {
    font-family: var(--pricing-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.pricing-spotlight p {
    font-family: var(--pricing-font-body);
    font-size: 0.92rem;
    color: var(--ink-secondary);
    line-height: 1.65;
}


/* ============================================================
   6. STATS STRIP
   ============================================================ */

.pricing-stats {
    background: var(--cream-dark);
    padding: 40px 24px;
    margin-bottom: 80px;
}

.pricing-stats__inner {
    max-width: var(--pricing-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.pricing-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    gap: 4px;
    text-align: center;
}

.pricing-stats__number {
    font-family: var(--pricing-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.pricing-stats__label {
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.pricing-stats__divider {
    width: 1px;
    height: 36px;
    background: var(--ink-faint);
    opacity: 0.4;
    flex-shrink: 0;
}


/* ============================================================
   6b. TESTIMONIALS
   ============================================================ */

.pricing-testimonials {
    padding-bottom: 80px;
}

/* ============================================================
   7. FAQ ACCORDION
   ============================================================ */

.pricing-faq {
    padding-bottom: 80px;
}

.pricing-faq__list {
    max-width: 740px;
    margin: 0 auto;
}

.pricing-faq__item {
    border-bottom: 1px solid rgba(26, 23, 20, 0.08);
}

.pricing-faq__item:first-child {
    border-top: 1px solid rgba(26, 23, 20, 0.08);
}

.pricing-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--pricing-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    line-height: 1.5;
    gap: 16px;
    transition: color 0.2s ease;
}

.pricing-faq__question:hover {
    color: var(--accent-forest);
}

.pricing-faq__question:focus-visible,
.pricing-card__cta:focus-visible,
.pricing-final-cta__btn:focus-visible {
    outline: 2px solid var(--accent-forest);
    outline-offset: 2px;
    border-radius: 4px;
}

.pricing-faq__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    color: var(--ink-muted);
}

.pricing-faq__item.is-open .pricing-faq__icon {
    transform: rotate(45deg);
    color: var(--accent-forest);
}

.pricing-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.pricing-faq__item.is-open .pricing-faq__answer {
    max-height: 400px;
}

.pricing-faq__answer p {
    font-family: var(--pricing-font-body);
    font-size: 0.92rem;
    color: var(--ink-secondary);
    line-height: 1.7;
    padding-bottom: 20px;
}


/* ============================================================
   8. FINAL CTA SECTION
   ============================================================ */

.pricing-final-cta {
    background: var(--cream-dark);
    padding: 80px 24px;
    text-align: center;
}

.pricing-final-cta__inner {
    max-width: 600px;
    margin: 0 auto;
}

.pricing-final-cta h2 {
    font-family: var(--pricing-font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.pricing-final-cta__subtitle {
    font-family: var(--pricing-font-body);
    font-size: 1.05rem;
    color: var(--ink-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.pricing-final-cta__buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pricing-final-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: var(--pricing-radius);
    font-family: var(--pricing-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.pricing-final-cta__btn--outline {
    background: transparent;
    border: 2px solid var(--accent-forest);
    color: var(--accent-forest);
}

.pricing-final-cta__btn--outline:hover {
    background: var(--accent-forest-light);
}

.pricing-final-cta__btn--solid {
    background: var(--accent-forest);
    color: var(--cream);
    border: 2px solid var(--accent-forest);
}

.pricing-final-cta__btn--solid:hover {
    background: var(--accent-forest-deep);
    border-color: var(--accent-forest-deep);
}

.pricing-final-cta__fine-print {
    font-family: var(--pricing-font-body);
    font-size: 0.82rem;
    color: var(--ink-muted);
}


/* ============================================================
   9. ANIMATIONS
   ============================================================ */

@keyframes pricingSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-hero,
    .pricing-plans,
    .pricing-spotlight,
    .pricing-card {
        animation: none !important;
        transform: none;
    }

    .pricing-card--popular {
        transform: scale(1.02);
    }

    * {
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   10. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet: 768-1023px */
@media (max-width: 1023px) {
    .pricing-hero h1 {
        font-size: 2.6rem;
    }

    .pricing-roadmap-callout__title {
        font-size: 2rem;
    }

    .pricing-roadmap-callout__stats {
        gap: 32px;
    }

    .pricing-spotlights__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .pricing-stats__inner {
        flex-wrap: wrap;
        gap: 20px;
    }

    .pricing-stats__divider {
        display: none;
    }

    .pricing-stats__item {
        padding: 0 20px;
    }
}

/* Mid-table mobile CTA — hidden on desktop, surfaces after premium
   value is revealed on mobile (table is ~4 screens tall on iPhone) */
.pricing-table__mobile-cta { display: none; }
@media (max-width: 767px) {
    .pricing-table__mobile-cta { display: table-row; }
    .pricing-table__mobile-cta td {
        padding: 24px 16px 20px !important;
        text-align: center;
        background: var(--cream);
        border-top: 2px solid var(--accent-forest-light);
        border-bottom: 2px solid var(--accent-forest-light);
    }
    .pricing-table__mobile-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        padding: 0.9375rem 1.25rem;
        background: var(--accent-sienna);
        color: #fff;
        font-family: var(--pricing-font-body);
        font-size: 0.9375rem;
        font-weight: 600;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(196, 83, 43, 0.25),
                    0 8px 18px -8px rgba(196, 83, 43, 0.45);
    }
    .pricing-table__mobile-cta-note {
        display: block;
        margin-top: 10px;
        font-family: var(--pricing-font-body);
        font-size: 0.75rem;
        color: var(--ink-muted);
    }
}

/* Phone: < 768px */
@media (max-width: 767px) {
    .pricing-hero {
        padding-top: calc(var(--pricing-navbar-height) + 24px);
        padding-bottom: 64px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .pricing-hero h1 {
        font-size: 2rem;
    }

    .pricing-hero__subtitle {
        font-size: 0.95rem;
    }

    .pricing-hero__eyebrow {
        font-size: 0.65rem;
        padding: 5px 12px;
        margin-bottom: 16px;
    }

    /* Stack cards vertically */
    .pricing-plans {
        flex-direction: column;
        margin-top: -50px;
        padding: 0 16px 60px;
    }

    .pricing-card {
        padding: 32px 24px;
    }

    .pricing-card--popular {
        transform: none;
        order: -1;
    }

    .pricing-card--popular:hover {
        transform: translateY(-4px);
    }

    /* Table responsive — stacked flex layout */
    .pricing-table-mobile-labels {
        display: flex;
        justify-content: space-between;
        padding: 10px 16px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ink-muted);
        border-bottom: 1px solid rgba(26, 23, 20, 0.08);
    }

    .pricing-table-mobile-labels span:first-child {
        flex: 1;
    }

    .pricing-table-mobile-labels span:nth-child(2),
    .pricing-table-mobile-labels span:nth-child(3) {
        width: 48px;
        text-align: center;
    }

    .pricing-table thead {
        display: none;
    }

    .pricing-table tr {
        display: flex;
        align-items: center;
        padding: 8px 16px;
    }

    .pricing-table td:first-child {
        flex: 1;
        font-size: 0.85rem;
    }

    .pricing-table td:nth-child(2),
    .pricing-table td:nth-child(3) {
        min-width: 48px;
        width: auto;
        max-width: 38%;
        text-align: center;
        flex-shrink: 0;
    }
    .pricing-table .pricing-check-label,
    .pricing-table .pricing-partial {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .pricing-table__section-header td {
        flex: none;
        width: 100%;
    }

    /* Roadmap callout */
    .pricing-roadmap-callout {
        padding: 56px 16px;
    }

    .pricing-roadmap-callout__title {
        font-size: 1.7rem;
    }

    .pricing-roadmap-callout__desc {
        font-size: 0.95rem;
        margin-bottom: 36px;
    }

    .pricing-roadmap-callout__stats {
        gap: 24px;
        margin-bottom: 36px;
    }

    .pricing-roadmap-callout__stat-number {
        font-size: 1.6rem;
    }

    .pricing-roadmap-callout__tiers {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }

    .pricing-roadmap-callout__tier {
        padding: 24px 20px;
    }

    .pricing-roadmap-callout__cta {
        width: 100%;
        padding: 16px 28px;
    }

    /* Section headings */
    .pricing-section__heading {
        font-size: 1.6rem;
        margin-bottom: 32px;
    }

    /* Spotlights */
    .pricing-spotlights__grid {
        grid-template-columns: 1fr;
    }

    .pricing-spotlight {
        padding: 28px 24px;
    }

    /* Stats strip */
    .pricing-stats {
        padding: 32px 16px;
    }

    .pricing-stats__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        justify-items: center;
    }

    .pricing-stats__divider {
        display: none;
    }

    .pricing-stats__item {
        padding: 0;
    }

    /* Testimonials */
    .pricing-testimonials > div {
        grid-template-columns: 1fr !important;
    }

    /* FAQ */
    .pricing-faq__question {
        font-size: 0.92rem;
        padding: 16px 0;
    }

    .pricing-faq__answer p {
        font-size: 0.94rem;
    }

    /* Final CTA */
    .pricing-final-cta {
        padding: 60px 16px;
    }

    .pricing-final-cta h2 {
        font-size: 1.6rem;
    }

    .pricing-final-cta__buttons {
        flex-direction: column;
    }

    .pricing-final-cta__btn {
        width: 100%;
    }
}

/* Small phone: < 420px */
@media (max-width: 419px) {
    .pricing-hero h1 {
        font-size: 1.7rem;
    }

    .pricing-card__price-amount {
        font-size: 2.4rem;
    }

    .pricing-badge {
        font-size: 0.65rem;
        padding: 5px 12px;
        top: -12px;
        right: 16px;
    }
}


/* ============================================================
   11. NAV AUTH BUTTONS (pricing page override)
   ============================================================ */

/* Desktop auth buttons in navbar */
.pricing-nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

.pricing-nav-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 100px;
    font-family: var(--pricing-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
    line-height: 1.5;
}

.pricing-nav-auth__btn--secondary {
    background: transparent;
    color: var(--ink-secondary);
}

.pricing-nav-auth__btn--secondary:hover {
    color: var(--accent-forest);
    background: var(--accent-forest-light);
}

.pricing-nav-auth__btn--primary {
    background: var(--accent-forest);
    color: var(--cream);
}

.pricing-nav-auth__btn--primary:hover {
    background: var(--accent-forest-deep);
}

.pricing-nav-auth__btn:focus-visible {
    outline: 2px solid var(--accent-forest);
    outline-offset: 2px;
}

/* Mobile auth buttons in drawer */
.pricing-mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 4px;
}

.pricing-mobile-auth__btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border-radius: var(--pricing-radius);
    font-family: var(--pricing-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.pricing-mobile-auth__btn--primary {
    background: var(--accent-forest);
    color: var(--cream);
}

.pricing-mobile-auth__btn--primary:hover {
    background: var(--accent-forest-deep);
}

.pricing-mobile-auth__btn--secondary {
    background: transparent;
    color: var(--ink-secondary);
    border: 2px solid rgba(26, 23, 20, 0.12);
}

.pricing-mobile-auth__btn--secondary:hover {
    border-color: var(--accent-forest);
    color: var(--accent-forest);
}

/* Hide desktop auth on mobile, show mobile auth in drawer */
@media (max-width: 767px) {
    .pricing-nav-auth {
        display: none;
    }
}

@media (min-width: 768px) {
    .pricing-mobile-auth {
        display: none;
    }
}


/* ============================================================
   12. PRINT STYLES
   ============================================================ */

@media print {
    .pricing-hero,
    .pricing-hero__grain,
    .pricing-roadmap-callout__grain,
    .navbar,
    .footer,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none;
    }

    body:has(.pricing-hero)::after {
        display: none;
    }
}




/* ============================================================
   PRICING CARD v3 (Apr 16, 2026) — Single card that overlaps the
   dark-green hero, classic pattern (like original .pricing-plans
   with -60px margin). Replaces the v2 split editorial layout that
   departed too far from the rest of the site aesthetic.
   ============================================================ */

.pc-wrap {
    max-width: 500px;
    margin: -64px auto 0;
    padding: 0 24px 80px;
    position: relative;
    z-index: 2;
    animation: pricingSlideUp 0.6s ease-out 0.15s both;
}

.pc-card {
    background: var(--paper);
    border-radius: 16px;
    padding: 2rem 1.875rem 1.625rem;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04),
                0 24px 60px -22px rgba(26, 23, 20, 0.22);
    position: relative;
    border: 1px solid rgba(26, 23, 20, 0.06);
}

/* Top-edge pill badge (matches original .pricing-badge style) */
.pc-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-sienna);
    color: var(--cream);
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 16px;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(196, 83, 43, 0.45);
    z-index: 3;
}

/* Toggle */
.pc-card__toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cream);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--cream-dark);
}
.pc-card__toggle-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--pricing-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-secondary);
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    white-space: nowrap;
    min-height: 44px; /* V1.1 Fix #6 (WCAG 2.5.5 — was 32.5px) */
}
.pc-card__toggle-btn.is-active {
    background: var(--ink);
    color: #fff;
}
.pc-card__toggle-btn:focus-visible {
    outline: 2px solid var(--accent-forest);
    outline-offset: 2px;
}
.pc-card__cta:focus-visible {
    outline: 2px solid var(--accent-forest);
    outline-offset: 3px;
}
.pc-card__toggle-save {
    font-family: var(--pricing-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-forest-light);
    color: var(--accent-forest);
}
.pc-card__toggle-btn.is-active .pc-card__toggle-save {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Label, price */
.pc-card__label {
    font-family: var(--pricing-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.625rem;
}
.pc-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
    color: var(--ink);
}
.pc-card__price-prefix {
    font-family: var(--pricing-font-display);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.5rem;
    color: var(--ink-secondary);
    font-variation-settings: 'opsz' 72;
}
.pc-card__price-amount {
    font-family: var(--pricing-font-display);
    font-size: 3.25rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variation-settings: 'opsz' 144;
}
.pc-card__price-period {
    font-family: var(--pricing-font-body);
    font-size: 0.9375rem;
    color: var(--ink-secondary);
    margin-left: 0.25rem;
}
.pc-card__price-note {
    font-family: var(--pricing-font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin: 0 0 1.125rem;
}

/* Trust callout */
.pc-card__callout {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--accent-forest-light);
    border-radius: 10px;
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
}
.pc-card__callout-icon {
    width: 28px;
    height: 28px;
    background: var(--accent-forest);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.pc-card__callout-icon svg { width: 14px; height: 14px; }
.pc-card__callout strong {
    display: block;
    font-family: var(--pricing-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1px;
}
.pc-card__callout span {
    display: block;
    font-family: var(--pricing-font-body);
    font-size: 0.75rem;
    color: var(--ink-secondary);
}

/* Primary CTA */
.pc-card__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.9375rem 1.25rem;
    background: var(--accent-sienna);
    color: #fff;
    font-family: var(--pricing-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 180ms, transform 180ms, box-shadow 180ms;
    box-shadow: 0 1px 2px rgba(196, 83, 43, 0.25),
                0 8px 18px -8px rgba(196, 83, 43, 0.45);
}
.pc-card__cta svg { width: 14px; height: 14px; }
.pc-card__cta:hover {
    background: #a34525;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(196, 83, 43, 0.3),
                0 10px 22px -6px rgba(196, 83, 43, 0.5);
}
.pc-card__cta:active { transform: translateY(0); }

.pc-card__cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.625rem 0 0;
    font-family: var(--pricing-font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
}
.pc-card__cta-trust span[aria-hidden] { opacity: 0.4; }
.pc-card__cta-trust-mbg {
    color: var(--accent-sienna);
    font-weight: 600;
    text-decoration: none;
}
.pc-card__cta-trust-mbg:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Features — concise one-row bullets */
.pc-card__features {
    margin-top: 1.375rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(26, 23, 20, 0.08);
}
.pc-card__features-label {
    font-family: var(--pricing-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.875rem;
}
.pc-card__features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5625rem;
}
.pc-card__features li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-family: var(--pricing-font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ink-secondary);
}
.pc-card__features li > svg {
    width: 14px;
    height: 14px;
    color: var(--accent-forest);
    flex-shrink: 0;
}
.pc-card__features li strong {
    color: var(--ink);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 600px) {
    .pc-wrap {
        margin-top: -52px;
        padding: 0 16px 60px;
    }
    .pc-card {
        padding: 1.75rem 1.375rem 1.375rem;
    }
    .pc-card__price-amount { font-size: 2.875rem; }
    .pc-card__badge {
        font-size: 0.65rem;
        padding: 5px 14px;
    }
}

/* ============================================================
   PER-GRANT PLAYBOOK TILE (Apr 22 2026) — Pay-as-you-go $19
   option that sits below the main subscription card. Visually
   lighter than .pc-card so the subscription stays the primary
   surface, but a clear parallel for users who aren't ready for
   recurring billing.
   ============================================================ */

.pc-playbook-wrap {
    max-width: 760px;
    margin: 16px auto 0;
    padding: 0 24px 48px;
    position: relative;
    z-index: 2;
}

.pc-playbook {
    background: var(--cream);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: center;
    border: 1px solid rgba(26, 23, 20, 0.08);
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.03),
                0 12px 32px -18px rgba(26, 23, 20, 0.14);
}

.pc-playbook__content {
    min-width: 0;
}

.pc-playbook__eyebrow {
    font-family: var(--pricing-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-sienna);
    margin-bottom: 0.5rem;
}

.pc-playbook__title {
    font-family: var(--pricing-font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.625rem;
    letter-spacing: -0.01em;
}

.pc-playbook__desc {
    font-family: var(--pricing-font-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-secondary);
    margin: 0 0 1rem;
}

.pc-playbook__includes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.pc-playbook__includes li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: var(--pricing-font-body);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-secondary);
}

.pc-playbook__includes li > svg {
    width: 14px;
    height: 14px;
    color: var(--accent-forest);
    flex-shrink: 0;
    margin-top: 3px;
}

/* Aside: price + CTA */
.pc-playbook__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: var(--paper);
    border-radius: 12px;
    border: 1px solid rgba(26, 23, 20, 0.08);
}

.pc-playbook__price {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    color: var(--ink);
}

.pc-playbook__price-prefix {
    font-family: var(--pricing-font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.5rem;
    color: var(--ink-secondary);
}

.pc-playbook__price-amount {
    font-family: var(--pricing-font-display);
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.pc-playbook__price-period {
    font-family: var(--pricing-font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin: 0;
    text-align: center;
}

.pc-playbook__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--accent-forest);
    color: #fff;
    font-family: var(--pricing-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: background 180ms ease, transform 160ms ease;
}

.pc-playbook__cta:hover {
    background: var(--accent-forest-dk, #1f4432);
    transform: translateY(-1px);
}

.pc-playbook__cta:focus-visible {
    outline: 2px solid var(--accent-forest);
    outline-offset: 3px;
}

.pc-playbook__trust {
    font-family: var(--pricing-font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin: 0;
    text-align: center;
}

.pc-playbook__trust a {
    color: var(--accent-forest);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 700px) {
    .pc-playbook {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.25rem;
        gap: 1.25rem;
    }
    .pc-playbook__title {
        font-size: 1.25rem;
    }
    .pc-playbook__desc {
        font-size: 0.875rem;
    }
    .pc-playbook__price-amount {
        font-size: 2.25rem;
    }
}

/* ─── VIP Access banner (Apr 22 2026) ──────────────────────────────────────
   Gold banner injected above the .pc-wrap pricing card for VIP / comp users.
   Tells them they already have access + routes them to dashboard/explore.
   Injected by pricing.html's onAuthStateChanged handler when compAccess.active. */

.pricing-vip-banner {
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #d4a017;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.08);
}

.pricing-vip-banner__sparkle {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.pricing-vip-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.5;
}

.pricing-vip-banner__text strong {
    color: #78350f;
    font-weight: 700;
    font-size: 1rem;
}

.pricing-vip-banner__text span {
    color: #92400e;
}

.pricing-vip-banner__text a {
    color: #78350f;
    font-weight: 600;
    text-decoration: underline;
}

.pricing-vip-banner__text a:hover {
    color: #451a03;
}

@media (max-width: 640px) {
    .pricing-vip-banner {
        margin: 16px 16px 20px;
        padding: 14px 16px;
        gap: 10px;
    }
    .pricing-vip-banner__sparkle {
        font-size: 1.25rem;
    }
    .pricing-vip-banner__text {
        font-size: 0.9rem;
    }
}


/* ============================================================
   13. CRO 2026-06-21 — "Pricing that closes" additions
       Uniquely-named classes (pc-proof-*, pc-sticky-*) so nothing
       in the existing cascade is touched. Plus two targeted fixes:
       roadmap badge contrast + Most-Popular badge font size, and a
       mobile comparison-table fit so the Premium column is visible.
   ============================================================ */

/* ---- 13a. Above-the-fold proof row (inside the dark hero) ---- */
.pc-proof-row {
    max-width: 560px;
    margin: 22px auto 0;
    position: relative;
    z-index: 2;
}
.pc-proof-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.pc-proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Light pill on the dark forest hero — high contrast, reads as a badge */
    background: rgba(232, 244, 236, 0.97);
    color: #14532d; /* deep forest — > 7:1 on the pale-mint pill */
    font-family: var(--pricing-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(20, 83, 45, 0.18);
}
.pc-proof-chip svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #15803d;
}
/* 2026-07-15: the two stat chips are now buttons that reveal the honest basis
   (autopsy: they were dead clicks at peak skepticism). Font/appearance reset so
   they render identically to the span chips, plus a quiet "?" affordance. */
.pc-proof-chip--why {
    font: inherit;
    appearance: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    min-height: 32px;
}
.pc-proof-chip--why:hover,
.pc-proof-chip--why[aria-expanded="true"] {
    background: #fff;
    border-color: rgba(20, 83, 45, 0.42);
}
.pc-proof-chip--why:active { transform: translateY(1px); }
.pc-proof-chip--why:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pc-proof-chip__q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 1px;
    border-radius: 50%;
    background: rgba(20, 83, 45, 0.14);
    color: #14532d;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
}
.pc-why-pop {
    max-width: 440px;
    margin: 12px auto 0;
    background: rgba(255, 253, 247, 0.98);
    color: var(--ink-secondary);
    border: 1px solid rgba(20, 83, 45, 0.2);
    border-left: 3px solid var(--accent-forest);
    border-radius: 10px;
    padding: 12px 15px;
    font-family: var(--pricing-font-body);
    font-size: 0.83rem;
    line-height: 1.5;
    text-align: left;
    box-shadow: var(--pricing-shadow-md);
    animation: pcWhyIn 0.16s ease-out;
}
.pc-why-pop[hidden] { display: none; }
.pc-why-pop b { color: var(--accent-forest-deep); font-weight: 700; }
@keyframes pcWhyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-why-pop { animation: none; } }
/* Warm-arrival acknowledgment — shown only when the visitor arrived from a
   priced "$39/mo" CTA (so the page reads as CONTINUE, not re-decide). */
.pc-intent-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 16px;
    padding: 7px 15px;
    background: rgba(232, 244, 236, 0.16);
    border: 1px solid rgba(232, 244, 236, 0.4);
    border-radius: 100px;
    color: #eaf4ec;
    font-family: var(--pricing-font-body);
    font-size: 0.82rem;
    font-weight: 600;
}
.pc-intent-pill svg { width: 15px; height: 15px; color: #a9d9b9; flex-shrink: 0; }
.pc-proof-row__count {
    margin: 12px 0 0;
    font-family: var(--pricing-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
}
.pc-proof-row__count b {
    color: #fff;
    font-weight: 700;
}
.pc-proof-row__verify {
    color: var(--accent-peach, #e8a87c);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.pc-proof-row__verify:hover { color: #fff; }
.pc-proof-row__verify:focus-visible {
    outline: 2px solid var(--accent-peach, #e8a87c);
    outline-offset: 2px;
    border-radius: 3px;
}
@media (max-width: 767px) {
    .pc-proof-row { margin-top: 18px; }
    .pc-proof-chip { font-size: 0.72rem; padding: 5px 10px; }
    .pc-proof-row__count { font-size: 0.76rem; }
}

/* ---- 13b. Sticky bottom checkout bar (mobile + desktop) ---- */
.pc-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--accent-forest-deep, #1a4731);
    box-shadow: 0 -6px 24px -8px rgba(26, 23, 20, 0.35);
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
    pointer-events: none;
}
.pc-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.pc-sticky-cta__inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.pc-sticky-cta__lbl {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.pc-sticky-cta__title {
    font-family: var(--pricing-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}
.pc-sticky-cta__sub {
    font-family: var(--pricing-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-sticky-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 46px;        /* > 44px WCAG touch target */
    padding: 11px 20px;
    background: var(--accent-sienna, #c4532b);
    color: #fff;
    font-family: var(--pricing-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    box-shadow: 0 6px 16px -6px rgba(196, 83, 43, 0.55);
}
.pc-sticky-cta__btn:hover {
    background: #a34525;
    transform: translateY(-1px);
}
.pc-sticky-cta__btn:active { transform: translateY(0); }
.pc-sticky-cta__btn:focus-visible {
    outline: 2px solid var(--accent-peach, #e8a87c);
    outline-offset: 2px;
}
.pc-sticky-cta__btn svg { flex-shrink: 0; }
@media (max-width: 380px) {
    .pc-sticky-cta__btn { padding: 11px 16px; font-size: 0.85rem; }
    .pc-sticky-cta__sub { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pc-sticky-cta {
        transition: opacity 0.01ms !important;
        transform: none;
    }
    .pc-sticky-cta:not(.is-visible) {
        /* keep it out of the way without a slide */
        opacity: 0;
        visibility: hidden;
    }
}

/* ---- 13c. Badge fixes ----
   (i) Roadmap callout badge sits on a DARK navy gradient: the old
       mint-on-translucent (#34d399) was ~1.3:1. Switch to a light
       pale-mint pill with deep-forest text (#0D5C35) → > 4.5:1.
   (ii) "Most Popular" badge bumped to >= 13px. */
.pricing-roadmap-callout__badge {
    background: rgba(216, 243, 220, 0.96);
    border: 1px solid rgba(216, 243, 220, 1);
    color: #0D5C35; /* ~7.4:1 on the pale-mint pill */
}

.pc-card__badge {
    font-size: 0.8125rem; /* 13px — was 0.72rem (~11.5px) */
}
@media (max-width: 419px) {
    .pc-card__badge {
        font-size: 0.8125rem; /* hold 13px on small phones (override the 0.65rem rule) */
        padding: 5px 14px;
    }
}

/* ---- 13d. Mobile comparison-table fit ----
   The stacked-flex mobile layout kept the desktop 24px side padding on
   every <td>, so three columns totalled ~405px inside a ~270px wrapper
   and the Premium column was clipped by overflow:hidden. Trim cell
   padding + constrain the two value columns so all three fit and the
   Premium value is fully readable at 320px+. */
@media (max-width: 767px) {
    /* Trim the row's own side padding so the three cells fit the wrapper */
    .pricing-table tbody tr {
        padding-left: 8px;
        padding-right: 8px;
    }
    .pricing-table tbody td {
        padding-left: 8px;
        padding-right: 8px;
    }
    .pricing-table td:first-child {
        padding-left: 12px;
    }
    .pricing-table td:nth-child(2),
    .pricing-table td:nth-child(3) {
        min-width: 0;
        max-width: none;
        flex: 0 0 29%;
        padding-left: 6px;
        padding-right: 6px;
    }
    .pricing-table-mobile-labels {
        padding-left: 8px;
        padding-right: 8px;
    }
    .pricing-table-mobile-labels span:nth-child(2),
    .pricing-table-mobile-labels span:nth-child(3) {
        width: 29%;
    }
}
@media (max-width: 380px) {
    .pricing-table td:first-child {
        padding-left: 8px;
        font-size: 0.8rem;
    }
    .pricing-table td:nth-child(2),
    .pricing-table td:nth-child(3) {
        flex-basis: 28%;
    }
    .pricing-table .pricing-check-label,
    .pricing-table .pricing-partial {
        font-size: 0.72rem;
    }
}


/* ============================================================
   PRICING V3 (2026-07-16 rebuild) — all selectors pv3-prefixed so the
   2,400 lines of legacy pricing rules above never fight this cascade.
   Design source of truth: dev-assets/pricing-v2-2026-07-16/pricing-v3-full.html (r6).
   ============================================================ */
:root{ --pv3-line:#e6ded2; }
[hidden]{display:none!important} /* any display rule silently beats [hidden] otherwise */

mark{background:linear-gradient(transparent 58%,rgba(196,83,43,.22) 58%);color:inherit;padding:0 1px}
mark.pv3-g{background:linear-gradient(transparent 58%,rgba(45,106,79,.2) 58%)}

/* 0. ribbon */
.pv3-ctx{background:var(--accent-forest-deep);color:#f2ebe0;font-size:13.5px;padding:9px 20px;text-align:center;line-height:1.5}
.pv3-ctx b{color:#fff}
.pv3-ctx .pv3-ctx-chip{display:inline-block;background:rgba(255,255,255,.12);border-radius:999px;padding:1px 10px;margin:0 3px;font-size:12.5px;font-weight:600}
.pv3-ctx--warm{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.pv3-finish{background:#f2ebe0;color:var(--accent-forest-deep);font:700 13px var(--pricing-font-body);border:0;border-radius:999px;padding:7px 16px;cursor:pointer}

/* 1. hero */
.pv3-hero{max-width:var(--pricing-max-width);margin:0 auto;padding:118px 24px 8px;text-align:center}
.pv3-eyebrow{font-family:var(--pricing-font-data);font-size:12px;letter-spacing:.18em;color:var(--accent-sienna);font-weight:600;margin-bottom:14px}
.pv3-hero h1{font-family:var(--pricing-font-display);font-weight:500;font-size:clamp(30px,4.6vw,52px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.pv3-hero h1 em{font-style:italic;color:var(--accent-forest)}
.pv3-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 0}
.pv3-chip{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--pv3-line);border-radius:999px;padding:7px 14px;font:600 13.5px var(--pricing-font-body);color:var(--ink-secondary);cursor:pointer;transition:transform .12s,box-shadow .12s}
.pv3-chip:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(26,23,20,.4)}
.pv3-chip svg{width:13px;height:13px;stroke:var(--accent-forest);flex:none}
.pv3-q{width:15px;height:15px;border-radius:50%;background:var(--cream-dark);color:var(--ink-muted);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pv3-proofline{font-size:13px;color:var(--ink-muted);margin-top:14px}
.pv3-proofline b{color:var(--ink-secondary)}
.pv3-proofline a{color:var(--accent-forest);font-weight:600}
.pv3-ceiling-cta,.pv3-ceiling-alt,.pv3-ceiling-guar{display:none}

/* arrival memory (2026-09-01) — one line that names what the reader came FROM.
   Fed by ?gt=/?gf= (explore's blur click) or by a digest utm, and replaced entirely
   by the personalization strip when an email-identity profile resolves. Compound
   selectors on the link (0,0,2,1) because the sitewide `a:hover{color:var(--sienna)}`
   silently repaints any single-class anchor, and every state is restated. */
.pv3-arrival{max-width:660px;margin:18px auto 0;background:var(--accent-forest-light);border:1px solid var(--pv3-line);border-left:3px solid var(--accent-forest);border-radius:0 12px 12px 0;padding:13px 18px;text-align:left;font-size:13.5px;line-height:1.55;color:var(--ink-secondary)}
.pv3-arrival b{color:var(--ink);font-weight:700}
.pv3-arrival a.pv3-arrival-free,.pv3-arrival a.pv3-arrival-free:hover,.pv3-arrival a.pv3-arrival-free:focus,.pv3-arrival a.pv3-arrival-free:visited,.pv3-arrival a.pv3-arrival-free:active{display:inline-block;margin-top:1px;padding:5px 0;font:700 13px var(--pricing-font-body);color:var(--accent-forest-deep);text-decoration:underline;text-underline-offset:3px}
.pv3-arrival a.pv3-arrival-free:focus-visible{outline:2px solid var(--accent-forest);outline-offset:3px;border-radius:4px}

/* rotating top-matches hook */
.pv3-pstrip{max-width:660px;margin:22px auto 0;background:var(--paper);border:1px solid var(--pv3-line);border-radius:14px;padding:14px 18px 12px;text-align:left;box-shadow:0 12px 32px -20px rgba(26,23,20,.28)}
.pv3-pstrip-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pv3-pstrip-lbl{font:600 10px var(--pricing-font-data);letter-spacing:.14em;color:var(--accent-sienna)}
.pv3-pstrip-go{font:700 12.5px var(--pricing-font-body);color:var(--accent-forest);white-space:nowrap;text-decoration:none}
.pv3-rot{position:relative;min-height:74px;margin-top:8px}
.pv3-slide{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s;pointer-events:none}
.pv3-slide.pv3-on{opacity:1;transform:none;pointer-events:auto}
.pv3-gname{font-family:var(--pricing-font-display);font-weight:600;font-size:16.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
/* The advertised amount, on its own line since 2026-09-01 — see the renderer comment in
   pricing.html renderKnown(): joined to the title it ate the programme's NAME on a phone. */
.pv3-gamtline{font:600 13px var(--pricing-font-body);color:var(--accent-forest);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pv3-gstats{display:grid;grid-template-columns:auto auto auto;justify-content:start;gap:4px 22px;margin-top:6px;font-size:12.5px;color:var(--ink-muted)}
.pv3-gstats>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pv3-gstats .pv3-k{font-weight:700;color:var(--ink-secondary)}
.pv3-vlock{display:inline-block;filter:blur(5px);user-select:none;min-width:44px;text-align:center}
/* Round 3 — the locked stat lines no longer print digit-shaped stand-ins. A blurred
   `···%` is only honest when a real value sits behind it (docs/DURABLE-GOTCHAS.md: "a
   fabricated placeholder is a claim, the blur is what makes it honest"), and this page
   cannot tell which records have one. So the lock names what Premium adds, in words, and
   the third state says plainly that nobody published it. */
.pv3-vlock-txt{display:inline-block;font-weight:700;color:var(--accent-forest);text-align:center}
.pv3-gstats .pv3-nopub{color:var(--ink-muted)}
.pv3-gstats .pv3-nopub .pv3-k{color:var(--ink-secondary)}
.pv3-stat .pv3-val--prem{color:var(--accent-forest)}
.pv3-stat .pv3-val--nopub{color:var(--ink-muted);font-weight:600;font-size:13.5px}
/* .pv3-stat.pv3-locked .pv3-val carries filter:blur(6px) — that rule exists to obscure a
   VALUE, and "Premium" is a word the reader has to be able to read. (0,0,3,0) beats it. */
.pv3-stat.pv3-locked .pv3-val.pv3-val--prem{filter:none;user-select:auto}
.pv3-lockico{font-size:10px}
.pv3-pstrip-foot{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--pv3-line)}
.pv3-dots{display:flex;gap:6px;flex:none}
.pv3-dots button{width:22px;height:22px;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0;position:relative}
.pv3-dots button::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--ink-faint);transition:background .3s,transform .3s}
.pv3-dots button.pv3-on::after{background:var(--accent-forest);transform:translate(-50%,-50%) scale(1.35)}
.pv3-count{font-size:11.5px;color:var(--ink-muted);flex:1;text-align:right;line-height:1.4;margin:0}
.pv3-count b{color:var(--ink-secondary)}

/* 2. deck */
.pv3-deck{max-width:880px;margin:30px auto 0;padding:0 24px}
.pv3-paused{max-width:832px;margin:26px auto 0;padding:12px 16px;border:1px solid #d9b25c;border-radius:12px;background:#fdf6e3;font-size:14px;line-height:1.5;color:var(--ink);text-align:left}
/* phone: the note sits inside the hero (a flex column whose buttons are order:4), right above the pay button */
@media (max-width:760px){.pv3-paused{order:4;margin:18px 0 2px}}
.pv3-deck-cards{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper);border:1px solid var(--pv3-line);border-radius:18px;box-shadow:0 24px 60px -30px rgba(26,23,20,.25)}
/* The WHOLE card is the plan selector (2026-09-01). A digest reader spent 20 minutes
   on this page and ended it clicking the "MOST POPULAR / Premium Monthly" card header —
   only `.pv3-cta` carried a handler, so the press that ended their visit did nothing.
   Stripe Checkout's own plan selector behaves this way; so does ours now. The <button>
   remains the accessible control (no role/tabindex on the card, one announcement). */
.pv3-plan{padding:30px 30px 26px;position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer}
@media (hover:hover){.pv3-plan:hover .pv3-cta{transform:translateY(-1px)}}
.pv3-plan--monthly{border-right:1px solid var(--pv3-line);background:linear-gradient(180deg,var(--accent-forest-light),transparent 55%);border-radius:18px 0 0 18px}
.pv3-plan--annual{border-radius:0 18px 18px 0}
.pv3-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);font:700 10.5px/1 var(--pricing-font-data);letter-spacing:.14em;padding:6px 14px;border-radius:999px;white-space:nowrap}
.pv3-plan--monthly .pv3-badge{background:var(--accent-forest);color:#fff}
.pv3-plan--annual .pv3-badge{background:var(--paper);color:var(--accent-gold);border:1.5px solid var(--accent-gold)}
.pv3-plan-name{font:700 13px var(--pricing-font-body);color:var(--ink-secondary);margin:8px 0 10px}
.pv3-price{display:flex;align-items:baseline;gap:4px;font-family:var(--pricing-font-display);color:var(--ink)}
.pv3-amt{font-size:46px;font-weight:600;letter-spacing:-.02em}
.pv3-cur{font-size:22px;color:var(--ink-secondary);align-self:flex-start;margin-top:8px}
.pv3-per{font-size:15px;color:var(--ink-muted);font-family:var(--pricing-font-body)}
.pv3-price-sub{font-size:13px;color:var(--ink-secondary);margin-top:6px;min-height:19px}
.pv3-price-sub b{color:var(--accent-forest)}
.pv3-cta{margin-top:18px;border:0;border-radius:12px;padding:15px 18px;font:700 15.5px var(--pricing-font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s;width:100%}
.pv3-cta:hover{transform:translateY(-1px)}
.pv3-plan--monthly .pv3-cta{background:var(--accent-forest);color:#fff;box-shadow:0 10px 24px -10px rgba(45,106,79,.55)}
.pv3-plan--annual .pv3-cta{background:var(--paper);color:var(--accent-forest-deep);border:1.5px solid var(--accent-forest)}
.pv3-cta svg{flex:none}
.pv3-cta-note{font-size:12px;color:var(--ink-muted);text-align:center;margin-top:9px}
.pv3-plan.pv3-emph{outline:2px solid var(--accent-forest);outline-offset:-2px}
.pv3-guarantee{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--cream-dark);border:1px solid var(--pv3-line);border-top:0;border-radius:0 0 18px 18px;margin:0 14px;padding:12px 18px;font-size:13px;color:var(--ink-secondary)}
.pv3-guarantee svg{stroke:var(--accent-forest);flex:none}
.pv3-guarantee b{color:var(--ink)}
.pv3-guarantee a{color:var(--accent-forest);text-decoration:underline;text-underline-offset:2px}
.pv3-dot{color:var(--ink-faint)}
/* ★ 2026-09-03: the guarantee line wraps on phones and the separator dot was its own
   flex item, so the second line OPENED with a lone "·" before "Refund policy". Keep the
   dot only where the line cannot wrap. */
@media (max-width:560px){.pv3-guarantee .pv3-dot{display:none}}

/* Continue-as confirmation (2026-09-01) — the inline question an email-token buyer
   answers before their money attaches to an account. It sits INSIDE the plan card, so
   every colour is a token already defined above and every selector is pv3-prefixed.
   Both answers are >=44px tall and >=44px wide; the close control is a 44x44 square.
   `text-align:left` because the card centres its text and a question is not a headline. */
.pv3-confirm{position:relative;margin-top:12px;padding:14px 16px 12px;background:var(--cream-dark);border:1px solid var(--accent-forest);border-radius:12px;text-align:left;cursor:default}
.pv3-confirm .pv3-confirm-q{font-size:13.5px;line-height:1.5;color:var(--ink-secondary);margin:0 34px 10px 0}
.pv3-confirm .pv3-confirm-q b{color:var(--ink);font-weight:800}
.pv3-confirm .pv3-confirm-acts{display:flex;flex-wrap:wrap;gap:8px}
.pv3-confirm button{font-family:var(--pricing-font-body);cursor:pointer;border-radius:10px;min-height:44px}
.pv3-confirm .pv3-confirm-yes{flex:1 1 auto;min-width:140px;background:var(--accent-forest);color:#fff;border:0;font-weight:700;font-size:14px;padding:12px 16px}
.pv3-confirm .pv3-confirm-no{flex:1 1 auto;min-width:140px;background:var(--paper);color:var(--accent-forest-deep);border:1.5px solid var(--pv3-line);font-weight:600;font-size:13px;padding:12px 14px}
.pv3-confirm .pv3-confirm-x{position:absolute;top:4px;right:4px;width:44px;height:44px;min-height:44px;background:none;border:0;color:var(--ink-muted);font-size:20px;line-height:1;border-radius:10px}
.pv3-confirm button:focus-visible{outline:2px solid var(--accent-forest);outline-offset:2px}
@media (max-width:400px){.pv3-confirm .pv3-confirm-yes,.pv3-confirm .pv3-confirm-no{flex:1 1 100%}}

/* value strip */
.pv3-value{max-width:960px;margin:26px auto 0;padding:0 24px}
.pv3-vstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pv3-vi{background:var(--paper);border:1px solid var(--pv3-line);border-radius:12px;padding:14px 10px 12px;text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s;font-family:var(--pricing-font-body)}
.pv3-vi:hover{transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(26,23,20,.35)}
.pv3-ic{width:34px;height:34px;border-radius:50%;background:var(--accent-forest-light);display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}
.pv3-ic svg{width:16px;height:16px;stroke:var(--accent-forest);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv3-vi-t{display:flex;align-items:center;justify-content:center;min-height:33px;font-weight:800;font-size:13px;line-height:1.25;color:var(--ink);flex-wrap:wrap;column-gap:3px}
.pv3-vi-s{display:block;font-size:11.5px;color:var(--ink-muted);margin-top:3px;line-height:1.35}
.pv3-vfoot{text-align:center;font-size:12.5px;color:var(--ink-muted);margin-top:12px}

/* winner-data proof (2026-08-15) — the evidence behind the strip's first item and the
   comparison row's "Winner data" claim. Compound selectors so a single-class rule elsewhere
   cannot silently repaint them, and every colour comes from an already-defined token. */
.pv3-value .pv3-vproof{max-width:640px;margin:16px auto 0;padding:14px 18px;background:var(--cream-dark);border:1px solid var(--pv3-line);border-radius:12px;text-align:center}
.pv3-value .pv3-vproof-lede{font-size:13.5px;line-height:1.5;color:var(--ink-secondary);margin:0}
.pv3-value .pv3-vproof-lede b{color:var(--ink);font-weight:800}
/* ⚠ --ink-muted (#9a9085) on this box's --cream-dark (#f2ebe0) ground is 2.65:1 — a WCAG AA fail on
   the sentence that CARRIES the proof (the n, the scope, the source). --ink-secondary is 6.22:1 on
   the same ground and is what the lede above it already uses. */
.pv3-value .pv3-vproof-spec{font-size:12.5px;line-height:1.5;color:var(--ink-secondary);margin:6px 0 0}
.pv3-value a.pv3-vproof-cta,.pv3-value a.pv3-vproof-cta:hover,.pv3-value a.pv3-vproof-cta:focus,.pv3-value a.pv3-vproof-cta:visited,.pv3-value a.pv3-vproof-cta:active{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--accent-forest-deep);text-decoration:underline;text-underline-offset:3px}
.pv3-value a.pv3-vproof-cta:focus-visible{outline:2px solid var(--accent-forest);outline-offset:3px;border-radius:4px}
@media (max-width:520px){.pv3-value .pv3-vproof{padding:12px 14px;margin-top:14px}}

/* 3. coverflow */
.pv3-proof{max-width:var(--pricing-max-width);margin:64px auto 0;padding:0 24px;text-align:center}
.pv3-proof h2,.pv3-sect h2,.pv3-cmp h2{font-family:var(--pricing-font-display);font-weight:500;font-size:clamp(23px,3vw,30px);line-height:1.15;color:var(--ink)}
.pv3-proof h2 em,.pv3-sect h2 em,.pv3-cmp h2 em{font-style:italic;color:var(--accent-sienna)}
.pv3-sub{font-size:14px;color:var(--ink-muted);margin-top:8px}
.pv3-cfwrap{position:relative;max-width:1040px;margin:26px auto 0}
.pv3-cf{position:relative;height:470px;overflow:hidden;transition:height .4s;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.pv3-gcard{position:absolute;left:50%;top:0;width:min(620px,86vw);background:var(--paper);border:1px solid var(--pv3-line);border-radius:16px;text-align:left;box-shadow:0 18px 48px -28px rgba(26,23,20,.3);overflow:hidden;transition:transform .5s cubic-bezier(.22,.8,.3,1),filter .5s,opacity .5s;will-change:transform}
.pv3-gcard.pv3-cfc{transform:translateX(-50%);z-index:3}
.pv3-gcard.pv3-cfl{transform:translateX(-96%) scale(.82);z-index:2;filter:blur(2.5px);opacity:.65;cursor:pointer}
.pv3-gcard.pv3-cfr{transform:translateX(-4%) scale(.82);z-index:2;filter:blur(2.5px);opacity:.65;cursor:pointer}
.pv3-gcard.pv3-cfh{transform:translateX(-50%) scale(.7);opacity:0;z-index:1;pointer-events:none}
.pv3-arrow{position:absolute;top:44%;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid var(--pv3-line);background:var(--paper);color:var(--ink-secondary);font-size:18px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(26,23,20,.3);transition:transform .12s,color .12s}
.pv3-arrow:hover{color:var(--accent-forest);transform:scale(1.08)}
.pv3-al{left:0}.pv3-ar{right:0}
.pv3-gtabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pv3-gtabs button{font:600 12.5px var(--pricing-font-body);padding:7px 14px;border-radius:999px;border:1px solid var(--pv3-line);background:var(--paper);color:var(--ink-secondary);cursor:pointer;transition:transform .12s}
.pv3-gtabs button:hover{transform:translateY(-1px)}
.pv3-gtabs button.pv3-on{background:var(--accent-forest);border-color:var(--accent-forest);color:#fff}
.pv3-ghead{padding:20px 24px 14px;border-bottom:1px solid var(--pv3-line);display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.pv3-ghead h3{font-family:var(--pricing-font-display);font-weight:600;font-size:19px;line-height:1.25;color:var(--ink);margin:0}
.pv3-gamt{font:700 13px var(--pricing-font-body);color:var(--accent-forest);white-space:nowrap;background:var(--accent-forest-light);border-radius:8px;padding:5px 10px}
.pv3-gmeta{padding:6px 24px 0;font-size:12.5px;color:var(--ink-muted)}
.pv3-ggrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:14px 24px 6px}
.pv3-stat{border:1px solid var(--pv3-line);border-radius:10px;padding:10px 12px;background:var(--cream)}
.pv3-stat .pv3-lbl{font:600 10px var(--pricing-font-data);letter-spacing:.12em;color:var(--ink-muted)}
.pv3-stat .pv3-val{font:700 16px var(--pricing-font-body);margin-top:4px;color:var(--ink)}
.pv3-stat.pv3-locked{position:relative;cursor:pointer;transition:transform .12s}
.pv3-stat.pv3-locked:hover{transform:translateY(-1px)}
.pv3-stat.pv3-locked .pv3-val{filter:blur(6px);user-select:none}
.pv3-stat.pv3-locked::after{content:'🔒';position:absolute;top:8px;right:9px;font-size:11px}
.pv3-gtip{margin:10px 24px 0;padding:11px 14px;background:var(--accent-forest-light);border-left:3px solid var(--accent-forest);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ink-secondary);line-height:1.5}
.pv3-blur{filter:blur(5px);user-select:none;cursor:pointer}
.pv3-gfoot{display:flex;align-items:center;gap:12px;padding:16px 24px 20px}
.pv3-draftbtn{flex:1;border:0;border-radius:10px;padding:13px;font:700 14px var(--pricing-font-body);background:var(--accent-forest);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.pv3-draftbtn .pv3-lock{font-size:11px;opacity:.85}
.pv3-caption{font-size:12.5px;color:var(--ink-muted);margin-top:14px}
.pv3-caption a{color:var(--accent-forest)}

/* the three jobs */
.pv3-sect{max-width:960px;margin:72px auto 0;padding:0 24px;text-align:center}
.pv3-spots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:26px;text-align:left}
.pv3-spot{background:var(--paper);border:1px solid var(--pv3-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.pv3-sq{font:600 10.5px var(--pricing-font-data);letter-spacing:.13em;color:var(--accent-sienna)}
.pv3-spot h3{font-family:var(--pricing-font-display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);margin:0}
.pv3-spot p{font-size:13px;color:var(--ink-muted);line-height:1.5;margin:0}
.pv3-demo{background:var(--cream);border:1px solid var(--pv3-line);border-radius:10px;padding:12px;font-size:12.5px;color:var(--ink-secondary);line-height:1.6}
.pv3-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.pv3-r{font-weight:700;color:var(--ink)}
.pv3-drafted{color:var(--accent-forest)!important}
.pv3-draftline{border-left:2px solid var(--accent-forest);padding-left:8px;margin-top:6px;font-style:italic}
.pv3-win{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dashed var(--pv3-line)}
.pv3-win:last-child{border-bottom:0}
.pv3-wamt{font-weight:700;color:var(--accent-forest)}
.pv3-spot details{margin-top:auto;border-top:1px dashed var(--pv3-line);padding-top:8px}
.pv3-spot summary{font:700 12px var(--pricing-font-body);color:var(--accent-forest);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.pv3-spot summary::-webkit-details-marker{display:none}
.pv3-spot summary::before{content:'+';font-size:14px}
.pv3-spot details[open] summary::before{content:'–'}
.pv3-dx{font-size:12.5px;color:var(--ink-secondary);line-height:1.6;padding-top:6px}

/* comparison table */
.pv3-cmp{max-width:880px;margin:72px auto 0;padding:0 24px;text-align:center}
.pv3-tablewrap{overflow-x:auto;margin-top:24px;border:1px solid var(--pv3-line);border-radius:14px;background:var(--paper)}
.pv3-cmp table{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left;font-family:var(--pricing-font-body)}
.pv3-cmp th{font:600 11px var(--pricing-font-data);letter-spacing:.12em;color:var(--ink-muted);padding:14px 18px;border-bottom:1px solid var(--pv3-line);text-align:left}
.pv3-cmp th.pv3-c,.pv3-cmp td.pv3-c{text-align:center;width:92px}
.pv3-cmp td{padding:11px 18px;border-bottom:1px solid var(--pv3-line);color:var(--ink-secondary)}
.pv3-cmp tr:last-child td{border-bottom:0}
.pv3-cmp tbody tr:not(.pv3-shead):hover td{background:var(--accent-forest-light)}
.pv3-shead td{font:600 10.5px var(--pricing-font-data);letter-spacing:.13em;color:var(--accent-sienna);background:var(--cream);padding:9px 18px}
.pv3-yes{color:var(--accent-forest);font-weight:700}
.pv3-no{color:var(--ink-faint)}
.pv3-part{color:var(--ink-muted);font-size:12px}

/* playbook anchor */
.pv3-pb{max-width:760px;margin:72px auto 0;padding:0 24px}
.pv3-pbcard{background:var(--paper);border:1px solid var(--pv3-line);border-radius:16px;padding:24px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pv3-pbbody{flex:1;min-width:240px}
.pv3-pbcard h3{font-family:var(--pricing-font-display);font-weight:600;font-size:19px;color:var(--ink);margin:0}
.pv3-pbcard p{font-size:13.5px;color:var(--ink-secondary);line-height:1.55;margin:6px 0 0}
.pv3-anchor{font-size:12.5px;color:var(--ink-muted)}
.pv3-anchor b{color:var(--accent-forest)}
.pv3-pbcta{font:700 13.5px var(--pricing-font-body);color:var(--accent-forest-deep);border:1.5px solid var(--accent-forest);border-radius:10px;padding:11px 18px;background:var(--paper);cursor:pointer;white-space:nowrap;text-decoration:none}

/* testimonials */
.pv3-tst{max-width:960px;margin:72px auto 0;padding:0 24px 56px;text-align:center} /* 2026-09-18 deep QA: 0px bottom padding left the testimonial cards touching the FAQ heading */
.pv3-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;text-align:left}
.pv3-tcard{background:var(--paper);border:1px solid var(--pv3-line);border-radius:14px;padding:20px 22px;font-size:14px;color:var(--ink-secondary);line-height:1.6}
.pv3-who{font-size:12.5px;color:var(--ink-muted);margin-top:10px;font-weight:600}

/* popover */
.pv3-pop{position:fixed;max-width:340px;background:var(--ink);color:var(--cream);font-size:12.5px;line-height:1.5;padding:12px 14px;border-radius:10px;z-index:9500;display:none;text-align:left}
.pv3-pop.pv3-show{display:block}
/* ★ 2026-09-09 — the proof popover carries the purchase (see pricing.html). The CTA is the
   cream-on-forest inverse of the page CTA so it reads as the primary action inside the dark box. */
.pv3-pop__t{display:block}
.pv3-pop__cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--cream);color:var(--ink);border:0;border-radius:999px;padding:8px 14px;font:700 12.5px var(--pricing-font-body);cursor:pointer;transition:transform .12s,box-shadow .12s}
.pv3-pop__cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.pv3-pop__cta:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
@media (pointer:coarse){.pv3-pop__cta{min-height:44px;padding:10px 16px}}

/* responsive */
@media (max-width:900px){
  .pv3-spots{grid-template-columns:1fr}
  .pv3-tgrid{grid-template-columns:1fr}
  .pv3-vstrip{grid-template-columns:repeat(2,1fr)}
  .pv3-vi:last-child{grid-column:1/-1}
  .pv3-cf{height:560px}
  .pv3-gcard.pv3-cfl{transform:translateX(-108%) scale(.85)}
  .pv3-gcard.pv3-cfr{transform:translateX(8%) scale(.85)}
}
@media (max-width:760px){
  .pv3-deck-cards{grid-template-columns:1fr}
  .pv3-plan--monthly{border-right:0;border-bottom:1px solid var(--pv3-line);border-radius:18px 18px 0 0}
  .pv3-plan--annual{border-radius:0 0 18px 18px;padding-top:36px}
  .pv3-ggrid{grid-template-columns:1fr 1fr}
  /* ★ THE MOBILE FOLD (rebuilt 2026-09-01). Until today these two lines read
     `.pv3-chips{display:none}` and `.pv3-proofline{display:none}` — so at 390px the
     first viewport was three price buttons and nothing else. The proof line is where
     "Not sure yet? See your matches free" lives, and it is the ONLY free next step on
     this page: the one digest buyer that month converted by taking it, running the
     quiz, and coming back. 81% of the other 53 digest arrivals clicked nothing and
     left in 13 seconds. Both now render compact, and the hero CTA is promoted above
     them with flex `order` so the phone reading order matches the desktop one:
     headline -> matches -> CTA -> arrival line -> chips -> proof.
     `[hidden]{display:none!important}` at the top of this block still wins over the
     `display:flex/block` restored here, so applyState('known') can still hide them. */
  .pv3-hero{padding-top:88px;display:flex;flex-direction:column}
  .pv3-eyebrow{order:1}
  .pv3-hero h1{order:2}
  .pv3-pstrip{order:3;margin-top:12px}
  .pv3-chips{order:6;display:flex;gap:6px;margin:14px 0 0}
  .pv3-proofline{order:7;display:block;font-size:12px;margin-top:10px;line-height:1.55}
  /* The free hatch takes its own line here, so the separator that preceded it would
     hang off the end of the line above it. Assert the LINE, not the rule. */
  .pv3-proofline a{display:inline-block;margin-top:2px}
  .pv3-proofline .pv3-pl-sep{display:none}
  /* A name the reader cannot finish reading is not their programme named. nowrap +
     ellipsis cut "Canada Critical Minerals Accelerato…" at 390px; two clamped lines fit
     every live title, and .pv3-rot grows to hold them (its slides are inset:0 absolute,
     so the container's min-height is what actually reserves the space). */
  /* Titles: p50 45 chars, p99 95, max 157. Three lines at 15.5px hold everything up to
     the 99th percentile at 390px; the amount (p90 is 103 chars of catalogue PROSE, max
     449) is secondary and gets one clamped line. .pv3-rot's min-height below is what
     actually reserves the room: the slides are inset:0 absolute and would otherwise
     paint straight through the dashed footer rule with nothing to show for it. */
  .pv3-gname{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px;line-height:1.28}
  .pv3-gamtline{-webkit-line-clamp:1;font-size:12.5px}
  /* Density: every pixel recovered here is a pixel the free next step is nearer the fold. */
  .pv3-pstrip{padding:12px 14px 10px}
  .pv3-rot{margin-top:6px}
  .pv3-pstrip-foot{margin-top:9px;padding-top:8px}
  .pv3-arrival{order:5;margin-top:10px;padding:10px 14px;font-size:13px}
  .pv3-chip{padding:7px 11px;font:600 11.5px var(--pricing-font-body);gap:5px}
  .pv3-chip svg{width:11px;height:11px}
  .pv3-q{width:13px;height:13px;font-size:9.5px}
  /* align-self keeps the pill content-sized: the hero is a stretch-aligned flex
     column now, and a bare inline-flex child would run the full width. */
  .pv3-ceiling-cta{order:4;display:inline-flex;align-self:center;align-items:center;gap:8px;margin-top:12px;background:var(--accent-forest);color:#fff;border:0;border-radius:999px;padding:13px 20px;font:700 14px var(--pricing-font-body);cursor:pointer}
  .pv3-alt{font-weight:500;opacity:.85}
  .pv3-ceiling-alt{order:4;display:inline-flex;align-self:center;align-items:center;min-height:44px;padding:0 12px;color:var(--accent-forest);font:600 13px var(--pricing-font-body);text-decoration:underline;text-underline-offset:3px}
  .pv3-ceiling-guar{order:4;display:block;margin:-6px 0 0;text-align:center;font:500 12.5px/1.4 var(--pricing-font-body);color:var(--ink-secondary)}
  /* ★ Round 3b. Two nowrap columns of stats cannot fit a phone: measured, the second column
     ran 21-163px past the card at 375/390/414, and "Approval odds: Not published by this
     program" then propagated its own intrinsic width up through the grid (the nowrap-row
     gotcha) so at 320 every row overflowed by 35px. One column, and the honest sentence is
     allowed to wrap — a claim the reader cannot finish reading is not a claim they can check.
     minmax(0,...) because a `1fr`/`auto` track floors at min-content and cannot shrink. */
  .pv3-gstats{grid-template-columns:minmax(0,1fr);gap:3px 0}
  .pv3-gstats>span{white-space:normal}
}
@media (max-width:370px){
  /* 320x568 is the shortest fold we support and the stats grid costs it two extra
     rows here. Every pixel recovered is a pixel of the free next step above the fold. */
  .pv3-chips{margin-top:10px;gap:5px}
  .pv3-chip{padding:6px 9px;font-size:11px}
  .pv3-proofline{margin-top:8px}
  .pv3-arrival{margin-top:8px;padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  .pv3-slide,.pv3-gcard{transition:none}
}

/* close band */
.pv3-close{max-width:760px;margin:72px auto 80px;padding:0 24px;text-align:center;background:none}
.pv3-closebox{background:var(--accent-forest-deep);border-radius:18px;padding:36px 30px;color:#f2ebe0}
.pv3-closebox h2{font-family:var(--pricing-font-display);font-weight:500;font-size:clamp(22px,3vw,30px);color:#fff;margin:0}
.pv3-closebox h2 em{font-style:italic;color:#e8c992}
.pv3-closebox p{font-size:13.5px;margin-top:8px;color:rgba(242,235,224,.85)}
.pv3-closectas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.pv3-c1{background:#f2ebe0;color:var(--accent-forest-deep);font:700 15px var(--pricing-font-body);border:0;border-radius:12px;padding:14px 22px;cursor:pointer}
.pv3-c2{background:transparent;color:#f2ebe0;font:700 15px var(--pricing-font-body);border:1.5px solid rgba(242,235,224,.55);border-radius:12px;padding:14px 22px;cursor:pointer}
/* fixed nav offset: ribbons sit below the 72px nav; when one is visible the hero sheds its own offset */
.pv3-ctx{margin-top:var(--pricing-navbar-height,72px)}
.pv3-ctx:not([hidden])~.pv3-hero{padding-top:46px}
/* r5b/r6 ports: differentiator tint + table CTA + heading step-down */
.pv3-hi td{background:var(--accent-forest-light)}
.pv3-hi td:first-child{font-weight:700;color:var(--ink)}
.pv3-cmp-cta{margin-top:18px;display:inline-flex;align-items:center;gap:9px;background:var(--accent-forest);color:#fff;border:0;border-radius:12px;padding:13px 22px;font:700 14.5px var(--pricing-font-body);cursor:pointer;box-shadow:0 10px 24px -10px rgba(45,106,79,.5)}
.pv3-cmp-sub{font-size:12px;color:var(--ink-muted);margin-top:8px}
.pv3-cmp h2,.pv3-tst h2,.pv3-sect h2{font-size:clamp(21px,2.4vw,26px)}

/* inspection-round fixes (2026-07-16) */
/* Raised 84->110 / 104->132 on 2026-09-01: the name is clamped to two lines at phone
   widths instead of ellipsised to one, and the slides are absolutely positioned, so this
   min-height is the only thing reserving room for the second line. */
@media (max-width:760px){.pv3-rot{min-height:150px}}
@media (max-width:370px){.pv3-rot{min-height:174px}}
.pv3-vfoot .pv3-tapw{display:inline}
.pv3-vfoot .pv3-hoverw{display:none}
@media (hover:hover){.pv3-vfoot .pv3-hoverw{display:inline}.pv3-vfoot .pv3-tapw{display:none}}

/* Carousel at phone widths (2026-08-25 corridor review): the amount chip's nowrap
   clipped long ranges ("$75K-$1M typical (up to $10M)") at the card edge, and the
   overlay arrows sat on top of the locked stat tiles. Tabs + auto-cycle remain the nav. */
@media (max-width:480px){
  .pv3-ghead{flex-wrap:wrap}
  .pv3-gamt{white-space:normal;line-height:1.35}
  .pv3-arrow{display:none}
}

/* ★ 2026-09-03 tap targets: the match-card dots are 22px controls on a phone. Extend the
   hit area to 44px tall (and the 6px gutter) without moving a pixel of layout. */
.pv3-dots button::before{content:'';position:absolute;top:-11px;bottom:-11px;left:-11px;right:-11px}

/* ★ 2026-09-03 tap targets (phone): the free escape hatch under the hero was a 19px
   text link; the Playbooks button 41px. */
@media (max-width: 560px) {
  .pv3-proofline a { padding: 13px 0; margin: -11px 0; }
  .pv3-pbcta { min-height: 44px; display: inline-flex; align-items: center; }
}