/* ════════════════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════════════════

   Built entirely on the marketing-system tokens. Nothing here invents a
   size, weight, colour or radius:

     sizes    --fs-display / h1 / h2 / h3 / body-lg / body / body-sm / label
     weights  --fw-display / heading / medium / label / body
     tracking --tracking-display / label
     colour   --color-bg-ground / raised / inset, --color-border*,
              --color-text / muted / subtle, --color-accent*
     radius   --radius-card (4px) / --radius-sm (2px)
     spacing  --space-xs … --space-2xl

   The system's own note reads "No soft gradients. No purple glow. Raw
   structure only" and its radius scale tops out at 4px. This page is sharp
   and structural for that reason, not as a style preference — a set of
   16px-radius floating cards here would read as a different product.

   The plans are one bordered rail with internal dividers rather than three
   detached cards. The featured column is marked by an accent rail and a
   raised surface, and is deliberately NOT scaled up: enlarging one column
   makes the other two read as rejected options rather than real choices.
   ════════════════════════════════════════════════════════════════════ */

.pricing-page {
    background: var(--color-bg-ground);
    color: var(--color-text);

    /* The featured column's tint. --color-accent-dim (0.15) is built for
       chips and reads as a solid block across a whole table column, so this
       is the same hue at a fraction of the strength. Declared here rather
       than inlined so there is one place to change it. */
    --pr-featured-tint: rgba(99, 102, 241, 0.05);
}

/* Match the width every other public page uses. At 1180 this page sat 260px
   narrower than the site container (app.css sets 1440), which on a 1920 screen
   meant 370px of dead margin either side against the landing page's 240 — the
   pricing page read as a narrow column inset into the site rather than part of
   it. The measurement was taken on both pages at 1920 before changing this. */
.pricing-page .container {
    max-width: var(--container-max, 1440px);
}

/* Shared section rhythm. One vertical scale, so sections relate rather
   than each choosing its own padding.
   --space-xl on both edges put 160px between every section: measured as
   visible dead bands rather than breathing room. --space-lg reads as
   deliberate separation at this content density. */
.pricing-page > section {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border-faint);
}

.pricing-page > section:first-child {
    border-top: 0;
}

.pr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Shared section furniture ─────────────────────────────────────── */
.pr-section-label,
.pr-eyebrow {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-sm);
}

.pr-section-head {
    max-width: 62ch;
    margin-bottom: var(--space-md);
}

.pr-section-head h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
}

.pr-section-head p {
    font-size: var(--fs-body);
    color: var(--color-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── 1. Hero ──────────────────────────────────────────────────────
   Deliberately short. A pricing page's job starts at the plans, and a
   tall hero pushes them below the fold on a laptop. */
.pr-hero {
    padding-block: var(--space-lg) var(--space-sm);
}

.pr-hero-inner {
    max-width: 780px;
}

.pr-hero-title {
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    letter-spacing: var(--tracking-display);
    line-height: 1.08;
    text-wrap: balance;
    margin: 0 0 var(--space-sm);
}

.pr-hero-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-muted);
    max-width: 60ch;
    margin: 0 0 var(--space-md);
}

/* Billing toggle — a segmented control, not a switch. A switch does not
   say what its two states are until you flip it. */
.pr-billing {
    display: inline-flex;
    padding: 3px;
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.pr-billing-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 7px 16px;
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--color-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--motion-btn) var(--m-ease),
                background var(--motion-btn) var(--m-ease);
}

.pr-billing-opt:hover {
    color: var(--color-text);
}

.pr-billing-opt.is-active {
    background: var(--color-bg-raised);
    color: var(--color-text);
    box-shadow: var(--shadow-lift);
}

.pr-billing-opt:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pr-billing-save {
    font-size: var(--fs-chip);
    font-weight: var(--fw-badge);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-positive);
}

/* ── 2. Plans ─────────────────────────────────────────────────────── */
/* Continuous with the hero: the toggle above belongs to the grid below, so
   no border and no extra top gap between them. */
.pr-plans {
    padding-top: var(--space-md);
    border-top: 0;
}

.pr-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-raised);
    overflow: hidden;
}

.pr-plan {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-md) var(--space-md);
    border-left: 1px solid var(--color-border-faint);
    position: relative;
}

.pr-plan:first-child {
    border-left: 0;
}

/* The featured column: an accent rail at the top edge and a lifted
   surface. No scale transform, no drop shadow halo. */
.pr-plan.is-featured {
    background: var(--color-bg-inset);
    box-shadow: inset 0 2px 0 0 var(--color-accent);
}

.pr-plan-flag {
    align-self: flex-start;
    font-size: var(--fs-chip);
    font-weight: var(--fw-badge);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-dim);
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    margin-bottom: var(--space-sm);
}

.pr-plan-head {
    margin-bottom: var(--space-sm);
}

.pr-plan-name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-heading);
    margin: 0 0 4px;
    color: var(--color-text);
}

.pr-plan-tagline {
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: var(--color-muted);
    margin: 0;
    min-height: 2.9em; /* keeps the price row aligned across columns */
}

