/* Account surfaces: stable controls and a single, readable order reveal. */
/* Keep the page and fixed navigation aligned when order details add overflow. */
html:has(> .preorder-account-page) { scrollbar-gutter: stable; }

.preorder-account-page {
  --page-content-max: var(--content-max-narrow);
  --page-gutter: var(--gutter-narrow);
  --account-surface: oklch(0.997 0.002 170);
  --account-subtle: oklch(0.97 0.005 170);
  --account-benefit-surface: oklch(0.96 0 0);
  --account-border: oklch(0.90 0.008 170);
  --account-order-border: oklch(0.83 0.008 170);
  --account-order-hover: oklch(0.985 0.003 170);
  --account-order-pressed: oklch(0.967 0.005 170);
  --account-order-shadow: 0 2px 8px oklch(0.24 0.008 170 / 0.035);
  --account-order-radius: 16px;
  --account-order-inset: 28px;
  --account-status-active-text: oklch(0.31 0.075 169);
  --account-status-active-surface: oklch(0.89 0.055 164);
  --account-status-pending-text: oklch(0.40 0.085 75);
  --account-status-pending-surface: oklch(0.94 0.065 85);
  --account-status-muted-text: oklch(0.40 0.025 240);
  --account-status-muted-surface: oklch(0.92 0.012 240);
  --preorder-line: var(--account-border);
  --preorder-field-surface: var(--account-surface);
  --preorder-field-border: oklch(0.79 0.012 170);
  --preorder-field-border-hover: oklch(0.62 0.025 169);
  --preorder-field-focus: oklch(0.47 0.09 169);
  --preorder-field-focus-ring: oklch(0.47 0.09 169 / 0.14);
  --footer-background: var(--preorder-paper);
  --footer-border-color: var(--account-border);
  --footer-text-color: var(--preorder-muted);
  --footer-hover-color: var(--preorder-ink);
  display: flex;
  flex-direction: column;
}
.preorder-account-page .footer { min-height: 56px; padding-block: 8px; }
.preorder-account-page .footer__inner { min-height: 39px; }
.preorder-account {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 0 80px;
  width: min(100%, var(--page-content-max));
  min-height: auto;
  margin: 0 auto;
  padding: 104px var(--page-gutter) 52px;
  flex: 1;
  align-content: start;
}
.preorder-account__workspace { grid-column: 1; grid-row: 1; width: 100%; align-self: start; }
.preorder-login { width: 100%; max-width: 440px; padding: 0; }
.preorder-login h1 { margin: 0; font-size: clamp(1.75rem, 2.4vw, 2rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.04em; }
.preorder-login > p:not(.preorder-step-label) { margin-top: 12px; font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.account-login-stages { display: grid; }
.account-login-stages > * { grid-area: 1 / 1; min-width: 0; align-self: start; }
/* Inactive steps still size the track, but cannot be seen, focused or read.
   The help link and product panel stay still when the form changes steps. */
.account-login-stages > [hidden] { display: block !important; visibility: hidden; }
.account-login-stages h1 + p { margin-top: 12px; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.preorder-login :is([data-login-link-error], [data-login-session-error]) { margin-top: var(--space-5); }
.preorder-login .preorder-form { max-width: none; margin-top: 24px; }
.preorder-account-page .preorder-field input { min-height: 52px; }
.preorder-login .preorder-button { width: 100%; }
.preorder-account-page .preorder-login .preorder-button { position: relative; padding-inline: 48px; }
.preorder-login .preorder-button .preorder-spinner { position: absolute; left: 20px; }
.account-login-feedback { display: grid; margin-top: 6px; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.account-login-feedback > * { grid-area: 1 / 1; align-self: start; }
.account-login-feedback__size { visibility: hidden; pointer-events: none; }
.account-login-feedback--email { margin-top: 12px; }
.preorder-login .account-login-feedback > :is(small, .preorder-error) { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; font-size: inherit; line-height: inherit; }
.account-login-feedback:has(.preorder-error:not([hidden])) > small { visibility: hidden; }
.preorder-account-page .preorder-login [data-login-submit] { position: relative; justify-content: center; padding-inline: 48px; }
.preorder-login [data-login-submit] .preorder-spinner { position: absolute; left: 20px; }
.account-arrow { position: absolute; right: 20px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.preorder-button[data-busy="true"] .account-arrow { opacity: 0; }
.preorder-login > .account-login-help { max-width: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--account-border); font-size: var(--preorder-type-copy); }
.account-login-help a { color: var(--preorder-ink); text-decoration: underline; text-underline-offset: 4px; }
.account-login-destination { margin-top: 16px; }
.account-login-destination p > span { display: block; color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-label); line-height: var(--preorder-leading-label); }
.account-login-destination strong { display: block; min-height: 1.5em; margin-top: 3px; color: var(--preorder-ink); font: 500 var(--preorder-type-label)/var(--preorder-leading-label) var(--font-ui); overflow-wrap: anywhere; }
.account-login-eligibility { margin-top: 14px; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.account-login-code .verification-code__actions { display: flex; justify-content: space-between; margin-top: 10px; gap: 8px 16px; align-items: center; border-top: 0; }
.account-login-code [data-login-resend] { text-align: start; }
[data-handoff-view] .preorder-button { margin-top: 28px; }
.account-login-handoff > .preorder-error { margin-bottom: 22px; }
.account-visual { position: relative; grid-column: 2; grid-row: 1; align-self: start; height: 600px; overflow: hidden; border-radius: 16px; color: oklch(0.97 0.005 170); background: var(--preorder-night); }
.account-visual > img { position: absolute; inset: 88px -24px auto auto; width: 100%; height: calc(100% - 136px); object-fit: contain; object-position: center; mix-blend-mode: screen; }
.account-visual__copy { position: relative; z-index: 1; padding: 32px; }
.account-visual h2 { margin: 0; font-size: 1.75rem; line-height: var(--preorder-leading-heading); font-weight: 400; letter-spacing: -0.035em; white-space: pre-line; }
.account-visual__caption { position: absolute; inset: auto 24px 20px; display: flex; justify-content: space-between; gap: 16px; font-family: var(--preorder-font-label); font-size: var(--preorder-type-caption); line-height: var(--preorder-leading-label); }
.account-visual__caption > span:first-child { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.07em; }
.account-loading { padding: 40px 0; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.account-loading__lines { display: grid; gap: 16px; margin-top: 28px; }
.account-loading i { display: block; height: 44px; border-radius: 6px; background: var(--account-border); }
.account-loading i:first-child { width: 60%; height: 22px; }
.account-loading i:last-child { width: 80%; }
[data-account-state="loading"] .preorder-account { display: block; }
[data-account-state="loading"] .account-visual { display: none; }
[data-account-state="loading"] .preorder-account__workspace { max-width: 440px; margin-inline: auto; }
/* Applies before deferred scripts: authentication never paints the login shell. */
[data-account-state="loading"] .account-loading { animation: preorder-fade-in 160ms 250ms var(--ease) both; }
[data-account-state="account"] .preorder-account { display: block; }
[data-account-state="account"] .account-visual { display: none; }
.preorder-dashboard__head { display: block; margin-bottom: 24px; }
.preorder-dashboard__head h1 { margin: 0; font-size: clamp(1.75rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.035em; }
.account-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 8px; }
.account-session .account-identity { margin: 0; }
.account-identity { display: flex; flex: 1 1 12rem; align-items: center; min-width: 0; gap: 7px; color: var(--preorder-muted); font: 400 var(--preorder-type-label)/var(--preorder-leading-label) var(--preorder-font-label); overflow-wrap: anywhere; }
.account-identity > span { min-width: 0; }
.account-identity svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; }
.account-session .text-button, .account-orders__head .text-button { flex-shrink: 0; margin-inline-start: auto; }
.preorder-reservation { border: 0; border-radius: 0; background: transparent; }
.preorder-reservation__status { align-items: center; flex-wrap: wrap; padding: 18px 28px; gap: 12px 24px; font-size: var(--preorder-type-label); font-weight: 500; line-height: var(--preorder-leading-label); }
.account-order-code { display: flex; align-items: baseline; gap: 12px; color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-caption); line-height: var(--preorder-leading-label); overflow-wrap: anywhere; }
.account-order-code strong { color: var(--preorder-ink); font: 500 var(--preorder-type-label)/var(--preorder-leading-label) var(--font-ui); letter-spacing: 0.04em; }
.account-order-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); }
.account-order-main { min-width: 0; padding: var(--account-order-inset); }
.preorder-reservation__hero { display: flex; align-items: center; gap: 20px; min-height: 0; overflow: visible; color: var(--preorder-ink); background: none; }
.preorder-reservation__hero img { width: 72px; height: 88px; border-radius: 8px; object-fit: cover; object-position: center 70%; }
.preorder-reservation__hero > div { display: block; padding: 0; }
.preorder-reservation__hero p { color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-caption); line-height: var(--preorder-leading-label); }
.account-product-copy h3 { margin: 0 0 8px; font: 500 1.5rem/1 var(--font-ui); letter-spacing: -0.03em; }
.account-product-copy > p { margin-top: 8px; }
.preorder-reservation__hero span { display: block; margin: 0; color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-label); line-height: var(--preorder-leading-label); }
.account-section-title { font-family: var(--preorder-font-label); font-size: var(--preorder-type-section); font-weight: var(--weight-semibold); line-height: var(--preorder-leading-label); }
.account-benefits { margin-top: 28px; }
.account-benefits__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.account-benefit-feature { display: grid; grid-template-columns: minmax(120px, .72fr) minmax(0, 1.28fr); grid-template-rows: auto 1fr; gap: 10px 24px; align-items: start; min-width: 0; padding: 22px 24px; border-radius: 10px; background: var(--account-benefit-surface); }
.account-benefit-feature__label { grid-column: 1; color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-label); line-height: var(--preorder-leading-label); }
.account-benefit-feature > strong { display: block; grid-column: 1; margin-top: 2px; font: 500 2rem/1 var(--font-ui); letter-spacing: -.04em; }
.account-benefit-feature > p { display: flex; grid-column: 2; grid-row: 1 / 3; align-self: stretch; flex-direction: column; justify-content: center; gap: 3px; margin: 0; padding-left: 24px; border-left: 1px solid var(--account-border); color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.account-benefit-feature > p b { color: var(--preorder-ink); font-family: var(--font-ui); font-weight: 500; }
.account-benefits__list { margin: 0; padding: 0; list-style: none; }
.account-benefits__list > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--account-border); }
.account-benefits__list > li:first-child { padding-top: 2px; }
.account-benefits__list > li:last-child { padding-bottom: 2px; border-bottom: 0; }
.account-benefits__list svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--preorder-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.account-benefits__list h4 { margin: 0; font-family: var(--preorder-font-label); font-size: var(--preorder-type-label); font-weight: 500; line-height: var(--preorder-leading-label); }
.account-benefits__list p { max-width: 42ch; margin-top: 5px; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); text-wrap: pretty; }
.account-benefits__note { margin-top: 24px; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.preorder-reservation__message { margin: 24px 0 0; padding: 16px 18px; border: 0; border-radius: 8px; color: var(--preorder-muted); background: var(--account-subtle); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.preorder-account-page .preorder-reservation__message[data-tone="pending"] { color: oklch(0.43 0.09 75); background: oklch(0.96 0.03 75); }
.preorder-account-page .preorder-reservation__message[data-tone="error"] { color: var(--preorder-red); background: var(--preorder-red-pale); }
.preorder-reservation__support { margin: 12px 0 0; }
.account-order-details { position: relative; min-width: 0; padding: var(--account-order-inset); }
.account-order-details::before { content: ""; position: absolute; inset: var(--account-order-inset) auto var(--account-order-inset) 0; width: 1px; background: var(--account-border); }
.account-payment { margin: 24px 0; }
.account-payment p { color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-label); line-height: var(--preorder-leading-label); }
.account-payment strong { display: block; margin-top: 8px; font: 500 1.875rem/1.2 var(--font-ui); letter-spacing: -0.04em; }
.account-payment > span { display: block; margin-top: 8px; color: var(--preorder-muted); font-family: var(--preorder-font-label); font-size: var(--preorder-type-caption); line-height: var(--preorder-leading-label); }
.preorder-reservation__facts { margin: 0; }
.preorder-reservation__facts div { gap: 16px; padding: 14px 0; font-family: var(--preorder-font-label); font-size: var(--preorder-type-label); line-height: var(--preorder-leading-label); }
.preorder-reservation__facts dd { min-width: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.preorder-reservation__facts dt { flex-shrink: 0; }
.account-order-actions { margin-top: 20px; }
.preorder-refund { margin: 0; border: 0; border-top: 1px solid var(--account-border); }
.preorder-refund summary { min-height: 52px; padding: 15px 0; color: var(--preorder-ink); font-family: var(--preorder-font-label); font-weight: var(--weight-medium); font-size: var(--preorder-type-label); line-height: var(--preorder-leading-label); }
.preorder-refund summary:hover { color: var(--preorder-red); }
.preorder-refund__body { padding-bottom: 0; }
.preorder-refund__body h3 { font-family: var(--preorder-font-label); font-size: var(--preorder-type-section); font-weight: var(--weight-semibold); line-height: var(--preorder-leading-label); }
.preorder-refund__body > p { font-size: var(--preorder-type-body); line-height: var(--preorder-leading-copy); }
.preorder-refund .preorder-consent { align-items: flex-start; font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
.preorder-reservation:not([data-eligibility="valid"]) .account-benefit-feature > strong { color: var(--preorder-muted); }
.account-refunded-summary { display: flex; align-items: flex-start; gap: 16px; margin: var(--account-order-inset) var(--account-order-inset) 0; padding: 0 0 24px; border-bottom: 1px solid var(--account-border); }
.account-refunded-summary > svg { flex: 0 0 28px; width: 28px; height: 28px; fill: none; stroke: var(--preorder-ink); stroke-width: 1.5; }
.account-refunded-summary > div { flex: 1; min-width: 0; }
.account-refunded-summary h3 { margin: 0; color: var(--preorder-ink); font-size: var(--preorder-type-heading); font-weight: 600; line-height: var(--preorder-leading-heading); }
.account-refunded-summary p { margin-top: 8px; color: var(--preorder-muted); font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); }
[data-eligibility="revoked"] .account-benefits__list :is(h4, svg) { color: var(--preorder-muted); stroke: var(--preorder-muted); }
[data-eligibility="revoked"] .account-benefit-feature > strong { text-decoration: line-through; text-decoration-thickness: 1px; }
[data-reservation-empty] { padding: 48px 28px; border-block: 1px solid var(--account-border); text-align: center; }
.preorder-account__empty-title { font-size: var(--preorder-type-heading); font-weight: 500; line-height: var(--preorder-leading-heading); }
.account-orders { --order-columns: minmax(0, 1.7fr) minmax(0, .85fr) minmax(0, .8fr) minmax(0, 1.25fr) 6rem; scroll-margin-top: 88px; }
.account-orders__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.account-orders__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.account-orders__head :is(h2, h3) { margin: 0; }
.account-orders__heading > span { color: var(--preorder-muted); font: 400 var(--preorder-type-label)/var(--preorder-leading-label) var(--preorder-font-label); }
.account-orders__columns, .account-order-row { display: grid; grid-template-columns: var(--order-columns); gap: 20px; align-items: center; padding-inline: var(--account-order-inset); }
.account-orders__columns { padding-bottom: 12px; border-inline: 1px solid transparent; color: var(--preorder-muted); font: 400 var(--preorder-type-caption)/var(--preorder-leading-label) var(--preorder-font-label); }
.account-orders__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.account-orders__list > li { min-width: 0; border: 1px solid transparent; border-bottom-color: var(--account-border); }
.account-orders__list > li:has(> [aria-expanded="true"]) { border-color: var(--account-order-border); border-radius: var(--account-order-radius); background: var(--account-surface); box-shadow: var(--account-order-shadow); }
.account-orders__list .preorder-reservation::before { content: ""; display: block; height: 1px; margin-inline: var(--account-order-inset); background: var(--account-border); }
/* The disclosure row already identifies the inline detail and its status. */
.account-orders__list .preorder-reservation__status { display: none; }
.account-order-row { width: 100%; min-height: 92px; padding-block: 20px; border: 0; border-radius: calc(var(--account-order-radius) - 1px); background: transparent; color: var(--preorder-ink); font: 400 var(--preorder-type-label)/var(--preorder-leading-label) var(--preorder-font-label); text-align: start; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.account-order-row > * { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .account-order-row:hover { background: var(--account-order-hover); }
  .account-order-row:hover .account-order-row__action svg { border-color: var(--account-order-border); background: var(--account-subtle); }
}
.account-order-row:active { background: var(--account-order-pressed); }
.preorder-account-page .account-order-row:focus-visible { position: relative; outline-color: var(--preorder-ink); outline-offset: -4px; }
.account-order-row__identity { display: grid; gap: 6px; }
.account-order-row__identity > strong { font: 500 var(--preorder-type-section)/var(--preorder-leading-label) var(--font-ui); letter-spacing: .02em; }
.account-order-row__identity > span { color: var(--preorder-muted); font-size: var(--preorder-type-caption); }
.account-order-row__quantity { color: var(--preorder-muted); }
.account-order-row__amount > strong { font: 500 var(--preorder-type-section)/var(--preorder-leading-label) var(--font-ui); font-variant-numeric: tabular-nums; }
.account-order-row__amount-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* One status component for both the order list and the detail header. */
.account-status-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border-radius: 6px; font: 500 var(--preorder-type-label)/var(--preorder-leading-label) var(--preorder-font-label); overflow-wrap: anywhere; }
.account-status-pill svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-status-pill[data-tone="active"] { color: var(--account-status-active-text); background: var(--account-status-active-surface); }
.account-status-pill[data-tone="pending"] { color: var(--account-status-pending-text); background: var(--account-status-pending-surface); }
.account-status-pill[data-tone="error"] { color: var(--preorder-red); background: var(--preorder-red-pale); }
.account-status-pill[data-tone="muted"] { color: var(--account-status-muted-text); background: var(--account-status-muted-surface); }
.account-order-row__status { justify-self: start; }
.account-order-row__action { display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: var(--preorder-muted); font-size: var(--preorder-type-label); }
.account-order-row__action svg { flex: 0 0 32px; width: 32px; height: 32px; padding: 7px; border: 1px solid var(--account-border); border-radius: 50%; color: var(--preorder-ink); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease); }
.account-order-row[aria-expanded="true"] .account-order-row__action { color: var(--preorder-ink); }
.account-order-row[aria-expanded="true"] .account-order-row__action svg { transform: rotate(180deg); background: var(--account-subtle); }
@media (prefers-reduced-motion: reduce) {
  .account-order-row, .account-order-row__action svg { transition: none; }
}
.preorder-reservation:focus-visible { outline: 2px solid var(--preorder-ink); outline-offset: 4px; }
.account-repurchase { margin: 0; padding-bottom: 16px; }
.account-repurchase .preorder-button { width: 100%; }
.account-other-email { margin: 0; padding: 16px 0; border-top: 1px solid var(--account-border); }
.account-cancel .preorder-button { margin-top: 16px; }
.account-repurchase p { margin: 0 0 14px; font-size: var(--preorder-type-copy); line-height: var(--preorder-leading-copy); color: var(--preorder-muted); }
.preorder-account-page :is(a, button, summary):focus-visible { outline: 2px solid var(--preorder-green-dark); outline-offset: 4px; }
.preorder-account-page button:disabled { cursor: not-allowed; }
.preorder-account-page button[data-busy="true"] { cursor: progress; }
@keyframes account-step-enter {
  from { transform: translate3d(var(--account-step-offset, 28px), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes account-product-enter {
  from { opacity: 0; transform: translate3d(36px, 40px, 0) scale(0.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes account-loading-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes account-order-enter {
  from { transform: translate3d(0, 6px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Keep inputs and buttons in place while headings and code cells lead in. */
  /* Keep small delivery labels legible; do not multiply two opacity fades. */
  .account-login-stages > :not([hidden]) {
    animation: preorder-fade-in 180ms var(--ease);
  }
  [data-handoff-view]:not([hidden]) {
    animation: preorder-fade-in var(--preorder-motion-state) var(--ease);
  }
  [data-login-entry] { --account-step-offset: -28px; }
  .account-login-stages > :not([hidden]) > h1,
  [data-login-code-stage]:not([hidden]) .verification-delivery {
    animation: account-step-enter 440ms var(--ease) both;
  }
  .account-visual__copy,
  .account-visual__caption {
    animation: preorder-state-enter 620ms var(--ease) both;
  }
  .account-visual > img { animation: account-product-enter 1000ms 90ms var(--ease) both; }
  .account-visual__caption { animation-delay: 180ms; }
  /* First arrival is static so the list and detail appear together.
     Only an explicit order toggle gets a small, fully opaque reveal. */
  [data-account-view]:not([hidden]) [data-reservation][data-order-reveal]:not([hidden]) {
    animation: account-order-enter 220ms var(--ease);
  }
  /* The moving highlight communicates a genuinely pending account request. */
  .account-loading i { position: relative; overflow: hidden; }
  .account-loading i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--account-surface), transparent);
    animation: account-loading-sweep 1500ms 250ms linear infinite;
  }
}
@media (max-width: 900px) {
  .preorder-account-page { --account-order-inset: 24px; }
  .account-orders { --order-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr) 32px; }
  .account-order-row__action > span { display: none; }
  .preorder-account { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0 40px; padding-block: 96px 44px; }
  .account-order-layout { grid-template-columns: minmax(0, 1.2fr) minmax(250px, 1fr); }
  .account-visual h2 { font-size: var(--preorder-type-heading); }
  .account-visual__copy { padding: 28px; }
  .account-benefit-feature { padding: 20px; }
}
@media (max-width: 700px) {
  .preorder-account-page { --account-order-inset: 20px; --account-order-radius: 12px; }
  .account-refunded-summary { gap: 12px; }
  .preorder-account { display: block; max-width: 508px; padding-block: 104px 36px; }
  .preorder-login { max-width: 460px; padding: 0; }
  [data-account-state="account"] .preorder-account { max-width: none; }
  .account-visual { display: none; }
  .account-order-layout { display: block; }
  .preorder-reservation__status { padding: 16px 20px; }
  .account-order-code { flex-wrap: wrap; gap: 6px 12px; }
  .account-order-main, .account-order-details { padding-block: 24px; }
  .account-order-details::before { inset: 0 var(--account-order-inset) auto; width: auto; height: 1px; }
  .account-benefits { margin-top: 24px; }
  .account-benefit-feature { display: flex; flex-direction: column; align-items: flex-start; }
  .account-benefit-feature > strong { font-size: 1.75rem; }
  .account-benefit-feature > p { width: 100%; margin-top: 10px; padding: 14px 0 0; border-top: 1px solid var(--account-border); border-left: 0; }
  .account-payment { margin-block: 20px; }
  .preorder-refund summary { padding-bottom: 0; min-height: 44px; }
  .preorder-refund[open] summary { padding-bottom: 18px; }
  .account-orders__head { margin-bottom: 14px; }
  .account-orders__columns { display: none; }
  .account-order-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 14px 12px; padding-block: 20px; }
  .account-order-row__identity { grid-column: 1; grid-row: 1; }
  .account-order-row__action { grid-column: 2 / 4; grid-row: 1; align-self: start; }
  .account-order-row__quantity { grid-column: 1; grid-row: 2; }
  .account-order-row__amount { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 8px; }
  .account-order-row__amount-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: var(--preorder-muted); font-size: var(--preorder-type-caption); }
  .account-order-row__status { grid-column: 1 / 4; grid-row: 3; }
  .account-order-row__action > span { display: inline; }
}
@media (max-width: 359px) {
  .account-benefit-feature { padding: 18px; }
  .account-order-row__identity { grid-column: 1 / 3; }
  .account-order-row__action { grid-column: 3; }
  .account-order-row__action > span { display: none; }
  .account-benefits__list > li { gap: 12px; }
}
@media (min-width: 701px) {
  .preorder-account-page:is([data-account-state="login"], [data-account-state="handoff"]) {
    --account-shell-top: clamp(104px, 14svh, 128px);
    --account-shell-bottom: clamp(16px, 3svh, 32px);
  }
  .preorder-account-page:is([data-account-state="login"], [data-account-state="handoff"]) .preorder-account {
    grid-template-rows: auto auto;
    padding-block: var(--account-shell-top) var(--account-shell-bottom);
    align-content: start;
  }
  .preorder-account-page:is([data-account-state="login"], [data-account-state="handoff"]) :is(.preorder-account__workspace, .preorder-login) {
    display: contents;
  }
  .preorder-account-page:is([data-account-state="login"], [data-account-state="handoff"]) .account-login-stages {
    grid-column: 1;
    grid-row: 1;
  }
  .preorder-account-page:is([data-account-state="login"], [data-account-state="handoff"]) .account-login-help {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }
  .preorder-account-page:is([data-account-state="login"], [data-account-state="handoff"]) .account-visual {
    grid-column: 2;
    grid-row: 1;
    height: clamp(460px, calc(100svh - var(--account-shell-top) - var(--account-shell-bottom) - 110px), 600px);
  }
}
@media (max-width: 640px) {
  .preorder-account-page .footer__inner { align-items: center; flex-direction: row; gap: var(--space-4); }
}