/* Skuddlebutts ordering.
   Brand system: cream, navy, red. Alfa Slab One for display, Yellowtail for
   the script accent, Oswald for everything you read or tap.
   Tokens are the spec's (docs/DESIGN_HANDOFF.md section 7). Component rules
   use tokens only, no raw values.
   Red surface means "this belongs to you as a member". Offers never use it. */

:root {
  /* color */
  --cream: #efe8d4;
  --paper: #fbf7ea;
  --navy: #1d3557;
  --ink: #16243a;
  --red: #c4302b;
  --red-deep: #9d231f;
  --mustard: #e2a72e;
  --rule: #cdbf9c;
  --muted: #5d6576;
  --on-red: #fff7e6;
  --disabled-bg: #b9ad92;
  --disabled-fg: #3d3a33;
  --backdrop: rgba(22, 36, 58, 0.55);
  --on-red-rule: rgba(255, 247, 230, 0.55);
  /* type */
  --display: "Alfa Slab One", "Rockwell", "Georgia", serif;
  --script: "Yellowtail", "Brush Script MT", cursive;
  --text: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: 400 17px/1.5 var(--text);
  --font-small: 400 15px/1.4 var(--text);
  --font-h1: 400 clamp(2rem, 7vw, 3.1rem)/1.08 var(--display);
  --font-h2: 400 1.5rem/1.15 var(--display);
  --font-h3: 600 1.05rem/1.3 var(--text);
  --price-weight: 500;
  /* spacing, shape, layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 22px; --space-6: 28px; --space-7: 40px; --space-8: 56px;
  --radius: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --layout-max: 760px;
  --sheet-max: 560px;
  --tap-min: 44px;
  --control-h: 52px;
  --order-bar-h: 88px;
  --border: 2px;
  --hairline: 1px;
  --ease-out: ease-out;
  --t-fast: 150ms; --t-sheet: 220ms; --t-module: 300ms; --t-stub: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-bottom: calc(var(--order-bar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--cream);
  color: var(--ink);
  font: var(--font-body);
  letter-spacing: 0.01em;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--red-deep); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.script { font-family: var(--script); font-weight: 400; color: var(--red); }
.money, .item-price, .perk-amount, .totals, .line-price, .choice em { font-variant-numeric: tabular-nums; font-weight: var(--price-weight); }
.helper { margin: var(--space-2) 0 0; font: var(--font-small); color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

main { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--space-5); }

/* Masthead */
.masthead {
  max-width: var(--layout-max); margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border-bottom: 3px double var(--navy);
}
.wordmark { text-decoration: none; color: var(--navy); display: grid; line-height: 1.1; }
.wordmark-name { font-family: var(--display); font-size: 1.5rem; color: var(--red); }
.wordmark-since { font-size: 0.85rem; color: var(--navy); }
.cart-button {
  min-height: var(--tap-min); border: var(--border) solid var(--navy); background: transparent; border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); cursor: pointer; white-space: nowrap;
}
.cart-count {
  display: inline-block; min-width: 1.6em; margin-left: var(--space-1); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--navy); color: var(--paper); text-align: center;
}

