/* =====================================================================
 * pricing.css — public /pricing page
 * ---------------------------------------------------------------------
 * Hero · plan cards grid · education card · comparison table · CTA.
 *
 * Follows DESIGN.md §8.2 long-form archetype:
 *   - Page-scoped section tokens (--pricing-section-pad-y, ease, etc.)
 *   - §3.3 type ramp: eyebrow 13px literal · 700/clamp display · 400 body
 *   - §3.4 eyebrow: 13px · 500 · 0.16em uppercase · --global-text-muted
 *   - §7.4 unified button system: pill 999px · primary = dark fill +
 *     light text · outline variant for secondary
 *   - §7.7 cards: --global-card-background + --global-border-color, 16-22px
 *     radius, 4-quadrant iridescent hover bloom on the recommended card,
 *     ambient lift on the others
 *   - §6.5 the ONE iridescent moment per surface = the recommended card
 *     ribbon + 1px iridescent border (no other element uses
 *     --brand-iridescent-gradient)
 *   - §7.6 comparison table: hairlines at rgba(text, 0.06), recommended
 *     column flagged with iris-tinted surface, sticky group label cells
 *   - Korean wrapping (§0 principle 3) on every long-form container
 *   - Single 640px chrome breakpoint (§4.7); table goes horizontal scroll
 *   - prefers-reduced-motion override per §5.7
 * ===================================================================== */

.pricing-page {
    --pricing-section-pad-y: clamp(72px, 12vh, 140px);
    --pricing-section-pad-x: clamp(24px, 5vw, 80px);
    --pricing-content-max:   1180px;
    --pricing-content-narrow: 960px;
    --pricing-card-radius:   20px;
    --pricing-field-radius:  12px;
    --pricing-gap:           clamp(20px, 2.4vw, 28px);
    --pricing-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
    --pricing-ease-spring:   cubic-bezier(0.16, 1,    0.3,  1);

    display: block;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    width: 100%;
    color: var(--global-text-color);
    font-family: 'Pretendard Variable', Pretendard, -apple-system,
                 BlinkMacSystemFont, system-ui, sans-serif;
    word-break: keep-all;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    padding: 0 var(--pricing-section-pad-x) clamp(96px, 14vh, 180px);
}

/* Ambient aura — shared vocabulary with auth/profile/stage/about so the
   public marketing pages sit on the same iridescent backdrop instead of a
   flat fill. Decorative only (aria-hidden in markup), pinned behind content
   via z-index:-1 inside the .pricing-page stacking context. */
.pricing-aura {
    position: absolute;
    inset: -20% -15% auto -15%;
    height: 120%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 48% at 22% 30%, rgba(var(--brand-violet-rgb), 0.18), transparent 70%),
        radial-gradient(34% 42% at 78% 22%, rgba(var(--brand-rose-rgb),   0.14), transparent 72%),
        radial-gradient(40% 46% at 62% 72%, rgba(var(--brand-teal-rgb),   0.14), transparent 70%),
        radial-gradient(36% 40% at 18% 78%, rgba(var(--brand-cognac-rgb), 0.12), transparent 72%);
    filter: blur(78px) saturate(120%);
    opacity: 0.72;
    animation: pricing-aura-drift 26s ease-in-out infinite alternate;
}
@keyframes pricing-aura-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1)    rotate(0deg); }
    50%  { transform: translate3d( 2%,  1%, 0) scale(1.06) rotate(2deg); }
    100% { transform: translate3d( 3%, -1%, 0) scale(1.03) rotate(-2deg); }
}

.pricing-page .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ====================================================================
 * 01 · HERO
 * ==================================================================== */

.pricing-hero {
    max-width: var(--pricing-content-max);
    margin: 0 auto;
    padding: var(--pricing-section-pad-y) 0 clamp(48px, 7vh, 72px);
    text-align: center;
}

.pricing-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2vh, 24px);
    max-width: var(--pricing-content-narrow);
    margin: 0 auto;
}

/* Eyebrow — DESIGN.md §3.4 verbatim (13px · 500 · 0.16em · muted). */
.pricing-hero-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

/* Orphan-word guard — balance short display/lead text so the final word
   never wraps onto a line by itself. Progressive enhancement: browsers
   without text-wrap support simply ignore it, and balance never alters
   box dimensions (no layout shift / overflow). */
