/**
 * AICT Pricing Page Styles
 * High-contrast, Zapier-inspired design
 *
 * @package AICT_Core
 * @since 1.7.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --pricing-bg: #ffffff;
    --pricing-text: var(--aict-midnight-2);
    --pricing-text-muted: #4a4a68;
    --pricing-border: #e2e8f0;
    --pricing-accent: #5c5fe6;
    --pricing-accent-hover: #e55a2b;
    --pricing-success: #10b981;
    --pricing-card-bg: #ffffff;
    --pricing-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --pricing-featured-bg: linear-gradient(135deg, var(--aict-midnight-2) 0%, #2d2d44 100%);
    --pricing-featured-text: #ffffff;
}

/* ==========================================================================
   Base Layout
   ========================================================================== */
.pricing-header,
.pricing-section,
.enterprise-section,
.comparison-section,
.guarantee-section,
.pro-unlocks-section,
.faq-section,
.final-cta-section {
    padding: 4rem 1.5rem;
    background: var(--pricing-bg);
}

/* Reduce gap between pricing header and pricing grid sections */
.pricing-header + .pricing-section {
    padding-top: 0;
}

.pricing-header {
    text-align: center;
    padding-bottom: 2rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding-top: 5rem;
}

.pricing-header h1 {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--pricing-text);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.pricing-header > .container > p {
    font-size: 1.25rem;
    color: var(--pricing-text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* ==========================================================================
   Billing Toggle
   ========================================================================== */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.pricing-toggle span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--pricing-text-muted);
    cursor: pointer;
    user-select: none;
    transition: color var(--aict-transition-fast), font-weight var(--aict-transition-fast);
}
.pricing-toggle span.active {
    color: var(--pricing-text);
    font-weight: 700;
}

/* [UX-06 2026-08-12 — docs/UX_FIX_BRIEF.md] WCAG 2.5.5 target size.
   Both labels toggle the billing period (not just the knob), so both need a
   real hit area. Measured live at 390px: "Monthly" was 59x25 while "Annual"
   — which wraps with the savings badge — was already 172x79. The row is
   flex/align-items:center, so giving the labels a 44px min-height changes the
   hit box without moving anything visually. */
.pricing-toggle span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Expand the knob's hit area to >=44px WITHOUT resizing the pill. The visible
   switch is 56x28 with its handle drawn by ::after and positioned against that
   exact geometry — growing the element would decentre the handle. ::before is
   unused, so an inset overlay adds 8px of tappable margin on every side
   (measured 32x44 on mobile -> 48x60 tappable) and is invisible. */
.toggle-switch::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 999px;
}

.toggle-switch {
    width: 56px;
    height: 28px;
    background: #e2e8f0;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background var(--aict-transition-base);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform var(--aict-transition-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch.annual {
    background: var(--pricing-accent);
}

.toggle-switch.annual::after {
    transform: translateX(28px);
}

.save-badge {
    background: var(--pricing-success);
    color: #ffffff !important;  /* v4.16.80r: defeat inherited muted color from .pricing-toggle span */
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    line-height: 1.2;
}
.pricing-toggle .save-badge,
.pricing-card .save-badge,
section .save-badge {
    color: #ffffff !important;
}

/* ==========================================================================
   Pricing Cards Grid
   v4.16.80o: 6-tier layout
   v4.16.80q: explicit 3-col on desktop (1024+) instead of auto-fit (was 4+2),
              card flexbox to push CTA to bottom for uniform heights, fix CTA
              button overflow (was 354px in 292px content area).
   ========================================================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}

@media (max-width: 1023px) and (min-width: 769px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 1rem;
        padding: 0.5rem 1rem 1.5rem;
        margin: 0 -1rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .pricing-grid > .pricing-card {
        flex: 0 0 84vw;
        max-width: 320px;
        scroll-snap-align: center;
        padding: 1.75rem 1.5rem;
    }
    .pricing-grid::-webkit-scrollbar { height: 6px; }
    .pricing-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
}

.pricing-card {
    background: var(--pricing-card-bg);
    border: 2px solid var(--pricing-border);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    position: relative;
    transition: transform var(--aict-transition-base), box-shadow var(--aict-transition-base);
    /* [v4.16.80q] flex column → push CTA to bottom for uniform card heights.
       overflow:visible because .plan-badge sits at top:-12px outside card. */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
}

/* CTA on every card sits flush at bottom; everything above it stretches */
.pricing-card .plan-cta {
    margin-top: auto;
}
.pricing-card .plan-features {
    flex: 1 0 auto;
}

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

/* Featured Card (Pro) */
.pricing-card.featured {
    background: var(--pricing-featured-bg);
    border-color: transparent;
    color: var(--pricing-featured-text);
}