/* Buttons */
.primary, .phone-row button, .button-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); min-width: var(--tap-min);
  padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius);
  background: var(--red); color: var(--on-red); font-weight: 500; font-size: 1.05rem; cursor: pointer; text-decoration: none;
  box-shadow: 0 3px 0 var(--red-deep);
}
.primary:hover, .button-link:hover { background: var(--red-deep); }
.primary:active, .button-link:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-deep); }
.primary[disabled] { background: var(--disabled-bg); color: var(--disabled-fg); box-shadow: none; cursor: not-allowed; transform: none; }
.primary.wide, .button-link.wide { width: 100%; }
.outline {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--control-h);
  padding: var(--space-3) var(--space-4); border: var(--border) solid var(--navy); border-radius: var(--radius);
  background: transparent; color: var(--navy); font-weight: 500; cursor: pointer; text-decoration: none;
}
.outline:hover { background: var(--navy); color: var(--paper); }
.text-button { min-height: var(--tap-min); padding: var(--space-2) 0; border: 0; background: none; color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.form-error { min-height: 1.5em; margin: var(--space-2) 0 0; color: var(--red-deep); font-weight: 500; }
.form-error:empty { margin: 0; min-height: 0; }

/* Inputs */
.phone-form label, .field-group label { display: block; margin: 0 0 var(--space-2); font-weight: 500; }
input[type="tel"], input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%; min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  background: var(--paper); border: var(--border) solid var(--navy); border-radius: var(--radius);
}
input[aria-invalid="true"] { border-color: var(--red-deep); }
.phone-form input { font-size: 1.25rem; }
.phone-form .primary { margin-top: var(--space-4); }
textarea { width: 100%; min-height: 64px; padding: var(--space-3); background: var(--paper); border: var(--border) solid var(--rule); border-radius: var(--radius); }
.counter { font: var(--font-small); color: var(--muted); text-align: right; margin: var(--space-1) 0 0; }

/* S1 Start */
.gate { padding: var(--space-7) 0 var(--space-7); }
.gate-title { font: var(--font-h1); color: var(--navy); margin-bottom: var(--space-5); }
.gate-busy { margin: calc(-1 * var(--space-3)) 0 var(--space-5); font-weight: 500; color: var(--navy); }
.gate-aside { margin-top: var(--space-6); font: var(--font-small); color: var(--muted); }

.fulfill { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; border: 0; }
.fulfill-card { position: relative; display: block; }
.fulfill-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fulfill-card span {
  display: grid; gap: var(--space-1); min-height: 72px; padding: var(--space-3) var(--space-4);
  border: var(--border) solid var(--navy); border-radius: var(--radius); background: var(--paper); color: var(--navy); cursor: pointer;
}
.fulfill-card strong { font-weight: 600; font-size: 1.15rem; }
.fulfill-card small { font: var(--font-small); color: var(--muted); }
.fulfill-card input:checked + span { background: var(--navy); color: var(--paper); }
.fulfill-card input:checked + span small { color: var(--paper); }
.fulfill-card input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }


/* S1b Confirm your number */
.gate-title-sm { font-size: clamp(1.7rem, 6vw, 2.4rem); }
.code-block #code { font-size: 1.6rem; letter-spacing: 0.25em; text-align: center; }
.code-links { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: var(--space-3) 0 0; }
.text-button[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.strip-confirm { width: auto; min-height: var(--tap-min); padding: var(--space-2) var(--space-4); }

/* Notices: info (closed), warning (lapsed, provider down), paused */
.notice {
  margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); background: var(--paper);
  border-left: 5px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0;
}
.notice-warning { border-left-color: var(--mustard); }
.notice-paused { border-left-color: var(--red-deep); font-weight: 500; }
.notice a, .notice button { margin-left: var(--space-1); }

/* Identity strips */
.strip {
  margin: var(--space-6) 0 var(--space-2); padding: var(--space-4) var(--space-5); background: var(--paper);
  border-left: 5px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0;
}
.strip p { margin: 0; }
.strip .strip-links { margin-top: var(--space-1); font: var(--font-small); display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.strip-links a, .strip-links .text-button { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0; margin: 0; font: var(--font-small); line-height: 1.4; }

/* The member ticket: the one loud thing on the page */
.ticket {
  position: relative; margin: var(--space-6) 0 var(--space-2); padding: var(--space-5) var(--space-6) var(--space-5);
  background: var(--red); color: var(--on-red); border-radius: 10px;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--on-red-rule); border-radius: var(--radius); pointer-events: none; }
