/* Pricing comparison — public marketing surface */

body.pricing-comparison-page {
    --pricing-text: #f4f4f5;
    --pricing-copy: rgba(244, 244, 245, 0.66);
    --pricing-muted: rgba(244, 244, 245, 0.42);
    --pricing-faint: rgba(244, 244, 245, 0.25);
    --pricing-surface: rgba(17, 17, 21, 0.72);
    --pricing-surface-solid: rgba(13, 13, 16, 0.96);
    --pricing-line: rgba(255, 255, 255, 0.075);
    --pricing-line-strong: rgba(255, 255, 255, 0.13);
    --pricing-blue: #60a5fa;
    --pricing-blue-ice: #bfdbfe;
    --pricing-blue-soft: rgba(59, 130, 246, 0.1);
    --pricing-blue-line: rgba(96, 165, 250, 0.28);
    background: #09090b;
}

.pricing-main {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(8.75rem, 12vw, 10.5rem) clamp(1.25rem, 4vw, 3rem) clamp(7rem, 11vw, 10rem);
}

.pricing-main::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    opacity: 0.025;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.pricing-atmosphere,
.pricing-grid-plane {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.pricing-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(110px);
}

.pricing-orb-primary {
    top: -18rem;
    left: 46%;
    width: min(58rem, 74vw);
    height: min(58rem, 74vw);
    background: rgba(59, 130, 246, 0.12);
}

.pricing-orb-secondary {
    top: 42rem;
    left: -18rem;
    width: 36rem;
    height: 36rem;
    background: rgba(255, 255, 255, 0.035);
}

.pricing-grid-plane {
    height: 48rem;
    opacity: 0.46;
    background-image:
        linear-gradient(var(--pricing-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--pricing-line) 1px, transparent 1px);
    background-size: 82px 82px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 52%, transparent 100%);
}

.comparison-section,
.pricing-final-cta {
    width: min(1160px, 100%);
    margin-inline: auto;
}

.comparison-intro h2,
.pricing-final-cta h2 {
    margin: 0;
    color: var(--pricing-text);
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.035em;
}

.comparison-intro h2 em,
.pricing-final-cta h2 em {
    color: transparent;
    font-weight: 400;
    background: linear-gradient(180deg, #eff6ff 18%, var(--pricing-blue) 110%);
    -webkit-background-clip: text;
    background-clip: text;
}

.comparison-section {
    position: relative;
}

.comparison-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 7rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.pricing-comparison-page main p.comparison-kicker,
.comparison-kicker,
body.pricing-comparison-page main p.pricing-final-index,
.pricing-final-index {
    margin: 0 0 1rem;
    color: var(--pricing-blue);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comparison-intro h2,
.pricing-final-cta h2 {
    font-size: clamp(3rem, 6.2vw, 5.6rem);
    line-height: 0.94;
}

body.pricing-comparison-page main .comparison-intro > p,
.comparison-intro > p {
    margin: 0;
    color: var(--pricing-copy);
    font-size: 0.96rem;
    line-height: 1.75;
}

.comparison-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pricing-line);
    border-radius: 28px;
    background:
        radial-gradient(65% 55% at 100% 0%, rgba(59, 130, 246, 0.1), transparent 74%),
        var(--pricing-surface);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 40px 100px -52px rgba(0, 0, 0, 0.88),
        0 28px 80px -58px rgba(59, 130, 246, 0.5);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.comparison-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pricing-line-strong) transparent;
}

.comparison-scroll:focus-visible {
    outline: 2px solid var(--pricing-blue);
    outline-offset: -3px;
    border-radius: 26px 26px 0 0;
}

.comparison-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.comparison-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.comparison-feature-column { width: 42%; }
.comparison-starter-column,
.comparison-professional-column { width: 29%; }

.comparison-table th,
.comparison-table td {
    border: 0;
    border-bottom: 1px solid var(--pricing-line);
}

.comparison-table thead th {
    height: 15rem;
    padding: 2rem clamp(1.2rem, 2.6vw, 2.25rem);
    vertical-align: bottom;
}

.comparison-head-label {
    color: var(--pricing-muted);
    text-align: left;
}

