/* =====================================================================
   Premium, page stylesheet
   ---------------------------------------------------------------------
   One paid tier, one page. Loaded only by /premium (see
   src/routes/premium/index.ts), after the four shell sheets.

   This file defines no scale of its own. Type comes from --type-*,
   spacing from --space-*, radii from --radius-*, motion from --motion-*,
   colour from the --ds-*/--text-*/--bg-* semantic layer, all declared in
   design-system.css and shared with every other surface. The only thing
   the page owns is composition.

   Accent discipline: gold (--premium-gold) is a *status* colour meaning
   "this is the paid tier". It is never interactive, --accent-primary,
   via .apply-button, is the only thing you can click. Gold appears in
   exactly three places: the numbers that change when you pay, the
   Premium column header, and that column's fill. Section eyebrows,
   feature links and availability pills are deliberately neutral; if
   everything on this page were greyscale, those three are the ones that
   would need the colour back.
   ===================================================================== */

body[data-page="premium"] {
    /* Section rhythm. Sections do not share a single padding value, and
       the step grows in discrete jumps rather than a clamp so every
       resolved value stays on the shared scale. */
    --premium-section-step: var(--space-48);
}

@media (min-width: 768px) {
    body[data-page="premium"] {
        --premium-section-step: var(--space-64);
    }
}

@media (min-width: 1200px) {
    body[data-page="premium"] {
        --premium-section-step: var(--space-96);
    }
}

/* The product's content measure, not a number picked for this page: a
   visitor moving /services → /premium → /marketplace should not see the
   content edge jump. */
body[data-page="premium"] main > .container {
    max-width: var(--container-max);
}

.premium-page {
    font-size: var(--type-body);
    line-height: 1.6;
}

.premium-page > section {
    padding-block: var(--premium-section-step);
}

/* The shell already spaces the first section away from the nav; a full
   section step on top of that is dead air, not rhythm. Below 960px the rail
   shell pads the container by 64px on its own, so the page adds nothing. */
.premium-page > section:first-child {
    padding-block-start: var(--space-24);
}

@media (max-width: 960px) {
    .premium-page > section:first-child {
        padding-block-start: 0;
    }
}

.premium-page > section:last-child {
    padding-block-end: var(--space-64);
}

.premium-page > section + section {
    border-top: 1px solid var(--border-soft);
}

/* Shared section head. Left-aligned and narrow enough to read; the page
   is never centred. */
.premium-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    max-width: 56ch;
}

.premium-section-head h2 {
    margin: 0;
    font-size: var(--type-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text-strong);
}

.premium-section-head p {
    margin: 0;
    font-size: var(--type-lede);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Eyebrow. A tertiary label: low contrast carries that, not brand colour. */
.premium-kicker {
    font-size: var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Visible only to assistive tech: carries the meaning of the free→premium
   delta, which is layout to everyone else. */
.premium-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Availability pills ----------------------------------------------
   Same geometry and tone logic as the deal-room status pill (.case-status):
   neutral by default, semantic colour only when the state is a caveat.
   "In preview" is a warning about completeness, so it takes the product's
   warning tone rather than the premium gold it used to borrow, gold means
   "paid tier", not "unfinished". */
.premium-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: var(--space-4) var(--space-8);
    border-radius: 999px;
    font-size: var(--type-caption);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
}

.premium-status[data-state="warning"] {
    color: var(--ds-warning);
    background: color-mix(in oklab, var(--ds-warning) 12%, transparent);
    border-color: color-mix(in oklab, var(--ds-warning) 35%, transparent);
}

/* ---------------------------------------------------------------------
   1. Hero, copy left, the actual numbers right
   ------------------------------------------------------------------ */
.premium-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: var(--space-64);
    align-items: start;
}

.premium-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
}

.premium-hero__copy h1 {
    margin: 0;
    font-size: var(--type-hero);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 16ch;
    color: var(--text-strong);
}

.premium-hero__lead {
    margin: 0;
    font-size: var(--type-lede);
    line-height: 1.6;
    max-width: 46ch;
    color: var(--text-muted);
}

.premium-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin-top: var(--space-8);
}

.premium-hero__terms {
    margin: 0;
    font-size: var(--type-small);
    color: var(--text-subtle);
}

.premium-hero__terms strong {
    font-weight: 600;
    color: var(--text-muted);
}