.ticket-hello { font-family: var(--script); font-size: 2.3rem; line-height: 1; color: var(--on-red); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-sub { margin: var(--space-2) 0 var(--space-4); }
.ticket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.ticket li { display: flex; gap: var(--space-3); align-items: baseline; }
.ticket li::before { content: "★"; color: var(--mustard); font-size: 0.85em; }
.ticket li small { font: var(--font-small); color: var(--on-red); }
.ticket a, .ticket .text-button { color: var(--on-red); }
.ticket .strip-links { margin-top: var(--space-3); font: var(--font-small); }

/* Section rail */
.rail {
  position: sticky; top: 0; z-index: 5; margin: var(--space-4) calc(-1 * var(--space-5)) 0; padding: var(--space-2) var(--space-5);
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  background: var(--cream); border-bottom: var(--hairline) solid var(--rule);
}
.rail::-webkit-scrollbar { display: none; }
.rail a {
  flex: none; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); text-decoration: none;
  color: var(--navy); border: 1.5px solid transparent; white-space: nowrap;
}
.rail a[aria-current="true"] { border-color: var(--navy); background: var(--paper); }

/* Menu */
.menu-section { padding-top: var(--space-6); }
.menu-section h2 { font: var(--font-h2); font-size: 1.55rem; color: var(--navy); padding-bottom: var(--space-2); border-bottom: var(--border) solid var(--navy); }
.items { margin: 0; padding: 0; list-style: none; }
.item {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4); align-items: baseline;
  padding: var(--space-4) 0; background: none; border: 0; border-bottom: var(--hairline) solid var(--rule);
  text-align: left; cursor: pointer; min-height: var(--tap-min);
}
.item:hover .item-name { color: var(--red-deep); }
.item-name { font-size: 1.15rem; font-weight: 500; }
.item-price { color: var(--navy); }
.item-desc { grid-column: 1 / -1; max-width: 46em; color: var(--muted); }
.item.is-sold-out { cursor: not-allowed; color: var(--muted); }
.item.is-sold-out .item-name, .item.is-sold-out .item-price { color: var(--muted); }
.item.is-sold-out:hover .item-name { color: var(--muted); }
.loading { padding: var(--space-7) 0; color: var(--muted); }
.menu-failed { padding: var(--space-7) 0; }
.menu-failed .outline { width: auto; margin-top: var(--space-3); }

/* Sticky order bar */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) max(var(--space-5), calc((100vw - var(--layout-max) + 2 * var(--space-5)) / 2));
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border: 0; background: var(--navy); color: var(--paper);
  font-size: 1.15rem; font-weight: 500; cursor: pointer;
}

/* Sheets: bottom sheet on phones, centered dialog from 640px */
dialog.sheet {
  width: min(var(--sheet-max), 100vw); max-width: 100vw; max-height: min(92dvh, 900px);
  margin: auto auto 0; padding: 0; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--paper); color: var(--ink); overflow: hidden;
}
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
dialog::backdrop { background: var(--backdrop); }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: var(--radius-lg); } }
.sheet-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.sheet-head h2 { font: var(--font-h2); color: var(--navy); }
.close { width: var(--tap-min); height: var(--tap-min); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) 0 0; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--navy); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-5) var(--space-4); }
.sheet-foot { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: var(--hairline) solid var(--rule); background: var(--paper); }
.sheet-foot .primary { flex: 1; }

/* Item sheet */
.item-hint { margin: 0 0 var(--space-4); font: var(--font-small); color: var(--muted); }
fieldset { margin: 0 0 var(--space-4); padding: 0; border: 0; }
legend { padding: 0; font-weight: 600; font-size: 1.05rem; color: var(--navy); }
legend small { font-weight: 400; color: var(--muted); margin-left: var(--space-2); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--rule); }
.choice input { width: 22px; height: 22px; accent-color: var(--red); flex: none; }
.choice span { flex: 1; }
.choice em { font-style: normal; color: var(--muted); }
.choice .mini-stepper { display: none; }
.choice input:checked ~ .mini-stepper { display: inline-flex; }
.mini-stepper, .stepper { display: inline-flex; align-items: center; border: var(--border) solid var(--navy); border-radius: var(--radius-pill); }
.mini-stepper button, .stepper button { width: var(--tap-min); height: var(--tap-min); border: 0; background: none; font-size: 1.3rem; cursor: pointer; }
.mini-stepper output, .stepper output { min-width: 1.6em; text-align: center; font-weight: 500; }

