/* Pro billing (#255) — /pro, /you/pro, the plan row, the notice strip.
 *
 * No new tokens. Amber is --mud-palette-warning; the Active chip is --ij-gain; every
 * surface, radius and grey comes from tokens.css. The capsule button, card surface and
 * chips are borrowed from portfolio.css rather than restated, so these pages read as the
 * same object the user meets on the gate.
 */

/* ---------------------------------------------------------------- /you/pro ---- */

/* No box of its own any more — only a namespace hook for the rules below.
   /you/pro now wears the /connect shell (.ij-page-content > .ij-connect-hero +
   .ij-connect-grid, in app-layout.css), which owns the gutter, the measure and the
   two columns. It was a 760px centred column; it is the same shape as /connect
   because it is the same kind of page — a procedure with an argument attached. */

.ij-pro-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--ij-text-secondary);
    text-decoration: none;
    margin-bottom: var(--ij-space-4);
}

.ij-pro-back:hover {
    color: var(--ij-text-primary);
}

.ij-pro-head {
    display: flex;
    align-items: center;
    gap: var(--ij-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--ij-space-2);
}

.ij-pro-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.ij-pro-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
    margin: 0 0 var(--ij-space-6);
}

.ij-pro-block {
    margin-bottom: var(--ij-space-6);
}

/* --- the checkout handoff --- */

/* Plan and price on one line, so the number is met once, here, and not first on a
   payment page belonging to somebody else. */
.ij-pro-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ij-space-4);
    border: 1px solid var(--ij-divider);
    border-radius: 20px;
    padding: 18px 22px;
    margin-bottom: var(--ij-space-6);
}

.ij-pro-summary-name {
    font-size: 16px;
    font-weight: 600;
}

.ij-pro-summary-recurrence {
    font-size: 13px;
    color: var(--ij-text-secondary);
    margin-top: 2px;
}

.ij-pro-summary-price {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ij-pro-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--ij-space-3);
}

/* The handoff's numbered steps are .ij-connect-step / -badge / -text now — the same
   rows /connect uses for its setup path, which is the same promise in the same shape. */

.ij-pro-actions {
    display: flex;
    align-items: center;
    gap: var(--ij-space-4);
    flex-wrap: wrap;
}

/* A quiet way out, beside the CTA rather than under it: a decision to wait is a real
   answer, and burying it makes the page feel like it only has one exit. */
.ij-pro-quiet {
    font-size: 14px;
    color: var(--ij-text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.ij-pro-quiet:hover {
    color: var(--ij-text-primary);
    text-decoration: underline;
}

.ij-pro-fine {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ij-text-tertiary);
    margin: var(--ij-space-3) 0 0;
}

/* --- the success return --- */

/* The green tick that used to open this state is now .ij-connect-banner, the same
   confirmation strip /connect uses — success and "Pro is on" say the same thing. */

.ij-pro-panel {
    background: var(--ij-bg-gray);
    border-radius: 20px;
    padding: 22px 24px;
}

.ij-pro-panel-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

.ij-pro-panel-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
    margin: 0 0 var(--ij-space-4);
}

.ij-pro-links {
    display: flex;
    gap: var(--ij-space-4);
    flex-wrap: wrap;
    margin-top: var(--ij-space-3);
}

.ij-pro-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ij-space-3);
    border-top: 1px solid var(--ij-divider);
    margin-top: var(--ij-space-6);
    padding-top: var(--ij-space-4);
    font-size: 13.5px;
    color: var(--ij-text-secondary);
}

/* --- the sixty seconds --- */

.ij-pending-status {
    display: flex;
    align-items: center;
    gap: var(--ij-space-3);
    border: 1px solid var(--ij-divider);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: var(--ij-space-4);
}

/* Nine pixels, pulsing. Never a spinner and never an indeterminate bar: both say "the
   app is busy", and the app is not busy — it is waiting for somebody else. */
.ij-pending-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--ij-primary);
    flex: none;
    animation: ij-pending-pulse 1.4s ease-in-out infinite;
}

.ij-pending-status--escalated .ij-pending-dot {
    background: var(--mud-palette-warning);
    animation: none;
}