.pricing-hero-title,
.pricing-hero-subtitle,
.pricing-section-title,
.pricing-education-title,
.pricing-cta-title,
.pricing-cta-subtitle {
    text-wrap: balance;
}

/* Display headline — §3.3 (800 · clamp · -0.04em). */
.pricing-hero-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(34px, 5.6vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--global-text-color);
    max-width: 18ch;
}

/* Body lead — §3.3 lead style (clamp 16-19 · 400 · 1.65 · muted). */
.pricing-hero-subtitle {
    margin: 0;
    max-width: 640px;
    font-family: inherit;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

/* Beta banner — chip / pill style from §7.3. Hairline border, neutral
   surface (--state-hover-bg), inline-flex with 10px gap. */
.pricing-beta-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 8px 16px 8px 10px;
    background: var(--state-hover-bg);
    border: 1px solid rgba(var(--global-text-color-rgb), 0.08);
    border-radius: 999px;
}

.pricing-beta-banner-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--global-button-text-color);
    background: var(--global-button-background-color);
    border-radius: 999px;
}

.pricing-beta-banner-text {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
}

/* ====================================================================
 * 02 · PLAN GRID
 * ==================================================================== */

.pricing-grid-section {
    max-width: var(--pricing-content-max);
    margin: 0 auto;
    padding: clamp(24px, 4vh, 48px) 0;
    box-sizing: border-box;
}

.pricing-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pricing-gap);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
}

/* When 4 plans, switch to fixed 4-up so the recommended card stays
   centered in the visual rhythm. */
