/* Pricing page styles — loaded only on /pricing/.
   Bundled into main.css via deploy script; loaded standalone in dev. */

/* ── Unified Pricing Page ────────────────────────────────────────── */

.pricing-page {
    padding: var(--space-3xl) var(--space-lg);
    max-width: var(--width-grid, 1100px);
    margin: 0 auto;
}

.pricing-page__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.pricing-page__hero-image {
    margin: 0 0 var(--space-2xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-warm);
}

.pricing-page__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 720px) {
    .pricing-page__hero-image {
        margin-bottom: var(--space-xl);
        aspect-ratio: 3 / 2;
    }
}

.pricing-page__header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.pricing-page__lede {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 58ch;
    margin: var(--space-sm) auto 0;
    text-align: center;
}

/* Founder-voice intro under the lede: same centered-shape as the lede,
   slightly smaller and muted so it reads as supporting context rather
   than a second headline. */
.pricing-page__intro {
    color: var(--color-text-muted, var(--color-text-secondary));
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 62ch;
    margin: var(--space-md) auto 0;
    text-align: center;
}

/* "On every plan" guarantee band — sits between the recommendation box
   and the plan grid. Was previously unstyled, so it fell back to global
   left-aligned defaults and was the one block breaking the page's centered
   spine. Center it and reuse the existing FAQ-heading + lede type steps so
   it reads as part of the same rhythm, then give the promise strip room. */
.pricing-on-every-plan {
    margin: 0 auto var(--space-2xl);
}

/* Center only the heading + intro (not the whole section) so the shared
   .promise-strip component below keeps its own left-anchored alignment. */
.pricing-on-every-plan h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 var(--space-xs);
}

.pricing-on-every-plan > p {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 58ch;
    text-align: center;
    margin: 0 auto var(--space-lg);
}

.pricing-page__grid {
    display: grid;
    /* One track per PAID card, counted by the view (`plan_card_columns`).
       NOT repeat(auto-fit, …): auto-fit can only collapse a track that no
       item occupies, and the Free row spans `grid-column: 1 / -1`, so it
       fills every track auto-fit speculatively creates and none of them
       collapse. That silently degrades auto-fit to auto-fill — two paid
       cards in a three-track grid sat hard left under a full empty column,
       off-centre from the Free row above them. Do not reintroduce auto-fit
       while a full-width row shares this grid.

       The default below is the current Free + Standard + Premium shape; the
       template overrides it inline per render. It is declared here (not left
       to a var() fallback) so the reference resolves in-file — see
       test_no_unresolved_css_custom_property_references. */
    --plan-cols: 2;
    grid-template-columns: repeat(var(--plan-cols), minmax(0, 1fr));
    gap: var(--space-lg);
    /* stretch (not start) so the paid cards share a common height and their
       CTAs bottom-align via margin-top:auto. The Free full-width row spans
       every track, so stretch leaves it at content height. */
    align-items: stretch;
}

/* Empty-state fallback — rendered by the `{% empty %}` branch of the
   pricing-grid loop when no plan has a public billing option. Guards
   against a silently blank pricing page during plan-config work. */
.pricing-page__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    padding: var(--space-2xl) var(--space-lg);
}

/* ── Plan Card ───────────────────────────────────────────────────── */

.plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    position: relative;
    transition: border-color var(--duration-normal) var(--ease-out);
}

.plan-card:hover {
    border-color: var(--color-border);
}

/* Dark-mode: --color-border-light (#2E2A26) is only ~4 luminance values away
   from --color-bg-card (#252220), so the default outline reads as almost
   nothing. Use --color-border (#3A3430) on cards specifically so the non-
   recommended tiers get a visible edge too. */
[data-theme="dark"] .plan-card {
    border-color: var(--color-border);
}

/* Recommended tier — warm tint, accent border, soft glow. Emphasis here
   MUST NOT change the box's size: a scale() transform makes this card
   taller and wider than its neighbour, so with two paid cards side by side
   the headings, prices and CTAs stop aligning across the row. It shipped as
   scale(1.04) and read as broken alignment once Free became a full-width
   row and only two cards shared the track. Combines with
   .plan-card--highlighted when both apply (admin links ?plan=standard).
   No per-card "Most popular" ribbon: the .pricing-recommendation aside is
   the single guidance surface (three-recommenders cleanup, 2026-05-19), so
   the .plan-card__ribbon rules that used to live here were dead CSS. */
.plan-card--recommended {
    background: var(--color-bg-warm, var(--color-bg-card));
    border-color: var(--color-primary-light);
    box-shadow: 0 8px 24px var(--color-primary-glow, rgba(26, 22, 20, 0.08));
}