@keyframes ij-pending-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ij-pending-dot {
        animation: none;
    }
}

.ij-pending-label {
    font-size: 14px;
    font-weight: 600;
}

/* Tabular, because this number changes every second and a proportional font makes the
   whole row twitch while it does. */
.ij-pending-counter {
    margin-left: auto;
    font-size: 13px;
    color: var(--ij-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The largest sentence on the pending screen, and deliberately so: the one thing a
   buyer might do here that cannot be undone is pay twice. */
.ij-pending-nodouble {
    background: var(--ij-bg-gray);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: var(--ij-space-4);
}

.ij-pending-nodouble-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

.ij-pending-nodouble .ij-pro-panel-body {
    margin-bottom: 0;
}

/* The order number sits in the page's hero card now (.ij-connect-card-hero, with the
   number in .ij-connect-url-text and a Copy button beside it) — the same artifact
   /connect gives the connector URL, because it is the same job: one string a person
   has to be able to hand to somebody else without retyping it. */

/* --- managing an active subscription --- */

/* 16, not 20 — the radius of .ij-connect-card, which this list now sits beside. */
.ij-pro-facts {
    border: 1px solid var(--ij-divider);
    border-radius: 16px;
    overflow: hidden;
}

.ij-pro-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ij-space-4);
    padding: 14px 20px;
    font-size: 14px;
    min-height: 44px;
}

.ij-pro-fact + .ij-pro-fact {
    border-top: 1px solid var(--ij-divider);
}

.ij-pro-fact-label {
    color: var(--ij-text-secondary);
}

.ij-pro-fact-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* A receipt is a .ij-connect-prompt-row now — glyph, date, amount, link-out — so the
   row itself carries no rules here. Only the amount does: tabular, and pushed to the
   right of the date so a column of them lines up down the page. */
.ij-pro-receipt-amount {
    margin-left: auto;
    margin-right: var(--ij-space-4);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* #1567: the refund line under the amount charged. Secondary, not a loss colour — money
   coming back to the subscriber is not bad news for them. */
.ij-pro-receipt-refund {
    font-size: 12px;
    color: var(--ij-text-secondary);
}

/* Reachable in one scroll, with nothing to expand first. Hiding the exit is the oldest
   dark pattern in subscriptions and the easiest one not to ship. */
.ij-pro-cancel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ij-space-4);
    border-top: 1px solid var(--ij-divider);
    margin-top: var(--ij-space-6);
    padding-top: var(--ij-space-6);
}

.ij-pro-cancel-consequence {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
    margin: 0;
    max-width: 46ch;
}

/* Outlined, not filled and not red. Leaving is a legitimate thing to want. */
.ij-pro-cancel-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--ij-divider);
    border-radius: 980px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ij-text-primary);
    cursor: pointer;
    min-height: 44px;
}

.ij-pro-cancel-btn:hover {
    background: var(--ij-bg-gray);
}

/* --- past due --- */

/* Amber, never red. A declined card is not the user's failure, and red is the colour
   this app uses for a loss. */
.ij-pro-pastdue {
    border: 1px solid var(--mud-palette-warning);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: var(--ij-space-6);
}

.ij-pro-pastdue-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

/* --- cancel dialog --- */

.ij-pro-cancel-dialog {
    padding: var(--ij-space-6);
}

.ij-pro-cancel-dialog p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
    margin: 0 0 var(--ij-space-3);
}

.ij-pro-cancel-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ij-space-4);
    margin-top: var(--ij-space-6);
}

/* Text, not filled, and in the loss colour only because it is destructive — the KEEP
   button is the filled one, which is the honest hierarchy: staying is the default. */
.ij-pro-cancel-confirm {
    background: none;
    border: none;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ij-loss);
    cursor: pointer;
}

.ij-pro-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ij-space-2);
    margin-top: var(--ij-space-3);
}

.ij-pro-reason-chip {
    border: 1px solid var(--ij-divider);
    border-radius: 980px;
    background: none;
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ij-text-secondary);
    cursor: pointer;
}

.ij-pro-reason-chip:hover {
    background: var(--ij-bg-gray);
    color: var(--ij-text-primary);
}

/* --- status chips --- */