.pr-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.pr-price-amount,
.pr-price-custom {
    font-size: var(--fs-h1);
    font-weight: var(--fw-display);
    letter-spacing: var(--tracking-display);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    line-height: 1;
}

.pr-price-period {
    font-size: var(--fs-body-sm);
    color: var(--color-subtle);
}

.pr-plan-pricenote {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--color-subtle);
    margin: 0 0 var(--space-sm);
    min-height: 3em;
}

.pr-plan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 18px;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--motion-btn) var(--m-ease),
                border-color var(--motion-btn) var(--m-ease),
                color var(--motion-btn) var(--m-ease);
}

.pr-cta-primary {
    background: var(--color-accent);
    /* Same token .btn-primary uses, so the two never drift apart. */
    color: var(--accent-ink, rgba(255, 255, 255, 0.95));
}

.pr-cta-primary:hover {
    /* app.css's .btn-primary hover, verbatim. A second hardcoded indigo
       here would be one more shade to keep in sync with the brand. */
    filter: brightness(1.1);
}

.pr-cta-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.pr-cta-secondary:hover {
    background: var(--color-bg-raised);
    border-color: var(--color-accent-border);
}

.pr-cta-ghost {
    background: transparent;
    /* --color-muted here read as a disabled control beside the solid accent
       button. A secondary action should look available, just not primary. */
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.pr-cta-ghost:hover {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.pr-plan-cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pr-plan-audience {
    font-size: var(--fs-small);
    color: var(--color-subtle);
    margin: var(--space-sm) 0 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-faint);
}

.pr-plan-features {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pr-plan-features li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 10px;
    align-items: start;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: var(--color-text);
}

.pr-tick {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--color-accent);
    flex: none;
}

.pr-plan-limits {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--color-subtle);
    margin: var(--space-sm) 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-faint);
}

/* ── 3. Guarantees ────────────────────────────────────────────────── */
/* auto-fit rather than a fixed count: the number of guarantees is content,
   and a hardcoded 4 leaves a lone orphan on the second row the moment a
   fifth is added. */
.pr-guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: var(--space-md);
}

.pr-guarantee h3 {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    margin: 0 0 6px;
    color: var(--color-text);
    padding-top: var(--space-xs);
    border-top: 2px solid var(--color-accent-border);
}

.pr-guarantee p {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
}

/* ── 4. Comparison ────────────────────────────────────────────────── */
.pr-cat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-raised);
    margin-bottom: var(--space-xs);
}

.pr-cat-summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px var(--space-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pr-cat-summary::-webkit-details-marker {
    display: none;
}

.pr-cat-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.pr-cat-name {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.pr-cat-count {
    font-size: var(--fs-small);
    color: var(--color-subtle);
    margin-left: auto;
}

.pr-chev {
    width: 16px;
    height: 16px;
    color: var(--color-subtle);
    flex: none;
    transition: transform var(--motion-acc) var(--m-ease);
}

.pr-cat[open] > .pr-cat-summary .pr-chev,
.pr-faq-item[open] > summary .pr-chev {
    transform: rotate(180deg);
}

.pr-cat-body {
    padding: 0 var(--space-md) var(--space-sm);
    overflow-x: auto;
}

.pr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body-sm);
}

.pr-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-subtle);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.pr-table thead th.is-featured {
    color: var(--color-accent);
}

.pr-table tbody th {
    text-align: left;
    font-weight: var(--fw-body);
    color: var(--color-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-faint);
    width: 40%;
}

.pr-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-faint);
    color: var(--color-text);
    white-space: nowrap;
}

.pr-table td.is-featured {
    background: var(--pr-featured-tint);
}

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

.pr-tick-yes {
    color: var(--color-positive);
}

.pr-dash {
    color: var(--color-subtle);
}

.pr-val {
    color: var(--color-text);
}

/* ── 5. Meters ────────────────────────────────────────────────────── */
.pr-meter-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-raised);
    overflow: hidden;
}

.pr-meter-head,
.pr-meter-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    align-items: start;
}

.pr-meter-head {
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-subtle);
    background: var(--color-bg-inset);
    border-bottom: 1px solid var(--color-border);
}

.pr-meter-row + .pr-meter-row {
    border-top: 1px solid var(--color-border-faint);
}

.pr-meter-name {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.pr-meter-unit {
    display: block;
    font-size: var(--fs-small);
    color: var(--color-subtle);
    margin-top: 2px;
}

.pr-meter-explains {
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    color: var(--color-muted);
    margin: 8px 0 0;
    max-width: 56ch;
}

.pr-meter-val {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.pr-meter-val.is-featured {
    color: var(--color-accent);
}

.pr-meter-foot {
    font-size: var(--fs-body-sm);
    color: var(--color-muted);
    margin: var(--space-sm) 0 0;
}

/* ── 6. Enterprise ────────────────────────────────────────────────── */
.pr-enterprise {
    background: var(--color-bg-void);
}

.pr-ent-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-lg);
    align-items: start;
}