/* ?plan=<slug> deep-link highlight — warm accent border + soft glow so
   the target card is obvious at a glance. Answers "what did the link
   point at", distinct from the recommended-tier tint which answers
   "what do we recommend" — both can co-apply. */
.plan-card--highlighted {
    border: 2px solid var(--color-primary);
    box-shadow: 0 12px 32px var(--color-primary-glow);
}

/* Plan header */
.plan-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.plan-card__header h2 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.plan-card__header p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* "You were on Pro" hint — same three declarations that are currently inline,
   so the template can drop the inline style in a follow-up commit */
.pricing-previous-hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-sm);
}

/* ── Billing Toggle (segmented control) ──────────────────────────── */

.billing-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 3px;
    background: var(--color-bg-warm);
    /* Reset fieldset UA styles */
    margin: 0;
    min-width: 0;
}

/* Screen-reader-only utility — visually hide while keeping the element
   reachable by assistive tech. Used for <legend> inside the billing
   toggle so the group has an accessible name without visual clutter. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.billing-toggle__option {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Hide the radio without removing it from the accessibility tree */
.billing-toggle__option input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* The visible pill */
.billing-toggle__option span {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: calc(var(--radius-xl) - 3px);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
    user-select: none;
}

/* Hover — not the checked item */
.billing-toggle__option:hover span {
    color: var(--color-text);
}

/* Checked state — filled pill using primary-light tint so it stays warm, not screaming */
.billing-toggle__option input[type="radio"]:checked + span {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: 600;
}

/* Focus ring on the hidden radio surfaces on the visible span */
.billing-toggle__option input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ── Plan Prices ─────────────────────────────────────────────────── */

/* Wrapper around the price blocks — uses display: contents so the
   aria-live region doesn't affect layout. Screen readers announce the
   swap when the billing-option toggle changes the visible price. */
.plan-card__prices {
    display: contents;
}

.plan-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-sm);
    row-gap: 0;
}

.plan-card__price[hidden] {
    display: none;
}

.plan-card__price-amount {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.plan-card__price-period {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 400;
    align-self: flex-end;
    padding-bottom: 0.25rem;
}

.plan-card__price-renewal {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 0;
}

/* ── Plan Features List ──────────────────────────────────────────── */

/* Wrapper around the grouped feature lists — owns the flex: 1 that
   pushes the CTA to the bottom of the card, and the vertical rhythm
   between category sections. */
.plan-card__feature-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    flex: 1;
}

/* Delta variant — higher-tier cards with "Everything in X, plus:"
   header. Keeps the same vertical rhythm as the full-list variant so
   cards still align across the grid. */
.plan-card__feature-groups--delta {
    gap: var(--space-md);
}

/* "Everything in Standard, plus:" inherits line — sits above the
   delta groups as quiet context, italicized for editorial feel
   consistent with the keepsake brand voice. */
.plan-card__inherits {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0 0 var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.plan-card__feature-group-heading {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}

.plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.plan-card__features li {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    padding: var(--space-xs) 0;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* Subtle warm dot instead of a green check. Brand-appropriate
   (uses the primary-light tone), small enough to read as a rhythm
   mark rather than a visual claim that this is a "success state". */
.plan-card__features li::before {
    content: '●';
    color: var(--color-primary-light);
    font-size: 0.5em;
    flex-shrink: 0;
    padding-right: 0.25rem;
    line-height: 1.45;
}

/* ── Plan CTA Form ───────────────────────────────────────────────── */

.plan-card__buy {
    margin-top: auto;
}

.plan-card__buy button[type="submit"],
.plan-card__cta {
    display: block;
    width: 100%;
    padding: 0.7rem var(--space-lg);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-top: auto;
    transition:
        background var(--duration-fast) var(--ease-out),
        filter var(--duration-fast) var(--ease-out);
}

.plan-card__buy button[type="submit"]:hover,
.plan-card__cta:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-primary);
}

.plan-card__buy button[type="submit"]:focus-visible,
.plan-card__cta:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* CTA hierarchy — the Free card reads as the quietest option (ghost
   outline), Standard stays the solid-primary default, and Premium gets
   a darker secondary fill so it reads as an "up-from-Standard" choice
   rather than a second primary CTA competing for the same click. */
.plan-card__cta--ghost,
.plan-card__buy button[type="submit"].plan-card__cta--ghost {
    background: transparent;
    color: var(--color-primary-deep);
    border: 1px solid var(--color-primary-deep);
}

.plan-card__cta--ghost:hover,
.plan-card__buy button[type="submit"].plan-card__cta--ghost:hover {
    background: var(--color-primary-glow, rgba(0, 0, 0, 0.04));
    color: var(--color-primary-deep);
}