.ij-pro-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 980px;
    background: var(--ij-bg-gray);
    padding: 4px 11px;
    font-size: 12.5px;
    font-weight: 600;
}

.ij-pro-chip--active {
    color: var(--ij-gain);
}

.ij-pro-chip--warn {
    color: var(--mud-palette-warning);
}

.ij-pro-dot-warn {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    display: inline-block;
    flex: none;
}

/* ------------------------------------------------------- the notice strip ---- */

/* One sentence, one inline link, one dismiss. The app interrupts once per state
   change; the account page answers every time it is asked. */
.ij-billing-notice {
    display: flex;
    align-items: center;
    gap: var(--ij-space-3);
    background: var(--ij-bg-gray);
    border-radius: 14px;
    padding: 11px 16px;
    margin: 0 auto var(--ij-space-4);
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 1200px;
}

.ij-billing-notice-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: none;
    background: var(--mud-palette-warning);
}

.ij-billing-notice-text {
    flex: 1;
    min-width: 0;
}

/* No spacing rules here on purpose. The gaps between the strip's bolded lead, its body
   sentence and its inline link are real   characters in the markup — a CSS margin
   would space them visually while leaving the text reading as one word to a screen
   reader and copying out of the page wrong. */

.ij-billing-notice-dismiss {
    flex: none;
    background: none;
    border: none;
    padding: 4px;
    line-height: 1;
    cursor: pointer;
    color: var(--ij-text-tertiary);
    font-family: inherit;
    font-size: 16px;
}

.ij-billing-notice-dismiss:hover {
    color: var(--ij-text-primary);
}

/* ------------------------------------------------------------------ /pro ---- */

/* 1A (Canvas-11): the bespoke 900px column — the app's last bespoke page measure —
   retired for the full-gutter workspace (ij-page-content, /connect 13B recipe):
   argument left, plan card in a sticky rail right. */
.ij-propage-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.ij-propage-main {
    min-width: 0;
}

.ij-propage-rail {
    position: sticky;
    top: 20px;
}

/* The card's two panels sit side by side on the checkout summary; in the narrow
   rail they stack, main over side. Scoped so the checkout keeps its shape. */
.ij-propage-rail .ij-propage-card {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

.ij-propage-rail .ij-propage-account {
    margin-bottom: 14px;
}

/* The included-as-they-ship promise, demoted from the dormant coming block to one
   line above stays-free — still under a clock, never a check. */
.ij-propage-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--ij-divider);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 18px 0 26px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ij-text-secondary);
    background: var(--ij-surface);
}

.ij-propage-note .mud-icon-root {
    flex: none;
    margin-top: 2px;
}

/* Collapse to one column below 900px (same break as /connect) — the card goes
   static ABOVE the argument, so the price is never below the fold it explains. */
@media (max-width: 900px) {
    .ij-propage-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ij-propage-rail {
        position: static;
        order: -1;
    }
}

.ij-propage-hero {
    max-width: 760px;
}

.ij-propage-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ij-text-secondary);
    margin-bottom: var(--ij-space-3);
}

.ij-propage-headline {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 0 0 var(--ij-space-3);
}

.ij-propage-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
    max-width: 62ch;
    margin: 0 0 var(--ij-space-8);
}

/* Signed-in only: which account Pro would attach to. One line, bottom-bordered, above
   the card — a person with two accounts must not have to guess. */
.ij-propage-account {
    display: flex;
    align-items: center;
    gap: var(--ij-space-3);
    border-bottom: 1px solid var(--ij-divider);
    padding-bottom: var(--ij-space-3);
    margin-bottom: var(--ij-space-4);
    font-size: 13.5px;
    color: var(--ij-text-secondary);
}

.ij-propage-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border: 1px solid var(--ij-divider);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: var(--ij-space-8);
}

.ij-propage-card-main {
    padding: 26px 28px;
}

.ij-propage-plan {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--ij-space-2);
}

