/* Domestic checkout: inherit the existing paper/navy/amber brand. */
.checkout-shell { width: min(1120px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.checkout-heading { padding: 48px 0 26px; }
.checkout-heading h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.03em; }
.checkout-heading .lead { margin: 0; max-width: 43rem; }
.checkout-back { display: flex; align-items: center; gap: 8px; width: max-content; min-height: 32px; margin-bottom: 14px; font-size: .88rem; text-decoration: none; }
.checkout-steps { display: flex; gap: 22px; padding: 0; margin: 24px 0 0; list-style: none; font-size: .85rem; color: var(--muted); }
.checkout-steps li { display: inline-flex; align-items: center; gap: 8px; }
.checkout-steps li > span:first-child { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: .75rem; }
.checkout-steps li[aria-current] { color: var(--ink); font-weight: 650; }
.checkout-steps li[aria-current] > span:first-child { color: white; border-color: var(--navy); background: var(--navy); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; padding-bottom: 36px; }
.checkout-fields { display: grid; gap: 20px; min-width: 0; }
.checkout-block { margin: 0; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.checkout-block h2, .checkout-block legend { padding: 0; margin: 0 0 16px; color: var(--ink); font-family: var(--font-sans); font-size: 1.25rem; font-weight: 650; }
fieldset.checkout-block { min-width: 0; }
fieldset.checkout-block legend { float: left; width: 100%; }
fieldset.checkout-block > :not(legend) { clear: both; }
.block-caption { margin: -7px 0 17px; color: var(--muted); font-size: .85rem; }
.billing-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; margin: 0 0 19px; border-radius: var(--radius-sm); background: var(--paper); }
.billing-option, .plan-option, .method-option { position: relative; cursor: pointer; }
.choice-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.billing-option > span { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 45px; border: 1px solid transparent; border-radius: 4px; color: var(--muted); font-size: .9rem; }
.billing-option input:checked + span { border-color: var(--line); background: white; color: var(--ink); font-weight: 650; }
.billing-option em { font-style: normal; font-size: .7rem; padding: 2px 6px; border-radius: 4px; color: var(--mint); background: var(--mint-soft); }
.choice-input:focus-visible + span, .choice-input:focus-visible + .plan-tile { outline: 3px solid var(--focus); outline-offset: 3px; }
.plan-options { display: grid; gap: 10px; }
.plan-options + .note, .method-options + .note { margin-top: 12px; }
.plan-tile { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 17px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .15s, background .15s; }
.plan-tile::before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.plan-option input:checked + .plan-tile { border-color: var(--navy); background: #f7f9fc; box-shadow: inset 0 0 0 1px var(--navy); }
.plan-option input:checked + .plan-tile::before { border: 5px solid var(--navy); background: white; }
.plan-tile strong { display: block; color: var(--ink); font-size: .98rem; }
.plan-tile small { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; }
.plan-price { color: var(--ink); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-price i { margin-left: 3px; color: var(--muted); font-style: normal; font-size: .76rem; font-weight: 400; }
.checkout-fields:has(input:disabled) .plan-option { cursor: default; }
.account-row { display: flex; align-items: center; gap: 13px; }
.account-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); color: white; background: var(--navy); font-weight: 650; }
.account-row strong { display: block; color: var(--ink); font-size: .9rem; overflow-wrap: anywhere; }
.account-row small { color: var(--muted); font-size: .78rem; }
.account-note { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.method-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.method-option > span { display: flex; align-items: center; gap: 10px; min-height: 65px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: .92rem; }
.method-option input:checked + span { border-color: var(--mint); background: #f3faf6; box-shadow: inset 0 0 0 1px var(--mint); }
.method-option input:disabled + span { background: #f8f9fb; color: var(--muted); cursor: not-allowed; }
.method-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; color: white; background: #16864d; font-size: 15px; font-weight: 700; }
.method-icon.alipay { background: #e1e5eb; color: #627087; }
.method-option small { display: block; margin-top: 3px; font-size: .72rem; }
.purchase-notes { padding: 0 4px; }
.purchase-notes summary { color: var(--ink); font-size: .9rem; cursor: pointer; font-weight: 600; }
.purchase-notes ul { padding-left: 20px; font-size: .85rem; color: var(--muted); }
.purchase-notes li { margin: 10px 0; }
.purchase-notes .note { margin-bottom: 0; }
.receipt { position: sticky; top: 24px; overflow: hidden; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: white; }
.receipt-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 0; }
.receipt-head h2 { font: 650 .92rem var(--font-sans); margin: 0; }
.status-pill { padding: 3px 9px; border-radius: 4px; font-size: .8125rem; font-weight: 650; color: var(--muted); background: var(--paper-2); }
.status-pill[data-tone=success] { color: var(--mint); background: var(--mint-soft); }
.status-pill[data-tone=warning] { color: var(--pulse-ink); background: var(--pulse-soft); }
.receipt-summary { padding: 19px 24px 22px; border-bottom: 1px dashed var(--line-strong); }
.receipt-plan { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 650; }
.receipt-summary > .note { margin: 3px 0 14px; }
.receipt-total { display: flex; gap: 6px; align-items: baseline; margin: 0; color: var(--ink); }
.receipt-total strong { font-size: 2.8rem; line-height: 1.1; letter-spacing: -.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.receipt-total span { color: var(--muted); font-size: .82rem; }
.receipt-saving { margin: 10px 0 0; color: var(--mint); font-size: .78rem; }
.receipt-body { padding: 22px 24px; }
.payment-display { min-height: 183px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.payment-symbol { width: 46px; height: 46px; margin: 3px 0 12px; display: grid; place-items: center; border-radius: var(--radius); color: var(--pulse-ink); background: var(--pulse-soft); font-size: 23px; }
.payment-display[data-state=FULFILLED] .payment-symbol, .payment-display[data-state=REFUNDED] .payment-symbol { color: var(--mint); background: var(--mint-soft); }
.payment-display h3 { margin: 0 0 7px; font: 650 1rem var(--font-sans); }
.payment-display p { margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.7; }
.qr-holder { position: relative; width: 178px; height: 178px; margin: 0 auto 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; }
.qr-holder img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-preview-label { position: absolute; left: 5px; right: 5px; top: 74px; padding: 4px; color: var(--ink); background: #ffffffed; font-size: .72rem; font-weight: 700; }
.order-clock { color: var(--mint) !important; font-variant-numeric: tabular-nums; }
.order-details { margin: 14px 0 0; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .72rem; }
.order-details div { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.order-details dt { color: var(--muted); }
.order-details dd { margin: 0; color: var(--ink); font-family: var(--font-sans); overflow-wrap: anywhere; }
.order-details button { padding: 5px 0 5px 8px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.checkout-ack { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 15px; font-size: .78rem; color: var(--muted); line-height: 1.7; }
.checkout-ack input { flex: 0 0 auto; margin: 5px 0 0; width: 15px; height: 15px; accent-color: var(--navy); }
.receipt .button { width: 100%; min-height: 47px; font-size: .88rem; }
.receipt .button + .button { margin-top: 9px; }
.receipt-foot { padding: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); background: #fafbfd; font-size: .72rem; text-align: center; }
.inline-message { margin: 13px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); color: #843a14; background: #fff2e9; font-size: .8rem; }
.inline-message[data-tone=info] { color: var(--mint); background: var(--mint-soft); }
.preview-controls { margin-bottom: 40px; padding: 16px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: #ffffff80; }
.preview-controls summary { font-size: .82rem; color: var(--muted); cursor: pointer; }
.preview-controls p { margin: 11px 0; color: var(--muted); font-size: .8rem; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.preview-actions button { min-height: 36px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); background: white; font: inherit; font-size: .76rem; cursor: pointer; }
.preview-actions button:disabled { cursor: not-allowed; opacity: .45; }
.preview-actions button:hover:not(:disabled) { border-color: var(--ink); }
.checkout-closed { padding: 28px; margin: 0 0 36px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.checkout-closed h2 { margin-top: 0; font-family: var(--font-sans); }
.pricing-intro { text-align: center; padding: 62px 0 36px; }
.pricing-intro h1 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3rem); }
.pricing-intro .lead { margin-inline: auto; max-width: 42rem; }
.pricing-intro > p:not(.lead) { max-width: 46rem; margin-inline: auto; }
.pricing-intro .billing-switch { max-width: 320px; margin: 24px auto 0; border: 1px solid var(--line); background: var(--paper-2); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pricing-card { display: flex; flex-direction: column; position: relative; padding: 29px; border-top: 3px solid transparent; }
.pricing-card + .pricing-card { border-left: 1px solid var(--line); }
.pricing-card.featured { border-top-color: var(--pulse); background: #fbfcfe; }
.pricing-card h2 { margin: 0 0 7px; font: 650 1.2rem var(--font-sans); }
.pricing-card > .note { min-height: 40px; margin: 0 0 17px; }
.pricing-tag { align-self: flex-start; margin-bottom: 14px; padding: 3px 9px; border-radius: 4px; color: var(--mint); background: var(--mint-soft); font-size: .8125rem; }
.pricing-number { color: var(--ink); font-size: 2.8rem; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.pricing-month { color: var(--muted); font-size: .8rem; margin: 9px 0 22px; }
.pricing-card ul { padding-left: 18px; margin: 0 0 24px; color: var(--ink-2); font-size: .86rem; flex: 1; }
.pricing-card li { margin: 9px 0; }
.pricing-card .button { padding-inline: 12px; }
.pricing-facts { padding: 25px; margin-bottom: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pricing-facts h2 { margin: 0 0 12px; font: 650 1rem var(--font-sans); }
.pricing-facts p { max-width: 48em; color: var(--muted); font-size: .88rem; }
@media (max-width: 860px) {
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
    .checkout-block { padding: 20px; }
    .pricing-card { padding: 22px; }
}
@media (max-width: 680px) {
    .checkout-heading { padding-top: 28px; }
    .checkout-layout { grid-template-columns: 1fr; }
    .receipt { position: static; }
    .checkout-steps { gap: 12px; font-size: .74rem; }
    .checkout-steps li { gap: 5px; }
    .plan-tile { padding: 14px 12px; gap: 8px; }
    .plan-tile small { font-size: .72rem; }
    .plan-price { font-size: 1.05rem; }
    .method-options { gap: 8px; }
    .method-option > span { padding: 10px; font-size: .82rem; }
    .pricing-intro { padding-top: 40px; text-align: left; }
    .pricing-intro .lead, .pricing-intro > p:not(.lead), .pricing-intro .billing-switch { margin-inline: 0; }
}
/* Pricing on phones: switch first, then three compact rows (name and price side by side). */
@media (max-width: 719px) {
    .checkout-shell:has(.pricing-intro) { display: flex; flex-direction: column; }
    .pricing-intro { display: contents; }
    .pricing-intro > h1 { order: 1; margin: 24px 0 12px; font-size: 1.9rem; }
    .pricing-intro > .lead { order: 2; margin: 0 0 16px; }
    .pricing-intro > .billing-switch { order: 3; max-width: none; margin: 0 0 16px; }
    .pricing-grid { order: 4; grid-template-columns: 1fr; margin-bottom: 20px; }
    .pricing-intro > p:not(.lead) { order: 5; margin: 0 0 20px; }
    .pricing-facts { order: 6; }
    .checkout-shell > p.shell { order: 7; }
    .pricing-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 16px; }
    .pricing-card + .pricing-card { border-left: 0; border-top: 1px solid var(--line); }
    .pricing-card.featured { border-top: 3px solid var(--pulse); }
    .pricing-card > .pricing-tag { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 6px; }
    .pricing-card > h2 { grid-column: 1; grid-row: 2; margin: 0; }
    .pricing-card > p:nth-of-type(1) { grid-column: 1; grid-row: 3; min-height: 0; margin: 4px 0 0; }
    .pricing-card > div { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; white-space: nowrap; }
    .pricing-number { font-size: 2.1rem; }
    .pricing-month { grid-column: 1 / -1; grid-row: 4; margin: 8px 0 0; }
    .pricing-card > p:nth-of-type(3) { grid-column: 1 / -1; grid-row: 5; min-height: 0; margin: 2px 0 0; }
    .pricing-card ul { grid-column: 1 / -1; grid-row: 6; margin: 8px 0 12px; font-size: .84rem; }
    .pricing-card li { margin: 4px 0; }
    .pricing-card .button { grid-column: 1 / -1; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .plan-tile { transition: none; } }

/* The production state view follows the existing paper/navy layout. */
.production-checkout { max-width: 48rem; padding-block: 3rem; }
.site-header .header-inner { flex-wrap: wrap; }
.site-header .primary-nav ul { flex-wrap: wrap; }
.production-checkout h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-block: 0 1rem; }
.production-checkout p { max-width: 65ch; }
.production-checkout form { display: grid; gap: .75rem; margin-block: 1.5rem; }
.production-checkout label { font-weight: 650; }
.production-checkout select { width: 100%; min-height: 44px; font: inherit; padding: .6rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.production-checkout button { min-height: 44px; width: fit-content; max-width: 100%; white-space: normal; }
.production-checkout :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.production-result { border-block: 1px solid var(--line); padding-block: .75rem; margin-block: 1rem; }
#production-payment img { max-width: 100%; height: auto; background: white; }
@media (forced-colors: active) { .production-checkout select, .production-checkout button { color: ButtonText; background: Canvas; border: 1px solid ButtonText; } .production-checkout :focus-visible { outline-color: Highlight; } }