.subscription-page {
    padding-inline: 1em;
    padding-block-start: var(--s-2);
    padding-block-end: var(--s1);
    --measure: 82ch;

    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-link-button,
.subscription-note {
    font-family: var(--font-mono);
}

.subscription-region {
    font-size: var(--s-1);
    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(--s-1);
}

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

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

.subscription-plans {
    display: grid;
    gap: var(--s0);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subscription-plans--two {
    grid-template-columns: repeat(2, 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: 'Source Serif 4', Georgia, 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: 'Source Serif 4', Georgia, 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,
.subscription-link-button {
    background: var(--background-color);
    border: 0.12em solid;
    color: var(--color);
    cursor: pointer;
    display: inline-block;
    font-size: var(--s-1);
    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 {
    --measure: 96ch;
    display: grid;
    gap: var(--s0);
    margin-inline: auto;
    max-inline-size: var(--measure);
}

.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-mono);
}

.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(--s-1);
    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(--s-1);
    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(--s-2);
    opacity: 0.7;
}

@media (max-width: 900px) {

    .subscription-plans,
    .subscription-plans--two,
    .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 {
        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;
    }
}