/*
 * The 2027 look for billing and buying at id (look.css is the shared part).
 * Billing and buying (4.11.2026): billing/* (billing, subscription, start, prices, pay, done, shared, paddle).
 * One session owns this sheet; other areas have their own (components/look-sheets).
 *
 * Each page has one dark panel: the Subscription and Billing pages' standing (.plan: the total or the next invoice,
 * large), /start's bar with the total and Next/Pay, the price list's closing "Sign up", a test or shared payment's foot
 * with the total and Pay. The states, mapped here for these pages only (each a glyph and a word, as the kit's badge):
 *   - blue: fine and under way - an active subscription, a paid invoice, a project being made, someone joined;
 *   - orange: needs you - a failed payment and its grace period, an open invoice (an orange bar on its row), a change
 *     waiting for the renewal, a cancelled subscription still running; a glyph, a bar or a dot, never a tinted box;
 *   - red (the kit's --neg): broken - a subscription ended, an invoice uncollectible, a purchase that failed;
 *   - no green: a percentage off, a tick in a product's highlights are blue.
 * What is chosen (a package, a product picked at /start) is black in light mode, a raised dark tone with a blue edge
 * in dark - never a white slab.
 */
:root {
    /* Words and lines on a dark panel (the panel itself is look.css' --lk-panel). */
    --lb-ink: light-dark(#ffffff, #eef0f3);
    --lb-ink-2: #c7cbd3;
    --lb-ink-3: #9aa0ab;
    --lb-line: var(--lk-panel-line);
    --lb-edge: #3a3f4a;
    --lb-orange: #ff7a2f;
    --lb-neg: #ff8f80;
    --lb-blue: var(--blue-on-black);
}

/* ── States: the kit's badges on these pages, as the look maps them ───────────────────────────────────────────────── */
:is(.plan, .bill, .invoices, .buy-made, .buy-invited) .badge, .badge.buy-state { border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
:is(.plan, .bill, .invoices, .buy-made, .buy-invited) :is(.badge-pos, .badge-info) svg, .buy-state:is(.badge-pos, .badge-info) svg { color: var(--blue); }
:is(.plan, .bill, .invoices) .badge-caut { color: var(--ink); }
:is(.plan, .bill, .invoices) .badge-caut svg { color: var(--orange); }
:is(.plan, .bill, .invoices, .buy-made, .buy-invited) .badge-neg, .badge-neg.buy-state { border-color: var(--neg-edge); color: var(--neg-ink); }
/* After paying, "waiting" is the provider's to do, not the buyer's: under way, so blue. */
.buy-state.badge-caut svg, .buy-made .badge-caut svg { color: var(--blue); }

/* ── Where it stands (Subscription and Billing): the page's dark panel, the total or the next invoice large ─────────── */
.plan { gap: var(--s-5) var(--s-6); padding: 28px 32px; border: 1px solid var(--lk-panel-edge); border-radius: 20px; background: var(--lk-panel); color: var(--lb-ink); box-shadow: 0 12px 32px -18px rgb(11 13 18 / 0.45); }
.plan :focus-visible { outline-color: var(--lb-blue); }
.plan-total { padding-right: var(--s-6); border-right-color: var(--lb-line); }
.plan-label { color: var(--lb-ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-amount { margin-top: 6px; color: var(--lb-ink-3); }
.plan-amount b { color: var(--lb-ink); font-size: 3rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.plan-split { margin-top: 4px; color: var(--lb-ink-3); }
.plan-split + .plan-split { margin-top: 2px; }
.plan-facts dt { color: var(--lb-ink-3); }
.plan-facts dd { color: var(--lb-ink); }
/* A state on the dark: outlined, its glyph the state's colour. */
.plan .badge { border-color: var(--lb-edge); background: transparent; color: var(--lb-ink); }
.plan .badge-pos svg { color: var(--lb-blue); }
.plan .badge-caut svg { color: var(--lb-orange); }
.plan .badge-neg { border-color: color-mix(in oklab, var(--lb-neg) 55%, transparent); color: var(--lb-neg); }
/* Keep (the main action) is the white button on the dark - blue in dark mode; Cancel stays an outline, its words red. */
.plan .btn { border-color: var(--lb-edge); background: transparent; color: var(--lb-ink); }
.plan .btn:hover { border-color: #4a505c; background: rgb(255 255 255 / 0.05); color: var(--lb-ink); }
.plan .btn-primary { border-color: var(--lk-on-dark); background: var(--lk-on-dark); color: var(--lk-on-dark-ink); font-weight: 600; }
.plan .btn-primary:hover { border-color: var(--lk-on-dark-hover); background: var(--lk-on-dark-hover); color: var(--lk-on-dark-ink); }
.plan .btn-danger, .plan .btn-danger:hover { color: var(--lb-neg); }
.plan .btn-danger:hover { border-color: color-mix(in oklab, var(--lb-neg) 55%, transparent); }
/* What needs saying under it: a bar, orange when it needs you, red once it is over - no tinted box. */
.plan > .callout { gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 0; border-left: 3px solid var(--lb-ink-3); border-radius: 4px 10px 10px 4px; background: rgb(255 255 255 / 0.05); color: var(--lb-ink-2); }
.plan > .callout-caut { border-left-color: var(--lb-orange); }
.plan > .callout-caut svg { color: var(--lb-orange); }
.plan > .callout-neg { border-left-color: var(--lb-neg); }
.plan > .callout-neg svg { color: var(--lb-neg); }
@media (max-width: 900px) {
    .plan-facts { border-top-color: var(--lb-line); }
}
@container page (max-width: 608px) {
    .plan { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); border-radius: 16px; }
    .plan-amount { white-space: normal; }
    .plan-amount b { font-size: 2.5rem; }
    .plan-facts { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-actions { grid-row: auto; }
    .plan-actions .btn { width: 100%; justify-content: center; }
}

/* ── The Subscription page's projects ─────────────────────────────────────────────────────────────────────────────── */
.bill-section-head h2 { font-size: var(--fs-title); letter-spacing: -0.01em; }
.bill-head { padding-block: 18px; }
.bill-title { letter-spacing: -0.01em; }
.bill-sum b { font-size: 1.375rem; letter-spacing: -0.02em; }
/* A product's tile is a black square, its icon white (Sessions' rows); "Accounts" stays a quiet grey one. */
.bill-icon, .bill-line > .product-tile:not(.is-plain) { background: var(--lk-sel); color: var(--lk-sel-ink); }
.bill-icon { border-radius: 7px; }
/* A project's share off and an item's: blue, as anything that went well (no green in the look). */
.bill .pill-pos { background: var(--accent-wash); color: var(--accent-ink); }
.bill-price small { color: var(--accent-ink); }
.bill-price b { font-size: var(--fs-lead); letter-spacing: -0.01em; }
.bill-chip:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.bill-chip:hover .product-icon { color: var(--ink); }

/* ── A package's cards (/start and the Subscription page's dialogs): the chosen one black ──────────────────────────── */
.package-option { border-radius: 14px; transition: border-color 0.12s, background-color 0.12s; }
.package-option:not(.package-option-none):has(input:checked) { border-color: light-dark(var(--lk-bar), #5b7fff); box-shadow: 0 0 0 1px light-dark(var(--lk-bar), #5b7fff), 0 10px 24px -14px rgb(11 13 18 / 0.5); background: var(--lk-sel); color: var(--lk-sel-ink); }
.package-option:not(.package-option-none):has(input:checked) :is(.package-option-name, .package-option-price b, .package-kind b) { color: var(--lk-sel-ink); }
.package-option:not(.package-option-none):has(input:checked) :is(.package-option-price, .package-kind) { color: var(--lb-ink-2); }
.package-option:not(.package-option-none):has(input:checked) .package-kind-icon { color: var(--lb-blue); }
.package-option:not(.package-option-none):has(input:checked) input { accent-color: var(--lb-blue); }
.package-option:not(.package-option-none):has(input:checked) .package-option-current { border-color: var(--lb-blue); background: transparent; color: var(--lb-blue); }
.package-option-none:has(input:checked) { border-color: var(--ink-3); }
.package-option-price b { font-size: 1.375rem; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: reduce) { .package-option { transition: none; } }

/* ── /start: a checkout in four steps ─────────────────────────────────────────────────────────────────────────────── */
/* The steps: the one you are on black (blue in dark), each done blue with the line after it blue, the rest quiet. */
.steps { padding: var(--s-2) 0; }
.steps li + li::before { width: 32px; background: var(--line-2); }
.steps li:has(.step-link.is-done) + li::before { background: var(--blue); }
.step-link { height: 36px; padding-right: 14px; }
.step-number { width: 28px; height: 28px; border-color: var(--line-2); background: var(--surface); font-weight: 600; }
.step-link.is-done .step-number { border-color: var(--blue); background: var(--blue); color: #ffffff; }
.step-link[aria-current='step'] .step-number { box-shadow: 0 0 0 4px light-dark(rgb(11 13 18 / 0.08), rgb(91 127 255 / 0.22)); }
@container page (max-width: 608px) { .steps li + li::before { width: 12px; } }

.buy-head h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
/* How often to pay, and whom the invoice is for: the chosen one a white sheet on the grey well, as look.css' switches. */
form[data-purchase] .segmented label:has(input:checked) { background: light-dark(#ffffff, #2c313b); box-shadow: 0 1px 2px rgb(11 13 18 / 0.12); color: var(--ink); font-weight: 600; }
.buy-group-head h3 { color: var(--ink-3); letter-spacing: 0.08em; }
/* A product: its tile grey until a package is chosen, then black; its package and price in ink. */
.pick-head { padding-block: 14px; }
.pick.is-chosen .pick-head > .product-tile { background: var(--lk-sel); color: var(--lk-sel-ink); }
.pick.is-chosen .pill-accent { background: var(--surface); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pick.is-chosen .pick-price { font-size: var(--fs-lead); letter-spacing: -0.01em; }
.pick-body { background: var(--surface-2); }
.account-row-own .account-row-number { background: var(--lk-sel); color: var(--lk-sel-ink); }
/* The review's total, large; Change quiet. */
.overview tfoot .total-row td { padding-block: var(--s-4); font-size: 1.25rem; letter-spacing: -0.015em; }
.review-share { border-style: dashed; }
/* The link made: the sheet solid, its share mark black (what is chosen, as a picked product's tile). */
.review-share.is-made { border-style: solid; }
.review-share.is-made .review-share-mark { border-color: transparent; background: var(--lk-sel); color: var(--lk-sel-ink); }

/* The bar under the steps: the page's dark panel - the total in white, Next or Pay the white button (blue in dark),
   Back an outline; what still needs a look in a light red. */
.purchase-bar { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border: 1px solid var(--lk-panel-edge); border-radius: 16px; background: var(--lk-panel); color: var(--lb-ink); box-shadow: 0 18px 40px -16px rgb(11 13 18 / 0.55); }
.purchase-bar :focus-visible { outline-color: var(--lb-blue); }
.purchase-total { color: var(--lb-ink); letter-spacing: -0.01em; }
.purchase-total.is-error, .purchase-check { color: var(--lb-neg); }
.purchase-bar .btn { height: 40px; border-color: var(--lb-edge); background: transparent; color: var(--lb-ink); }
.purchase-bar .btn:hover { border-color: #4a505c; background: rgb(255 255 255 / 0.05); color: var(--lb-ink); }
.purchase-bar .btn-primary { padding-inline: 18px; border-color: var(--lk-on-dark); background: var(--lk-on-dark); color: var(--lk-on-dark-ink); font-weight: 600; }
.purchase-bar .btn-primary:hover { border-color: var(--lk-on-dark-hover); background: var(--lk-on-dark-hover); color: var(--lk-on-dark-ink); }
@container page (max-width: 608px) {
    .purchase-bar { padding: var(--s-3); }
    .purchase-total { flex: 1 1 100%; font-size: var(--fs-body); }
    .purchase-actions { flex: 1 1 100%; }
    .purchase-actions > .btn:not([hidden]) { flex: 1 1 0; justify-content: center; }
}

/* ── The price list: a pricing page in a readable column ──────────────────────────────────────────────────────────── */
.prices { gap: var(--s-6); }
.prices-hero { gap: var(--s-4); padding: var(--s-6) 0 var(--s-2); }
.prices-hero h1 { max-width: 16ch; font-size: clamp(2.25rem, 5.5cqi, 3.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
.prices-hero p { max-width: 40rem; color: var(--ink-2); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
.prices-hero .row .btn, .prices-cta .row .btn { height: 44px; padding-inline: 18px; }
/* The products at a glance: a black tile each, the price from in ink. */
.prices-index { gap: var(--s-3); }
.prices-index-item { padding: var(--s-4); border-radius: 16px; }
.prices-index-item:hover { border-color: var(--ink); box-shadow: var(--shadow-raised); }
.prices-index-item .product-tile, .price-name .product-tile { background: var(--lk-sel); color: var(--lk-sel-ink); }
.prices-index-words > b { letter-spacing: -0.01em; }
.prices-index-words > .prices-from { color: var(--ink); font-weight: 600; }
/* How it works: four steps numbered 01-04 in blue, each under a hairline. */
#how-it-works h2, #terms h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.how-steps { gap: var(--s-5); counter-reset: step; }
.how-steps li { gap: var(--s-2); padding-top: var(--s-3); border-top: 2px solid var(--line); }
.how-steps li::before { content: counter(step, decimal-leading-zero); display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.how-steps li:first-child { border-top-color: var(--blue); }
.terms-grid { gap: var(--s-5) var(--s-6); }
.terms-grid > div { padding-top: var(--s-3); border-top: 1px solid var(--line); }
/* Each product: its name larger, its ticks blue, its prices in ink with the period quiet. */
.price-name h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.price-highlights .glyph { color: var(--blue); }
.price-shot-open { border-radius: 12px; }
.price-table thead th { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.price-table td.num { color: var(--ink); font-weight: 600; }
.price-table td.num .muted { font-weight: 400; }
/* The way in, at the end: the page's dark panel. */
.prices-cta { padding: 28px 32px; border: 1px solid var(--lk-panel-edge); border-radius: 20px; background: var(--lk-panel); color: var(--lb-ink-2); box-shadow: none; }
.prices-cta p { font-size: var(--fs-lead); line-height: 1.55; }
.prices-cta :focus-visible { outline-color: var(--lb-blue); }
.prices-cta .btn { border-color: var(--lb-edge); background: transparent; color: var(--lb-ink); }
.prices-cta .btn:hover { border-color: #4a505c; background: rgb(255 255 255 / 0.05); color: var(--lb-ink); }
.prices-cta .btn-primary { border-color: var(--lk-on-dark); background: var(--lk-on-dark); color: var(--lk-on-dark-ink); font-weight: 600; }
.prices-cta .btn-primary:hover { border-color: var(--lk-on-dark-hover); background: var(--lk-on-dark-hover); color: var(--lk-on-dark-ink); }
@container page (max-width: 608px) {
    .prices-hero { padding-top: var(--s-4); }
    .prices-hero .row, .prices-cta .row { width: 100%; }
    .prices-hero .row .btn, .prices-cta .row .btn { flex: 1 1 0; justify-content: center; }
    .prices-cta { padding: var(--s-5); border-radius: 16px; }
}

/* ── The Billing page ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* An open invoice needs paying: an orange bar at its row's start. */
.invoices tr:has(.badge-caut) > td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.invoices .invoice-total { letter-spacing: -0.01em; }

/* ── Paying: a test payment's and a shared purchase's total and Pay, the page's dark panel at the sheet's foot ──── */
.card:has(> .pay-foot) { border-color: light-dark(var(--line), var(--lk-panel-edge)); }
.pay-total { align-items: baseline; padding: var(--s-5) var(--s-5) var(--s-2); border-top: 0; background: var(--lk-panel); color: var(--lb-ink-3); font-weight: 500; }
.pay-total > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pay-total > span:last-child { color: var(--lb-ink); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; }
.pay-total .bill-sum { color: var(--lb-ink-3); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; }
.pay-total .bill-sum b { color: var(--lb-ink); font-size: 1.75rem; letter-spacing: -0.025em; }
.pay-foot { padding: var(--s-2) var(--s-5) var(--s-5); border-top: 0; background: var(--lk-panel); color: var(--lb-ink-3); }
.pay-foot :focus-visible { outline-color: var(--lb-blue); }
.pay-foot .btn { height: 40px; border-color: var(--lb-edge); background: transparent; color: var(--lb-ink); }
.pay-foot .btn:hover { border-color: #4a505c; background: rgb(255 255 255 / 0.05); color: var(--lb-ink); }
.pay-foot .btn-primary { padding-inline: 18px; border-color: var(--lk-on-dark); background: var(--lk-on-dark); color: var(--lk-on-dark-ink); font-weight: 600; }
.pay-foot .btn-primary:hover { border-color: var(--lk-on-dark-hover); background: var(--lk-on-dark-hover); color: var(--lk-on-dark-ink); }
@container page (max-width: 608px) {
    .pay-foot > span { flex: 1 1 100%; }
    .pay-foot > .btn-primary { flex: 1 1 auto; justify-content: center; }
}
/* The test payment's notice: an orange bar, no wash. */
.pay-test.callout-caut { border-color: var(--line); border-left: 3px solid var(--orange); background: var(--surface); color: var(--ink-2); }
.pay-test.callout-caut svg { color: var(--orange); }

/* ── After paying (done, shared): where the purchase stands ───────────────────────────────────────────────────────── */
.await { border-radius: 16px; }
.await-mark { border-radius: 12px; }
.await:not(.is-neg) .await-mark:not(.is-busy) { background: var(--surface-2); color: var(--ink-2); }
.await.await-done .await-mark:not(.is-busy) { background: var(--lk-sel); color: var(--lk-sel-ink); }
.share-link-row > input[type='text'] { background: var(--surface-2); }

/* ── Paddle's payment link: the guest card, its brand mark black ──────────────────────────────────────────────────── */
body[data-paddle-token] .guest .card { border-radius: 20px; }

/* ══ Buying in a buyer's words (04.11.2026, the owner's yes to the review "Buying from My Beast"): /start's plan cards,
   its two-question project step and its order bar, the price list's "Choose", the after-paying ticks. ══════════════ */

/* For every age and every eye: 16 px words and boxes (smaller zooms an iPhone), hints dark enough to read (#4a505c on
   white, 7:1), every control 44 px tall - the kit's own tokens, set again on the buying pages only. */
:is(form[data-purchase], .prices, .shared-page) { --fs-body: 1rem; --fs-caption: 0.875rem; --fs-lead: 1.125rem; --h-control: 44px; --h-sm: 44px; font-size: var(--fs-body); line-height: 1.5; }
:is(form[data-purchase], .shared-page) :is(.hint, .card-head p, .buy-head p, .kind-note) { color: var(--ink-2); }
form[data-purchase] :is(input[type='text'], input[type='email'], select) { font-size: 1rem; }
form[data-purchase] .segmented label { height: 38px; padding-inline: 14px; font-size: var(--fs-caption); }
.buy-period-free { color: var(--accent-ink); font-weight: 600; }
form[data-purchase] .segmented label:has(input:checked) .buy-period-free { color: var(--accent-ink); }

/* A product's row, 64 px at least: on the right "Not added" and Add, or its plan and price and Change - a button's
   look on words the whole row answers to (the summary opens it). */
.pick-head { min-height: 64px; }
.pick-choice { gap: var(--s-3); }
.pick-choice [hidden] { display: none; }
.pick-none { color: var(--ink-3); font-size: var(--fs-caption); }
.pick-act { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: var(--fs-caption); font-weight: 600; }
.pick-head:hover .pick-act { border-color: var(--ink); }
.pick-change, .pick.is-chosen .pick-add { display: none; }
.pick.is-chosen .pick-change { display: inline; }
.pick.is-chosen .pill-accent { height: 28px; padding-inline: 10px; font-size: var(--fs-caption); }
.pick[open] .pick-act { display: none; }

/* A product's plans, three cards of one width: name, who it is for, the period's price at 32 px, what yearly saves in
   blue, a hairline, the limits as ticked sentences, then "Choose …" as wide as the card. The radio is the card's own
   (out of sight, still focused and said); the chosen card has a 2 px edge, its button filled and "✓ Chosen". */
.pick-body { padding: var(--s-5); }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.plan-cards.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-cards.plans-1 { grid-template-columns: minmax(0, 24rem); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.plan-card:hover { border-color: var(--ink-3); }
.plan-radio { position: absolute; top: var(--s-4); right: var(--s-4); width: 1px; height: 1px; margin: 0; opacity: 0; }
.plan-card:has(.plan-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-card:has(.plan-radio:checked) { border-color: light-dark(var(--lk-bar), #5b7fff); box-shadow: 0 0 0 1px light-dark(var(--lk-bar), #5b7fff), 0 10px 24px -16px rgb(11 13 18 / 0.45); }
.plan-flag { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--lk-sel); color: var(--lk-sel-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.plan-name { color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.plan-for { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.45; }
.plan-price { margin-top: var(--s-2); color: var(--ink-2); }
.plan-price b { color: var(--ink); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.plan-save { color: var(--accent-ink); font-size: var(--fs-caption); font-weight: 500; }
.plan-limits { display: grid; gap: 8px; margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.plan-limit { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.45; }
.plan-limit .glyph { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--blue); }
.plan-choose { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: auto; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: var(--fs-caption); font-weight: 600; text-align: center; }
.plan-limits + .plan-choose { margin-top: var(--s-5); }
.plan-card:hover .plan-choose { border-color: var(--ink); }
.plan-choose-on, .plan-card:has(.plan-radio:checked) .plan-choose-off { display: none; }
.plan-card:has(.plan-radio:checked) .plan-choose-on { display: inline; }
.plan-card:has(.plan-radio:checked) .plan-choose { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
/* The price of the period paid by is the large one; what the other saves under it. */
form[data-purchase]:has(input[name='period'][value='year']:checked) :is(.plan-price-month, .plan-save-month),
form[data-purchase]:not(:has(input[name='period'][value='year']:checked)) :is(.plan-price-year, .plan-save-year) { display: none; }
.plan-help { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--fs-caption); }
.plan-remove { margin-top: var(--s-2); }
.plan-remove .btn-link { min-height: 44px; font-size: var(--fs-caption); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pick:not(.is-chosen) .plan-remove, .plan-remove [hidden] { display: none; }
@container page (max-width: 760px) {
    .plan-cards, .plan-cards.plans-2 { grid-template-columns: minmax(0, 1fr); }
    .pick-body { padding: var(--s-4); }
    .plan-card { padding: var(--s-4); }
    .pick-act { display: none; }
}
@media (prefers-reduced-motion: reduce) { .plan-card { transition: none; } }

/* Your project: a first-time buyer's two fields with no box around them; a web address a line under its name, its
   field behind Change. */
.buy-grid > .buy-plain { grid-column: 1 / -1; grid-row: auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.buy-grid > .buy-web, .buy-grid .buy-grid > .buy-web { grid-column: 1 / -1; grid-row: auto; margin-top: calc(-1 * var(--s-2)); }
.buy-web > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); min-height: 32px; color: var(--ink-2); font-size: var(--fs-caption); list-style: none; cursor: pointer; }
.buy-web > summary::-webkit-details-marker { display: none; }
.buy-web-line { min-width: 0; overflow-wrap: anywhere; }
.buy-web-line bdi { color: var(--ink); font-family: var(--mono); font-size: 0.92em; }
.buy-web-change { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.buy-web > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.buy-web[open] .buy-web-change { display: none; }
.buy-web > .field { margin-top: var(--s-2); }
.account-row-own .pill { font-weight: 600; }

/* The review: the order, then what happens once paid, ticked. */
.review-main { display: grid; gap: var(--s-4); }
.review-next h3 { font-size: var(--fs-body); font-weight: 600; }
.review-next-list { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--ink-2); }
.review-next-list li { display: flex; align-items: flex-start; gap: var(--s-2); }
.review-next-list .glyph { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--blue); }
.review-next-list b { color: var(--ink); }

/* The order bar: what is chosen in a line, the total at 20 px; on the review a lock on the pay button and who takes the
   money under it. */
.purchase-total { display: grid; gap: 2px; }
.purchase-what { color: var(--lb-ink-2); font-size: var(--fs-caption); font-weight: 500; }
.purchase-sum { color: var(--lb-ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.purchase-bar .btn { height: 44px; }
.purchase-lock { width: 16px; height: 16px; margin-right: 6px; flex: none; }
.purchase-by { flex: 1 1 100%; margin: 0; color: var(--lb-ink-3); font-size: 13px; text-align: right; }
.purchase-bar:has([data-step-submit][hidden]) .purchase-by { display: none; }
@container page (max-width: 608px) {
    .purchase-by { text-align: center; }
    .purchase-sum { font-size: 1.125rem; }
}

/* The price list: each plan's line of who it is for over what it includes; "Choose …" in a column of its own. */
.price-for { display: block; color: var(--ink); font-weight: 500; }
.price-limits { display: block; color: var(--ink-2); font-size: var(--fs-caption); }
.price-table .plan-flag { margin-bottom: 4px; }
.price-table-choose { width: 13rem; }
.price-choose { text-align: right; }
.price-choose .btn { white-space: nowrap; }
.prices-way-in { align-items: center; gap: var(--s-3) var(--s-5); }
.prices-have { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prices-cta .prices-have { color: var(--lb-ink); }
@container page (max-width: 608px) {
    .price-table td.price-choose { flex-basis: 100%; margin-top: var(--s-2); text-align: left; }
    .price-table td.price-choose .btn { width: 100%; justify-content: center; }
    .prices-hero .row .prices-have, .prices-cta .row .prices-have { flex: 1 1 100%; justify-content: center; }
}

/* A shared purchase's foot: what happens once paid, on the same dark as the total and Pay. */
.pay-next { display: grid; gap: 6px; margin: 0; padding: var(--s-2) var(--s-5) var(--s-3); list-style: none; background: var(--lk-panel); color: var(--lb-ink-2); font-size: var(--fs-caption); }
.pay-next li { display: flex; align-items: flex-start; gap: var(--s-2); }
.pay-next .glyph { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--lb-blue); }
.pay-foot .btn-primary { display: inline-flex; align-items: center; }

/* After paying: three ticks that fill as they happen - a filled blue check once done, a turning ring while under way,
   an empty ring to come - each with its words. */
.await-ticks { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.await-ticks li { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-3); }
.await-ticks li.is-done, .await-ticks li.is-busy { color: var(--ink); }
.await-tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 2px solid var(--line-2); border-radius: 50%; }
.await-ticks .is-done .await-tick { border: 0; color: var(--blue); }
.await-ticks .is-done .await-tick .glyph { width: 20px; height: 20px; }
.await-ticks .is-busy .await-tick { border-color: var(--blue); border-right-color: transparent; animation: await-turn 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .await-ticks .is-busy .await-tick { animation: none; border-style: dotted; border-right-color: var(--blue); } }
.await-steps { max-width: 40rem; }
.await .btn-primary { white-space: nowrap; }

/* ── /start's first two steps apart (04.11.2026, the owner): 1 the products, a compact list to tick, 2 a plan for each ── */
/* The group chips (one group at a time, the chosen one black) and, past 12 products, the search. */
.product-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.product-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.product-chips[hidden], .product-search[hidden] { display: none; }
.product-chip { height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-caption); font-weight: 500; cursor: pointer; }
.product-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.product-chip[aria-pressed='true'] { border-color: var(--lk-sel-edge); background: var(--lk-sel); color: var(--lk-sel-ink); font-weight: 600; }
.product-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-search input { width: min(100%, 24rem); }
/* A product a row, 64 px at least, the whole row its box: tile, name and line, what it starts from, then "Add" - a
   20 px box and its word, "Added" once ticked, the tile black. */
.product-picks { margin-top: var(--s-4); }
.product-pick { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-1) var(--s-4); min-height: 64px; padding: 12px var(--s-5); border-top: 1px solid var(--line); cursor: pointer; }
.product-pick:first-child { border-top: 0; }
.product-pick[hidden] { display: none; }
.product-pick:hover { background: var(--surface-2); }
.product-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.product-pick > .product-tile { width: 40px; height: 40px; margin: 0; background: var(--surface-2); color: var(--ink-2); }
.product-pick > .product-tile .product-icon { width: 22px; height: 22px; }
.product-pick:has(input:checked) > .product-tile { background: var(--lk-sel); color: var(--lk-sel-ink); }
.product-pick-words { display: grid; min-width: 0; }
.product-pick-name { color: var(--ink); font-weight: 600; }
.product-pick-about { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.45; }
.product-pick-from { color: var(--ink-2); font-size: var(--fs-caption); white-space: nowrap; }
.product-pick-add { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 6.75rem; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: var(--fs-caption); font-weight: 600; }
.product-pick-add input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: light-dark(var(--lk-bar), #5b7fff); }
.product-pick-add input:focus-visible { outline: none; }
.product-pick-on, .product-pick:has(input:checked) .product-pick-off { display: none; }
.product-pick:has(input:checked) .product-pick-on { display: inline; }
.product-pick:has(input:checked) .product-pick-add { border-color: light-dark(var(--lk-bar), #5b7fff); }
.product-none { padding: var(--s-4) var(--s-5); color: var(--ink-2); }
.product-none[hidden] { display: none; }
@container page (max-width: 608px) {
    .product-pick { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px var(--s-4); }
    .product-pick > .product-tile { grid-row: span 2; align-self: start; }
    .product-pick-from { grid-column: 2; grid-row: 2; }
    .product-pick-add { grid-column: 3; grid-row: 1 / span 2; min-width: 0; }
    .product-filter, .product-chips { flex-wrap: nowrap; }
    .product-chips { margin-inline: calc(-1 * var(--s-4)); padding: 2px var(--s-4); overflow-x: auto; scrollbar-width: none; }
    .product-chips::-webkit-scrollbar { display: none; }
    .product-chip { flex: none; }
    .product-filter { flex-direction: column; align-items: stretch; }
    .product-search input { width: 100%; }
}

/* 2 Plans (04.11.2026, the owner: "select single plan for all the products, and if needed change the product to a
   different plan"): one plan for everything - three cards, each what this order costs in it, the one every row has
   pressed -, "Mixed plans" over them once rows differ; then a compact row per product: tile and name, its plan as a
   switch (44 px), what that plan gives, its price, Remove; "What's in each plan" folded under it. */
.plan-all { margin-top: var(--s-4); }
.plan-all[hidden], .plan-mixed [hidden] { display: none; }
/* "Mixed plans" sits on the period's line and keeps its room while hidden, so nothing moves as rows change. */
.buy-plans .buy-period { flex-wrap: wrap; justify-content: flex-end; }
.plan-mixed { display: flex; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }
.plan-mixed[hidden] { display: flex; visibility: hidden; }
.plan-mixed .btn { height: 44px; }
.plan-tier { width: 100%; color: inherit; font: inherit; text-align: left; }
.plan-tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-tier[aria-pressed='true'] { border-color: light-dark(var(--lk-bar), #5b7fff); box-shadow: 0 0 0 1px light-dark(var(--lk-bar), #5b7fff), 0 10px 24px -16px rgb(11 13 18 / 0.45); }
.plan-tier[aria-pressed='true'] .plan-choose { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.plan-tier[aria-pressed='true'] .plan-choose-off { display: none; }
.plan-tier[aria-pressed='true'] .plan-choose-on { display: inline; }
.plan-count { color: var(--ink-2); font-size: var(--fs-caption); }
.plan-tier .plan-save + .plan-choose { margin-top: var(--s-4); }

.plan-rows { margin-top: var(--s-5); }
.plan-row { display: grid; grid-template-columns: 40px minmax(6.5rem, 9rem) auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) var(--s-4); min-height: 64px; margin-top: -1px; padding: 10px var(--s-5); border-top: 1px solid var(--line); }
.plan-row[hidden] { display: none; }
.plan-row > .product-tile { width: 40px; height: 40px; margin: 0; background: var(--lk-sel); color: var(--lk-sel-ink); }
.plan-row > .product-tile .product-icon { width: 22px; height: 22px; }
.plan-row-name { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.plan-switch { justify-self: start; }
.plan-switch label { white-space: nowrap; }
.plan-row-gives { min-width: 0; color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.4; }
.plan-row:not(.is-chosen) .plan-row-gives { color: var(--ink-3); }
.plan-row-price { color: var(--ink); font-weight: 600; text-align: right; white-space: nowrap; }
.plan-row-remove { min-height: 44px; color: var(--ink-2); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; }
.plan-row-remove[hidden], .plan-row-note[hidden] { display: none; }
.plan-row-note { grid-column: 2 / -1; margin: 0; color: var(--ink-2); font-size: var(--fs-caption); }
/* Add-ons under a product's row (../ADDONS.md, "Choosing add-ons when ordering"): a line per add-on the chosen plan
   sells - its name over what the plan includes, − count + with what one block is, what each costs over what the blocks
   come to -, and rule 4's line under it when a bigger plan gives as much for less. Hidden while no plan sells it. */
.plan-addons { grid-column: 2 / -1; display: grid; }
.plan-addon { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-1) var(--s-4); padding: var(--s-2) 0; border-top: 1px dashed var(--line); }
.plan-addon[hidden] { display: none; }
.plan-addon-what { display: grid; gap: 2px; min-width: 0; }
.plan-addon-name { color: var(--ink); font-weight: 600; }
.plan-addon-included { color: var(--ink-2); font-size: var(--fs-caption); }
.plan-addon .addon-stepper { flex-wrap: nowrap; margin-top: 0; }
.plan-addon .addon-stepper-words { white-space: nowrap; }
.plan-addon-price { display: grid; justify-items: end; min-width: 7rem; color: var(--ink); text-align: right; white-space: nowrap; }
.plan-addon-price b { font-weight: 600; }
.plan-addon-price b:empty { display: none; }
.plan-addon-price span { color: var(--ink-3); font-size: var(--fs-caption); }
.plan-addon > .error, .plan-addon-note { grid-column: 1 / -1; margin: 0; }
.plan-addon-note { color: var(--ink-2); font-size: var(--fs-caption); }
.plan-addon-note[hidden] { display: none; }
.overview .overview-addon td:first-child { color: var(--ink-3); font-size: var(--fs-caption); }
@container page (max-width: 900px) {
    /* The price beside the name, the stepper under them. */
    .plan-addon { grid-template-columns: minmax(0, 1fr) auto; }
    .plan-addon-what { grid-column: 1; grid-row: 1; }
    .plan-addon-price { grid-column: 2; grid-row: 1; min-width: 0; }
    .plan-addon .addon-stepper { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
    .plan-addon .addon-stepper-words { white-space: normal; }
}
.plan-compare { grid-column: 2 / -1; }
.plan-compare > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-ink); font-size: var(--fs-caption); font-weight: 500; cursor: pointer; }
.plan-compare > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.plan-compare .table-wrap { margin: var(--s-2) 0 var(--s-2); border: 1px solid var(--line); border-radius: 12px; }
.plan-compare table { font-size: var(--fs-caption); }
.plan-compare :is(th, td) { padding: 8px 12px; vertical-align: top; }
.plan-compare thead th { color: var(--ink); font-weight: 600; }
.plan-compare tbody th { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.plan-compare td { color: var(--ink-2); }
.buy-plans .kind-note { margin-top: var(--s-4); }
@container page (max-width: 900px) {
    /* The switch under the name, what the plan gives under it. */
    .plan-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .plan-row > .product-tile { grid-row: span 2; align-self: start; }
    .plan-row-name { grid-column: 2; }
    .plan-row-price { grid-column: 3; grid-row: 1; }
    .plan-switch { grid-column: 2 / -1; }
    .plan-row-gives { grid-column: 2; }
    .plan-row-remove { grid-column: 3; justify-self: end; }
}
@container page (max-width: 608px) {
    .plan-row { padding: 12px var(--s-4); }
    .plan-switch { display: flex; width: 100%; }
    .plan-switch label { flex: 1 1 0; justify-content: center; }
}
.plans-more { margin-top: var(--s-2); }
.plans-more .btn-link { min-height: 44px; font-weight: 600; }
.plans-more [hidden] { display: none; }

/* On a phone each plan for everything is a line, not a card: its name, the order's total in it, what yearly saves while
   yearly is chosen, and "Choose" - so the products' rows start near the top. */
@container page (max-width: 608px) {
    .plan-all .plan-cards { gap: var(--s-2); }
    .plan-tier { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px var(--s-3); padding: 10px 12px 10px 14px; border-radius: 12px; }
    .plan-tier .plan-flag { grid-column: 1 / -1; }
    .plan-tier .plan-name { grid-column: 1; font-size: 1rem; }
    .plan-tier .plan-for, .plan-tier .plan-count, .plan-tier .plan-save-month { display: none; }
    .plan-tier .plan-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; }
    .plan-tier .plan-flag ~ .plan-price { grid-row: 2 / span 2; }
    .plan-tier .plan-price b { font-size: 1.125rem; }
    .plan-tier .plan-save { grid-column: 1; font-size: 13px; }
    .plan-tier .plan-choose, .plan-tier .plan-save + .plan-choose { grid-column: 3; grid-row: 1 / -1; height: 40px; margin: 0; padding: 0 14px; }
    .plan-tier .plan-choose-name { display: none; }
    .buy-plans .buy-period { justify-content: flex-start; }
}

/* A row on another plan than the default: a quiet line under its switch, "Not your default · Use Team". */
.plan-row-hint { grid-column: 3; grid-row: 2; display: flex; align-items: center; gap: 6px; margin: -4px 0 0; color: var(--ink-3); font-size: 13px; }
.plan-row-hint[hidden] { display: none; }
.plan-row-hint .btn-link { min-height: 32px; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@container page (max-width: 900px) {
    .plan-row-hint { grid-column: 2 / -1; grid-row: auto; margin: 0; }
}
.price-addons { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-caption); }
.price-addons b { color: var(--ink); font-weight: 600; }