.premium-hero__terms.is-active strong {
    color: var(--premium-gold);
}

/* Delta panel. Outlined on a raised surface, unelevated: it is reference
   material, not a card competing with the plan below. */
.premium-changes {
    padding: var(--space-24);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.premium-changes h2 {
    margin: 0 0 var(--space-8);
    font-size: var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.premium-changes dl {
    margin: 0;
}

.premium-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-16);
    padding-block: var(--space-12);
    border-top: 1px solid var(--border-soft);
}

.premium-change dt {
    font-size: var(--type-small);
    color: var(--text-muted);
}

.premium-change dd {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.premium-change__from {
    font-size: var(--type-small);
    color: var(--text-subtle);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Accent moment 1 of 3: the numbers that change when you pay. Weight and
   size carry the hierarchy on their own, so this still reads when the
   colour is flattened. */
.premium-change__to {
    font-size: var(--type-lede);
    font-weight: 700;
    line-height: 1.2;
    color: var(--premium-gold);
}

.premium-changes__note {
    margin: var(--space-16) 0 0;
    padding-top: var(--space-16);
    border-top: 1px solid var(--border-soft);
    font-size: var(--type-caption);
    line-height: 1.5;
    color: var(--text-subtle);
}

/* ---------------------------------------------------------------------
   2. Plans
   ------------------------------------------------------------------ */
.premium-plans {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

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

/* A deployment with one configured term gets one card, not one card
   stranded in a three-column grid, and on wide screens the section head
   moves alongside it so the row is not half empty. */
.premium-plan-grid--single {
    grid-template-columns: min(400px, 100%);
}

@media (min-width: 1024px) {
    .premium-plans--single {
        display: grid;
        grid-template-columns: minmax(0, 1fr) min(400px, 45%);
        gap: var(--space-48);
        align-items: start;
    }

    .premium-plans--single .premium-plan-grid,
    .premium-plans--single .premium-plan-grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .premium-plans--single #premium-checkout-status {
        grid-column: 1 / -1;
    }
}

.premium-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
}

/* The one card that carries elevation, because it is the one being
   recommended. Only rendered when there is more than one term to choose
   between, with a single card there is no hierarchy to signal. */
.premium-plan--featured {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-soft);
}

.premium-plan__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.premium-plan__badge {
    align-self: flex-start;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    font-size: var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
}

.premium-plan__head h3 {
    margin: 0;
    font-size: var(--type-h3);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-strong);
}

.premium-plan__head p {
    margin: 0;
    font-size: var(--type-small);
    line-height: 1.55;
    color: var(--text-subtle);
}

.premium-plan__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    padding-top: var(--space-16);
    border-top: 1px solid var(--border-soft);
}

.premium-plan__price strong {
    font-size: var(--type-h2);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

.premium-plan__price span {
    font-size: var(--type-small);
    color: var(--text-subtle);
}

.premium-plan__rate {
    margin: 0;
    font-size: var(--type-small);
    color: var(--text-subtle);
}

.premium-plan__rate strong {
    font-weight: 600;
    color: var(--text-muted);
}

.premium-plan .apply-button,
.premium-plan .ghost-button {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

.premium-plan .apply-button[disabled] {
    opacity: 0.65;
    cursor: wait;
}

#premium-checkout-status {
    margin: 0;
    font-size: var(--type-small);
}

/* ---------------------------------------------------------------------
   3. Feature groups, editorial two-column, flat rows
   ------------------------------------------------------------------ */
.premium-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
}

.premium-group {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
    gap: var(--space-48);
    align-items: start;
}

.premium-group__head {
    position: sticky;
    top: var(--space-96);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.premium-group__head h2 {
    margin: 0;
    font-size: var(--type-h3);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-strong);
}

.premium-features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.premium-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4) var(--space-16);
    padding-block: var(--space-16);
    border-top: 1px solid var(--border-soft);
}

.premium-feature:last-child {
    border-bottom: 1px solid var(--border-soft);
}

/* The feature title is the link, eleven identical "Preview feature" links
   read as one repeated control to a screen reader. It carries no arrow:
   an arrow on every row is decoration repeated eleven times, and underline
   on hover is the affordance the rest of the product already uses. */
.premium-feature__title {
    grid-column: 1;
    justify-self: start;
    font-size: var(--type-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-strong);
    text-decoration: none;
    transition: color var(--motion-duration-short) var(--motion-ease-standard);
}

