/* pricing.css — page-scoped exceptions layer for /pricing.
 *
 * CUBE-CSS "Exception" axis (Andy Bell): page-scoped overrides.
 * Sister file to brand.css (tokens), layouts.css (composition),
 * utilities.css, and components.css (blocks). Every rule below sits
 * inside the `exceptions` cascade layer declared in brand.css:
 *
 *   @layer tokens, composition, utilities, blocks, exceptions;
 *
 * Layered on top of components.css; reuses the night-sky palette and
 * the .container width. Refactored at F4.C2.4: every literal hex
 * colour was replaced with a brand token from www/brand.css. No bare
 * `#...` literal appears below this comment (BR4.C2.1).
 *
 * F5.C1 — wrapped existing rules in `@layer exceptions { ... }`. The
 * visual surface is unchanged; only the cascade-layer scaffolding
 * moved. F5.C3 will collapse `.plan-cta` into `.btn[data-variant=…]`.
 */

@layer exceptions {
    .pricing-page {
        background: linear-gradient(180deg, var(--brand-night-1) 0%, var(--brand-night-2) 45%, var(--brand-night-3) 100%);
        min-height: 100vh;
    }

    /* ---- Pricing hero ---- */

    .pricing-hero {
        padding: var(--space-8) var(--space-2) var(--space-3);   /* was 9rem 2rem 3rem; 9→8 (snap down; no 9rem in 8pt-grid) */
        text-align: center;
    }

    .pricing-hero h1 {
        font-size: var(--text-4);    /* was clamp(2rem,4vw+1rem,3rem) → --text-4 (2.07→2.75rem); small max trim */
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        letter-spacing: -0.03em;
        margin-bottom: var(--space-1);
    }

    .pricing-hero p {
        font-size: var(--text-0);    /* was clamp(1rem,1.2vw+0.5rem,1.15rem) → --text-0 (1→1.125rem); near-identical range */
        color: rgba(255, 255, 255, 0.55);
        max-width: 540px;
        margin: 0 auto;
    }

    /* ---- Plan grid ---- */

    .pricing-plans {
        padding: var(--space-2) var(--space-2) var(--space-6);   /* was 2rem 2rem 7rem; 7→6 (snap down to 8pt-grid) */
    }

    .plan-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-1-5);
        align-items: stretch;
    }

    .plan-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-3) var(--space-2);  /* was 2.25rem 2rem; 2.25→3 (snap up to next 8pt-grid step) */
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        /* transition moved to @media (prefers-reduced-motion: no-preference) block — F3.C2 */
    }

    .plan-card:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(251, 191, 36, 0.3);   /* var(--brand-accent) at 30% alpha — the rgba() form is a CSS feature, not a literal */
        transform: translateY(-2px);
    }

    .plan-name {
        font-size: var(--text-1);    /* was 1.4rem (lands within --text-1 max 1.41rem) */
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        letter-spacing: -0.01em;
        margin-bottom: var(--space-0-5);
    }

    .plan-desc {
        color: rgba(255, 255, 255, 0.5);
        font-size: var(--text--1);   /* was 0.95rem → small-text collapse */
        line-height: var(--lh-body); /* was 1.6 → 1.5 */
        margin-bottom: var(--space-1-5);
    }

    .plan-price {
        display: flex;
        align-items: baseline;
        gap: var(--space-0-5);       /* was 0.4rem → snap up to 0.5 (8pt-grid) */
        margin-bottom: var(--space-0-5); /* was 0.35rem → snap up to 0.5 */
    }

    .plan-price-amount {
        font-size: var(--text-4);    /* was 2.5rem → --text-4 (2.07→2.75rem); slight max grow keeps emphasis */
        font-weight: 700;
        color: var(--brand-accent);
        letter-spacing: -0.02em;
    }

    .plan-price-period {
        font-size: var(--text--1);   /* was 0.95rem */
        color: rgba(255, 255, 255, 0.5);
    }

    .plan-price-annual {
        font-size: var(--text--2);   /* was 0.85rem → small-text collapse to smallest step */
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: var(--space-1-5);
    }

    .plan-features {
        list-style: none;
        margin: 0 0 var(--space-2);  /* was 0 0 1.75rem; 1.75→2 (snap up) */
        padding: 0;
        flex-grow: 1;
    }

    .plan-features li {
        color: rgba(255, 255, 255, 0.75);
        font-size: var(--text--1);   /* was 0.95rem */
        padding: var(--space-0-5) 0 var(--space-0-5) var(--space-1-5);  /* was 0.45rem 0 0.45rem 1.6rem; 0.45→0.5, 1.6→1.5 */
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .plan-features li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.85rem;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-accent);
    }

    /* .plan-cta moved to components.css at F5.C3 as
       .btn[data-variant="plan-primary"] — every button block now lives
       in the blocks layer; pricing.css is a page-scoped exceptions
       layer that holds no buttons. The transition lives there too. */

    .plan-refund {
        margin-top: var(--space-1);
        font-size: var(--text--2);   /* was 0.78rem → small-text collapse to smallest step */
        line-height: var(--lh-body); /* was 1.5 → 1.5 (exact match) */
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
    }

    /* ---- Footer link ---- */

    .pricing-page footer a {
        color: rgba(69, 26, 3, 0.6);
    }

    /* ---- Legal document (F12.C1 refund policy) ---- */

    .legal-doc {
        max-width: 46rem;
        margin: 0 auto;
        line-height: var(--lh-relaxed);   /* was 1.7 */
    }

    .legal-doc h2 {
        margin: var(--space-2) 0 var(--space-0-5);
        font-size: var(--text-1);    /* was 1.25rem (lands within --text-1 1.2→1.41rem) */
    }

    .legal-doc p {
        margin: 0 0 var(--space-1);
    }

    /* The "Draft pending legal review" banner on the F18 legal documents. */
    .legal-meta {
        margin: 0 0 var(--space-1-5);
        padding: var(--space-0-75) var(--space-1);
        border-left: 3px solid var(--brand-accent);
        background: rgba(251, 191, 36, 0.08);   /* var(--brand-accent) at 8% alpha */
        font-size: var(--text--1);   /* was 0.95rem */
    }
}