.pricing-grid[data-plan-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
    .pricing-grid[data-plan-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pricing-grid,
    .pricing-grid[data-plan-count="4"] {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
 * Mobile (≤ 640px) — tighten the whole pricing surface
 * ---------------------------------------------------------------------
 * The desktop clamp() floors give the pricing page a generous, airy
 * feel on wide viewports — but on a 360-400px phone those same floors
 * compress to too-tall heros, over-padded cards, and a comparison table
 * that requires sideways scrolling just to see who's in which column.
 *
 * This block keeps the brand DI intact (Pretendard, hairlines, 999px
 * pill CTAs, the single iridescent moment on the recommended card)
 * while collapsing whitespace to phone-appropriate proportions.
 * ===================================================================== */
@media (max-width: 640px) {
    /* Trim the page's section paddings on phones. The desktop floor for
       `--pricing-section-pad-y` is 72px which steals a full third of a
       phone viewport before any content appears. */
    .pricing-page {
        --pricing-section-pad-y: 56px;
        --pricing-section-pad-x: 18px;
        --pricing-card-radius: 16px;
        --pricing-gap: 16px;
        padding-bottom: 64px;
    }

    /* Hero — pull the eyebrow / title / subtitle stack closer together
       and tighten the headline so a Korean phrase ("스토리, 그대로 무대 위에")
       fits on one or two lines instead of three. */
    .pricing-hero {
        padding: 40px 0 24px;
    }
    .pricing-hero-inner { gap: 14px; }
    .pricing-hero-title {
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.15;
        letter-spacing: -0.03em;
    }
    .pricing-hero-subtitle {
        font-size: 14.5px;
        line-height: 1.55;
    }
    /* Beta banner — on a narrow viewport the Korean message is too long
       to share a single line with the BETA pill, so the inline-flex
       parent's default `nowrap` would force the text to wrap inside
       the pill, turning the 999px radius into a giant oval with a
       centered badge floating beside multi-line text. Drop the pill
       to a 14px rounded rectangle and let the badge + message stack
       cleanly: badge on top, message below it, both left-aligned.
       `word-break: keep-all` (set on .pricing-page) already prevents
       mid-word Korean breaks. */
    .pricing-beta-banner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 14px;
    }
    .pricing-beta-banner-badge { height: 20px; padding: 0 8px; font-size: 10px; }
    .pricing-beta-banner-text  {
        font-size: 12.5px;
        line-height: 1.5;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* Plan grid + cards — tighter, less padded, lower price size so the
       card doesn't dominate the viewport. */
    .pricing-grid-section { padding: 24px 0; }
    .pricing-card {
        padding: 22px;
        gap: 16px;
    }
    .pricing-card-name        { font-size: 18px; }
    .pricing-card-desc        { font-size: 13px; }
    .pricing-card-price       { padding: 10px 0; }
    .pricing-card-price-amount{ font-size: 30px; }
    .pricing-card-highlights  { gap: 8px; }
    .pricing-card-highlights li { font-size: 13px; }
    .pricing-card-cta { height: 42px; padding: 0 18px; }
    /* Ribbon is decorative — pull it tight against the recommended card's
       top edge so it doesn't drift on phones. */
    .pricing-card-ribbon { top: -10px; font-size: 10px; height: 22px; padding: 0 10px; }

    /* Education section — already 1fr on ≤760px, but the inner CTA box
       still inherits desktop padding. Pull the inner padding back. */
    .pricing-education-section { padding: 32px 0; }
    .pricing-education-card { padding: 24px; gap: 20px; }
    .pricing-education-title { font-size: 24px; }
    .pricing-education-desc  { font-size: 14px; }
    .pricing-education-highlights li { font-size: 13px; }
    .pricing-education-cta-wrap { padding: 18px; gap: 12px; }
    .pricing-education-price-amount { font-size: 28px; }

    /* Comparison table — wraps in a scroll container with a higher
       min-width than the viewport. Make the scroll affordance obvious
       (a subtle fade on the right edge) and shrink the inner type so
       fewer characters wrap, reducing the scroll distance. */
    .pricing-compare-section { padding: 40px 0; }
    .pricing-section-title { font-size: 22px; margin-bottom: 18px; }
    .pricing-compare-wrap {
        position: relative;
        border-radius: 14px;
    }
    .pricing-compare-wrap::after {
        /* Fade hint on the right — disappears once the user scrolls in. */
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(
            to right,
            transparent,
            var(--global-card-background) 92%
        );
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
    }
    .pricing-compare-table { min-width: 560px; }
    .pricing-compare-feature-col,
    .pricing-compare-plan-col,
    .pricing-compare-cell { padding: 10px 14px; font-size: 12.5px; }
    .pricing-compare-group-row > th {
        padding: 12px 14px 6px;
        font-size: 10.5px;
        letter-spacing: 0.14em;
    }

    /* Closing CTA — drop the heavy iris box-shadow on phones (the
       shadow extent was tuned for a 540px-wide card; on a 360px card it
       reads as a halo bleed) and tighten internal padding. */
    .pricing-cta-section { padding: 40px 0 16px; }
    .pricing-cta-inner {
        padding: 28px 22px;
        gap: 14px;
        border-radius: 16px;
        box-shadow:
            0 16px 36px -22px rgba(var(--brand-iris-rgb), 0.16),
            0 8px 22px -16px rgba(var(--global-text-color-rgb), 0.08);
    }
    .pricing-cta-title    { font-size: 24px; }
    .pricing-cta-subtitle { font-size: 14px; }
    .pricing-cta-primary,
    .pricing-cta-secondary { height: 44px; padding: 0 22px; }
}

.pricing-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    color: var(--global-text-muted);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--pricing-card-radius);
}

/* ---------- Plan card --------------------------------------------- */

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(24px, 2.6vw, 32px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--pricing-card-radius);
    transition:
        transform   0.3s var(--pricing-ease-spring),
        box-shadow  0.3s var(--pricing-ease),
        border-color 0.18s var(--pricing-ease);
    isolation: isolate;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* Card hover bloom — §6.3 4-quadrant iridescent recipe.
   Standard cards get a soft ambient lift. */
.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 40px -22px rgba(var(--global-text-color-rgb), 0.18),
        0 12px 24px -16px rgba(var(--global-text-color-rgb), 0.10);
}

/* ---------- The ONE iridescent moment per surface (§6.5) ----------
   The recommended card gets the full 4-quadrant brand bloom and an
   iridescent 1px border via gradient mask. No other element on this
   page repeats either treatment. */
.pricing-card.is-recommended {
    /* Iridescent hairline via padding-box / border-box masking. */
    background:
        linear-gradient(var(--global-card-background), var(--global-card-background)) padding-box,
        var(--brand-iridescent-gradient) border-box;
    border: 1px solid transparent;
}

.pricing-card.is-recommended:hover {
    transform: translateY(-3px);
    box-shadow:
        -24px -16px 56px -10px rgba(var(--brand-iris-rgb),     0.26),
         24px -16px 56px -10px rgba(var(--brand-mulberry-rgb), 0.22),
         24px  24px 60px -10px rgba(var(--brand-brass-rgb),    0.20),
        -24px  24px 60px -10px rgba(var(--brand-lichen-rgb),   0.24),
          0   30px 60px -24px rgba(var(--global-text-color-rgb), 0.16);
}