.pricing-card.featured .plan-name,
.pricing-card.featured .price-amount,
.pricing-card.featured .price-period,
.pricing-card.featured .plan-highlight,
.pricing-card.featured .plan-features li,
.pricing-card.featured .best-for h4,
.pricing-card.featured .best-for li {
    color: var(--pricing-featured-text);
}

.pricing-card.featured .plan-features li.disabled {
    color: rgba(255, 255, 255, 0.5);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pricing-accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.plan-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pricing-text);
    margin-bottom: 1rem;
}

.plan-price {
    margin-bottom: 1.5rem;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--pricing-text);
    line-height: 1;
}

.price-period {
    font-size: 1rem;
    color: var(--pricing-text-muted);
    font-weight: 500;
}

.plan-highlight {
    background: rgba(255, 107, 53, 0.1);
    color: var(--pricing-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.pricing-card.featured .plan-highlight {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* ==========================================================================
   Feature List
   ========================================================================== */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.plan-features li {
    padding: 0.625rem 0;
    padding-left: 1.75rem;
    position: relative;
    font-size: 1rem;
    color: var(--pricing-text);
    border-bottom: 1px solid var(--pricing-border);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--pricing-success);
    font-weight: 700;
}

/* WCAG: prior `opacity: 0.6` stacked on muted text gave ~2.8:1 — failed AA.
   Removed opacity; bumped color to #6b7280 (slate-500) on white -> 4.6:1 (AA Large/Normal pass).
   Featured-card disabled override below stays at rgba(255,255,255,0.5) which is 9.5:1 on the navy gradient. */
.plan-features li.disabled {
    color: #6b7280;
}

.plan-features li.disabled::before {
    content: '✗';
    color: #6b7280;
}

.pricing-card.featured .plan-features li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   CTA Buttons
   v4.16.80q: .pricing-card .btn now full-width with reduced horizontal padding
   so it never overflows its container. Prior: padding 1rem 2rem made buttons
   ~354px in 292px content area = 32px overflow each side.
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--aict-transition-fast);
    text-align: center;
    border: none;
    box-sizing: border-box;
}

.pricing-card .btn,
.pricing-card .plan-cta {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    box-sizing: border-box;
}

.btn-primary {
    background: var(--pricing-accent);
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--pricing-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--pricing-text) !important;
    border: 2px solid var(--pricing-border);
}

.btn-secondary:hover {
    border-color: var(--pricing-accent);
    color: var(--pricing-accent) !important;
}

.pricing-card.featured .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
}

.pricing-card.featured .btn-secondary:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.plan-cta {
    width: 100%;
    margin-top: 1rem;
}

/* ==========================================================================
   Best For Section
   ========================================================================== */
.best-for {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pricing-border);
}

.pricing-card.featured .best-for {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.best-for h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pricing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.best-for ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.best-for li {
    font-size: 0.9375rem;
    color: var(--pricing-text-muted);
    padding: 0.25rem 0;
}

/* ==========================================================================
   Enterprise Section
   ========================================================================== */
.enterprise-section {
    background: #f8fafc;
}

.enterprise-card {
    background: var(--pricing-card-bg);
    border: 2px solid var(--pricing-border);
    border-radius: 16px;
    padding: 3rem;
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 2rem;
    align-items: center;
}

.enterprise-content h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--pricing-text);
    margin-bottom: 0.5rem;
}

.enterprise-content p {
    color: var(--pricing-text-muted);
    margin: 0;
}

.enterprise-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.enterprise-feature {
    font-size: 0.875rem;
    color: var(--pricing-success);
    font-weight: 500;
}

/* ==========================================================================
   Comparison Table
   ========================================================================== */
.comparison-section {
    background: #ffffff;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pricing-text);
    text-align: center;
    margin-bottom: 3rem;
}

.comparison-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    background: var(--pricing-card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pricing-card-shadow);
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--pricing-border);
}