.premium-feature__title:hover {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.premium-feature .premium-status {
    grid-column: 2;
    grid-row: 1;
}

.premium-feature p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--type-small);
    line-height: 1.6;
    color: var(--text-subtle);
    max-width: 62ch;
}

/* ---------------------------------------------------------------------
   4. Comparison table
   ------------------------------------------------------------------ */
.premium-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.premium-comparison__scroll {
    overflow-x: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}

.premium-comparison table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}

.premium-comparison thead th {
    padding: var(--space-12) var(--space-16);
    font-size: var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border-strong);
}

/* Accent moments 2 and 3: the column the page exists to sell. The rule down
   its left edge is what actually separates it, the fill is a reinforcement,
   so the column still reads when the fill is flattened on a light canvas. */
.premium-comparison thead th:last-child,
.premium-comparison tbody td:last-child {
    border-left: 2px solid var(--premium-gold);
}

.premium-comparison thead th:last-child {
    color: var(--premium-gold);
}

.premium-comparison tbody th,
.premium-comparison tbody td {
    padding: var(--space-16);
    vertical-align: top;
    font-size: var(--type-small);
    font-weight: 400;
}

.premium-comparison tbody tr + tr th,
.premium-comparison tbody tr + tr td {
    border-top: 1px solid var(--border-soft);
}

/* The design system uppercases every <th>, which is right for a column
   header and wrong for a row header holding a feature name. */
.premium-comparison tbody th[scope="row"] {
    min-width: 200px;
    font-size: var(--type-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-strong);
}

.premium-comparison tbody td {
    color: var(--text-subtle);
}

/* Weight, not only colour, marks the Premium column: the greyscale test has
   to pass, and the shell's light-mode enforcer flattens page colour to ink
   with !important, so a hue-only cue would disappear there entirely. */
.premium-comparison tbody td:last-child {
    color: var(--text-strong);
    font-weight: 600;
    background: color-mix(in oklab, var(--premium-gold) 6%, transparent);
}

/* ---------------------------------------------------------------------
   5. FAQ, same two-column rhythm as the feature groups
   ------------------------------------------------------------------ */
.premium-faq {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
    gap: var(--space-48);
    align-items: start;
}

.premium-faq dl {
    margin: 0;
}

.premium-faq__item {
    padding-block: var(--space-16);
    border-top: 1px solid var(--border-soft);
}

.premium-faq__item:last-child {
    border-bottom: 1px solid var(--border-soft);
}

.premium-faq dt {
    font-size: var(--type-body);
    font-weight: 600;
    color: var(--text-strong);
}

.premium-faq dd {
    margin: var(--space-8) 0 0;
    font-size: var(--type-small);
    line-height: 1.6;
    color: var(--text-subtle);
    max-width: 68ch;
}

/* ---------------------------------------------------------------------
   6. Closing CTA
   ------------------------------------------------------------------ */
/* Flat, like the feature lists. The page already carries two outlined
   surfaces (the delta panel and the plan card); a third bordered box here
   would be decoration, and it would double up with the section rule above
   it. */
.premium-close {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
}

.premium-close h2 {
    margin: 0 0 var(--space-8);
    font-size: var(--type-h3);
    font-weight: 700;
    color: var(--text-strong);
}

.premium-close p {
    margin: 0;
    font-size: var(--type-small);
    color: var(--text-muted);
    max-width: 54ch;
}

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .premium-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-32);
    }

    .premium-hero__copy h1 {
        max-width: 22ch;
    }

    .premium-group,
    .premium-faq {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-24);
    }

    .premium-group__head {
        position: static;
    }

    .premium-plan-grid:not(.premium-plan-grid--single) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 719px) {
    .premium-plan-grid:not(.premium-plan-grid--single) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The shared h2 step is sized for a wide column; below 720px it is
       wider than the measure it sits in. */
    .premium-section-head h2 {
        font-size: var(--type-h3);
    }

    .premium-hero__actions {
        width: 100%;
    }

    .premium-hero__actions .apply-button,
    .premium-hero__actions .ghost-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .premium-close {
        flex-direction: column;
        align-items: flex-start;
    }

    .premium-close .apply-button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-feature__title {
        transition: none;
    }

    .premium-group__head {
        position: static;
    }
}