.pricing-card-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--global-button-text-color);
    background: var(--global-button-background-color);
    border-radius: 999px;
    white-space: nowrap;
    z-index: 1;
}

.pricing-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Card title — §3.3 H3 spec (600 · clamp(18-22) · -0.018em). */
.pricing-card-name {
    margin: 0;
    font-family: inherit;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--global-text-color);
}

.pricing-card-desc {
    margin: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

/* Price block — §3.3 numeric lockup: large amount + small period. */
.pricing-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid rgba(var(--global-text-color-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--global-text-color-rgb), 0.06);
}

.pricing-card-price-currency {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--global-text-muted);
}

.pricing-card-price-amount {
    font-family: inherit;
    font-size: clamp(28px, 3.4vw, 36px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--global-text-color);
    /* Money figures are single tokens — never break mid-word.
       Overrides inherited `overflow-wrap: anywhere`. */
    overflow-wrap: normal;
    word-break: keep-all;
}

.pricing-card-price-period {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--global-text-muted);
}

.pricing-card-price-note {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

/* Highlights list — bulletless, hair-spaced. */
.pricing-card-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.pricing-card-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
}

.pricing-card-highlight-check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--global-button-text-color);
    background: var(--global-text-color);
    border-radius: 50%;
    line-height: 1;
}

/* Card CTA — §7.4 outline variant (transparent · hairline border ·
   neutral hover). Recommended card uses primary variant (dark fill). */
.pricing-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    background: transparent;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.16);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background   0.18s var(--pricing-ease),
        border-color 0.18s var(--pricing-ease),
        opacity      0.18s var(--pricing-ease);
}

.pricing-card-cta:hover {
    background: var(--state-hover-bg);
    border-color: rgba(var(--global-text-color-rgb), 0.32);
}

.pricing-card-cta:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.pricing-card-cta.is-primary {
    color: var(--global-button-text-color);
    background: var(--global-button-background-color);
    border-color: var(--global-button-background-color);
}

.pricing-card-cta.is-primary:hover {
    opacity: 0.85;
    background: var(--global-button-background-color);
    border-color: var(--global-button-background-color);
}

/* ====================================================================
 * 03 · EDUCATION SECTION
 * ==================================================================== */

.pricing-education-section {
    max-width: var(--pricing-content-max);
    margin: 0 auto;
    padding: clamp(48px, 8vh, 96px) 0;
}

.pricing-education-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(32px, 5vw, 56px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--pricing-card-radius);
}

@media (max-width: 760px) {
    .pricing-education-card {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.pricing-education-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-education-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

.pricing-education-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--global-text-color);
}

.pricing-education-desc {
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

.pricing-education-highlights {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-education-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--global-text-color);
}

.pricing-education-highlights li::before {
    content: '';
    flex-shrink: 0;
    margin-top: 8px;
    width: 4px;
    height: 4px;
    background: var(--global-text-color);
    border-radius: 50%;
}

.pricing-education-note {
    margin: 8px 0 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--global-text-muted);
}

.pricing-education-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(20px, 3vw, 28px);
    background: var(--state-hover-bg);
    border: 1px solid rgba(var(--global-text-color-rgb), 0.06);
    border-radius: var(--pricing-field-radius);
}

.pricing-education-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pricing-education-price-amount {
    font-family: inherit;
    font-size: clamp(28px, 3.4vw, 36px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--global-text-color);
    /* Money figures are single tokens — never break mid-word.
       Overrides inherited `overflow-wrap: anywhere`. */
    overflow-wrap: normal;
    word-break: keep-all;
}

.pricing-education-price-note {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--global-text-muted);
}

/* The education CTA reuses .pricing-card-cta.is-primary styling
   inherited from §7.4 — no extra rule needed. */

/* ====================================================================
 * 04 · COMPARISON TABLE
 * ==================================================================== */

.pricing-compare-section {
    max-width: var(--pricing-content-max);
    margin: 0 auto;
    padding: clamp(48px, 8vh, 96px) 0;
}

.pricing-section-title {
    margin: 0 0 clamp(24px, 4vh, 40px);
    font-family: inherit;
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--global-text-color);
    text-align: center;
}