/* Checkout: lines */
.lines { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.lines li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--rule); }
.line-name { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-mods { grid-column: 1; color: var(--muted); font: var(--font-small); }
.line-problem { grid-column: 1 / -1; color: var(--red-deep); font-weight: 500; }
.line-remove { grid-column: 1; justify-self: start; min-height: var(--tap-min); padding: var(--space-1) 0; border: 0; background: none; color: var(--red-deep); text-decoration: underline; cursor: pointer; font: var(--font-small); }
.empty { padding: var(--space-6) 0; color: var(--muted); }

/* Savings module: same position and heading style in every state */
.savings { margin: var(--space-4) calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5); }
.savings h3 { font: var(--font-h2); color: var(--navy); margin-bottom: var(--space-2); }
.savings-member { background: var(--red); color: var(--on-red); }
.savings-member h3 { font-family: var(--script); font-size: 1.8rem; line-height: 1; color: var(--on-red); }
.savings-would { margin-left: 0; margin-right: 0; background: var(--paper); border: var(--border) solid var(--navy); border-radius: var(--radius); }
.savings-none, .savings-collapsed { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.savings-none h3, .savings-collapsed h3 { font: var(--font-small); color: var(--muted); margin: 0; }
.savings-body { display: grid; grid-template-rows: 1fr; }
.savings-body > * { min-height: 0; }
.savings-collapsed .savings-body, .savings-none .savings-body { grid-template-rows: 0fr; overflow: hidden; }
.perk-list { margin: 0; padding: 0; list-style: none; }
.perk { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap-min); padding: var(--space-2) 0; border-top: 1px dashed var(--rule); }
.savings-member .perk { border-top-color: var(--on-red-rule); }
.perk input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--mustard); flex: none; }
.perk label { flex: 1; cursor: pointer; min-height: var(--tap-min); display: flex; flex-direction: column; justify-content: center; }
.perk-title { font-weight: 500; }
.perk-why { display: block; font: var(--font-small); }
.savings-member .perk-why { color: var(--on-red); }
.savings-would .perk-why { color: var(--muted); }
.perk-amount { white-space: nowrap; font-weight: 600; }
.savings-would .perk-amount { color: var(--red-deep); }
.perk.is-off label { cursor: default; }
.perk.is-off .perk-title { font-weight: 400; }
.savings-foot { margin: var(--space-3) 0 0; font-weight: 500; }
.savings-actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.savings-actions .text-button { justify-self: center; }
.savings-price { font: var(--font-small); color: var(--muted); margin: var(--space-2) 0 0; }
.is-quoting .perk-amount, .is-quoting .totals dd { opacity: 0.6; }

/* Checkout: fields, tips, card */
.field-group { margin-top: var(--space-5); }
.field-group h3 { font: var(--font-h3); color: var(--navy); margin-bottom: var(--space-2); }
.field-group select + .helper { margin-top: var(--space-2); }
.field-group select ~ label, .field-group .helper ~ label { margin-top: var(--space-3); }
.tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.tips label { margin: 0; }
.tips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tips span { display: flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: var(--space-2) var(--space-1); text-align: center; border: var(--border) solid var(--navy); border-radius: var(--radius); cursor: pointer; }
.tips input:checked + span { background: var(--navy); color: var(--paper); }
.tips input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }
#card { min-height: 90px; }

/* Delivery address search */
.address-search { position: relative; }
.address-results { position: absolute; left: 0; right: 0; z-index: 3; margin: var(--space-1) 0 0; padding: 0; list-style: none; background: var(--paper); border: var(--border) solid var(--navy); border-radius: var(--radius); overflow: hidden; }
.address-results li { min-height: var(--tap-min); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); cursor: pointer; border-top: var(--hairline) solid var(--rule); }
.address-results li:first-child { border-top: 0; }
.address-results li[aria-selected="true"], .address-results li:hover { background: var(--navy); color: var(--paper); }
.address-results li.is-out { color: var(--muted); cursor: not-allowed; }
.address-results li.is-out:hover { background: transparent; color: var(--muted); }
.address-results small { font: var(--font-small); white-space: nowrap; }
.address-picked { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--paper); border-left: 5px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; }
.address-picked p { margin: 0; font-weight: 500; }
#deliveryFields label { margin-top: var(--space-3); }
#deliveryFields .no-contact { display: flex; margin-top: var(--space-3); border-bottom: 0; }