.plan-card__cta--secondary,
.plan-card__buy button[type="submit"].plan-card__cta--secondary {
    background: var(--color-primary-hover);
    color: var(--color-text-on-primary);
    border: 1px solid transparent;
}

.plan-card__cta--secondary:hover,
.plan-card__buy button[type="submit"].plan-card__cta--secondary:hover {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* ── Pricing FAQ ─────────────────────────────────────────────────── */

.pricing-faq {
    margin-top: var(--space-3xl);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-faq__heading {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pricing-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0;
}

.pricing-faq__item dt {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.pricing-faq__item dd {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Tablet — cap at two-up so three or more paid cards don't squeeze. */
@media (max-width: 960px) and (min-width: 721px) {
    .pricing-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile — stack cards vertically */
@media (max-width: 720px) {
    .pricing-page__grid {
        grid-template-columns: 1fr;
    }

    .plan-card {
        padding: var(--space-lg);
    }
}

/* Coarse pointer — enlarge billing toggle pills AND the primary CTA
   (link- and button-form) so both comfortably meet the 44px touch
   target on phones and tablets. */
@media (pointer: coarse) {
    .billing-toggle__option span {
        padding: 0.55rem 0.9rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .plan-card__cta,
    .plan-card__buy button[type="submit"] {
        padding: 0.9rem var(--space-lg);
        min-height: 44px;
    }
}

/* ── Recommendation lede & closing block ─────────────────────────
   Moved from apps/billing/templates/billing/pricing.html <style>
   (2026-08 critique-color-fixes Task 4). */

.pricing-recommendation {
    max-width: 60ch;
    margin: var(--space-xl) auto var(--space-2xl);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-bg-warm, var(--color-bg-card));
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-align: left;
}
.pricing-recommendation__line {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    line-height: 1.45;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}
.pricing-recommendation__line:last-child {
    margin-bottom: 0;
}
.pricing-recommendation__line strong {
    font-weight: 700;
    color: var(--color-primary-deep);
}

/* Progressive disclosure — "See everything in {plan}" */
.plan-card__feature-more {
    margin-top: var(--space-sm);
}
.plan-card__feature-more > summary {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-deep);
    cursor: pointer;
    padding: var(--space-xs) 0;
    list-style: none;
    user-select: none;
}
.plan-card__feature-more > summary::-webkit-details-marker { display: none; }
.plan-card__feature-more > summary::before {
    content: '+ ';
    font-weight: 700;
}
.plan-card__feature-more[open] > summary::before {
    content: '\2212\00a0';
}
.plan-card__feature-more > summary:hover {
    color: var(--color-primary-text-hover);
}
.plan-card__feature-more > summary:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}
.plan-card__feature-more[open] {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-light);
}
.plan-card__feature-more .plan-card__feature-groups {
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

/* Closing block — homepage-hero echo */
.pricing-closing {
    margin: var(--space-3xl) auto 0;
    max-width: 60ch;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}
.pricing-closing__headline {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}
.pricing-closing__body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-xl);
}
.pricing-closing__cta {
    display: inline-block;
    padding: 0.9rem var(--space-xl);
    min-height: 44px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.pricing-closing__cta:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-primary);
}
.pricing-closing__cta:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ── Plan-card visual-weight variation (no Stripe-Atlas grid) ──────
   Free collapses to a stripped row (no card chrome). Standard and
   Premium keep the full .plan-card shape. Recommendation guidance
   now lives solely in the aside above the grid (single-recommender
   rule, 2026-05-19). */

/* Free → stripped row, no card chrome */
.plan-card.plan-card--free-row {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--space-lg) var(--space-md);
    max-width: 60ch;
    margin: 0 auto var(--space-xl);
    text-align: left;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md) var(--space-lg);
    align-items: center;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
}
.plan-card.plan-card--free-row .plan-card__header {
    grid-column: 1;
    padding: 0;
}
.plan-card.plan-card--free-row .plan-card__header h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 var(--space-xs);
    letter-spacing: -0.005em;
}
.plan-card.plan-card--free-row .plan-card__header p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 48ch;
}
.plan-card.plan-card--free-row .plan-card__prices,
.plan-card.plan-card--free-row .plan-card__feature-groups,
.plan-card.plan-card--free-row .plan-card__feature-more,
.plan-card.plan-card--free-row .billing-toggle {
    display: none;
}
.plan-card.plan-card--free-row .plan-card__cta {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    white-space: nowrap;
}
.plan-card.plan-card--free-row form.plan-card__buy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
}
@media (max-width: 640px) {
    .plan-card.plan-card--free-row {
        grid-template-columns: 1fr;
    }
    .plan-card.plan-card--free-row .plan-card__cta,
    .plan-card.plan-card--free-row form.plan-card__buy {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}