.ij-propage-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.ij-propage-price-amount {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ij-propage-price-per {
    font-size: 15px;
    color: var(--ij-text-secondary);
}

/* #1244 — stands where the amount would be while the price is still a proposal.
   Deliberately NOT 38px: it is a sentence, not a number, and setting it at the
   figure's weight would give an absent price the visual authority of a settled one.
   --ij-text-secondary rather than tertiary, which fails AA (see the tertiary memo). */
.ij-propage-price-tbd {
    font-size: 20px;
    font-weight: 600;
    color: var(--ij-text-secondary);
}

.ij-propage-cancelany {
    font-size: 13.5px;
    color: var(--ij-text-secondary);
    margin: var(--ij-space-2) 0 var(--ij-space-4);
}

/* The currency and provider sentences sit BESIDE the price, so nobody meets either for
   the first time on a payment page belonging to another company. */
.ij-propage-card-side {
    background: var(--ij-bg-gray);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: var(--ij-space-4);
    justify-content: center;
}

.ij-propage-side-line {
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: var(--ij-space-3);
    align-items: start;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
}

/* .ij-propage-features (the old live/coming two-up) retired with 1A — the live
   list flows in the main column; the coming block waits dormant below the note. */

.ij-propage-live-title {
    font-size: 20px;
    font-weight: 600;
    margin: var(--ij-space-2) 0 6px;
}

.ij-propage-live-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ij-text-secondary);
    margin: 0 0 var(--ij-space-4);
}

.ij-propage-bullet {
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: var(--ij-space-3);
    align-items: start;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.ij-propage-bullet .mud-icon-root {
    color: var(--ij-gain);
}

.ij-propage-freelimit {
    font-size: 13px;
    color: var(--ij-text-secondary);
    border-top: 1px solid var(--ij-divider);
    padding-top: 11px;
    margin-top: var(--ij-space-3);
}

/* Coming, included — and NEVER in the same list as what works today. Clock glyphs and
   a Building chip, never a checkmark: a checkmark beside something unbuilt is the one
   lie this page cannot afford. */
.ij-propage-coming {
    background: var(--ij-bg-gray);
    border-radius: 20px;
    padding: 22px 24px;
}

.ij-propage-coming-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--ij-space-4);
}

.ij-propage-coming-item {
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: var(--ij-space-3);
    align-items: start;
    margin-bottom: var(--ij-space-4);
}

.ij-propage-coming-head {
    display: flex;
    align-items: center;
    gap: var(--ij-space-2);
    flex-wrap: wrap;
}

.ij-propage-coming-name {
    font-size: 14px;
    font-weight: 600;
}

.ij-propage-coming-chip {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--ij-divider);
    border-radius: 980px;
    padding: 2px 8px;
    color: var(--ij-text-secondary);
}

.ij-propage-coming-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ij-text-secondary);
    margin: 3px 0 0;
}

.ij-propage-coming-foot {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ij-text-secondary);
    border-top: 1px solid var(--ij-divider);
    padding-top: var(--ij-space-3);
    margin: 0;
}

.ij-propage-staysfree {
    background: var(--ij-bg-gray);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: var(--ij-space-8);
}

.ij-propage-faq {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: var(--ij-space-4);
    padding: var(--ij-space-4) 0;
    border-top: 1px solid var(--ij-divider);
    font-size: 14px;
    line-height: 1.55;
}

.ij-propage-faq-q {
    font-weight: 600;
}

.ij-propage-faq-a {
    color: var(--ij-text-secondary);
}

/* ------------------------------------------ the second-book gate's sample ---- */

/* Three invented books with one open. The shape IS the product: several ledgers,
   switched between, never summed into each other. */
.ij-progate-books {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ij-space-2);
    margin-bottom: var(--ij-space-4);
}

.ij-progate-book {
    display: flex;
    align-items: baseline;
    gap: var(--ij-space-2);
    border: 1px solid var(--ij-divider);
    border-radius: 980px;
    padding: 5px 14px;
    font-size: 13px;
}

.ij-progate-book--open {
    border-color: transparent;
    background: var(--ij-surface);
    font-weight: 600;
}

.ij-progate-book-name {
    white-space: nowrap;
}

.ij-progate-sample-holdings {
    margin-top: var(--ij-space-4);
    font-variant-numeric: tabular-nums;
}