.pr-ent-copy h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-sm);
    text-wrap: balance;
}

.pr-ent-lede {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--color-muted);
    margin: 0 0 var(--space-md);
    max-width: 58ch;
}

.pr-ent-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pr-ent-points li {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--color-muted);
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-border-strong);
    max-width: 60ch;
}

.pr-ent-points strong {
    color: var(--color-text);
    font-weight: var(--fw-medium);
}

.pr-ent-form {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pr-ent-form-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-heading);
    margin: 0;
    color: var(--color-text);
}

.pr-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pr-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.pr-field-label {
    font-size: var(--fs-small);
    font-weight: var(--fw-label);
    color: var(--color-muted);
}

.pr-field input,
.pr-field select {
    font-family: inherit;
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    width: 100%;
    transition: border-color var(--motion-btn) var(--m-ease);
}

.pr-field input::placeholder {
    color: var(--color-subtle);
}

.pr-field input:focus,
.pr-field select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.pr-ent-note {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--color-subtle);
    margin: 0;
}

.pr-ent-note.is-error {
    color: var(--color-negative);
}

/* ── 7. FAQ ───────────────────────────────────────────────────────── */
.pr-faq-list {
    border-top: 1px solid var(--color-border-faint);
}

.pr-faq-item {
    border-bottom: 1px solid var(--color-border-faint);
}

.pr-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.pr-faq-item > summary::-webkit-details-marker {
    display: none;
}

.pr-faq-item > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pr-faq-answer p {
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    color: var(--color-muted);
    margin: 0 0 16px;
    max-width: 76ch;
}

/* ── 8. Final CTA ─────────────────────────────────────────────────── */
.pr-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.pr-final h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-display);
    margin: 0 0 6px;
    text-wrap: balance;
}

.pr-final p {
    font-size: var(--fs-body);
    color: var(--color-muted);
    margin: 0;
    max-width: 52ch;
}

.pr-final-actions {
    display: flex;
    gap: var(--space-xs);
    flex: none;
}

.pr-final-actions .pr-plan-cta {
    width: auto;
    padding-inline: var(--space-md);
}

/* ── Responsive ───────────────────────────────────────────────────── */

/* Tablet: plans drop to two columns with the featured one leading, and
   the enterprise form moves under its copy. */
@media (max-width: 1000px) {
    .pr-guarantee-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-ent-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .pr-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-plan:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-border-faint);
        grid-column: 1 / -1;
    }

    .pr-plan-tagline,
    .pr-plan-pricenote {
        min-height: 0;
    }
}

/* Mobile: one column, and the comparison table restacks.
   A three-column table squeezed into 360px is unreadable, so each row
   becomes a feature with its three values labelled underneath — the same
   data, not a horizontally scrolling spreadsheet. */
@media (max-width: 720px) {
    .pricing-page > section {
        padding-block: var(--space-lg);
    }

    .pr-plan-grid,
    .pr-guarantee-grid {
        grid-template-columns: 1fr;
    }

    .pr-plan {
        border-left: 0;
        border-top: 1px solid var(--color-border-faint);
    }

    .pr-plan:first-child {
        border-top: 0;
    }

    .pr-plan:nth-child(3) {
        grid-column: auto;
    }

    .pr-cat-body {
        overflow-x: visible;
        padding-inline: var(--space-sm);
    }

    .pr-table,
    .pr-table tbody,
    .pr-table tr,
    .pr-table td,
    .pr-table tbody th {
        display: block;
        width: auto;
    }

    .pr-table thead {
        display: none;
    }

    .pr-table tbody tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border-faint);
    }

    .pr-table tbody tr:last-child {
        border-bottom: 0;
    }

    .pr-table tbody th {
        padding: 0 0 8px;
        border: 0;
        color: var(--color-text);
        font-weight: var(--fw-medium);
        font-size: var(--fs-body-sm);
    }

    .pr-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        padding: 5px 0;
        border: 0;
        background: none;
        font-size: var(--fs-body-sm);
    }

    /* The column header the value belonged to, restored per row. */
    .pr-table td::before {
        content: attr(data-plan);
        font-size: var(--fs-small);
        color: var(--color-subtle);
    }

    .pr-table td.is-featured::before {
        color: var(--color-accent);
    }

    .pr-meter-head {
        display: none;
    }

    .pr-meter-row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .pr-meter-val {
        display: flex;
        justify-content: space-between;
        font-size: var(--fs-body-sm);
        padding-top: 6px;
        border-top: 1px solid var(--color-border-faint);
    }

    .pr-meter-val::before {
        content: attr(data-col);
        color: var(--color-subtle);
        font-weight: var(--fw-body);
    }

    .pr-field-row {
        grid-template-columns: 1fr;
    }

    .pr-final-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .pr-final-actions {
        width: 100%;
        flex-direction: column;
    }

    .pr-final-actions .pr-plan-cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pr-chev,
    .pr-billing-opt,
    .pr-plan-cta,
    .pr-field input,
    .pr-field select {
        transition: none;
    }
}