.checkout-page { max-inline-size: 100rem; }
.checkout-hero { position: relative; }
.checkout-hero::after { content: ""; position: absolute; inset: auto 0 -1px 52%; block-size: .45rem; background: var(--demo-signal); }
.checkout-hero__summary dl { display: grid; grid-template-columns: repeat(2, 1fr); margin-block-start: 2rem; border-block-start: 1px solid var(--demo-ink); }
.checkout-hero__summary dl div { padding-block: 1rem; }
.checkout-hero__summary dl div + div { padding-inline-start: 1rem; border-inline-start: 1px solid var(--demo-ink); }
.checkout-hero__summary dt { font: 700 .7rem ui-monospace, monospace; text-transform: uppercase; }
.checkout-hero__summary dd { margin: .25rem 0 0; font-size: 1.2rem; font-weight: 850; }
.checkout-stage { display: grid; grid-template-columns: minmax(13rem, .6fr) minmax(0, 1.4fr); gap: 1.25rem; align-items: start; }
.checkout-order { padding: clamp(1.1rem, 4vw, 2rem); border: 1px solid var(--demo-ink); background: var(--demo-ink); color: var(--demo-paper); }
.checkout-order .demo-eyebrow { color: var(--demo-signal); }
.checkout-order h3 { margin: 0; font-size: 1.65rem; }
.checkout-order > p:not(.demo-eyebrow) { color: #c9c1b6; }
.checkout-order dl { margin: 2rem 0 0; }
.checkout-order dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-block-start: 1px solid #6d675f; }
.checkout-order dd { margin: 0; font-weight: 800; }
.checkout-order dl div:last-child { color: var(--demo-signal); font-size: 1.15rem; }
.demo-field label span { color: var(--demo-muted); font-weight: 500; }

@media (max-width: 70rem) {
  .checkout-stage { grid-template-columns: 1fr; }
  .checkout-order dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .checkout-order dl div { display: block; }
}

@media (max-width: 35rem) {
  .checkout-hero::after { inset-inline-start: 0; }
  .checkout-order dl { grid-template-columns: 1fr; }
}