.subscription-page {
    padding-inline: 1em;
    padding-block-start: var(--s-2);
    padding-block-end: var(--s1);
    /* 96ch, not 82ch: this is also what the bare page (the Paddle checkout,
       the only other user of this class without --overview) sizes its
       .subscription-checkout-layout switcher against, and a switcher only
       goes two-column past 40rem (720px, see .switcher below), measured
       against its own content box — which here is main's, so this rule's
       own padding-inline (1em/18px per side, box-sizing: border-box) has to
       come off --measure before comparing to 720px. At 82ch main is
       ~752.8px border-box, ~716.8px content: 3.2px UNDER the trigger, so
       the checkout page was already single-column on desktop, not close to
       it. 96ch (~845.3px content) clears it by 125px, 17%. */
    --measure: 96ch;
    margin-inline: auto;
    max-inline-size: var(--measure);

    header {

        h1,
        p {
            margin-block: 0;
        }
    }
}

.subscription-page :where(form, article, section, header, footer, div) {
    max-inline-size: none;
}

.subscription-page [hidden] {
    display: none !important;
}

.subscription-page .sr-only {
    block-size: 1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.subscription-plan__price,
.subscription-region,
.subscription-button,
.subscription-note {
    font-family: var(--font-sans);
}

.subscription-region {
    font-size: var(--type-small);
    padding: 0;
}

.subscription-region-change {
    display: inline;
}

.subscription-region-change summary {
    cursor: pointer;
    display: inline;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.subscription-region-change summary::-webkit-details-marker {
    display: none;
}

.subscription-region-fields {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-start: var(--s-3);
}

.subscription-select {
    position: relative;
}

.subscription-select select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--background-color);
    border: 0.12em solid;
    color: var(--color);
    font: inherit;
    padding: var(--s-3) var(--s1) var(--s-3) var(--s-2);
    width: 100%;
}

.subscription-select::after {
    border-block-end: 0.12em solid;
    border-inline-end: 0.12em solid;
    content: '';
    block-size: var(--s-2);
    inline-size: var(--s-2);
    pointer-events: none;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--s-1);
    transform: translateY(-70%) rotate(45deg);
}

.subscription-region-note,
.subscription-note {
    font-size: var(--type-small);
}

.subscription-region-note {
    margin-block: var(--s-4) 0;
}

.subscription-note p {
    margin-block: 0;
}

p.subscription-note {
    margin-inline: auto;
}

p.subscription-return {
    text-align: center;
}

.subscription-plans {
    display: grid;
    gap: var(--s0);
    /* Sized from how many plan cards actually render (--subscription-plan-count, set inline per
       page), not a fixed count: a disabled category drops its card outright rather than leaving a
       disabled placeholder (see SubscriptionPlanVisibility), so the grid has to size to what is
       left or an empty track would read as a hole in a finished page. Falls back to 3 so markup
       that does not set the variable is unaffected. */
    grid-template-columns: repeat(var(--subscription-plan-count, 3), minmax(0, 1fr));
}

.subscription-plan {
    border: 0.15em solid;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: var(--s-1);
}