/* ---- Responsive ---- */

@media (max-width: 860px) {
    @layer exceptions {
        .plan-grid {
            grid-template-columns: 1fr;
            gap: var(--space-1-5);   /* was 1.25rem → snap up to 1.5 */
            max-width: 420px;
            margin: 0 auto;
        }

        .pricing-hero {
            padding: var(--space-6) var(--space-1-5) var(--space-2);  /* was 7rem 1.5rem 2rem; 7→6 (snap down) */
        }

        .pricing-plans {
            padding: var(--space-1-5) var(--space-1-5) var(--space-6); /* was 1.5rem 1.5rem 5rem; 5→6 (snap up) */
        }
    }
}

/* ---- Motion (gate-positive — F3.C2 / Decision 5 guardrail 1) ----
   Every transition: / animation: invocation lives INSIDE this
   no-preference branch. OS default = "reduce" → no animation runs.
   DEFERRED(P1) — see deferred-ledger.md DD-F3C2-P1: operator
   OS-toggle verification of BR3.2.3 (no transitions on
   www/pricing.html with reduce-motion = on) is deferred until an
   operator can toggle the OS preference and reload the page. */
@media (prefers-reduced-motion: no-preference) {
    @layer exceptions {
        .plan-card {
            transition: background 0.2s, border-color 0.2s, transform 0.2s; /* TODO(design-R2): motion token — 200ms not in R1.5 vocabulary (Decision 5 guardrail 2) */
        }

        /* .plan-cta transition migrated to components.css (the
           .btn[data-variant="plan-primary"] gate-positive block) at
           F5.C3. pricing.css holds only the .plan-card transition
           because .plan-card itself stays as a page-scoped exception. */
    }
}