/* Loyalty and the no-stacking choice */
.loyalty-row { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap-min); padding: var(--space-2) 0; }
.loyalty-row input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.loyalty-row label { flex: 1; min-height: var(--tap-min); display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.loyalty-row .perk-amount { color: var(--red-deep); }
.choice-group { margin: 0; padding: 0; border: 0; }
.choice-group legend { margin-bottom: var(--space-1); }

/* Payment: wallets, cards on file */
.wallets { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.wallets > div { min-height: var(--tap-min); }
.saved-cards { display: grid; margin-bottom: var(--space-3); }
.saved-cards .choice { padding: var(--space-2) 0; }
.save-card { border-bottom: 0; margin-top: var(--space-2); }

/* Reorder card (verified only) */
.reorder { margin: var(--space-3) 0 0; padding: var(--space-4) var(--space-5); background: var(--paper); border: var(--border) solid var(--navy); border-radius: var(--radius); display: grid; gap: var(--space-2); }
.reorder h3 { font: var(--font-h3); color: var(--navy); }
.reorder .outline { width: auto; justify-self: start; }

/* S5 Join sheet */
.join-lede { margin: 0 0 var(--space-4); font-weight: 500; }
.join-h3 { font: var(--font-h3); color: var(--navy); margin: var(--space-4) 0 var(--space-2); }
.join-perks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.join-perks li { display: flex; gap: var(--space-3); align-items: baseline; }
.join-perks li::before { content: "★"; color: var(--mustard); font-size: 0.85em; }
.join-names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.consent { align-items: flex-start; margin-top: var(--space-4); border-bottom: 0; }
.consent span { font: var(--font-small); }
.plan-price { font-weight: var(--price-weight); font-variant-numeric: tabular-nums; }
.plan-saving { display: block; font: var(--font-small); color: var(--muted); }
#joinCard { min-height: 90px; }
.totals .divider { grid-column: 1 / -1; height: 0; border-top: var(--hairline) solid var(--rule); margin: var(--space-1) 0; }
.totals .note { grid-column: 1 / -1; font: var(--font-small); color: var(--muted); }

/* Totals */
.totals { margin: var(--space-5) 0 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); }
.totals dt, .totals dd { margin: 0; }
.totals dd { text-align: right; }
.totals .saving { color: var(--red-deep); font-weight: 500; }
.totals .grand { padding-top: var(--space-2); border-top: var(--border) solid var(--navy); font-size: 1.25rem; font-weight: 600; }

/* Confirmation */
.done { padding: var(--space-7) var(--space-5); text-align: center; }
.done h2 { font-size: 3rem; line-height: 1; margin-bottom: var(--space-3); }
.done-saved { font-weight: 500; color: var(--red-deep); }
.done-quiet { font: var(--font-small); color: var(--muted); }

/* Motion, only when the visitor allows it */
@media (prefers-reduced-motion: no-preference) {
  .ticket { animation: stub var(--t-stub) cubic-bezier(.2,.9,.3,1.2) both; transform-origin: top center; }
  @keyframes stub { from { opacity: 0; transform: rotate(-2deg) translateY(-14px); } }
  dialog.sheet[open] { animation: rise var(--t-sheet) var(--ease-out); }
  @keyframes rise { from { transform: translateY(24px); opacity: 0; } }
  .savings-body { transition: grid-template-rows var(--t-module) var(--ease-out); }
  .perk-amount, .totals dd { transition: opacity var(--t-fast) var(--ease-out); }
  .perk-amount.is-new { animation: fade var(--t-fast) var(--ease-out); }
  @keyframes fade { from { opacity: 0; } }
  .savings-member.is-joined { animation: wipe var(--t-module) var(--ease-out); }
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* The hidden attribute always wins, even over display rules above. */
[hidden] { display: none !important; }