.subscription-plan--current {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.subscription-plan h2 {
    font-size: var(--s1);
    line-height: 1.1;
    margin-block: 0;
    min-block-size: 2.2em;
}

.subscription-plan__summary {
    margin-block: var(--s-2) 0;
}

.subscription-plan__price {
    align-items: baseline;
    column-gap: 0.1em;
    display: flex;
    flex-wrap: wrap;
    margin-block: var(--s-3) 0;
}

.subscription-plan__price-amount {
    font-family: var(--font-serif);
    /* Scale to the card's own width so the widest localized amount always
       fits, while short prices stay large. cqi tracks the card at every
       breakpoint, so the fit ratio is constant — no char-count guessing. */
    font-size: clamp(var(--s1), 13cqi, var(--s2));
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.subscription-plan__price-cadence {
    font-family: var(--font-serif);
    font-size: var(--s0);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.subscription-perks {
    flex: 1;
    margin-block: var(--s-1) var(--s0);
    padding-inline-start: var(--s0);
}

.subscription-perks li+li {
    margin-block-start: var(--s-3);
}

.subscription-button {
    background: var(--background-color);
    border: 0.12em solid;
    color: var(--color);
    cursor: pointer;
    display: inline-block;
    font-size: var(--type-small);
    font-weight: 700;
    padding: var(--s-2) var(--s-1);
    text-align: center;
    text-decoration: none;
}

.subscription-button--primary,
.subscription-button--current {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.subscription-plan--current .subscription-button--current {
    background: var(--background-color);
    color: var(--color);
}

.subscription-button:disabled {
    cursor: not-allowed;
}

.subscription-button--current:disabled {
    cursor: default;
}

.subscription-note {
    border-block-start: 0.15em solid;
    margin-block-start: var(--s0);
    padding-block-start: var(--s-1);
}

.subscription-note p+p {
    margin-block-start: var(--s-2);
}

.subscription-page--overview {
    display: grid;
    gap: var(--s0);
}

.subscription-overview-hero {
    margin-inline: auto;
    max-inline-size: 82ch;
}

.subscription-overview-hero h1,
.subscription-overview-hero p {
    margin-block: 0;
}

.subscription-overview-hero h1 {
    font-size: clamp(var(--s1), 3.5vw, var(--s2));
    line-height: 1.05;
}

.subscription-overview-hero p {
    max-inline-size: 60ch;
}

.subscription-family-tab,
.subscription-show-tab,
.subscription-podcast-link,
.subscription-podcast-link__action {
    font-family: var(--font-sans);
}

.subscription-family-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    justify-content: center;
    max-inline-size: none;
}

.subscription-family-tab {
    appearance: none;
    background: var(--background-color);
    border: 0.12em solid;
    color: inherit;
    cursor: pointer;
    font-size: var(--type-small);
    font-weight: 700;
    padding: var(--s-2) var(--s-1);
}

.subscription-family-tab[aria-selected='true'],
.subscription-family-tab:hover,
.subscription-family-tab:focus-visible {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.subscription-family-panel {
    display: grid;
    gap: var(--s0);
    max-inline-size: none;
}

.subscription-panel-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s0);
    justify-content: center;
    max-inline-size: none;
}

.subscription-panel-header>p {
    margin-block: 0;
    max-inline-size: 54ch;
}

.subscription-note a {
    color: inherit;
    font-weight: 700;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.subscription-podcast-directory {
    border-block-start: 0.15em solid;
    display: grid;
    gap: var(--s-1);
    margin-block-start: var(--s0);
    padding-block-start: var(--s0);
}

.subscription-podcast-directory__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s0);
    justify-content: center;
    max-inline-size: none;
    text-align: center;
}

.subscription-podcast-directory__header h2 {
    font-size: var(--s1);
    line-height: 1.1;
    margin-block: 0;
}

.subscription-show-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    justify-content: center;
    max-inline-size: none;
}

.subscription-show-tab {
    appearance: none;
    background: var(--background-color);
    border: 0.15em solid;
    color: var(--color);
    cursor: pointer;
    font-size: var(--s0);
    font-weight: 700;
    letter-spacing: 0.05em;
    min-inline-size: 12rem;
    padding: var(--s-1) var(--s1);
    text-transform: uppercase;
}