.comparison-head-label > span {
    display: block;
    color: var(--pricing-text);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comparison-head-label small {
    display: block;
    max-width: 17rem;
    margin-top: 0.65rem;
    color: var(--pricing-muted);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.55;
}

.plan-heading {
    position: relative;
    text-align: left;
}

.plan-heading-professional,
.comparison-table tbody td:nth-child(3) {
    background: var(--pricing-blue-soft);
    box-shadow: inset 1px 0 0 rgba(96, 165, 250, 0.1), inset -1px 0 0 rgba(96, 165, 250, 0.08);
}

.plan-heading-name,
.plan-heading-price,
.plan-heading-note {
    display: block;
}

.plan-heading-name {
    color: var(--pricing-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.plan-heading-price {
    margin-top: 0.8rem;
}

.plan-heading-price strong {
    color: var(--pricing-text);
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.plan-heading-price small {
    margin-left: 0.35rem;
    color: var(--pricing-muted);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.plan-heading-note {
    margin-top: 0.8rem;
    color: var(--pricing-muted);
    font-family: "Geist Mono", monospace;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.045em;
    line-height: 1.5;
    text-transform: uppercase;
}

.plan-badge {
    position: absolute;
    top: 2rem;
    left: clamp(1.2rem, 2.6vw, 2.25rem);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.33rem 0.62rem;
    border: 1px solid var(--pricing-blue-line);
    border-radius: 999px;
    background: var(--pricing-blue-soft);
    color: var(--pricing-blue-ice);
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.plan-badge::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    content: "";
    background: var(--pricing-blue);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.75);
}

.comparison-group-row th {
    padding: 1.05rem clamp(1.2rem, 2.6vw, 2.25rem);
    background: rgba(255, 255, 255, 0.018);
    color: var(--pricing-copy);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
}

.comparison-group-row th span {
    display: inline-block;
    min-width: 2.8rem;
    color: var(--pricing-blue);
    font-size: 0.58rem;
}

.comparison-table tbody tr:not(.comparison-group-row) th,
.comparison-table tbody td {
    height: 4.65rem;
    padding: 1rem clamp(1.2rem, 2.6vw, 2.25rem);
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.feature-cell {
    color: var(--pricing-copy);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

.comparison-table td {
    color: var(--pricing-copy);
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: left;
}

.value-strong {
    color: var(--pricing-text);
    font-weight: 500;
}

.value-professional { color: var(--pricing-blue-ice); }

.value-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pricing-muted);
}

.value-muted > span { color: var(--pricing-faint); }

.feature-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--pricing-copy);
    font-weight: 500;
}

.feature-status svg {
    width: 1rem;
    height: 1rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-status-active { color: var(--pricing-blue-ice); }

.comparison-table-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1.15rem clamp(1.2rem, 2.6vw, 2.25rem);
    border-top: 1px solid var(--pricing-line);
    color: var(--pricing-muted);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.comparison-table-footer span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.comparison-table-footer span::before {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    content: "";
    background: var(--pricing-muted);
}

.comparison-scroll-hint { display: none; }

.pricing-final-cta {
    position: relative;
    display: grid;
    justify-items: center;
    padding: clamp(8rem, 15vw, 13rem) 1rem 2rem;
    text-align: center;
}

.pricing-final-cta::before {
    position: absolute;
    top: 48%;
    left: 50%;
    z-index: -1;
    width: min(50rem, 90vw);
    height: 30rem;
    content: "";
    background: radial-gradient(circle, rgba(59, 130, 246, 0.11), transparent 68%);
    filter: blur(30px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body.pricing-comparison-page main .pricing-final-cta > p:not(.pricing-final-index):not(.pricing-cta-note),
.pricing-final-cta > p:not(.pricing-final-index):not(.pricing-cta-note) {
    max-width: 560px;
    margin: 1.6rem 0 0;
    color: var(--pricing-copy);
    font-size: 1rem;
    line-height: 1.7;
}

.pricing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2.2rem;
}

.pricing-cta-actions .btn-lg {
    min-height: 3.25rem;
    padding-inline: 1.5rem;
}

.pricing-cta-actions .btn span,
.pricing-secondary-cta span {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-cta-actions .btn:hover span { transform: translate(2px, -2px); }

.pricing-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.25rem;
    padding: 0.8rem 1.45rem;
    border: 1px solid var(--pricing-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--pricing-text);
    font-size: 0.91rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pricing-secondary-cta:hover {
    border-color: var(--pricing-blue-line);
    background: var(--pricing-blue-soft);
    color: var(--pricing-blue-ice);
    transform: translateY(-1px);
}

.pricing-secondary-cta:hover span { transform: translateX(3px); }

.pricing-secondary-cta:focus-visible {
    outline: 2px solid var(--pricing-blue);
    outline-offset: 3px;
}

body.pricing-comparison-page main p.pricing-cta-note,
.pricing-cta-note {
    margin: 1.25rem 0 0;
    color: var(--pricing-muted);
    font-size: 0.57rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
    .comparison-section {
        animation: pricing-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes pricing-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

html[data-theme="light"] body.pricing-comparison-page {
    --pricing-text: #141417;
    --pricing-copy: rgba(20, 20, 23, 0.68);
    --pricing-muted: rgba(20, 20, 23, 0.48);
    --pricing-faint: rgba(20, 20, 23, 0.25);
    --pricing-surface: rgba(255, 255, 255, 0.76);
    --pricing-surface-solid: rgba(250, 250, 248, 0.97);
    --pricing-line: rgba(20, 20, 23, 0.09);
    --pricing-line-strong: rgba(20, 20, 23, 0.16);
    --pricing-blue: #2563eb;
    --pricing-blue-ice: #1d4ed8;
    --pricing-blue-soft: rgba(59, 130, 246, 0.075);
    --pricing-blue-line: rgba(37, 99, 235, 0.26);
    background: #f6f6f4;
}

html[data-theme="light"] .pricing-orb-primary { background: rgba(59, 130, 246, 0.1); }
html[data-theme="light"] .pricing-orb-secondary { background: rgba(20, 20, 23, 0.045); }
html[data-theme="light"] .pricing-main::after { opacity: 0.018; }
html[data-theme="light"] .comparison-intro h2 em,
html[data-theme="light"] .pricing-final-cta h2 em {
    background: linear-gradient(180deg, #1e3a8a 10%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] .comparison-shell {
    background:
        radial-gradient(65% 55% at 100% 0%, rgba(59, 130, 246, 0.08), transparent 74%),
        var(--pricing-surface);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 35px 90px -55px rgba(20, 20, 23, 0.35),
        0 28px 80px -58px rgba(37, 99, 235, 0.28);
}
html[data-theme="light"] .comparison-group-row th { background: rgba(20, 20, 23, 0.018); }
html[data-theme="light"] .pricing-secondary-cta { background: rgba(20, 20, 23, 0.03); }

@media (max-width: 820px) {
    .pricing-main { padding-top: 8.25rem; }

    .comparison-intro { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .pricing-main {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .comparison-intro h2,
    .pricing-final-cta h2 { font-size: clamp(3rem, 15vw, 4.4rem); }

    .comparison-shell { border-radius: 20px; }

    .comparison-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        margin: 0;
        padding: 0.85rem 1rem 0;
        color: var(--pricing-muted);
        font-size: 0.55rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .comparison-scroll-hint span { color: var(--pricing-blue); }

    .comparison-table { min-width: 720px; }

    .comparison-table thead th { height: 13.5rem; }

    .comparison-head-label,
    .feature-cell {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--pricing-surface-solid);
        box-shadow: 8px 0 16px -16px rgba(0, 0, 0, 0.8);
    }

    .comparison-head-label { z-index: 3; }

    .comparison-feature-column { width: 44%; }
    .comparison-starter-column,
    .comparison-professional-column { width: 28%; }

    .comparison-table-footer {
        justify-content: flex-start;
        padding-block: 1rem;
    }

    .pricing-final-cta { padding-top: 8rem; }

    .pricing-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .pricing-cta-actions .btn,
    .pricing-secondary-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-cta-actions .btn,
    .pricing-secondary-cta,
    .pricing-cta-actions .btn span,
    .pricing-secondary-cta span { transition: none; }
}