:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #24203a;
  background: #f5f3fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #24203a;
  --muted: #77738c;
  --purple: #5628cb;
  --purple-dark: #38168f;
  --line: #e8e5f0;
  --green: #239945;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 52% -16%, #e7ddff 0, #f5f3fb 48%, #f4f5fa 100%); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.checkout-shell { min-height: 100vh; }
.checkout-header {
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(28px, calc((100vw - 1200px) / 2));
  border-bottom: 1px solid #ebe8f1;
  background: #fff;
}
.back-to-store { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: #615c73; text-decoration: none; font-size: 13px; }
.back-to-store span { font-size: 20px; line-height: 1; }
.back-to-store:hover, .summary-help a:hover { color: var(--purple); }
.checkout-brand { display: inline-flex; align-items: center; gap: 9px; color: #2e1a68; text-decoration: none; font-size: 21px; font-weight: 900; letter-spacing: -.8px; }
.brand-gem { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: white; background: linear-gradient(145deg, #8056ee, #431ba9); box-shadow: 0 3px 7px #4a24ab40; font-family: Georgia, serif; font-size: 18px; font-style: italic; }
.brand-store { color: #7858cb; font-weight: 700; }
.checkout-status { justify-self: end; color: #78728a; font-size: 10px; font-weight: 800; letter-spacing: 1.1px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: #e9a328; box-shadow: 0 0 0 3px #fff3dc; }

.checkout-main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 23px 0 25px; }
.checkout-steps { display: flex; align-items: center; width: min(510px, 100%); margin: 0 auto 26px; color: #a5a1b2; }
.step { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; }
.step i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #d8d4e2; border-radius: 50%; color: #9c98ac; background: white; font-size: 11px; font-style: normal; font-weight: 800; }
.step.complete { color: #5a5380; }
.step.complete i { border-color: #b8a8eb; color: white; background: #7556cb; }
.step.active { color: #372078; font-weight: 800; }
.step.active i { border-color: var(--purple); color: white; background: var(--purple); box-shadow: 0 0 0 4px #eee8ff; }
.step-line { flex: 1; height: 1px; margin: 0 12px; background: #dcd9e5; }

.checkout-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 17px; }
.eyebrow { margin: 0 0 5px; color: #7d6caa; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.checkout-intro h1 { margin: 0; color: #22183d; font-size: clamp(25px, 3vw, 34px); font-weight: 800; letter-spacing: -1.1px; line-height: 1.15; }
.intro-copy { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 314px; grid-template-areas: "payment summary"; align-items: start; gap: 16px; }
.checkout-card { border: 1px solid #e9e6f0; border-radius: 16px; background: white; box-shadow: 0 8px 24px #32225a0a, 0 1px 2px #271c4209; }
.payment-card { grid-area: payment; padding: 18px; }
.order-summary { position: sticky; top: 18px; grid-area: summary; padding: 20px 19px 16px; }

.payment-workspace { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 19px; }
.section-label { margin: 2px 0 9px 2px; color: #858096; font-size: 9px; font-weight: 900; letter-spacing: 1.15px; }
.method-list { display: flex; flex-direction: column; gap: 6px; }
.cashier-method {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #eae7f0;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cashier-method:hover { border-color: #c7b9ee; background: #fbfaff; }
.cashier-method.active { border-color: #8567d5; background: #f8f5ff; box-shadow: 0 0 0 2px #eee8ff; }
.method-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f2eff9; font-size: 19px; font-weight: 900; }
.card-icon, .bank-icon { color: #503b87; }
.paypal-icon, .paypal-emblem { color: #1468bb; background: #e8f3ff; font-family: Georgia, serif; font-style: italic; }
.apple-icon, .apple-emblem { color: #1e1c26; background: #f1f0f4; font-family: Arial, sans-serif; font-size: 15px; }
.cashapp-icon, .cashapp-emblem { color: #087b40; background: #e6f9ef; }
.method-name { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.method-name b { overflow: hidden; color: #353047; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.method-name small { overflow: hidden; color: #8a8698; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.method-radio { width: 13px; height: 13px; border: 1.5px solid #c9c5d2; border-radius: 50%; }
.cashier-method.active .method-radio { border: 4px solid var(--purple); background: white; }

.method-detail { min-width: 0; min-height: 520px; padding: 18px 19px 15px; border: 1px solid #eeebf3; border-radius: 12px; background: #fff; }
.method-view { animation: panel-in .18s ease-out; }
@keyframes panel-in { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.method-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.method-heading-row .eyebrow { margin-bottom: 3px; }
.method-heading-row h2, .summary-header h2 { margin: 0; color: #29243c; font-size: 19px; font-weight: 800; letter-spacing: -.45px; }
.method-description { margin: 7px 0 15px; color: #7e7a8d; font-size: 11px; line-height: 1.55; }
.accepted-cards, .region-badge { padding: 6px 8px; border: 1px solid #ebe8f1; border-radius: 6px; color: #746d84; background: #faf9fc; font-size: 8px; font-weight: 900; letter-spacing: .75px; }

.payment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.form-field { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.full-field { grid-column: 1 / -1; }
.form-field label, .date-fieldset legend { padding: 0; color: #4e495c; font-size: 10px; font-weight: 800; }
.form-field label span, .date-fieldset legend span { color: #d25669; }
.form-field input, .form-field select {
  width: 100%;
  height: 39px;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid #dfdce7;
  border-radius: 8px;
  outline: none;
  color: #332f43;
  background: #fff;
  font-size: 11px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.form-field input::placeholder { color: #b1adbb; }
.form-field input:focus, .form-field select:focus { border-color: #8a6bd7; box-shadow: 0 0 0 3px #eee9fc; }
.form-field select:invalid { color: #a7a3b1; }
.input-with-mark { position: relative; }
.input-with-mark input { padding-right: 43px; letter-spacing: .6px; }
.input-mark { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #9a95a8; font-size: 15px; }
.select-pair, .select-triple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.select-triple { grid-template-columns: 1.15fr .75fr 1fr; }
.date-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.date-fieldset legend { margin: 0 0 5px; }
.optional-address { grid-column: 1 / -1; padding: 0 0 1px; }
.optional-address summary { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; color: #554c6d; cursor: pointer; font-size: 10px; font-weight: 800; list-style-position: inside; }
.optional-address summary span { color: #9893a3; font-size: 9px; font-weight: 600; }
.optional-address .form-field { margin-top: 8px; }

.primary-action {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 17px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: linear-gradient(105deg, #6540d2, #4f2ab6);
  box-shadow: 0 4px 10px #4f2ab622;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.primary-action:hover { filter: brightness(1.06); box-shadow: 0 6px 14px #4f2ab62c; }
.primary-action:active { transform: translateY(1px); }
.primary-action span { font-size: 17px; line-height: .8; }
.primary-action:focus-visible, .cashier-method:focus-visible, .text-action:focus-visible { outline: 3px solid #c7b4ff; outline-offset: 2px; }
.form-footnote { margin: 11px 0 0; color: #908b9b; font-size: 9px; line-height: 1.5; }
.form-footnote span { margin-right: 4px; color: #8275a2; }

.no-form-view { min-height: 355px; display: flex; flex-direction: column; }
.no-form-view[hidden] { display: none !important; }
.partner-wordmark { color: #403d4a; font-size: 12px; font-weight: 900; }
.paypal-wordmark { color: #0961ae; font-style: italic; }
.apple-wordmark { font-size: 17px; letter-spacing: -.5px; }
.cashapp-wordmark { color: #068542; }
.partner-message { display: flex; gap: 13px; margin: 17px 0 16px; padding: 15px 13px; border: 1px solid #ece9f3; border-radius: 10px; background: #fbfaff; }
.partner-emblem { flex: 0 0 auto; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; font-size: 20px; font-weight: 900; }
.partner-message b { display: block; margin: 1px 0 5px; color: #40394f; font-size: 11px; }
.partner-message p { margin: 0; color: #7e788d; font-size: 10px; line-height: 1.55; }
.provider-action { width: 100%; margin-top: auto; }

.order-summary { min-height: 360px; }
.order-details { width: 100%; }
.order-details > summary { list-style: none; cursor: pointer; }
.order-details > summary::-webkit-details-marker { display: none; }
.summary-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #efedf3; }
.summary-title { display: block; }
.summary-header .eyebrow { margin-bottom: 4px; }
.summary-header h2 { font-size: 16px; }
.summary-compact-total { color: #39276d; font-size: 17px; font-weight: 900; white-space: nowrap; }
.summary-chevron { color: #77718a; font-size: 18px; line-height: 1; transition: transform .15s ease; }
.order-details[open] .summary-chevron { transform: rotate(180deg); }
.summary-content { display: block; }
.summary-lock { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #e7e3ef; border-radius: 50%; color: #775bb9; background: #f9f7fd; font-size: 12px; font-weight: 900; }
.product-row { display: grid; grid-template-columns: 37px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 15px 0 13px; }
.product-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff1a0; background: linear-gradient(145deg, #5525cb, #8d37ce); font-size: 19px; box-shadow: inset 0 1px 2px #fff7; }
.product-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.product-copy b { overflow: hidden; color: #343044; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.product-copy span { color: #8e899a; font-size: 9px; }
.product-price { color: #373146; font-size: 10px; }
.mobile-includes { display: none; }
.reward-list { display: flex; flex-direction: column; gap: 9px; padding: 0 0 13px 1px; }
.reward-list > div, .subtotal-row, .total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reward-list > div { color: #777286; font-size: 9px; }
.reward-list b { color: #554b6d; font-size: 9px; white-space: nowrap; }
.reward-list > div > span { display: inline-flex; align-items: center; gap: 6px; }
.reward-symbol { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: white; font-size: 10px; font-style: normal; font-weight: 900; }
.free-symbol { background: #67c447; }
.coin-symbol { background: #e9b53b; }
.token-symbol { background: #b57535; }
.summary-divider { height: 1px; background: #efedf3; }
.subtotal-row { padding: 11px 0 7px; color: #7a7589; font-size: 10px; }
.subtotal-row b { color: #4e485e; }
.total-row { padding: 4px 0 11px; color: #4a4359; font-size: 12px; font-weight: 800; }
.total-row b { color: #39276d; font-size: 18px; letter-spacing: -.4px; white-space: nowrap; }
.total-row small { color: #898397; font-size: 9px; letter-spacing: 0; }
.delivery-note { display: flex; gap: 8px; padding: 10px; border-radius: 8px; color: #747083; background: #f7f5fb; font-size: 9px; line-height: 1.45; }
.delivery-note span:first-child { color: #8b65d0; }

.handoff-panel { min-height: 530px; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 460px; margin: 0 auto; padding: 28px 18px; text-align: center; }
.handoff-symbol { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 17px; border: 1px solid #e0d8f3; border-radius: 18px; color: #653fc0; background: linear-gradient(145deg, #f5f0ff, #ece5fc); font-size: 31px; }
.handoff-panel .eyebrow { margin-bottom: 8px; }
.handoff-panel h2 { margin: 0; color: #2d2542; font-size: 24px; letter-spacing: -.75px; }
.handoff-copy { max-width: 370px; margin: 9px 0 20px; color: #7d788d; font-size: 12px; line-height: 1.6; }
.handoff-order { width: min(100%, 350px); display: flex; justify-content: space-between; padding: 13px 14px; border: 1px solid #ebe8f2; border-radius: 9px; color: #777286; background: #fcfbfe; font-size: 11px; }
.handoff-order b { color: #362a55; font-size: 12px; }
.handoff-alert { width: min(100%, 350px); display: flex; flex-direction: column; gap: 4px; margin: 12px 0 18px; padding: 11px 13px; border: 1px solid #ded9e8; border-radius: 9px; color: #686276; background: #f8f7fb; text-align: left; font-size: 11px; line-height: 1.5; }
.handoff-alert b { color: #453a5e; }
.handoff-panel > .primary-action { width: min(100%, 350px); }
.text-action { margin-top: 13px; padding: 8px; border: 0; color: #65588a; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.checkout-footer { display: flex; justify-content: space-between; gap: 15px; margin: 16px 2px 0; color: #9994a4; font-size: 9px; }

@media (max-width: 900px) {
  .checkout-main { width: min(720px, calc(100% - 32px)); padding-top: 17px; }
  .checkout-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: "summary" "payment"; gap: 12px; }
  .order-summary { position: static; min-height: 0; }
  .order-summary { padding: 14px 16px; }
  .summary-header { padding-bottom: 10px; }
  .product-row { padding: 10px 0 8px; }
  .reward-list { gap: 6px; padding-bottom: 9px; }
  .summary-divider { margin-bottom: 1px; }
  .subtotal-row { padding-top: 8px; }
  .total-row { padding-bottom: 8px; }
  .delivery-note, .summary-help { display: none; }
  .payment-card { padding: 15px; }
  .payment-workspace { grid-template-columns: 1fr; gap: 10px; }
  .section-label { margin-bottom: 7px; }
  .method-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
  .cashier-method { min-height: 58px; grid-template-columns: 27px minmax(0,1fr); gap: 5px; padding: 6px; }
  .method-icon { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; }
  .method-name b { font-size: 11px; }
  .method-name small { display: none; }
  .method-radio { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; }
  .cashier-method.active .method-radio { border-width: 3px; }
  .method-detail { min-height: 0; padding: 15px; }
  .method-description { font-size: 13px; }
  .form-field label, .date-fieldset legend { font-size: 12px; }
  .form-field input, .form-field select { height: 43px; font-size: 14px; }
  .primary-action { min-height: 46px; font-size: 13px; }
  .no-form-view { min-height: 265px; }
  .handoff-panel { min-height: 360px; }
}

@media (max-width: 560px) {
  body { background: #f5f3fb; }
  .checkout-header { height: 57px; grid-template-columns: 1fr auto 1fr; padding: 0 13px; }
  .back-to-store { gap: 4px; font-size: 10px; }
  .back-to-store span { font-size: 17px; }
  .checkout-brand { gap: 6px; font-size: 16px; }
  .brand-gem { width: 25px; height: 25px; border-radius: 8px; font-size: 15px; }
  .checkout-status { font-size: 9px; letter-spacing: .6px; }
  .status-dot { width: 6px; height: 6px; margin-right: 4px; }
  .checkout-main { width: calc(100% - 20px); padding: 12px 0 15px; }
  .checkout-steps { display: none; }
  .checkout-intro { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .checkout-intro .eyebrow { margin-bottom: 4px; font-size: 10px; }
  .checkout-intro h1 { font-size: 25px; }
  .intro-copy { margin-top: 4px; font-size: 13px; }
  .checkout-layout { gap: 9px; }
  .checkout-card { border-radius: 12px; }
  .order-summary { padding: 10px 12px; }
  .summary-header { padding-bottom: 0; border: 0; }
  .summary-header h2 { font-size: 14px; }
  .summary-header .eyebrow, .summary-lock { display: none; }
  .product-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; padding: 8px 0 2px; }
  .product-icon { width: 31px; height: 31px; border-radius: 8px; font-size: 16px; }
  .product-copy b { font-size: 12px; }
  .product-copy span { display: none; }
  .product-price { font-size: 14px; }
  .mobile-includes { display: block; padding: 2px 0 1px 40px; color: #777286; font-size: 11px; line-height: 1.4; }
  .reward-list, .subtotal-row, .total-row, .delivery-note, .summary-help { display: none; }
  .payment-card { padding: 10px; }
  .section-label { margin-left: 1px; font-size: 11px; }
  .method-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
  .cashier-method { min-height: 52px; grid-template-columns: 24px minmax(0,1fr); gap: 5px; padding: 5px 6px; border-radius: 8px; }
  .method-icon { width: 23px; height: 23px; border-radius: 6px; font-size: 14px; }
  .method-name b { font-size: 11px; }
  .method-radio { top: 4px; right: 4px; width: 9px; height: 9px; }
  .cashier-method.active .method-radio { border-width: 3px; }
  .method-detail { padding: 13px 11px; border-radius: 9px; }
  .method-heading-row h2 { font-size: 19px; }
  .method-heading-row .eyebrow { font-size: 10px; }
  .method-description { margin: 6px 0 12px; font-size: 13px; }
  .payment-form { gap: 12px 8px; }
  .form-field { gap: 5px; }
  .form-field label, .date-fieldset legend { font-size: 12px; }
  .form-field input, .form-field select { height: 46px; padding: 0 10px; border-radius: 8px; font-size: 16px; }
  .input-with-mark input { padding-right: 36px; }
  .select-pair, .select-triple { gap: 6px; }
  .optional-address summary { font-size: 12px; }
  .optional-address summary span { font-size: 10px; }
  .primary-action { min-height: 48px; border-radius: 9px; font-size: 14px; }
  .form-footnote { display: none; }
  .no-form-view { min-height: 250px; }
  .partner-message { gap: 10px; margin: 14px 0 12px; padding: 12px 10px; }
  .partner-emblem { width: 35px; height: 35px; border-radius: 8px; font-size: 18px; }
  .partner-message b { font-size: 13px; }
  .partner-message p { font-size: 12px; line-height: 1.5; }
  .handoff-panel { min-height: 315px; padding: 20px 7px; }
  .handoff-panel h2 { font-size: 22px; }
  .handoff-copy { font-size: 14px; }
  .handoff-alert { margin: 12px 0 18px; padding: 10px 12px; font-size: 12px; }
  .checkout-footer { display: none; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
  .checkout-header { height: 36px; grid-template-columns: 1fr auto 1fr; padding: 0 9px; }
  .back-to-store { gap: 4px; font-size: 11px; }
  .back-to-store span { font-size: 16px; }
  .checkout-brand { gap: 5px; font-size: 14px; }
  .brand-gem { width: 23px; height: 23px; border-radius: 7px; font-size: 13px; }
  .checkout-status { font-size: 9px; letter-spacing: .55px; }

  .checkout-main { width: calc(100% - 12px); max-width: none; padding: 3px 0; }
  .checkout-steps, .checkout-intro, .checkout-footer { display: none; }
  .checkout-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: "summary" "payment"; align-items: stretch; gap: 4px; }
  .checkout-card { border-radius: 8px; }
  .order-summary { width: fit-content; justify-self: start; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .order-details { width: fit-content; max-width: 100%; }
  .summary-header { width: fit-content; min-height: 35px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 4px 10px; border: 1px solid #e5e1ec; border-radius: 8px; background: #fff; box-shadow: 0 2px 5px #32225a08; }
  .summary-title { display: flex; align-items: center; gap: 7px; }
  .summary-header .eyebrow { display: none; }
  .summary-header h2 { font-size: 12px; white-space: nowrap; }
  .summary-compact-total { font-size: 13px; }
  .summary-chevron { font-size: 14px; }
  .summary-lock { display: none; }
  .summary-content { width: min(72vw, 360px); margin-top: 3px; padding: 7px 9px; border: 1px solid #e5e1ec; border-radius: 8px; background: white; box-shadow: 0 5px 12px #32225a10; }
  .product-row { grid-template-columns: 22px minmax(0,1fr) auto; gap: 4px; padding: 0; }
  .product-icon { width: 21px; height: 21px; border-radius: 5px; font-size: 12px; }
  .product-copy b { font-size: 10px; }
  .product-price { font-size: 12px; }
  .mobile-includes { display: block; padding: 3px 0 0 26px; font-size: 10px; line-height: 1.25; }
  .reward-list { gap: 4px; padding: 5px 0; }
  .reward-list > div, .reward-list b { font-size: 9px; }
  .summary-divider { margin: 2px 0; }
  .subtotal-row, .total-row { display: flex; padding: 4px 0 1px; font-size: 10px; }
  .total-row b { font-size: 12px; }
  .delivery-note, .summary-help { display: none; }

  .payment-card { padding: 6px; }
  .payment-workspace { grid-template-columns: 182px minmax(0,1fr); align-items: stretch; gap: 8px; }
  .section-label { display: block; margin: 1px 0 5px 2px; font-size: 10px; }
  .method-list { display: flex; flex-direction: column; gap: 3px; }
  .cashier-method { min-height: 34px; display: grid; grid-template-columns: 22px minmax(0,1fr) 10px; justify-content: stretch; gap: 5px; padding: 4px 6px; border-radius: 6px; }
  .method-icon { display: grid; width: 21px; height: 21px; border-radius: 5px; font-size: 13px; }
  .method-radio { position: static; display: block; width: 10px; height: 10px; border-width: 1px; }
  .cashier-method.active .method-radio { border-width: 3px; }
  .method-name { display: block; width: auto; text-align: left; }
  .method-name b { font-size: 12px; line-height: 1; }
  .method-name small { display: none; }
  .method-detail { min-height: 0; padding: 8px 10px; border-radius: 7px; }
  .method-heading-row { display: flex; }
  .method-heading-row .eyebrow { margin: 0 0 2px; font-size: 10px; }
  .method-heading-row h2 { font-size: 16px; }
  .method-description { display: none; }
  .payment-form { grid-template-columns: repeat(4, minmax(0,1fr)); align-items: end; gap: 5px 7px; }
  .form-field { gap: 3px; }
  .form-field label, .date-fieldset legend { font-size: 11px; line-height: 1.1; }
  .form-field input, .form-field select { height: 32px; padding: 0 7px; border-radius: 5px; font-size: 14px; }
  .input-with-mark input { padding-right: 25px; }
  .input-mark { right: 7px; font-size: 12px; }
  .select-pair, .select-triple { gap: 3px; }
  .optional-address summary { padding: 1px 0; font-size: 10px; }
  .optional-address summary span { font-size: 9px; }
  #card-form > .form-field:first-child, #card-form > .form-field:nth-child(6) { grid-column: span 2; }
  #card-form > .optional-address, #card-form > .primary-action { grid-column: 1 / -1; }
  #ach-form > .form-field:nth-child(7), #ach-form > .form-field:nth-child(8), #ach-form > .form-field:nth-child(9) { grid-column: span 2; }
  #ach-form > .primary-action { grid-column: 1 / -1; }
  .primary-action { min-height: 35px; padding: 3px 10px; border-radius: 6px; font-size: 13px; }
  .primary-action span { font-size: 14px; }

  .no-form-view { min-height: 0; }
  .partner-wordmark { font-size: 11px; }
  .partner-message { gap: 8px; margin: 4px 0 7px; padding: 7px; }
  .partner-emblem { width: 25px; height: 25px; border-radius: 6px; font-size: 14px; }
  .partner-message b { margin: 0 0 2px; font-size: 11px; }
  .partner-message p { font-size: 10px; line-height: 1.35; }
  .provider-action { margin-top: 0; }
  .handoff-panel { min-height: 0; padding: 8px 12px; }
  .handoff-symbol { width: 34px; height: 34px; margin-bottom: 5px; border-radius: 9px; font-size: 19px; }
  .handoff-panel .eyebrow { margin-bottom: 4px; font-size: 8px; }
  .handoff-panel h2 { font-size: 17px; }
  .handoff-copy { margin: 4px 0 7px; font-size: 11px; }
  .handoff-order { width: min(100%, 290px); padding: 6px 8px; font-size: 10px; }
  .handoff-alert { gap: 2px; margin: 5px 0 7px; padding: 6px 8px; font-size: 10px; }
  .handoff-panel > .primary-action { width: min(100%, 290px); }
  .text-action { margin-top: 3px; padding: 5px; font-size: 10px; }
}

@media (orientation: landscape) and (max-height: 430px) and (max-width: 700px) {
  .payment-workspace { grid-template-columns: 160px minmax(0,1fr); gap: 6px; }
  .cashier-method { min-height: 31px; grid-template-columns: 20px minmax(0,1fr) 9px; gap: 4px; }
  .method-icon { width: 19px; height: 19px; font-size: 12px; }
  .method-name b { font-size: 11px; }
  .method-detail { padding: 6px 7px; }
  .method-heading-row h2 { font-size: 14px; }
  .method-heading-row .eyebrow { font-size: 9px; }
  .payment-form { gap: 4px 5px; }
  .form-field label, .date-fieldset legend { font-size: 10px; }
  .form-field input, .form-field select { height: 28px; padding: 0 5px; font-size: 12px; }
  .primary-action { min-height: 31px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}