.pricing-compare-wrap {
    /* Horizontal scroll on small viewports — §4.7 chrome breakpoint. */
    overflow-x: auto;
    /* Pin the cross axis to hidden. With only `overflow-x: auto` set, CSS
       forces the computed `overflow-y` from `visible` to `auto`, turning
       this into a 2-axis scroll container — the table's 1px border /
       sub-pixel height then gets captured as an inner vertical scroll
       ("content scrolls inside content"). `hidden` is NOT auto-promoted,
       so this keeps it horizontal-only without clipping anything visible
       (the wrap has no height cap, so the table still lays out in full). */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--global-border-color);
    border-radius: var(--pricing-card-radius);
    background: var(--global-card-background);
}

.pricing-compare-wrap:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.pricing-compare-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-family: inherit;
}

.pricing-compare-group-row > th {
    padding: 18px 20px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: var(--global-text-muted);
    background: var(--state-hover-bg);
    border-top: 1px solid rgba(var(--global-text-color-rgb), 0.06);
}

.pricing-compare-feature-col,
.pricing-compare-plan-col {
    padding: 14px 20px;
    text-align: left;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    border-top: 1px solid rgba(var(--global-text-color-rgb), 0.06);
    vertical-align: middle;
}

.pricing-compare-plan-col {
    text-align: center;
    color: var(--global-text-muted);
}

.pricing-compare-plan-name {
    display: block;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    text-transform: none;
}

.pricing-compare-feature {
    font-weight: 500;
    color: var(--global-text-color);
}

/* Recommended column — uses a faint iris tint per §6.5 since this is
   a "secondary" iridescent moment (the table itself is monochrome). */
.pricing-compare-plan-col.is-recommended,
.pricing-compare-cell.is-recommended {
    background: rgba(var(--brand-iris-rgb), 0.04);
}

.pricing-compare-plan-col.is-recommended .pricing-compare-plan-name {
    color: var(--global-text-color);
}

.pricing-compare-cell {
    padding: 14px 20px;
    text-align: center;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--global-text-color);
    border-top: 1px solid rgba(var(--global-text-color-rgb), 0.06);
}

.pricing-yes {
    color: var(--global-text-color);
    font-weight: 600;
}

.pricing-no {
    color: var(--global-text-muted);
    opacity: 0.55;
}

/* ====================================================================
 * 05 · CLOSING CTA
 * ==================================================================== */

.pricing-cta-section {
    max-width: var(--pricing-content-max);
    margin: 0 auto;
    padding: clamp(64px, 10vh, 120px) 0 clamp(24px, 4vh, 48px);
}

.pricing-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 24px);
    max-width: var(--pricing-content-narrow);
    margin: 0 auto;
    padding: clamp(40px, 6vh, 72px) clamp(24px, 4vw, 56px);
    text-align: center;
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--pricing-card-radius);
    /* Single ambient iris lift — §6.2. */
    box-shadow:
        0 28px 56px -20px rgba(var(--brand-iris-rgb), 0.16),
        0 16px 40px -16px rgba(var(--global-text-color-rgb), 0.10);
}

.pricing-cta-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--global-text-color);
    max-width: 22ch;
}

.pricing-cta-subtitle {
    margin: 0;
    max-width: 540px;
    font-family: inherit;
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

.pricing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

/* Primary CTA — §7.4 dark pill. */
.pricing-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--global-button-text-color);
    background: var(--global-button-background-color);
    border: 1px solid var(--global-button-background-color);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition:
        opacity   0.18s var(--pricing-ease),
        transform 0.18s var(--pricing-ease);
}

.pricing-cta-primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.pricing-cta-primary:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* Secondary CTA — §7.4 outline variant. */
.pricing-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    background: transparent;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.16);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background   0.18s var(--pricing-ease),
        border-color 0.18s var(--pricing-ease);
}

.pricing-cta-secondary:hover {
    background: var(--state-hover-bg);
    border-color: rgba(var(--global-text-color-rgb), 0.32);
}

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

/* ====================================================================
 * Reduced motion — DESIGN.md §5.7 (REQUIRED)
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .pricing-card-cta,
    .pricing-cta-primary,
    .pricing-cta-secondary {
        transition: none;
    }
    .pricing-card:hover,
    .pricing-card.is-recommended:hover,
    .pricing-cta-primary:hover {
        transform: none;
    }
    .pricing-aura {
        animation: none;
    }
}