.ij-progate-sample-row {
    display: grid;
    grid-template-columns: minmax(90px, 1.6fr) 0.8fr 1.2fr 0.9fr;
    gap: var(--ij-space-3);
    align-items: baseline;
    padding: 9px 0;
    border-top: 0.5px solid var(--ij-divider);
    font-size: 13.5px;
}

.ij-progate-sample-ticker {
    font-weight: 600;
}

.ij-progate-sample-mv,
.ij-progate-sample-row > span:last-child {
    text-align: right;
}

/* Was an inline style="min-width: 0" on the bundle item's text column. Moved out with
   the clock-glyph change so the rule lives where every other ij- rule does. min-width
   is load-bearing: without it a long description refuses to wrap inside the grid. */
.ij-progate-bundle-text {
    min-width: 0;
}

/* ------------------------------------------------------- the /you plan row ---- */

/* Whole row navigates. No state changes its height or its position — a settings row
   that moves when your billing does is a row you have to re-find at the worst moment. */
.ij-plan-row {
    display: flex;
    align-items: center;
    gap: var(--ij-space-4);
    text-decoration: none;
    color: inherit;
    padding: var(--ij-space-4);
}

.ij-plan-row-main {
    flex: 1;
    min-width: 0;
}

.ij-plan-row-title {
    display: flex;
    align-items: center;
    gap: var(--ij-space-2);
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 600;
}

.ij-plan-row-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 980px;
    background: var(--ij-bg-gray);
    color: var(--ij-text-secondary);
    padding: 2px 9px;
}

.ij-plan-row-body {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ij-text-secondary);
    margin: 3px 0 0;
}

.ij-plan-row-cta {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ij-primary);
    margin-top: 6px;
}

.ij-plan-row-chevron {
    flex: none;
    color: var(--ij-text-tertiary);
}

/* -------------------------------------------------------- the native row ---- */

/* States what you have, never what you owe. No price, no verb, no chevron, no link.
   44pt even though nothing here is tappable, so it sits on the list rhythm. */
.ij-native-pro-row {
    display: flex;
    align-items: center;
    gap: var(--ij-space-3);
    min-height: 44px;
    padding: var(--ij-space-3) var(--ij-space-4);
    font-size: 15px;
}

.ij-native-pro-row .mud-icon-root {
    color: var(--ij-gain);
}

.ij-native-pro-renews {
    margin-left: auto;
    font-size: 14px;
    color: var(--ij-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- responsive ---- */

@media (max-width: 899px) {
    .ij-propage-card {
        grid-template-columns: 1fr;
    }

    .ij-propage-faq {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ij-propage-headline {
        font-size: 32px;
    }
}

@media (max-width: 599px) {
    /* .ij-pro's own padding is gone — .ij-page-content owns the gutter at every
       width now, exactly as it does on /connect. */

    .ij-pro-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ij-space-2);
    }

    /* The inset rows inside the hero cards — the plan line and the order number —
       stack instead of squeezing a sentence into a column beside a price. Same
       treatment .ij-pro-summary has always had, now that the row lives in a card. */
    .ij-pro .ij-connect-url {
        flex-wrap: wrap;
    }

    /* Consequence above button, and every capsule full width at the thumb's minimum. */
    .ij-pro-cancel {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ij-space-4);
    }

    /* Every capsule the thumb has to hit, at the thumb's minimum. MudBlazor's own
       height is 42px, which is 2px of nothing a thumb can feel and exactly the kind of
       miss that only shows up on a phone. Scoped to .ij-pro so the shared pending block
       keeps a gate's own sizing when it renders inside one. Quiet text links
       (.ij-pro-quiet) are deliberately not capsules and stay as they are. */
    .ij-pro-cancel-btn,
    .ij-pro .ij-pf-btn-primary,
    .ij-pro .mud-button-root:not(.ij-pro-quiet) {
        width: 100%;
        min-height: 44px;
    }

    /* …except the one that shares its row with the string it copies. */
    .ij-pro .ij-connect-copy-btn {
        width: auto;
    }

    .ij-pro-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ij-space-3);
    }
}

/* The availability line and its opt-in sit as one quiet block under a buy button. */
.ij-pro-availability {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ij-space-1);
    margin-top: var(--ij-space-3);
}