.subscription-show-tab[aria-selected='true'] {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.subscription-show-panel {
    display: grid;
    gap: var(--s-2);
    max-inline-size: none;
}

.subscription-podcast-links {
    display: grid;
    gap: var(--s-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    max-inline-size: none;
    padding: 0;
}

.subscription-podcast-link {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0.12em solid;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: var(--type-small);
    font-weight: 700;
    gap: var(--s-2);
    inline-size: 100%;
    justify-content: space-between;
    min-block-size: 100%;
    padding: var(--s-2) var(--s-1);
    text-align: start;
    text-decoration: none;
}

.subscription-podcast-link:hover,
.subscription-podcast-link:focus-visible,
.subscription-podcast-link[data-copy-state='copied'] {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.subscription-podcast-link__action {
    flex: none;
    font-size: var(--type-small);
    opacity: 0.7;
}

/* Paddle inline checkout — the frame target's own name (`.paddle-checkout-frame`,
   below) is passed as `frameTarget` to Paddle.Initialize() in
   paddle_checkout_controller.js. Rename the class in exactly one place and it
   silently stops working in the other. */

.subscription-checkout-layout {
    align-items: start;
    /* Undoes the site-wide div opt-out two rules up (`.subscription-page
       :where(..., div) { max-inline-size: none }`), which this two-column
       layout inherits by being a div. Currently inert, though: main is
       itself capped by --measure (881.3px border-box, 845.3px content
       after its own 36px padding-inline), and nothing else constrains
       this div's width, so it already renders at 845.3px — under this
       rule's 881.3px cap. Kept for the day main's own cap goes away:
       without it, this div would overhang the plain <p>s below it (the
       refund note, "Return to subscriptions") that stay governed by the
       page's own --measure, reading wider than — and off-centre from —
       the rest of the page. Not a shared WIDTH with .subscription-note,
       though: that <p> sets its own font and size (--font-sans at
       --type-small, post-SKR-402 — this used to be --font-mono at
       --s-1), so its ch-based max-inline-size resolves differently
       from this div's inherited serif — see the measure trap noted at
       styles.css:1360. Re-measure rather than trusting the old ~691px
       figure, which was taken against the mono face this no longer
       uses. Neither element gets margin-inline: auto, so what matching
       max-inline-size actually keeps aligned is their LEFT EDGES. */
    max-inline-size: var(--measure);
}

.subscription-checkout-summary,
.subscription-checkout-panel {
    border: 0.15em solid;
    padding: var(--s-1);
}

.subscription-checkout-summary h2,
.subscription-checkout-panel h2 {
    font-size: var(--s0);
    line-height: 1.1;
    margin-block: 0 var(--s-2);
}

.subscription-checkout-summary__status {
    font-family: var(--font-sans);
    font-size: var(--type-small);
}

.subscription-checkout-summary__empty {
    font-family: var(--font-sans);
    font-size: var(--type-small);
}

.subscription-checkout-summary__items {
    display: grid;
    gap: var(--s-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.subscription-checkout-summary__item {
    border-block-start: 0.08em solid;
    display: grid;
    gap: var(--s-4);
    padding-block-start: var(--s-2);
}

.subscription-checkout-summary__item:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

.subscription-checkout-summary__item-name {
    font-weight: 700;
}

.subscription-checkout-summary__item-description,
.subscription-checkout-summary__item-cadence {
    color: var(--ink-mid);
    font-size: var(--type-small);
}

.subscription-checkout-summary__totals {
    border-block-start: 0.15em solid;
    display: grid;
    gap: var(--s-3) var(--s-1);
    grid-template-columns: 1fr auto;
    margin: var(--s-1) 0 0;
    padding-block-start: var(--s-1);
}

.subscription-checkout-summary__label,
.subscription-checkout-summary__value {
    font-family: var(--font-sans);
    font-size: var(--type-small);
    margin: 0;
}

.subscription-checkout-summary__value {
    font-variant-numeric: lining-nums tabular-nums;
    text-align: end;
}

.subscription-checkout-summary__label--total,
.subscription-checkout-summary__value--total {
    font-size: var(--s0);
    font-weight: 700;
}

.paddle-checkout-frame {
    min-block-size: 450px;
}

@media (max-width: 900px) {

    .subscription-plans,
    .subscription-podcast-links {
        grid-template-columns: 1fr;
    }

    .subscription-page {
        padding-block-start: var(--s-2);
    }

    .subscription-plan h2 {
        font-size: var(--s0);
    }
}

@media (max-width: 520px) {

    .subscription-plan,
    .subscription-note,
    .subscription-overview-hero,
    .subscription-checkout-summary,
    .subscription-checkout-panel {
        padding: var(--s-2);
    }

    .subscription-family-tabs,
    .subscription-show-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .subscription-family-tab {
        border: 0.12em solid;
        padding-inline: var(--s-2);
        text-align: start;
    }

    .subscription-family-tab[aria-selected='true'] {
        background: var(--background-color-inverse);
        color: var(--color-inverse);
    }

    .subscription-region-fields {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .subscription-select {
        max-inline-size: none;
    }
}