.comparison-table th {
    background: var(--pricing-text);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-table th:not(:first-child) {
    text-align: center;
}

.comparison-table td:not(:first-child) {
    text-align: center;
    font-weight: 500;
}

.comparison-table tbody tr:hover {
    background: #f8fafc;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.check-icon {
    color: var(--pricing-success);
    font-size: 1.25rem;
}

/* [v4.16.80fh — wcag-2-2-aa-audit-fixes] icon color was #9ca3af (2.85:1 on white).
   WCAG 1.4.11 requires 3:1 minimum for graphical icons. Bumped to #6b7280
   (4.6:1) to clear non-text contrast threshold. */
.cross-icon {
    color: #6b7280;
    font-size: 1.25rem;
}

/* ==========================================================================
   Guarantee Section
   ========================================================================== */
.guarantee-section {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.guarantee-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.guarantee-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.guarantee-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.guarantee-content p {
    font-size: 1.125rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-section {
    background: #f8fafc;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background: var(--pricing-card-bg);
    border: 1px solid var(--pricing-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.faq-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pricing-text);
    margin-bottom: 0.75rem;
}

.faq-item p {
    font-size: 0.9375rem;
    color: var(--pricing-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Final CTA Section
   ========================================================================== */
.final-cta-section {
    background: var(--pricing-text);
    color: #ffffff;
    text-align: center;
}

.final-cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.final-cta-section .text-gray {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
}

.cta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 700px;
    margin: 0 auto 2.5rem;
}

.cta-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
}

.cta-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cta-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    margin: 0;
}

.trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.trust-badge {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .pricing-header h1 {
        font-size: 2rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .enterprise-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .enterprise-features {
        justify-content: center;
    }

    .comparison-table {
        font-size: 0.875rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .final-cta-section h2 {
        font-size: 1.75rem;
    }

    .cta-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */
.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

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

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }

/* ==========================================================================
   Loading State for Checkout
   ========================================================================== */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn.loading::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: aict-spin-anchored var(--aict-animation-spin-dur, 0.8s) linear infinite;
}

/* Custom anchored variant — preserves translateY(-50%) for vertically-centered spinner pseudo-element. */
@keyframes aict-spin-anchored {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ==========================================================================
   What Pro Unlocks Section
   ========================================================================== */
.pro-unlocks-section {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.pro-unlocks-section .section-subtitle {
    text-align: center;
    color: var(--pricing-text-muted);
    font-size: 1.1rem;
    margin: -0.5rem auto 2.5rem;
    max-width: 540px;
}

.unlocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

.unlock-card {
    background: #ffffff;
    border: 1px solid var(--pricing-border);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: left;
    box-shadow: var(--pricing-card-shadow);
    display: flex;
    flex-direction: column;
}

.unlock-icon {
    font-size: 2rem;
    margin-bottom: 0.875rem;
    line-height: 1;
}

.unlock-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pricing-text);
    margin: 0 0 0.625rem;
    line-height: 1.3;
}

.unlock-card p {
    font-size: 0.9375rem;
    color: var(--pricing-text-muted);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.unlock-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--pricing-accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.unlock-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .unlocks-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .unlocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .unlock-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 0.5rem);
        margin: 0 auto;
    }
}

/* ==========================================================================
   Dark Mode — [data-theme="dark"] via AICT dark mode toggle
   ========================================================================== */
[data-theme="dark"] {
    --pricing-bg: #0f172a;
    --pricing-text: #e2e8f0;
    --pricing-text-muted: #94a3b8;
    --pricing-border: #2d3748;
    --pricing-card-bg: #1e293b;
    --pricing-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
}

[data-theme="dark"] .pricing-header {
    background: linear-gradient(180deg, #0f172a 0%, #0f172a 100%);
}

[data-theme="dark"] .pro-unlocks-section {
    background: linear-gradient(180deg, #0a1120 0%, #0f172a 100%);
}

[data-theme="dark"] .unlock-card {
    background: #1e293b;
}

/* Non-featured card buttons: solid outline → white text + visible border in dark */
[data-theme="dark"] .btn-secondary {
    color: #e2e8f0 !important;
    border-color: #4a5568;
    background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--pricing-accent);
    color: var(--pricing-accent) !important;
    background: rgba(99,102,241,0.12);
}

/* Featured card (Pro) already has dark bg + white — leave as-is */
[data-theme="dark"] .pricing-card.featured .btn-secondary {
    border-color: rgba(255,255,255,0.3);
    color: #ffffff !important;
    background: rgba(255,255,255,0.08);
}

/* Final CTA dark backgrounds already work — keep foreground readable */
[data-theme="dark"] .final-cta-section {
    background: #0a0a1a;
}

/* Guarantee / comparison sections */
[data-theme="dark"] .guarantee-section,
[data-theme="dark"] .comparison-section,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .enterprise-section {
    background: #0f172a;
}

[data-theme="dark"] .comparison-table th {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .comparison-table td,
[data-theme="dark"] .comparison-table tr:nth-child(even) td {
    background: transparent;
    color: #e2e8f0;
    border-bottom-color: #2d3748;
}

[data-theme="dark"] .comparison-table tr:nth-child(even) {
    background: #1a2535;
}

[data-theme="dark"] .faq-item {
    border-color: #2d3748;
}

[data-theme="dark"] .enterprise-card {
    background: #1e293b;
    border-color: #2d3748;
}


/* ==========================================================================
   MOBILE: 7-plan comparison table
   [2026-08-31 mobile-overflow]
   The table is emitted with an inline style="min-width:920px" inside a
   role="region" overflow-x:auto wrapper (class-aict-dynamic-routes.php), so it
   does NOT widen the document — measured /pricing/ docWidth 390/390 at 390px.
   What it DOES do is show almost nothing per screenful: the wrapper is 342px
   wide against a 952px scroll width, so exactly ONE of the seven columns was
   fully on screen at 390px and ZERO at 320px. Shrinking the mobile floor to
   560px takes the rendered table to 638px: 3 whole columns at 390px, 2 at 320px,
   with zero clipped cells (every cell's text box still fits its own content box,
   verified in all three theme states before and after).
   min-width needs !important here — the 920px lives in the element's inline
   style attribute, which beats a normal author declaration.
   ========================================================================== */
@media (max-width: 700px) {
    .comparison-table {
        min-width: 560px !important;
        font-size: 0.8125rem;
    }
    .comparison-table th,
    .comparison-table td {
        padding: 0.6rem 0.5rem;
    }
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        padding-left: 0.75rem;
    }
    /* Keep the swipe gesture inside the table instead of dragging the page with it,
       and show a real scrollbar where the platform draws one. */
    .comparison-section [role="region"] {
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
}

/**
 * AICT /pricing/ "craft" pass  [2026-06-14]
 * Completes the funnel-wide "Workbench" identity (homepage + tool pages + find-tool +
 * discover). CONSERVATIVE — pricing is conversion-critical. CSS-ONLY, LIGHT mode only,
 * scoped to .landing-page-pricing, literal hex. DELIBERATELY UNTOUCHED: the checkout
 * CTAs (.btn/.plan-cta), the featured Pro card (.featured — its navy emphasis is a
 * conversion anchor), and the JS/ARIA billing toggle. Reversible (drop the enqueue);
 * pricing.css's own [data-theme="dark"] block is a different theme branch — no collision.
 */

/* ===== section display titles → Fraunces (matches the rest of the funnel) =====
   NOTE: the pricing HERO h1 is deliberately EXCLUDED — it sits directly above the
   JS-initialized billing toggle + social-proof strip, and the web-font swap on a large
   hero heading reflowed that whole region (CLS jumped 0.11→0.24). Section h2s sit
   between/after content so their swap doesn't push the reflow-sensitive toggle. */
html:not([data-theme="dark"]) .landing-page-pricing .section-title,
html:not([data-theme="dark"]) .landing-page-pricing .pricing-faq-section h2,
html:not([data-theme="dark"]) .landing-page-pricing .comparison-section h2,
html:not([data-theme="dark"]) .landing-page-pricing .pro-unlocks-section h2{
  font-family:'Fraunces',Georgia,serif !important;
  font-optical-sizing:auto;font-weight:900 !important;letter-spacing:-.015em;
  color:#211b16 !important;
}
/* hero h1: keep ink color + tight tracking but NOT the swapping web font (CLS) */
html:not([data-theme="dark"]) .landing-page-pricing .pricing-header h1{
  color:#211b16 !important;letter-spacing:-.015em;
}

/* ===== hero band → warm cream graph paper ===== */
html:not([data-theme="dark"]) .landing-page-pricing .pricing-header{
  background:#f6efe2 !important;
  background-image:
    linear-gradient(#e3d7be 1px,transparent 1px),
    linear-gradient(90deg,#e3d7be 1px,transparent 1px) !important;
  background-size:30px 30px,30px 30px !important;
  border-bottom:2px solid #211b16 !important;
}

/* ===== plan cards → letterpress, but NOT the featured Pro card (left navy) ===== */
html:not([data-theme="dark"]) .landing-page-pricing .pricing-card:not(.featured){
  background:#fffdf8 !important;
  border:2px solid #211b16 !important;
  border-radius:14px !important;
  box-shadow:6px 6px 0 #211b16 !important;
  transition:transform .14s ease, box-shadow .14s ease !important;
}
html:not([data-theme="dark"]) .landing-page-pricing .pricing-card:not(.featured):hover{
  transform:translate(-2px,-2px) !important;
  box-shadow:9px 9px 0 #211b16 !important;
}
html:not([data-theme="dark"]) .landing-page-pricing .pricing-card:not(.featured) .plan-name{color:#211b16 !important;}

/* plan highlight + badge → workbench chip voice (non-featured cards) */
html:not([data-theme="dark"]) .landing-page-pricing .pricing-card:not(.featured) .plan-highlight{
  background:#f6efe2 !important;color:#a8330c !important;border:1.5px solid #cdbfa6 !important;
}

/* ===== Pro-unlocks cards → letterpress ===== */
html:not([data-theme="dark"]) .landing-page-pricing .unlock-card{
  background:#fffdf8 !important;
  border:2px solid #211b16 !important;
  border-radius:12px !important;
  box-shadow:5px 5px 0 #211b16 !important;
}