/* Gift a box: a step-by-step gift builder. Each step slides in once the one before it is
   answered, answered steps fold into a one-line summary, and "Your gift" follows along. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --coral: #D85A30;
  --coral-light: #F5EDE8;
  --coral-lt: #FDEEE8;
  --coral-btn: #E8795C;
  --coral-deep: #A9431F;
  --text-dark: #1A1208;
  --text-mid: #6B5D54;
  --text-light: #A8998F;
  --border: #EAE0D8;
  --white: #FFFFFF;
  --cream: #FBF7F3;
  --sand: #F1E4D3;
  --ink-pill: #2B211A;
  --sage-dk: #2A5E34;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .g-display { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }

button { font: inherit; color: inherit; }

/* ── Holiday dates strip ───────────────────────────────────── */
.g-holiday {
  background: #2B3D2F;
  color: #F4EFE8;
  font-size: 13px;
  padding: 9px 16px;
  text-align: center;
}
.g-holiday[hidden] { display: none; }
.g-holiday-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.g-holiday strong { font-weight: 700; }

/* ── Page frame ────────────────────────────────────────────── */
.g-main { max-width: 1120px; margin: 0 auto; padding: 32px 24px 72px; }

/* Full-width band like the referral page hero, on the same soft coral: copy on the left,
   lined up with the page content below, and the photo running square to the right edge. */
.g-hero {
  display: flex;
  min-height: 440px;
  background: #7E3420;
  overflow: hidden;
}
.g-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px 48px max(24px, calc((100vw - 1120px) / 2 + 24px));
}
.g-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.g-hero h1 { color: #F4EDE0; font-size: clamp(26px, 7.8cqi, 52px); line-height: 1.04; font-weight: 700; margin-bottom: 16px; text-wrap: balance; }
.g-hero p { color: rgba(244, 237, 224, 0.85); font-size: 17px; max-width: 470px; }
/* Until the season is known: shimmering bars in place of the copy and the photo. */
.g-hero-skeleton { display: none; }
.g-hero.is-loading { background: #F4EFE9; }
.g-hero.is-loading .g-hero-text > :not(.g-hero-skeleton) { display: none; }
.g-hero.is-loading .g-hero-skeleton { display: flex; flex-direction: column; gap: 12px; max-width: 470px; }
.g-skel, .g-hero.is-loading .g-hero-photo, .g-hero-photo.is-loading {
  background: linear-gradient(90deg, #EEE8E1 25%, #E3DCD4 50%, #EEE8E1 75%);
  background-size: 200% 100%;
  animation: g-shimmer 1.4s ease-in-out infinite;
}
.g-skel { display: block; border-radius: 8px; }
.g-skel.is-title { height: 44px; width: 92%; }
.g-skel.is-line { height: 16px; width: 100%; }
.g-skel.is-title + .g-skel.is-line { margin-top: 10px; }
.g-skel.is-short { width: 60%; }
.g-hero.is-loading .g-hero-photo img, .g-hero-photo.is-loading img { visibility: hidden; }
@keyframes g-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark and cheery all year in deep terracotta. The holiday season swaps in dark green with gold
   snowflakes hanging from the top. */
.g-hero-text { position: relative; container-type: inline-size; }
.g-hero.is-holiday { background: #2B3D2F; }
.g-holiday-only, .g-hero-stars { display: none; }
.g-hero.is-holiday .g-holiday-only { display: block; }
.g-hero.is-holiday .g-hero-stars { display: block; }
.g-hero-stars { position: absolute; top: 0; right: 48px; width: 186px; height: 110px; pointer-events: none; }
.g-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.g-hero-cta { display: inline-flex; align-items: center; gap: 10px; background: #F4EBD9; color: var(--text-dark); border: none; border-radius: 99px; padding: 15px 28px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; }
.g-hero-cta:hover { background: #FFF6E6; }
.g-hero-time { display: inline-flex; align-items: center; gap: 8px; color: rgba(244, 237, 224, 0.9); font-size: 15px; }
.g-hero-cta:focus-visible { outline: 2px solid #E4C98A; outline-offset: 3px; }
.g-hero-photo {
  flex: 0 0 48%;
  position: relative;
  background: var(--sand);
}
.g-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Phones only: the box cropped in beside the headline, the short line under it, and the first
   screen (How gifting works, with Start your gift in a bar at the bottom). */
.g-hero-tile, .g-hero-sub-phone, .g-intro, .g-intro-bar, .g-wiz-head, .g-mode-icon, .g-phone, .g-phone-block, .g-wiz-prev, .g-mbar-note, .g-psum, .g-psum-total, .g-mbar-title { display: none; }

.g-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px; /* checkout's summary column (.checkout-wrap) */
  gap: 48px;
  align-items: start;
}

/* ── Steps ─────────────────────────────────────────────────── */
.g-step[hidden] { display: none; }
.g-step.is-entering { animation: gStepIn 0.4s ease both; }
@keyframes gStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.g-step h2 { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.g-step-sub { font-size: 14px; color: var(--text-mid); margin-bottom: 14px; }
.g-egift-box-note { font-size: 14px; font-weight: 600; color: var(--text-dark); background: var(--sand); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.g-step-sub a, .g-link { color: var(--coral-deep); font-weight: 600; }

/* Steps 1-6 in order, split by hairlines: the open step's form, or one row each. */
.g-step + .g-step { border-top: 1px solid #E2D6C7; }
.g-step.is-active .g-step-body { padding-top: 22px; }
.g-step.is-active:first-child .g-step-body { padding-top: 0; }
.g-step.is-active { padding-bottom: 22px; }
.g-step.is-complete .g-step-body, .g-step.is-unfinished .g-step-body, .g-step.is-upcoming .g-step-body { display: none; }
.g-step-summary, .g-step-upcoming {
  display: none;
  grid-template-columns: 22px 206px minmax(0, 1fr) auto;
  /* Answers can run to two lines; the check, label and Change line up with the first. */
  align-items: start;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  text-align: left;
}
.g-step-summary, .g-step-upcoming { cursor: pointer; font: inherit; color: inherit; }
.g-step.is-upcoming .g-step-upcoming:hover .g-step-row-label { color: var(--text-dark); }
.g-step-upcoming:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; border-radius: 6px; }
.g-step.is-complete .g-step-summary, .g-step.is-unfinished .g-step-summary, .g-step.is-upcoming .g-step-upcoming { display: grid; }
.g-step-summary:hover .g-step-row-action { color: var(--coral); }
.g-step-summary:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; border-radius: 6px; }
.g-step-row-label { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-dark); }
.g-step.is-upcoming .g-step-row-label { color: #7A6B63; } /* 4.8:1 on cream */
.g-step-row-value { min-width: 0; font-size: 14px; line-height: 22px; color: var(--text-dark); }
.g-step-row-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Second lines (an email, a ZIP) are muted; labeled lines like Return: stay full strength. */
.g-step-row-line + .g-step-row-line:not(.has-key) { color: var(--text-mid); }
.g-step-row-key { font-weight: 700; }
.g-step-row-value .g-step-row-line.is-quote-label { margin-top: 6px; font-weight: 700; color: var(--text-dark); }
.g-step-row-line.is-quote-label + .is-quote { margin-top: 2px; }
/* The gift message: plain italic text set off by a thin left rule (no box, so it doesn't read as a field), wrapping to three lines. */
.g-step-row-line.is-quote {
  margin-top: 6px; padding: 2px 0 2px 12px; border-left: 2px solid #D6C6B8;
  font-style: italic; font-size: 14px; line-height: 1.45; color: var(--text-mid);
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.g-step-row-value.is-unfinished { color: var(--text-mid); }
.g-step-row-action { line-height: 22px; font-size: 13px; font-weight: 600; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 2px; }
.g-step-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-dk); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.g-step-check.is-empty { background: none; border: 1.5px solid #988980; }
.g-step.is-unfinished .g-step-check { border: 1.5px dashed var(--text-light); }
.g-step-summary-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin: -4px 8px -2px 0; background: var(--sand); }

/* ── Ways to give: radio rows, with the e-gift as a link below ── */
.g-mode {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 11px 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.g-mode:hover { background: #FFFCFA; }
.g-mode:focus-visible { border-radius: 6px; }
.g-mode:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: -2px; }
.g-mode-radio { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-mid); background: var(--white); position: relative; }
.g-mode.is-selected .g-mode-radio { border-color: var(--coral); }
.g-mode.is-selected .g-mode-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--coral); }
.g-mode-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-mode-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.g-mode-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.4; }
.g-mbar, .g-sheet-backdrop { display: none; }
.g-mode-egift { font-size: 14px; color: var(--text-dark); margin-top: 14px; }
.g-mode-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.g-mode-link:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; }

/* ── Pills (ages, dates, box counts) ───────────────────────── */
.g-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.g-pill {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.g-pill:hover { border-color: var(--coral-btn); }
.g-pill:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; }
.g-pill.is-selected { background: var(--ink-pill); border-color: var(--ink-pill); color: var(--white); }
.g-pill small { font-weight: 500; opacity: 0.75; margin-left: 4px; }

/* ── Age picker ────────────────────────────────────────────── */
.g-age-month-label { margin-top: 18px; }
.g-age-month-label[hidden] { display: none; }
.g-age-months[hidden] { display: none; }
/* "3-4 months+" reads as one word in Plus Jakarta Sans without a little more word spacing, and
   its contextual alternates draw the hyphen as a long dash; as in the shared age dropdown
   (styles/components/age-dropdown.css). */
.g-age-months .g-pill { word-spacing: 0.12em; font-feature-settings: "calt" 0; }
.g-pill-more { color: var(--coral-deep); border-style: dashed; }

/* What the picked day means for the return */
.g-return { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px; margin-top: 18px; }
.g-return[hidden] { display: none; }
.g-return-title { font-weight: 700; font-size: 15px; }
.g-return-sub { font-size: 14px; color: var(--text-mid); }
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Ribbon tags ───────────────────────────────────────────── */
.g-tag-label { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.g-tags { display: grid; grid-template-columns: repeat(var(--g-tag-cols, 4), minmax(0, 1fr)); gap: 8px; }
.g-tag-card {
  position: relative;
  background: #F1E8DE;
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.g-tag-card:hover { border-color: var(--coral-btn); }
.g-tag-pick {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 11px;
  padding: 16px 8px 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.g-tag-pick:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; }
.g-tag-zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-dark);
  cursor: pointer;
}
.g-tag-zoom:hover { background: var(--white); }
.g-tag-zoom:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; }
.g-tag-card.is-selected { border-color: var(--text-dark); background: #F7F1EA; }
.g-tag-name { line-height: 1.3; }
.g-tag-badge { position: absolute; top: 6px; left: 6px; background: #2B3D2F; color: var(--white); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 99px; padding: 2px 7px; }
.g-tag-badge.is-lunar { background: #9E2A22; }
.g-tags { margin-bottom: 20px; }
.g-tag-img { display: block; height: 76px; width: auto; }
.g-tag-img.is-small { height: 30px; }
/* In the zoom view every tag is the same size, front and back, so it flips in place. */
.g-tag-img.is-large { height: 100%; }
.g-flip-wrap {
  --g-zoom-h: min(52vh, 360px);
  position: relative;
  width: calc(var(--g-zoom-h) * 0.632);
  height: var(--g-zoom-h);
  margin: 0 auto 20px;
}
.g-flip {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  perspective: 1000px;
}
/* Round flip button over the tag's bottom-right corner. */
.g-flip-btn {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--white);
  border: 1px solid #DCCFBF;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(26, 18, 8, 0.12);
  cursor: pointer;
}
.g-flip-btn:hover { background: #FBF7F3; }
.g-flip-btn:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; }
.g-flip:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 6px; border-radius: 6px; }
.g-flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 400ms ease; }
.g-flip.is-flipped .g-flip-inner { transform: rotateY(180deg); }
.g-flip-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 3px 8px rgba(26, 18, 8, 0.14)); }
.g-flip-back { transform: rotateY(180deg); }
.g-flip-back img { height: 100%; width: auto; display: block; }

/* Tag zoom */
.g-zoom { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.g-zoom[hidden] { display: none; }
.g-zoom-backdrop { position: absolute; inset: 0; background: rgba(26, 18, 8, 0.55); }
.g-zoom-sheet { position: relative; background: var(--cream); border-radius: 20px; padding: 28px 24px 22px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 24px 64px rgba(26, 18, 8, 0.18); }
.g-zoom-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; }
.g-zoom-sheet .g-continue { margin-top: 12px; }
.g-zoom-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--white); color: var(--text-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.g-zoom-close:hover { background: var(--border); color: var(--text-dark); }

/* ── Not born yet: steer to a gift they redeem later ──────── */

/* ── Matched box ───────────────────────────────────────────── */
/* Step 2, a box gift: the starting box their age picked, then how many boxes (1-3, one stage
   after another) and how the gift plays out. */
.g-age[hidden], .g-age-done[hidden], .g-start[hidden], .g-bundle[hidden] { display: none; }
.g-start {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 20px; margin-top: 4px;
}
.g-start.is-entering { animation: gStepIn 0.35s ease both; }
.g-start-photo { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--sand); flex-shrink: 0; padding: 0; border: none; cursor: zoom-in; }
.g-start-photo:hover img { opacity: 0.85; }
.g-start-photo:focus-visible { outline: 2px solid var(--coral-btn); outline-offset: 2px; }
.g-start-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-start-info { min-width: 0; grid-column: 2; grid-row: 1; }
/* The links sit in the card's grid on desktop, and in a row of their own on phones. */
.g-start-foot { display: contents; }
.g-start-inside { grid-column: 2; grid-row: 2; justify-self: start; }
.g-start-change { grid-column: 3; grid-row: 1 / 3; }
.g-start-eyebrow { font-size: 13px; color: var(--text-mid); }
.g-start-name { font-weight: 700; font-size: 17px; line-height: 1.3; }
.g-start-inside { font-size: 13px; margin-top: 2px; }
.g-start-change, .g-box-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--coral-deep); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 2px;
}
.g-start-change { flex-shrink: 0; font-size: 15px; font-weight: 700; }

.g-bundle-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.25; margin: 30px 0 6px; }
.g-bundle-sub { max-width: 600px; }

.g-plan { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px 8px; }
.g-plan:empty { display: none; }
.g-plan-title { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.g-plan-list { list-style: none; margin: 0; padding: 0; }
.g-plan-row { display: grid; grid-template-columns: 92px 14px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-bottom: 16px; }
.g-plan-when { font-size: 13px; font-weight: 600; color: var(--text-mid); padding-top: 2px; }
.g-plan-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; background: #CFC3B8; }
.g-plan-dot.is-first { background: var(--coral-btn); }
.g-plan-dot.is-second { background: #D9A441; }
.g-plan-dot.is-third { background: #6E9466; }
.g-plan-text { display: flex; flex-direction: column; min-width: 0; }
.g-plan-name { font-weight: 600; font-size: 15px; }
.g-plan-sub { font-size: 13px; color: var(--text-mid); }
.g-bundle .g-continue { margin-top: 24px; }

/* Step 2, an e-gift: how the parents use it, next to a preview of the email they get. */
.g-egift-box-note[hidden] { display: none; }
.g-egift-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.g-egift-steps, .g-egift-email { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; }
.g-egift-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--text-dark); }
.g-egift-list li { margin-bottom: 9px; padding-left: 2px; }
.g-egift-list li:last-child { margin-bottom: 0; }
/* The email itself, inset on cream. */
.g-egift-email-preview { background: #FAF2EC; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.g-egift-email-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--text-dark); margin-bottom: 10px; }
.g-egift-email-body { font-size: 14px; line-height: 1.55; color: var(--text-mid); margin: 0 0 14px; }
.g-egift-email-boxes { display: flex; gap: 6px; }
.g-egift-email-boxes span { width: 28px; height: 7px; border-radius: 999px; background: #E2A84A; }
.g-egift-email-count { font-size: 13px; color: var(--text-mid); margin-top: 10px; }
[data-modes="choose"] .g-continue { margin-top: 24px; }

/* "Your gift": a promo code on a 2 or 3 box gift, which replaces the savings instead of adding. */
.g-sum-note { font-size: 13px; color: var(--text-mid); line-height: 1.45; margin: 4px 0 10px; }
.g-sum-note-remove { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* "Your gift": the multi-box savings line. */
.g-sum-savings .summary-item-name, .g-sum-savings .summary-item-price { color: var(--sage-dk); font-weight: 600; }
.g-fine { font-size: 13px; color: var(--text-mid); margin-top: 10px; }

/* ── Fields ────────────────────────────────────────────────── */
.g-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.g-field[hidden] { display: none; }
.g-field label { font-size: 13px; font-weight: 600; }
.g-field label .g-optional { font-weight: 400; color: var(--text-light); }
.g-field input, .g-field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* under 16px, iPhones zoom in on the field */
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.15s;
}
.g-field textarea { resize: vertical; min-height: 84px; }
.g-field input:focus, .g-field textarea:focus { border-color: var(--coral-btn); }
.g-field input[aria-invalid="true"] { border-color: var(--coral); }
.g-hint { font-size: 12.5px; color: var(--text-mid); }
.g-message-note[hidden] { display: none; }
.g-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.g-parent-city-zip:has(> [hidden]) { grid-template-columns: 130px; }
.g-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.g-row-city { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 0 12px; }

.g-note-box {
  background: var(--coral-light);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.g-note-box[hidden] { display: none; }

.g-error { color: var(--coral); font-size: 13.5px; font-weight: 600; margin: 4px 0 10px; }
.g-error[hidden] { display: none; }

.g-continue {
  margin-top: 22px;
  background: var(--ink-pill);
  color: var(--white);
  border: none;
  border-radius: 99px;
  padding: 11px 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.g-continue:hover { background: #000; }
/* A step's Continue (and the matched box's) sits at the right; full width on phones. */
.g-step .g-continue { display: block; margin-left: auto; }

/* ── Summary ───────────────────────────────────────────────── */
.g-summary {
  position: sticky;
  top: calc(var(--g-nav-h, 66px) + 16px);
  margin-bottom: 0;
}
.g-summary .summary-title { margin-bottom: 14px; }
#g-sum-lines > :last-child { margin-bottom: 0; }
.g-summary .summary-main-img { width: 64px; height: 64px; object-fit: cover; }
.g-summary .summary-main-img[hidden], .g-summary .summary-item[hidden], .g-summary .summary-item-subtitle[hidden] { display: none; }
.g-progress { display: flex; gap: 3px; margin-bottom: 8px; }
.g-progress-seg { flex: 1; height: 3px; border-radius: 2px; background: #E4DCD2; transition: background 0.2s; }
.g-progress-seg.is-done { background: var(--ink-pill); }
.g-progress-seg.is-current { background: var(--coral-deep); }
.g-progress-label { font-size: 12px; color: var(--text-mid); margin-bottom: 18px; }
.g-sum-tag { display: inline-flex; align-items: center; gap: 8px; }
.g-tag-img.is-tiny { height: 26px; }
.g-sum-tag { justify-content: flex-end; }
.g-pay {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: var(--coral-deep);
  color: var(--white);
  border: none;
  border-radius: 99px;
  padding: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.g-pay:hover:not(:disabled) { background: #7A3018; }
.g-pay[hidden] { display: none; }
.g-summary .g-pay { background: var(--ink-pill); }
.g-summary .g-pay:hover:not(:disabled) { background: #000; }
.g-pay:disabled { background: #ECE6DE; color: var(--text-dark); cursor: not-allowed; }
/* Express pay (Apple Pay / Google Pay), once only the giver's details are left */
.g-express { margin-top: 16px; }
.g-express[hidden] { display: none; }
#g-express-element { min-height: 44px; }
.g-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 -4px; font-size: 12.5px; color: var(--text-mid); }
.g-or::before, .g-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.g-or[hidden] { display: none; }

/* ── What they'll open + questions ─────────────────────────── */
.g-section { margin-top: 64px; }
.g-section h2 { font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.g-faq { max-width: 720px; }
/* The questions are <faq-gifts> (components/faq-gifts.js) in faqs.css's accordion, which reads these names. */
.g-faq { --ink: var(--text-dark); --ink-mid: var(--text-mid); --ink-lt: var(--border); }
.g-faq .faq-item summary h3 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; }

/* ── Payment modal (same as checkout) ──────────────────────── */
.payment-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; }
.payment-modal[hidden] { display: none; }
.payment-modal-backdrop { position: absolute; inset: 0; background: rgba(26, 18, 8, 0.55); }
.payment-modal-sheet {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 24px 64px rgba(26, 18, 8, 0.18);
}
.payment-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--cream); color: var(--text-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.payment-modal-close:hover { background: var(--border); color: var(--text-dark); }

@media (prefers-reduced-motion: reduce) {
  .g-skel, .g-hero.is-loading .g-hero-photo, .g-hero-photo.is-loading { animation: none; }
  /* No turning: the two faces crossfade instead. */
  .g-flip-inner, .g-flip.is-flipped .g-flip-inner { transition: none; transform: none; }
  .g-flip-face { transition: opacity 150ms ease; }
  .g-flip-back { transform: none; opacity: 0; }
  .g-flip.is-flipped .g-flip-front { opacity: 0; }
  .g-flip.is-flipped .g-flip-back { opacity: 1; }
  .g-step.is-entering { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Narrow screens ────────────────────────────────────────── */
@media (max-width: 900px) {
  .g-hero { flex-direction: column; min-height: 0; }
  .g-hero-text { padding: 32px 24px; }
  .g-hero.is-holiday .g-hero-text { padding-top: 88px; }
  .g-hero-stars { right: 16px; width: 130px; height: 77px; }
  .g-hero-photo { flex: 0 0 auto; aspect-ratio: 4 / 3; max-height: 420px; }
}

/* The steps and the 400px summary stack once the steps column would get cramped. */
@media (max-width: 960px) {
  .g-layout { grid-template-columns: minmax(0, 1fr); }
  .g-summary { position: static; }
}

@media (max-width: 640px) {
  .g-step .g-continue { width: 100%; }
  /* Step rows: the answer drops under the label. */
  .g-step-summary, .g-step-upcoming { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 2px; }
  .g-step-row-action { grid-column: 3; grid-row: 1; }
  .g-step-row-value { grid-column: 2 / 4; grid-row: 2; }
  .g-main { padding: 20px 16px 56px; }
  .g-hero-text { padding: 24px 16px; }
  .g-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-bundle-title { font-size: 19px; margin-top: 24px; }

  /* The starting box card: "Starting box", the name with its ages under it, and the two links in
     a row of their own under a line. */
  .g-start { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 0; }
  .g-start-photo { grid-row: 1; }
  .g-start-more { display: none; }
  .g-start-ages { display: block; font-size: 14px; font-weight: 400; color: var(--text-mid); }
  .g-start-foot {
    display: flex; justify-content: space-between; align-items: center; grid-column: 1 / -1;
    margin: 14px -16px 0; padding: 12px 16px; border-top: 1px solid var(--border);
  }
  .g-start-inside, .g-start-change { font-size: 14px; font-weight: 700; }

  /* The timeline: the dot, then "Months 1-2" over the box. */
  .g-plan-row { grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; }
  .g-plan-dot { grid-column: 1; grid-row: 1; margin-top: 4px; }
  .g-plan-when { grid-column: 2; grid-row: 1; font-size: 12px; padding-top: 0; }
  .g-plan-text { grid-column: 2; grid-row: 2; }

  /* The step Continue buttons and Pay move to the bar at the bottom. */
  .g-step .g-continue, .g-summary .g-pay { display: none; }
  body { padding-bottom: 76px; }
  .g-mbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--white); border-top: 1px solid var(--border);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(26, 18, 8, 0.06);
  }
  .g-mbar-sum { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; background: none; border: 0; padding: 0; font: inherit; color: var(--text-dark); text-align: left; cursor: pointer; }
  .g-mbar-line { font-size: 12px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .g-mbar-total { display: flex; align-items: center; gap: 6px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; }
  .g-mbar-total svg { transition: transform 0.2s ease; }
  .g-sheet-open .g-mbar-total svg { transform: rotate(180deg); }
  .g-mbar-go { flex-shrink: 0; background: var(--ink-pill); color: var(--white); border: 0; border-radius: 999px; padding: 13px 26px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
  /* "Your gift" slides up over the page from the bar. */
  /* top: auto undoes the desktop card's sticky top, which would stretch the sheet and lift it off the bar. */
  .g-summary {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 75; margin: 0;
    max-height: 82vh; overflow-y: auto; border-radius: 20px 20px 0 0;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translateY(105%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .g-sheet-open .g-summary { transform: none; visibility: visible; transition: transform 0.25s ease; }
  /* A grab handle, and no easing while it follows the finger. */
  .g-summary::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 999px; background: var(--border); margin: -4px auto 12px; }
  .g-summary.is-dragging { transition: none; }
  .g-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(26, 18, 8, 0.35); }
  .g-sheet-backdrop[hidden] { display: none; }
  .g-sheet-open { overflow: hidden; }
  .g-plan { padding: 18px 16px 4px; }
  .g-egift-how { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g-egift-steps, .g-egift-email { padding: 18px 16px; }
  /* One line on phones: smaller type and a tighter gap. Wraps only on the narrowest screens. */
  .g-holiday { font-size: 12px; padding: 8px 12px; }
  .g-holiday-inner { gap: 2px 14px; }
  .g-holiday-inner span { white-space: nowrap; }
  .g-row, .g-row-3 { grid-template-columns: 1fr; }
  .g-row-city { grid-template-columns: minmax(0, 1fr) 110px; }
  .g-step h2 { font-size: 21px; }
  .payment-modal { align-items: flex-end; }
  .payment-modal-sheet { width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 92vh; }

  /* The hero: copy on the left and the box on the right, no full-width photo. */
  .g-hero { flex-direction: row; align-items: center; gap: 14px; padding-right: 16px; }
  .g-hero-text, .g-hero.is-holiday .g-hero-text { padding: 26px 0 28px 20px; }
  .g-hero h1 { font-size: clamp(21px, 6.6vw, 26px); line-height: 1.08; margin-bottom: 10px; text-wrap: wrap; }
  /* "grows with them" stays on one line. */
  .g-nowrap { white-space: nowrap; }
  .g-hero-text { min-width: 0; }
  .g-hero p { font-size: 15px; line-height: 1.45; }
  .g-hero #g-hero-sub, .g-hero-photo, .g-hero-actions { display: none; }
  /* The holiday snowflakes hang on the right, over the box, which sits low to make room. */
  .g-hero.is-holiday { position: relative; }
  .g-hero.is-holiday .g-hero-text { position: static; }
  .g-hero.is-holiday .g-hero-stars { top: 0; right: 22px; width: 118px; height: 70px; }
  .g-hero.is-holiday .g-hero-tile { align-self: flex-end; margin: 72px 0 26px; }
  .g-hero-sub-phone { display: block; }
  .g-hero-tile { display: block; flex: 0 0 112px; aspect-ratio: 480 / 410; border-radius: 14px; overflow: hidden; background: var(--sand); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
  .g-hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .g-hero.is-loading .g-hero-tile { background: #EEE8E1; box-shadow: none; }
  .g-hero.is-loading .g-hero-tile img { visibility: hidden; }
  /* The holiday box is cut out, so it sits right on the green, a bit bigger, with no frame. */
  .g-hero.is-holiday .g-hero-tile { flex-basis: clamp(96px, 30vw, 132px); aspect-ratio: 480 / 431; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
  .g-hero.is-holiday .g-hero-tile img { object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)); }
  /* A shorter hero, so the first screen fits down to the FAQ link above the bar: a smaller box
     under smaller snowflakes. */
  .g-hero-text, .g-hero.is-holiday .g-hero-text { padding: 20px 0 20px 20px; }
  .g-hero h1 { margin-bottom: 6px; }
  .g-hero .g-hero-sub-phone { text-wrap: balance; }
  .g-hero.is-holiday .g-hero-stars { right: 18px; width: 84px; height: 50px; }
  .g-hero.is-holiday .g-hero-tile { flex-basis: 92px; margin: 34px 0 10px; }

  /* The first screen, until they start (html.g-started): no steps or gift bar yet. */
  html:not(.g-started) .g-layout, html:not(.g-started) .g-mbar { display: none; }
  html:not(.g-started) body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  html:not(.g-started) .g-intro { display: block; padding: 24px 16px 4px; }
  html:not(.g-started) .g-intro-bar { display: flex; }
  .g-intro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .g-intro-head h2 { font-size: 21px; font-weight: 700; }
  .g-intro-time { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-mid); white-space: nowrap; }
  .g-intro-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .g-intro-step { display: flex; align-items: center; gap: 14px; background: var(--white); border-radius: 16px; padding: 14px 16px; }
  .g-intro-icon { flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .g-intro-icon.is-coral { background: var(--coral-lt); color: var(--coral-deep); }
  .g-intro-icon.is-sand { background: #F6EBCF; color: #6E5A1E; }
  .g-intro-icon.is-sage { background: #E2ECE3; color: var(--sage-dk); }
  .g-intro-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .g-intro-text strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; }
  .g-intro-text span { font-size: 14px; color: var(--text-mid); }
  .g-intro-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  /* The underline runs under the words only, unbroken by the g, and not under the arrow. */
  .g-intro-faq { display: inline-block; margin-top: 18px; color: var(--coral-deep); font-size: 15px; font-weight: 600; text-decoration: none; }
  .g-intro-faq-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-skip-ink: none; }
  .g-intro-faq-arrow { margin-left: 8px; }
  /* The FAQ starts right under the first screen, so its heading peeks above the bar. */
  html:not(.g-started) .g-main { padding-top: 0; }
  html:not(.g-started) .g-faq { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--g-nav-h, 66px) + 4px); }
  html:not(.g-started) .g-intro { padding-bottom: 0; }
  .g-intro-faq { margin-top: 12px; }
  html:not(.g-started) .g-intro-head { margin-bottom: 10px; }
  html:not(.g-started) .g-intro-steps { gap: 8px; }
  html:not(.g-started) .g-intro-step { padding: 10px 16px; }
  html:not(.g-started) .g-intro { padding-top: 18px; }
  html:not(.g-started) .g-intro-icon { flex-basis: 40px; height: 40px; }
  html:not(.g-started) .g-intro-pills { margin-top: 12px; }
  .g-intro-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(251, 247, 243, 0), var(--cream)); opacity: 0; transition: opacity 0.2s; }
  .g-intro-bar { transition: box-shadow 0.2s; }
  .g-intro-bar.has-more::before { opacity: 1; }
  .g-intro-bar.has-more { box-shadow: 0 -8px 24px rgba(26, 18, 8, 0.12); }
  .g-intro-pills span { background: #E2ECE3; color: var(--sage-dk); font-size: 13px; font-weight: 600; border-radius: 999px; padding: 5px 12px; }
  .g-intro-bar {
    flex-direction: column; align-items: center; gap: 6px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--white); border-top: 1px solid var(--border);
    padding: 10px 16px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(26, 18, 8, 0.06);
  }
  .g-intro-start { width: 100%; background: var(--coral-deep); color: var(--white); border: 0; border-radius: 999px; padding: 13px 24px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; }
  .g-intro-egift { background: none; border: 0; padding: 2px 0; color: var(--coral-deep); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-skip-ink: none; cursor: pointer; }
  .g-intro-start:focus-visible, .g-intro-egift:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; }

  /* Copy written for phones (.g-phone) in place of the wider screens' (.g-wide). */
  .g-wide { display: none; }
  .g-phone { display: inline; }

  /* Once started, one step per screen: no nav, hero or FAQ, and the bar with back, the step count
     and the time left on top. At review (html.g-reviewing) every step's row shows again. */
  html.g-started site-nav, html.g-started .g-holiday, html.g-started .g-hero,
  html.g-started .g-faq, html.g-started site-footer { display: none; }
  html.g-started .g-main { padding-top: 0; }
  html.g-started .g-wiz-head {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 60; background: var(--cream);
    margin: 0 -16px 26px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
  }
  .g-wiz-back { flex: 0 0 36px; height: 36px; margin-left: -8px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--text-dark); cursor: pointer; }
  .g-wiz-back:focus-visible { outline: 2px solid var(--coral-deep); }
  .g-wiz-meta { flex: 1; min-width: 0; }
  .g-wiz-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; margin-bottom: 7px; }
  .g-wiz-line strong { font-weight: 700; }
  .g-wiz-line span { color: var(--text-mid); white-space: nowrap; }
  .g-wiz-head .g-progress { gap: 5px; margin: 0; }
  .g-wiz-head .g-progress-seg { height: 4px; }
  html.g-started:not(.g-reviewing) .g-step:not(.is-active) { display: none; }
  html.g-started:not(.g-reviewing) .g-step + .g-step { border-top: 0; }
  html.g-started:not(.g-reviewing) .g-step.is-active .g-step-body { padding-top: 0; }
  html.g-started .g-step h2 { font-size: 27px; line-height: 1.15; margin-bottom: 8px; }
  html.g-started .g-step-sub { font-size: 15px; margin-bottom: 18px; }

  /* Ways to give: cards with an icon, and the radio at the right. */
  .g-mode-list { display: flex; flex-direction: column; gap: 12px; }
  .g-mode { gap: 16px; background: var(--white); border: 1.5px solid #EDE4DA; border-radius: 16px; padding: 14px 18px 14px 16px; }
  .g-mode:hover { background: var(--white); }
  .g-mode:focus-visible { border-radius: 16px; }
  .g-mode.is-selected { border-color: var(--coral-deep); }
  .g-mode-icon { display: flex; flex: 0 0 56px; height: 56px; border-radius: 14px; align-items: center; justify-content: center; }
  .g-mode-icon svg { width: 30px; height: 30px; }
  .g-mode-icon.is-coral svg { width: 34px; height: 34px; }
  .g-mode-icon.is-sand { background: #F6EBCF; color: #6E5A1E; }
  .g-mode-icon.is-coral { background: var(--coral-lt); color: var(--coral-deep); }
  .g-mode-icon.is-sage { background: #E2ECE3; color: var(--sage-dk); }
  .g-mode-radio { order: 3; width: 24px; height: 24px; border-color: #8C7F76; }
  .g-mode.is-selected .g-mode-radio { border-color: var(--coral-deep); }
  .g-mode.is-selected .g-mode-radio::after { inset: 4px; background: var(--coral-deep); }
  .g-mode-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; }
  .g-mode-desc { font-size: 15px; }

  /* The bar: what's next until there's a price, and Continue in terracotta. */
  .g-mbar.is-unpriced .g-mbar-total { display: none; }
  .g-mbar.is-unpriced .g-mbar-line { font-size: 15px; }
  .g-mbar-go { background: var(--coral-deep); font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; padding: 14px 34px; }
  /* Priced: the total over the line, no caret. */
  .g-mbar-sum { flex-direction: column-reverse; }
  .g-mbar-total svg { display: none; }
  .g-mbar:not(.is-unpriced) .g-mbar-line { font-size: 14px; }
  .g-phone-block { display: block; }
  .g-wiz-head .g-progress-seg.is-done { background: var(--coral-deep); }

  /* The answers on the screen before, in a bar under the header, with Change. */
  html.g-started .g-wiz-prev:not([hidden]) {
    display: flex; align-items: center; gap: 10px; margin: -26px -16px 24px; padding: 12px 16px;
    border-bottom: 1px solid var(--border); font-size: 15px;
  }
  .g-wiz-prev-check { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sage-dk); color: var(--white); display: flex; align-items: center; justify-content: center; }
  .g-wiz-prev-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-wiz-prev-change { background: none; border: 0; padding: 0; color: var(--coral-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  /* A screen's other steps (html .is-mate) open under the first, without their rows. */
  html.g-started:not(.g-reviewing) .g-step.is-mate { display: block; }
  html.g-started:not(.g-reviewing) .g-step.is-mate .g-step-summary, html.g-started:not(.g-reviewing) .g-step.is-mate .g-step-upcoming { display: none; }
  html.g-started:not(.g-reviewing) .g-step.is-mate .g-step-body { display: block; padding-top: 28px; }

  /* Step 2: once the age picks a box it folds to a row with Change, and the months swipe sideways. */
  html.g-started .g-age-done:not([hidden]) { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; background: var(--white); border-radius: 14px; padding: 12px 16px; }
  .g-age-done-text { flex: 1; min-width: 0; }
  html.g-started .g-mode-egift, html.g-started .g-age-month-label { display: none; }
  html.g-started #g-age-year-label { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
  /* The box buttons in a grid, three across ("11-12 months+" needs the room), as on the homepage
     box picker. */
  .g-age-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .g-age-months .g-pill { padding: 10px 0; font-size: 13.5px; border-radius: 14px; text-align: center; }
  .g-age-months .g-pill.is-selected { background: var(--coral-lt); border-color: var(--coral-deep); color: var(--coral-deep); }

  /* The first box: photo, name, toys and ages, and Peek inside on the right. */
  html.g-started .g-start { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; padding: 14px 16px; margin-top: 12px; border: 0; border-radius: 16px; background: var(--white); }
  html.g-started .g-start-photo { width: 64px; height: 56px; grid-row: 1; }
  html.g-started .g-start-foot { display: block; grid-column: 3; grid-row: 1; margin: 0; padding: 0; border: 0; }
  html.g-started .g-start-change { display: none; }
  html.g-started .g-start-inside { font-size: 15px; font-weight: 700; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; }
  html.g-started .g-start-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  html.g-started .g-start-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; }
  .g-start-toys { font-size: 14px; color: var(--text-mid); }

  /* How long: one line per option, "2 boxes: 4 months", the badge under it, and savings under the price. */
  html.g-started .g-bundle-title { font-size: 18px; margin-top: 26px; }
  html.g-started .g-bundle-sub, html.g-started .g-bundle-note, html.g-started .g-plan { display: none; }
  html.g-started .g-bundles { margin-top: 12px; }
  html.g-started .g-bundle-card { grid-template-columns: 24px auto minmax(0, 1fr) auto; column-gap: 0; align-items: center; padding: 16px 18px 16px 16px; border-radius: 16px; }
  html.g-started .g-bundle-main, html.g-started .g-bundle-cost, html.g-started .g-bundle-head, html.g-started .g-bundle-price { display: contents; }
  html.g-started .g-bundle-radio { grid-column: 1; grid-row: 1 / 3; width: 24px; height: 24px; margin: 0 14px 0 0; align-self: center; }
  html.g-started .g-bundle-card.is-selected .g-bundle-radio::after { inset: 4px; }
  html.g-started .g-bundle-name { grid-column: 2; grid-row: 1; margin-left: 14px; font-size: 18px; }
  html.g-started .g-bundle-months { display: inline; grid-column: 3; grid-row: 1; font-size: 17px; color: var(--text-mid); white-space: nowrap; }
  html.g-started .g-bundle-name::after { content: ':'; }
  html.g-started .g-bundle-months { margin-left: 0.3em; }
  html.g-started .g-bundle-badge { grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-left: 14px; background: none; padding: 0; font-size: 14px; color: #7A5A0F; }
  html.g-started .g-bundle-price strong { grid-column: 4; grid-row: 1; justify-self: end; font-size: 19px; }
  html.g-started .g-bundle-save { grid-column: 4; grid-row: 2; justify-self: end; margin: 0; font-size: 14px; }
  html.g-started .g-bundle-reason { grid-column: 2 / 5; grid-row: 2; margin-left: 14px; }
  html.g-started .g-bundle-stages, html.g-started .g-bundle-each, html.g-started .g-bundle-price s { display: none; }
  html.g-started .g-bundle-card.is-selected { background: var(--white); }

  /* What they'll get: a tile per box and the last pickup. */
  .g-plan-tiles { margin-top: 26px; }
  .g-plan-tiles-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 10px; }
  .g-plan-tiles ol { list-style: none; display: grid; grid-template-columns: repeat(var(--g-tiles), minmax(0, 1fr)); gap: 8px; }
  .g-plan-tiles li { display: flex; }
  .g-plan-tile { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--white); border: 0; border-radius: 14px; padding: 14px 6px 12px; font: inherit; color: inherit; }
  button.g-plan-tile { cursor: zoom-in; }
  button.g-plan-tile:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }
  .g-plan-tile img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: var(--sand); }
  .g-plan-tile svg { height: 42px; margin-bottom: 8px; color: var(--text-dark); }
  .g-plan-tile.is-end { background: #EFE6DB; }
  .g-plan-tile strong { font-size: 15px; line-height: 1.25; }
  .g-plan-tile span { font-size: 13px; color: var(--text-mid); line-height: 1.3; margin-top: 2px; }
  .g-plan-tiles-foot { font-size: 14px; color: var(--text-mid); margin-top: 12px; }
  .g-age-months { position: relative; }
  html.g-started .g-start-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Screen 3: tag, note and delivery day. Their subheads match "Pick a tag". */
  html.g-started .g-tag-label, html.g-started .g-field label[for="g-message"], html.g-started #g-when-title {
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px;
  }
  html.g-started .g-step.is-mate #g-when-title { margin-bottom: 2px; }
  html.g-started #g-day-note { font-size: 14px; margin-bottom: 12px; }
  html.g-started .g-tags { grid-template-columns: repeat(var(--g-tag-cols), minmax(0, 1fr)); gap: 8px; }
  html.g-started #g-message { min-height: 96px; border-radius: 14px; }
  html.g-started .g-tag-badge { display: none; }
  /* Screen 3 fits on one screen too: smaller tags, a two-line note and shorter day buttons. */
  html.g-started .g-step[data-step="note"] h2 { font-size: 22px; margin-bottom: 10px; }
  html.g-started .g-tag-label, html.g-started .g-field label[for="g-message"], html.g-started #g-when-title { font-size: 16px; margin-bottom: 6px; }
  html.g-started .g-tags { margin-bottom: 16px; }
  html.g-started .g-tag-pick { padding: 8px 4px 7px; gap: 4px; font-size: 12px; }
  html.g-started .g-tag-pick .g-tag-img { height: 54px; }
  html.g-started .g-tag-name { line-height: 1.2; }
  html.g-started .g-tag-zoom { top: 4px; right: 4px; width: 24px; height: 24px; }
  html.g-started .g-tag-zoom svg { width: 13px; height: 13px; }
  html.g-started .g-tag-card.is-selected { border-color: var(--coral-deep); background: var(--coral-lt); }
  html.g-started #g-message { min-height: 0; height: 64px; padding: 10px 14px; }
  html.g-started .g-step[data-step="note"] .g-field { margin-bottom: 0; gap: 4px; }
  html.g-started:not(.g-reviewing) .g-step[data-step="when"].is-mate .g-step-body { padding-top: 16px; }
  /* No gap under a step when the next one shares its screen. */
  html.g-started:not(.g-reviewing) .g-step.is-active:has(+ .g-step.is-mate) { padding-bottom: 0; }
  html.g-started #g-day-note { font-size: 13px; margin-bottom: 8px; }
  #g-day-pills { gap: 8px; }
  #g-day-pills .g-pill { padding: 6px 4px; font-size: 16px; }
  #g-day-pills .g-pill-more { font-size: 15px; }
  .g-day-two small { font-size: 12px; }
  html.g-started .g-return { padding: 9px 14px; margin-top: 10px; }
  .g-return-phone { font-size: 14px; }
  #g-day-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #g-day-pills .g-pill { border-radius: 14px; padding: 10px 4px; font-size: 18px; font-weight: 700; text-align: center; }
  #g-day-pills .g-pill-more { font-size: 16px; color: var(--coral-deep); border-style: dashed; }
  #g-day-pills .g-pill.is-selected { background: var(--coral-lt); border-color: var(--coral-deep); color: var(--coral-deep); }
  .g-day-two small { display: block; font-size: 14px; font-weight: 500; margin: 0; opacity: 1; }
  html.g-started .g-return { background: #E2ECE3; border: 0; padding: 11px 16px; margin-top: 14px; }
  html.g-started .g-return-title, html.g-started .g-return-sub { display: none; }
  .g-return-phone { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-dark); }
  .g-return-phone svg { flex-shrink: 0; color: var(--sage-dk); }

  /* Screen 4: who it's for, then you, then the gift and Pay. */
  html.g-started #g-who-sub { display: none; }
  .g-who-free { display: inline-flex; align-items: center; gap: 8px; background: #E2ECE3; color: var(--sage-dk); font-size: 15px; font-weight: 600; border-radius: 999px; padding: 6px 14px; margin: 4px 0 18px; }
  .g-who-free svg { flex-shrink: 0; }
  html.g-started .g-step[data-step="you"].is-mate .g-step-body { margin-top: 28px; border-top: 1px solid var(--border); }
  .g-add-apt { background: none; border: 0; padding: 0; margin: -4px 0 16px; color: var(--coral-deep); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .g-parent-line2:not(.is-open) { display: none; }
  .g-parent-line2.is-open + * { margin-top: 0; }
  .g-add-apt:has(+ .g-parent-line2.is-open) { display: none; }
  .g-wiz-sum { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 24px; padding: 16px 18px; background: var(--white); border: 0; border-radius: 16px; text-align: left; cursor: pointer; }
  .g-wiz-sum svg { flex-shrink: 0; }
  .g-wiz-sum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
  .g-wiz-sum-text strong { font-size: 16px; }
  .g-wiz-sum-text span { font-size: 14px; color: var(--text-mid); }
  .g-wiz-sum-price { font-size: 18px; }
  /* The last screen's bar: Pay across the width, and the line under it. */
  .g-mbar.is-last { flex-direction: column; gap: 8px; }
  html.g-started body:has(.g-mbar.is-last) { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .g-mbar.is-last .g-mbar-sum { display: none; }
  .g-mbar.is-last .g-mbar-go { width: 100%; padding: 16px; font-size: 19px; }
  /* Screen 4: short fields, names two to a row, and the pill beside the title. */
  html.g-started .g-step[data-step="who"] .g-step-body, html.g-started .g-step[data-step="you"] .g-step-body { display: flex; flex-direction: column; }
  html.g-started .g-step[data-step="who"] h2 { font-size: 22px; margin: 0; }
  html.g-started .g-step[data-step="who"] .g-step-body { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
  html.g-started .g-step[data-step="who"] .g-step-body > :not(h2):not(.g-who-free) { grid-column: 1 / -1; }
  html.g-started .g-who-free { justify-self: start; margin: 0; padding: 3px 10px; font-size: 13px; gap: 5px; }
  html.g-started .g-step[data-step="who"] .g-row:first-of-type { margin-top: 12px; }
  html.g-started .g-step[data-step="who"] .g-field, html.g-started .g-step[data-step="you"] .g-field { margin-bottom: 8px; gap: 3px; }
  html.g-started .g-step[data-step="who"] .g-field label, html.g-started .g-step[data-step="you"] .g-field label { font-size: 12.5px; }
  html.g-started .g-step[data-step="who"] .g-field input, html.g-started .g-step[data-step="you"] .g-field input { padding: 8px 12px; }
  html.g-started .g-row { gap: 10px; }
  html.g-started .g-step[data-step="you"] .g-row { grid-template-columns: 1fr 1fr; }
  html.g-started .g-add-apt { margin: -2px 0 8px; font-size: 14px; }
  html.g-started .g-step[data-step="you"].is-mate .g-step-body { margin-top: 6px; padding-top: 12px; }
  html.g-started .g-step[data-step="you"] h2 { font-size: 18px; margin-bottom: 6px; }
  html.g-started .g-wiz-sum { margin-top: 6px; padding: 9px 14px; gap: 12px; }
  html.g-started .g-wiz-sum svg { width: 34px; height: 34px; }
  html.g-started .g-wiz-sum-text strong { font-size: 14.5px; }
  html.g-started .g-wiz-sum-text span { font-size: 12.5px; }
  html.g-started .g-wiz-sum-price { font-size: 16px; }
  html.g-started .g-step[data-step="who"] .g-field, html.g-started .g-step[data-step="you"] .g-field { margin-bottom: 6px; }
  html.g-started .g-step[data-step="who"] .g-row:first-of-type { margin-top: 8px; }
  html.g-started .g-step[data-step="you"].is-mate .g-step-body { padding-top: 10px; }
  /* Your email and phone each get a line; the names stay side by side. */
  html.g-started .g-step[data-step="you"] .g-row + .g-row { grid-template-columns: 1fr; gap: 0; }
  /* Slightly shorter fields, with each one's hint under it. */
  html.g-started .g-step[data-step="you"] h2 { font-size: 20px; margin-bottom: 6px; }
  html.g-started .g-step[data-step="who"] .g-hint, html.g-started .g-step[data-step="you"] .g-hint { font-size: 12.5px; margin-top: 1px; }
  html.g-started .g-step[data-step="who"] .g-field input, html.g-started .g-step[data-step="you"] .g-field input { padding: 7px 12px; }
  html.g-started .g-step[data-step="who"] .g-field, html.g-started .g-step[data-step="you"] .g-field { margin-bottom: 5px; }
  html.g-started .g-step[data-step="you"].is-mate .g-step-body { margin-top: 4px; padding-top: 8px; }
  html.g-started .g-wiz-sum { margin-top: 4px; padding: 7px 14px; }
  .g-wiz-sum-img { flex-shrink: 0; width: 52px; height: 40px; object-fit: contain; }
  .g-wiz-sum-img[hidden] { display: none; }
  html.g-started .g-step[data-step="who"] .g-field, html.g-started .g-step[data-step="you"] .g-field { margin-bottom: 4px; }
  html.g-started .g-mbar.is-last { gap: 6px; padding-top: 10px; }
  html.g-started .g-mbar.is-last .g-mbar-go { padding: 13px; }

  /* The last screen's bar: "Your gift" and the count, the total with its caret, then Pay. */
  .g-mbar.is-last .g-mbar-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; }
  .g-mbar.is-last .g-mbar-title { display: block; grid-column: 1; grid-row: 1; font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; }
  .g-mbar.is-last .g-mbar-line { grid-column: 1; grid-row: 2; font-size: 13px; }
  .g-mbar.is-last .g-mbar-total { grid-column: 2; grid-row: 1 / 3; font-size: 20px; gap: 10px; }
  .g-mbar.is-last .g-mbar-total svg { display: block; width: 14px; height: 14px; }
  /* With the sheet open, its own Total row stands in for the bar's. */
  .g-sheet-open .g-mbar.is-last .g-mbar-sum { display: none; }

  /* "Your gift" as a sheet: the phone rows (.g-psum) in place of the card's. */
  html.g-started .g-summary .summary-title, html.g-started .g-summary .g-progress, html.g-started .g-summary .g-progress-label,
  html.g-started #g-sum-item, html.g-started #g-sum-lines, html.g-started #g-sum-total { display: none; }
  html.g-started .g-psum, html.g-started .g-psum-total { display: block; }
  html.g-started .g-summary { padding: 18px 18px calc(100px + env(safe-area-inset-bottom)); }
  .g-psum-head img { flex-shrink: 0; width: 52px; height: 42px; object-fit: contain; }
  .g-psum-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .g-psum-head svg { flex-shrink: 0; }
  .g-psum-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .g-psum-title strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; }
  .g-psum-title span { font-size: 13.5px; color: var(--text-mid); }
  .g-psum-close { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 0; background: #F1E8DE; color: var(--text-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .g-psum-items, .g-psum-facts { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; }
  .g-psum-items { border-bottom: 1px solid var(--border); }
  .g-psum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
  .g-psum-row > span:first-child { min-width: 0; }
  .g-psum-row strong { font-weight: 700; }
  .g-psum-age { color: var(--text-mid); }
  .g-psum-row small { display: block; font-size: 13px; color: var(--text-mid); margin-top: 1px; }
  .g-psum-row.is-savings { color: var(--sage-dk); font-weight: 700; }
  .g-psum-facts .g-psum-row > span:first-child { color: var(--text-mid); }
  .g-psum-tag { display: inline-flex; align-items: center; gap: 8px; }
  .g-psum-remove { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--coral-deep); text-decoration: underline; cursor: pointer; }
  html.g-started #g-promo { padding-bottom: 6px; }
  .g-psum-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; }
  .g-psum-row.is-total { align-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 700; }
  .g-psum-row.is-total > span:last-child { font-size: 28px; }
  html.g-started #g-promo .summary-promo-toggle { color: var(--coral-deep); font-weight: 700; font-size: 15px; text-underline-offset: 3px; }
  /* The last screen's bar: Apple Pay and Google Pay, a soft "or", then Continue to payment. */
  .g-mbar #g-express { width: 100%; margin: 2px 0 0; }
  .g-mbar #g-express-or { display: block; margin: 4px 0 -2px; text-align: center; font-size: 13px; color: var(--text-mid); }
  .g-mbar #g-express-or::before, .g-mbar #g-express-or::after { content: none; }
  /* The bar is taller with them, so the page and Your gift make room for its measured height, and
     Your gift grows to nearly the full screen with tighter rows. On a phone too short for it all,
     the total stays pinned above the bar and the rows above it scroll. */
  html.g-started body:has(#g-mbar > #g-express:not([hidden])) { padding-bottom: calc(var(--g-mbar-h, 280px) + 16px); }
  html.g-started:has(#g-mbar > #g-express:not([hidden])) .g-summary {
    max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    padding-bottom: var(--g-mbar-h, calc(280px + env(safe-area-inset-bottom)));
  }
  html.g-started:has(#g-mbar > #g-express:not([hidden])) .g-psum-total { position: sticky; bottom: 0; z-index: 1; background: var(--white); margin-top: 4px; padding: 12px 0 14px; }
  html.g-started:has(#g-mbar > #g-express:not([hidden])) .g-psum-head { padding-bottom: 10px; }
  html.g-started:has(#g-mbar > #g-express:not([hidden])) :is(.g-psum-items, .g-psum-facts) { gap: 8px; padding: 10px 0; }

  /* More below the bar: a cream fade over the fields and a shadow on the bar, gone at the bottom. */
  .g-mbar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(251, 247, 243, 0), var(--cream)); opacity: 0; transition: opacity 0.2s; }
  .g-mbar { transition: box-shadow 0.2s; }
  .g-mbar.has-more::before { opacity: 1; }
  .g-mbar.has-more { box-shadow: 0 -8px 24px rgba(26, 18, 8, 0.12); }
  /* With the sheet open, it and the bar are one white surface: no line, shadow or fade between. */
  .g-sheet-open .g-mbar::before { display: none; }
  .g-sheet-open .g-mbar, .g-sheet-open .g-mbar.has-more { border-top-color: transparent; box-shadow: none; }
  html.g-started .g-summary { border: 0; background: var(--white); }
  /* Phone screens show their parts at once, with no fade up (the box card, How long, the next step). */
  html.g-started .g-step.is-entering, html.g-started .g-start.is-entering { animation: none; }
  /* Each hint sits right under its field, with more room before the next label. */
  html.g-started .g-step[data-step="who"] .g-hint, html.g-started .g-step[data-step="you"] .g-hint { line-height: 1.3; margin-top: 0; }
  html.g-started .g-step[data-step="who"] .g-field, html.g-started .g-step[data-step="you"] .g-field { margin-bottom: 12px; }
  html.g-started .g-step[data-step="who"] .g-row .g-field, html.g-started .g-step[data-step="you"] .g-row .g-field,
  html.g-started .g-step[data-step="who"] .g-row-city .g-field, html.g-started .g-step[data-step="you"] .g-row-city .g-field { margin-bottom: 12px; }
  html.g-started .g-add-apt { margin: -6px 0 12px; }
  .g-mbar.is-last .g-mbar-note { display: block; font-size: 13px; color: var(--text-mid); word-spacing: 0; }
  /* First and last names side by side, as on wider screens. */
  html.g-started .g-step[data-step="who"] .g-row, html.g-started .g-step[data-step="you"] .g-row:first-of-type { grid-template-columns: 1fr 1fr; }
  html.g-started .g-field label { font-size: 15px; font-weight: 600; }

  /* Step 2 fits on one screen: tighter rows and spacing throughout. */
  html.g-started .g-step[data-step="box"] h2 { font-size: 24px; margin-bottom: 4px; }
  html.g-started .g-step[data-step="box"] #g-age-year-label { font-size: 16px; margin-bottom: 8px; }
  html.g-started .g-age-months { margin-top: 8px; }
  html.g-started .g-age-months .g-pill { padding: 8px 0; font-size: 13.5px; }
  html.g-started .g-start { margin-top: 14px; padding: 10px 14px; grid-template-columns: 52px minmax(0, 1fr) auto; }
  html.g-started .g-start-photo { width: 52px; height: 44px; }
  html.g-started .g-start-eyebrow { font-size: 11px; }
  html.g-started .g-start-name { font-size: 17px; line-height: 1.2; }
  html.g-started .g-start-toys { font-size: 13px; }
  html.g-started .g-bundle-title { font-size: 16px; margin-top: 16px; }
  html.g-started .g-bundles { margin-top: 8px; gap: 8px; }
  html.g-started .g-bundle-card { padding: 9px 14px 9px 12px; border-radius: 14px; }
  html.g-started .g-bundle-radio { width: 20px; height: 20px; margin-right: 12px; }
  html.g-started .g-bundle-card.is-selected .g-bundle-radio::after { inset: 3.5px; }
  html.g-started .g-bundle-name { font-size: 16px; margin-left: 12px; }
  html.g-started .g-bundle-months { font-size: 15px; }
  html.g-started .g-bundle-badge, html.g-started .g-bundle-save { font-size: 12.5px; line-height: 1.3; }
  html.g-started .g-bundle-badge { margin-left: 12px; }
  html.g-started .g-bundle-price strong { font-size: 17px; }
  html.g-started .g-plan-tiles { margin-top: 16px; }
  html.g-started .g-plan-tiles-title { font-size: 16px; margin-bottom: 8px; }
  html.g-started .g-plan-tile { padding: 8px 4px; border-radius: 12px; }
  html.g-started .g-plan-tile img, html.g-started .g-plan-tile svg { width: 40px; height: 30px; margin-bottom: 4px; }
  html.g-started .g-plan-tile strong { font-size: 13.5px; }
  html.g-started .g-plan-tile span { font-size: 12px; }
  html.g-started .g-plan-tiles-foot { display: none; }
  html.g-started .g-wiz-prev:not([hidden]) { padding: 9px 16px; margin-bottom: 16px; }
  html.g-started .g-wiz-head { padding: 10px 16px 10px; }
  html.g-started body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  html.g-started .g-step[data-step="box"] h2 { font-size: 22px; margin-bottom: 2px; }
  html.g-started .g-step[data-step="box"] #g-age-year-label { font-size: 15px; margin-bottom: 6px; }
  html.g-started .g-bundle-card { padding: 7px 14px 7px 12px; }
  html.g-started .g-bundle-title { margin-top: 12px; }
  /* What they'll get: small tiles, the picture over the name. */
  html.g-started .g-plan-tiles { margin-top: 12px; }
  html.g-started .g-plan-tiles-title { font-size: 15px; margin-bottom: 6px; }
  html.g-started .g-plan-tile { padding: 6px 4px 7px; }
  html.g-started .g-plan-tile img, html.g-started .g-plan-tile svg { width: 34px; height: 24px; margin-bottom: 3px; }
  html.g-started .g-plan-tile strong { font-size: 12.5px; line-height: 1.2; }
  html.g-started .g-plan-tile span { display: none; }
  /* How long: the badge under the name and savings under the price, every row the same height. */
  html.g-started .g-bundles { gap: 8px; margin-top: 8px; }
  html.g-started .g-bundle-card { min-height: 60px; align-content: center; padding: 8px 16px 8px 14px; }
  html.g-started .g-bundle-radio { width: 22px; height: 22px; margin: 0; border: 1.5px solid #6E6560; }
  html.g-started .g-bundle-card.is-selected .g-bundle-radio { border-color: var(--coral-deep); }
  html.g-started .g-bundle-card.is-selected .g-bundle-radio::after { inset: 4px; }
  html.g-started .g-bundle-name, html.g-started .g-bundle-badge, html.g-started .g-bundle-reason { margin-left: 14px; }
  html.g-started .g-bundle-badge, html.g-started .g-bundle-badge.is-value { background: none; color: #7A5A0F; }
  /* The durations stay under each tile's name. */
  html.g-started .g-plan-tile span { display: block; font-size: 11.5px; margin-top: 1px; }
  html.g-started .g-plan-tile { padding: 6px 4px; }
  html.g-started .g-plan-tile img, html.g-started .g-plan-tile svg { width: 32px; height: 22px; margin-bottom: 2px; }
  /* Room for them: slimmer age pills and box card. */
  html.g-started .g-age-months { margin-top: 6px; }
  html.g-started .g-age-months .g-pill { padding: 6px 0; }
  html.g-started .g-start { margin-top: 10px; padding: 8px 14px; }
  html.g-started .g-start-photo { width: 46px; height: 40px; }
  html.g-started .g-start { grid-template-columns: 46px minmax(0, 1fr) auto; }
  html.g-started .g-bundle-title { margin-top: 10px; }
  /* Bigger pictures in the box card and the tiles. */
  html.g-started .g-start { grid-template-columns: 60px minmax(0, 1fr) auto; }
  html.g-started .g-start-photo { width: 60px; height: 50px; }
  html.g-started .g-start-photo { background: none; border-radius: 0; }
  html.g-started .g-start-photo img { object-fit: contain; }
  html.g-started .g-plan-tile img, html.g-started .g-plan-tile svg { width: 52px; height: 38px; margin-bottom: 4px; }
  html.g-started .g-plan-tile svg { width: 40px; }
  /* The whole box shows, not cropped. */
  html.g-started .g-plan-tile img { object-fit: contain; background: none; border-radius: 0; }
  /* Four tiles (a 3 box gift): smaller words so each stays on its line. */
  html.g-started .g-plan-tiles ol[style*="--g-tiles:4"] { gap: 6px; }
  html.g-started .g-plan-tiles ol[style*="--g-tiles:4"] .g-plan-tile { padding-left: 2px; padding-right: 2px; }
  html.g-started .g-plan-tiles ol[style*="--g-tiles:4"] strong { font-size: 11.5px; white-space: nowrap; }
  html.g-started .g-plan-tiles ol[style*="--g-tiles:4"] span { font-size: 10.5px; white-space: nowrap; }
  html.g-started .g-bundle-card { min-height: 62px; }
  /* "1 box" and ", 2 months" share a baseline, with the price. */
  html.g-started .g-bundle-name, html.g-started .g-bundle-months, html.g-started .g-bundle-price strong { align-self: baseline; }
  html.g-started .g-bundles { gap: 6px; }
  html.g-started .g-plan-tiles { margin-top: 10px; }
  html.g-started .g-plan-tiles-title { margin-bottom: 4px; }
  html.g-started .g-wiz-prev:not([hidden]) { margin-bottom: 12px; }
  html.g-started .g-step[data-step="box"] #g-age-year-label { margin-bottom: 4px; }
  /* A little air between the sections: age, the box, how long, what they'll get. */
  html.g-started .g-step[data-step="box"] h2 { margin-bottom: 8px; }
  html.g-started .g-start { margin-top: 18px; }
  html.g-started .g-bundle-title { margin-top: 20px; }
  html.g-started .g-plan-tiles { margin-top: 20px; }
}

/* ── Wider screens: four screens, like phones ───────────────── */
/* Step 1 sits under the hero and How gifting works. Past it (html.g-deep) the nav, hero and FAQ
   give way to a plain header, and one screen shows at a time beside the side card. At review
   (html.g-reviewing) every step's row shows again beside the full "Your gift". */
.g-dhead, .g-dside-head, .g-dside-progress, .g-dside, .g-dside-go { display: none; }
.g-dprevs[hidden] { display: none; }
@media (min-width: 641px) {
  html.g-deep site-nav, html.g-deep .g-holiday, html.g-deep .g-hero, html.g-deep .g-faq, html.g-deep site-footer { display: none; }
  html.g-deep .g-dhead { display: block; background: var(--cream); border-bottom: 1px solid #EFE7DE; }
  .g-dhead-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 66px; display: flex; align-items: center; justify-content: space-between; }
  .g-dhead-logo { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; text-decoration: none; }
  .g-dhead-logo .l1 { color: var(--coral-deep); }
  .g-dhead-logo .l2 { color: #7A5E00; }
  .g-dhead-back { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .g-dhead-back:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; }
  html.g-deep .g-main { padding-top: 20px; }
  .g-main, .g-dhead-inner { max-width: 1424px; }

  /* How gifting works, between the hero and step 1: three cards and the pills under them. */
  html:not(.g-deep) .g-intro { display: block; max-width: 1424px; margin: 0 auto; padding: 56px 24px 0; text-align: center; }
  .g-intro-head { margin-bottom: 28px; }
  .g-intro-head h2 { font-size: 34px; font-weight: 700; }
  .g-intro-time, .g-intro-faq { display: none; }
  .g-intro-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .g-intro-step { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--white); border-radius: 20px; padding: 32px 20px 30px; }
  .g-intro-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
  .g-intro-icon svg { width: 30px; height: 30px; }
  .g-intro-icon.is-coral { background: var(--coral-lt); color: var(--coral-deep); }
  .g-intro-icon.is-sand { background: #F6EBCF; color: #6E5A1E; }
  .g-intro-icon.is-sage { background: #E2ECE3; color: var(--sage-dk); }
  .g-intro-text { display: flex; flex-direction: column; gap: 10px; }
  .g-intro-text strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; font-weight: 700; }
  .g-intro-text span { font-size: 17px; color: var(--text-mid); }
  .g-intro-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
  .g-intro-pills span { background: #E2ECE3; color: var(--sage-dk); font-size: 16px; font-weight: 600; border-radius: 999px; padding: 8px 16px; }
  html:not(.g-deep) .g-main { padding-top: 60px; }

  /* One screen at a time: its steps open, without their rows. */
  html:not(.g-reviewing) .g-step:not(.is-active):not(.is-mate) { display: none; }
  html:not(.g-reviewing) .g-step + .g-step { border-top: 0; }
  html:not(.g-reviewing) .g-step .g-step-summary, html:not(.g-reviewing) .g-step .g-step-upcoming { display: none; }
  html:not(.g-reviewing) .g-step.is-active .g-step-body { padding-top: 0; }
  html:not(.g-reviewing) .g-step.is-mate .g-step-body { display: block; padding-top: 6px; }
  /* A screen's second step (Delivery day, And you) close under the first, its heading a size down. */
  html:not(.g-reviewing) .g-step.is-active { padding-bottom: 0; }
  html:not(.g-reviewing) .g-step.is-mate h2 { font-size: 26px; margin-bottom: 6px; }
  /* A touch less air between the parts of a screen. */
  html:not(.g-reviewing) .g-tag-label { margin-bottom: 8px; }
  html:not(.g-reviewing) .g-tags { margin-bottom: 14px; }
  html:not(.g-reviewing) .g-field { margin-bottom: 10px; }
  html:not(.g-reviewing) #g-day-note { margin-bottom: 10px; }
  html.g-deep .g-main { padding-bottom: 24px; }
  /* The swap or pickup week as the phones' one green line, so the screen still fits. */
  html:not(.g-reviewing) .g-return { background: #E2ECE3; border: 0; padding: 10px 16px; margin-top: 12px; }
  html:not(.g-reviewing) .g-return-title, html:not(.g-reviewing) .g-return-sub { display: none; }
  html:not(.g-reviewing) .g-return-phone { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-dark); }
  .g-return-phone svg { flex-shrink: 0; color: var(--sage-dk); }
  html:not(.g-reviewing) .g-step h2 { font-size: 32px; line-height: 1.15; margin-bottom: 14px; }
  /* Before the last screen (step 1 too), Continue is in the side card; on a screen of two, only the last step's. */
  html.g-dside-on .g-step .g-continue, html:not(.g-reviewing) .g-step:not(.is-screen-last) .g-continue { display: none; }
  html:not(.g-reviewing) .g-step .g-continue {
    margin: 22px 0 0; background: var(--coral-deep); font-size: 18px; font-weight: 700; padding: 15px 40px;
  }
  html:not(.g-reviewing) .g-step .g-continue:hover { background: #7A3018; }

  /* The answers on the screen before, with Change. */
  .g-dprevs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
  .g-dprev { display: flex; align-items: center; gap: 14px; background: var(--white); border-radius: 16px; padding: 12px 20px; font-size: 17px; }
  .g-dprev-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-dprev-change { background: none; border: 0; padding: 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .g-dprev-change:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; }

  /* Step 1 and 2 in the words phones use. */
  .g-step[data-step="mode"] .g-wide, .g-step[data-step="box"] .g-wide { display: none; }
  .g-step[data-step="mode"] .g-phone, .g-step[data-step="box"] .g-phone { display: inline; }
  /* Headings without the old 1-6 numbers, which would clash with "Step 3 of 4". */
  html:not(.g-reviewing) .g-step h2 .g-wide { display: none; }
  html:not(.g-reviewing) .g-step h2 .g-phone { display: inline; }

  /* Step 1: three cards, each an icon, the name and line, and the radio at the bottom. */
  .g-step[data-step="mode"] .g-step-sub { display: none; }
  .g-mode-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .g-mode { flex-direction: column; align-items: flex-start; gap: 0; background: var(--white); border: 1.5px solid #EDE4DA; border-radius: 20px; padding: 24px; }
  .g-mode:hover { background: var(--white); border-color: var(--coral-btn); }
  .g-mode:focus-visible { border-radius: 20px; }
  .g-mode.is-selected { border-color: var(--coral-deep); }
  .g-mode-icon { display: flex; width: 72px; height: 72px; border-radius: 16px; align-items: center; justify-content: center; margin-bottom: 24px; }
  .g-mode-icon svg { width: 34px; height: 34px; }
  .g-mode-icon.is-sand { background: #F6EBCF; color: #6E5A1E; }
  .g-mode-icon.is-coral { background: var(--coral-lt); color: var(--coral-deep); }
  .g-mode-icon.is-sage { background: #E2ECE3; color: var(--sage-dk); }
  .g-mode-text { gap: 10px; }
  .g-mode-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; }
  .g-mode-desc { font-size: 17px; }
  .g-mode-radio { order: 3; width: 24px; height: 24px; margin-top: 22px; border-color: #8C7F76; }
  .g-mode.is-selected .g-mode-radio { border-color: var(--coral-deep); }
  .g-mode.is-selected .g-mode-radio::after { inset: 4px; background: var(--coral-deep); }

  /* Step 2: the age stays up top once the box is picked, then the first box and how long. */
  html:not(.g-reviewing) #g-age[hidden] { display: block; }
  .g-mode-egift, .g-age-month-label, .g-start-change { display: none; }
  #g-age-year-label { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
  .g-age-months { margin-top: 14px; gap: 10px; }
  .g-age-months .g-pill { padding: 14px 20px; font-size: 17px; border-radius: 14px; }
  .g-age-months .g-pill.is-selected { background: var(--coral-lt); border-color: var(--coral-deep); color: var(--coral-deep); }
  /* The starting box: its photo, "Starting box, matched to their age", the name with its ages,
     and See what's inside under it, in the wider screens' words. */
  .g-start { grid-template-columns: 80px minmax(0, 1fr); column-gap: 20px; padding: 18px 24px; margin-top: 28px; border-radius: 18px; }
  .g-start-photo { grid-row: 1 / 3; width: 80px; height: 80px; border-radius: 12px; background: var(--white); }
  .g-start-photo img { object-fit: contain; }
  .g-step[data-step="box"] .g-start .g-wide { display: inline; }
  .g-step[data-step="box"] .g-start .g-phone, .g-start-toys { display: none; }
  .g-start-eyebrow { font-size: 15px; }
  .g-start-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; line-height: 1.3; }
  .g-start-inside { grid-column: 2; grid-row: 2; font-size: 16px; font-weight: 600; margin-top: 2px; }
  .g-bundle-title { font-size: 20px; margin-top: 36px; }
  .g-bundle-sub, .g-bundle-note, .g-plan { display: none; }
  .g-bundles { margin-top: 24px; column-gap: 16px; }
  /* A card: name with the radio at the right, the months and badge, then the price and savings. */
  .g-bundle-card { grid-row: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr); row-gap: 0; align-content: start; padding: 20px 20px 22px; border-radius: 16px; }
  .g-bundle-head { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: 0; padding-right: 32px; }
  .g-bundle-name { flex-basis: 100%; font-size: 20px; }
  .g-bundle-months { order: 1; font-size: 16px; margin-top: 6px; }
  /* The badge sits on the card's top edge, as on the box page. */
  .g-bundle-badge { font-size: 14px; padding: 4px 12px; }
  .g-bundle-stages, .g-bundle-each, .g-bundle-price s { display: none; }
  .g-bundle-price { grid-column: 1; grid-row: 2; margin-top: 18px; }
  .g-bundle-price strong { font-size: 24px; }
  .g-bundle-save { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 3px 10px; font-size: 14px; }
  .g-bundle-reason { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; font-size: 13px; color: var(--text-mid); }
  .g-bundle-radio {
    display: block; position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid #8C7F76; background: var(--white);
  }
  .g-bundle-card.is-selected .g-bundle-radio { border-color: var(--coral-deep); }
  .g-bundle-card.is-selected .g-bundle-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--coral-deep); }
  .g-bundle-card.is-disabled .g-bundle-radio { border-color: var(--border); }

  /* The side card: the step count and time left, then Your gift or what they'll get. */
  .g-summary { border-radius: 20px; padding: 26px; border-color: transparent; }
  .g-summary > #g-progress, .g-summary > .g-progress-label { display: none; }
  .g-dside-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; margin-bottom: 12px; }
  .g-dside-head span { color: var(--text-mid); }
  .g-dside-progress { display: flex; gap: 6px; margin-bottom: 26px; }
  .g-dside-progress .g-progress-seg { height: 4px; }
  .g-dside-progress .g-progress-seg.is-done { background: var(--coral-deep); }
  html.g-dside-on .g-summary > :not(.g-dside-head):not(.g-dside-progress):not(.g-dside):not(.g-dside-go):not(.g-dside-foot) { display: none; }
  html.g-dside-on .g-dside { display: block; }
  html.g-dside-on .g-dside-go:not([hidden]) { display: block; }
  .g-dside-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 16px; }
  .g-dside-empty { font-size: 16px; color: var(--text-mid); }
  .g-dside-list { list-style: none; }
  .g-dside-row { display: flex; align-items: center; gap: 16px; position: relative; }
  .g-dside-row + .g-dside-row { margin-top: 30px; }
  /* A short line joins each row to the next. */
  .g-dside-row + .g-dside-row::before { content: ''; position: absolute; left: 31px; top: -24px; height: 18px; width: 1.5px; background: #DCD2C8; }
  .g-dside-thumb { flex: 0 0 64px; height: 64px; border-radius: 14px; overflow: hidden; border: 0; padding: 0; background: #EFE7DE; display: flex; align-items: center; justify-content: center; color: var(--text-dark); }
  button.g-dside-thumb { cursor: zoom-in; }
  button.g-dside-thumb:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }
  .g-dside-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .g-dside-thumb.is-icon svg { width: 34px; height: 34px; }
  .g-dside-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
  .g-dside-text strong { font-size: 16px; font-weight: 700; }
  .g-dside-text span { font-size: 15px; color: var(--text-mid); }
  .g-dside-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 16px; }
  .g-dside-total strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 700; }
  .g-dside-note { font-size: 14px; color: var(--text-mid); margin-top: 6px; }
  .g-dside-go {
    width: 100%; margin-top: 20px; background: var(--coral-deep); color: var(--white); border: 0; border-radius: 999px; padding: 16px;
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; cursor: pointer;
  }
  .g-dside-go:hover { background: #7A3018; }
  .g-dside-go:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; }
}
@media (min-width: 641px) {
  .g-dprev .g-wiz-prev-check { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--sage-dk); color: var(--white); display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) {
  .g-intro-pill-wide, .g-dprevs:not([hidden]) { display: none; }
}
/* Short phone screens (most iPhones in Safari): the first screen still fits down to the FAQ link. */
@media (max-width: 640px) and (max-height: 700px) {
  .g-hero-text, .g-hero.is-holiday .g-hero-text { padding-top: 14px; padding-bottom: 14px; }
  .g-hero.is-holiday .g-hero-tile { flex-basis: 80px; margin: 26px 0 8px; }
  html:not(.g-started) .g-intro { padding-top: 14px; }
  html:not(.g-started) .g-intro-head { margin-bottom: 8px; }
  html:not(.g-started) .g-intro-steps { gap: 6px; }
  html:not(.g-started) .g-intro-step { padding: 8px 14px; }
  html:not(.g-started) .g-intro-icon { flex-basis: 36px; height: 36px; }
  html:not(.g-started) .g-intro-pills { margin-top: 10px; }
  .g-intro-faq { margin-top: 10px; }
}
@media (min-width: 961px) {
  /* The side card narrows with the window, and never runs past its bottom: it keeps to the
     window's height, the box list scrolling inside it so the total and Continue stay in view. */
  .g-layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 408px); gap: clamp(24px, 2.5vw, 36px); }
  .g-summary { display: flex; flex-direction: column; max-height: calc(100vh - var(--g-nav-h, 66px) - 32px); overflow-y: auto; }
  /* Under the 66px header and the page's 20px top: it fits before any scrolling. */
  html.g-deep .g-summary { top: 20px; max-height: calc(100vh - 106px); }
  html.g-dside-on .g-summary { overflow: hidden; }
  html.g-dside-on .g-dside { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
  .g-dside-list { min-height: 0; overflow-y: auto; }
  .g-dside-title, .g-dside-total, .g-dside-note, .g-dside-go, .g-dside-head, .g-dside-progress { flex-shrink: 0; }
}

/* Step 1 on wider screens: How gifting works as three short cards (icon beside the words), then
   the ways to give. */
/* The hero runs edge to edge as before, a little shorter, with the copy low under the snowflakes. */
@media (min-width: 901px) {
  .g-hero { min-height: 360px; }
  .g-hero-text { justify-content: flex-end; padding-top: 40px; padding-bottom: 48px; }
}
@media (min-width: 641px) {
  html:not(.g-deep) .g-intro { padding-top: 32px; }
  .g-intro-head { margin-bottom: 18px; }
  .g-intro-head h2 { font-size: 28px; }
  .g-intro-steps { gap: 20px; }
  .g-intro-step { flex-direction: row; gap: 14px; border-radius: 16px; padding: 18px 22px; text-align: left; }
  .g-intro-icon { flex: 0 0 52px; width: 52px; height: 52px; margin-bottom: 0; }
  .g-intro-icon svg { width: 22px; height: 22px; }
  .g-intro-text { gap: 2px; }
  .g-intro-text strong { font-size: 18px; }
  .g-intro-text span { font-size: 16px; }
  .g-intro-pills { margin-top: 16px; }
  .g-intro-pills span { font-size: 15px; padding: 7px 15px; }
  html:not(.g-deep) .g-main { padding-top: 36px; }
  html:not(.g-reviewing) .g-step[data-step="mode"] h2 { font-size: 30px; margin-bottom: 18px; }
  .g-mode { padding: 22px 22px 24px; border-radius: 18px; }
  .g-mode:focus-visible { border-radius: 16px; }
  .g-mode-icon { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px; }
  .g-mode-icon svg { width: 28px; height: 28px; }
  .g-mode-text { gap: 6px; }
  .g-mode-name { font-size: 20px; }
  .g-mode-desc { font-size: 16px; }
  /* The radio in the top right corner; the picked card also gets a rust outline on a light tint. */
  .g-mode { position: relative; cursor: pointer; }
  .g-mode-radio { position: absolute; top: 20px; right: 20px; margin: 0; }
  .g-mode.is-selected { background: #FFF8F4; box-shadow: inset 0 0 0 1px var(--coral-deep); }
  .g-mode.is-selected:hover { background: #FFF8F4; }
  html:not(.g-reviewing) .g-step[data-step="mode"] .g-continue { margin-top: 22px; padding: 14px 40px; font-size: 18px; }
}
/* Short windows: a tighter side card. */
@media (min-width: 961px) and (max-height: 820px) {
  .g-summary { padding: 20px 22px; }
  .g-dside-progress { margin-bottom: 16px; }
  .g-dside-title { font-size: 20px; margin-bottom: 12px; }
  .g-dside-thumb { flex-basis: 52px; height: 52px; }
  .g-dside-row + .g-dside-row { margin-top: 20px; }
  .g-dside-row + .g-dside-row::before { left: 25px; top: -16px; height: 12px; }
  .g-dside-total { margin-top: 16px; padding-top: 14px; }
  .g-dside-total strong { font-size: 24px; }
  .g-dside-go { margin-top: 14px; padding: 13px; }
}

/* Screen 3 on wider screens: the tags in a row of cards with radios, then the note and the
   delivery day side by side. The note and day steps' parts sit on one grid (display: contents). */
.g-tag-radio { display: none; }
@media (min-width: 641px) {
  html.g-screen-2:not(.g-reviewing) #g-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  html.g-screen-2:not(.g-reviewing) #g-form > .g-step[data-step="note"],
  html.g-screen-2:not(.g-reviewing) #g-form > .g-step[data-step="note"] > .g-step-body { display: contents; }
  html.g-screen-2:not(.g-reviewing) .g-step[data-step="note"] .g-step-body > :not(.g-field) { grid-column: 1 / -1; }
  html.g-screen-2:not(.g-reviewing) #g-form > .g-step[data-step="when"] { grid-column: 2; }
  html.g-screen-2:not(.g-reviewing) #g-form > .g-step[data-step="when"] > .g-step-body { padding-top: 0; }
  .g-step[data-step="note"] .g-wide, .g-step[data-step="when"] .g-wide { display: none; }
  .g-step[data-step="note"] .g-phone, .g-step[data-step="when"] .g-phone { display: inline; }
  /* The section labels: Pick a tag, Your note and Delivery day. */
  html:not(.g-reviewing) .g-tag-label, html:not(.g-reviewing) .g-field label[for="g-message"], html.g-screen-2:not(.g-reviewing) #g-when-title {
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text-dark); margin-bottom: 8px;
  }
  html:not(.g-reviewing) .g-field label[for="g-message"] .g-optional { color: var(--text-mid); font-weight: 500; }
  html.g-screen-2:not(.g-reviewing) #g-day-note { font-size: 15px; margin-bottom: 10px; }
  html:not(.g-reviewing) #g-message { min-height: 104px; border-radius: 12px; }
  /* "Printed on a card inside the box." over the box, level with the delivery day's line. */
  html.g-screen-2:not(.g-reviewing) .g-step[data-step="note"] .g-field { gap: 0; }
  html.g-screen-2:not(.g-reviewing) .g-message-note { order: 1; font-size: 15px; line-height: 1.5; color: var(--text-mid); margin-bottom: 12px; }
  html.g-screen-2:not(.g-reviewing) #g-message { order: 2; }

  /* Tags: white cards, the tag, its name and a radio. */
  html:not(.g-reviewing) .g-tags { gap: 12px; margin-bottom: 20px; }
  html:not(.g-reviewing) .g-tag-card { background: var(--white); border: 1.5px solid #EDE4DA; border-radius: 16px; }
  html:not(.g-reviewing) .g-tag-card:hover { border-color: var(--coral-btn); }
  html:not(.g-reviewing) .g-tag-card.is-selected { background: var(--white); border-color: var(--coral-deep); }
  html:not(.g-reviewing) .g-tag-pick { gap: 8px; padding: 16px 8px 14px; font-size: 16px; font-weight: 600; }
  html:not(.g-reviewing) .g-tag-pick .g-tag-img { height: 64px; }
  html:not(.g-reviewing) .g-tag-badge { display: none; }
  html:not(.g-reviewing) .g-tag-radio { display: block; position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #8C7F76; background: var(--white); }
  html:not(.g-reviewing) .g-tag-card.is-selected .g-tag-radio { border-color: var(--coral-deep); }
  html:not(.g-reviewing) .g-tag-card.is-selected .g-tag-radio::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--coral-deep); }

  /* Delivery days: two rows of three tiles, the weekday over the date, More dates last. */
  html:not(.g-reviewing) #g-day-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html:not(.g-reviewing) #g-day-pills .g-pill { border-radius: 12px; padding: 9px 4px; font-size: 17px; font-weight: 700; text-align: center; }
  html:not(.g-reviewing) #g-day-pills .g-pill-more { font-size: 15px; color: var(--coral-deep); background: #F4EEE7; border-color: transparent; }
  html:not(.g-reviewing) #g-day-pills .g-pill.is-selected { background: var(--coral-lt); border-color: var(--coral-deep); color: var(--coral-deep); }
  html:not(.g-reviewing) .g-day-two small { display: block; font-size: 13px; font-weight: 500; margin: 0; opacity: 0.8; }
  /* The swap and pickup weeks are in the side card's calendar instead. */
  html:not(.g-reviewing) .g-return { display: none; }
}
/* Peek inside and the box photos on wider screens: the gallery keeps its left and right arrows
   (the box page's zoomable gallery hides them), except while zoomed in. */
@media (min-width: 641px) {
  .bb-lightbox.is-zoomable:not(.is-zoomed) .bb-lightbox-nav:not([hidden]) { display: flex; }
}
/* Step 2 on wider screens fits on one screen: a little less air around the age, box and count. */
@media (min-width: 641px) {
  #g-age-year-label { margin-bottom: 12px; }
  .g-age-months { margin-top: 10px; gap: 8px; }
  .g-age-months .g-pill { padding: 10px 18px; }
  .g-start { grid-template-columns: 64px minmax(0, 1fr); padding: 14px 20px; margin-top: 20px; }
  .g-start-photo { width: 64px; height: 64px; }
  .g-bundle-title { margin-top: 24px; }
  .g-bundles { margin-top: 20px; }
  .g-bundle-card { padding: 16px 18px 18px; }
  .g-bundle-radio { top: 16px; right: 18px; }
  .g-bundle-price { margin-top: 12px; }
}

/* Step 4 on wider screens: who it's for and you side by side, with the same fields as phones,
   and the side card shows the phones' "Your gift" rows, the promo code and Pay. */
.g-dside-foot { display: none; }
@media (min-width: 641px) {
  .g-psum-head img { flex-shrink: 0; width: 52px; height: 42px; object-fit: contain; }
  .g-psum-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .g-psum-head svg { flex-shrink: 0; }
  .g-psum-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .g-psum-title strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; }
  .g-psum-title span { font-size: 13.5px; color: var(--text-mid); }
  .g-psum-close { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 0; background: #F1E8DE; color: var(--text-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .g-psum-items, .g-psum-facts { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; }
  .g-psum-items { border-bottom: 1px solid var(--border); }
  .g-psum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
  .g-psum-row > span:first-child { min-width: 0; }
  .g-psum-row strong { font-weight: 700; }
  .g-psum-age { color: var(--text-mid); }
  .g-psum-row small { display: block; font-size: 13px; color: var(--text-mid); margin-top: 1px; }
  .g-psum-row.is-savings { color: var(--sage-dk); font-weight: 700; }
  .g-psum-facts .g-psum-row > span:first-child { color: var(--text-mid); }
  .g-psum-tag { display: inline-flex; align-items: center; gap: 8px; }
  .g-psum-remove { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--coral-deep); text-decoration: underline; cursor: pointer; }
  .g-psum-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; }
  .g-psum-row.is-total { align-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 700; }
  .g-psum-row.is-total > span:last-child { font-size: 28px; }
  #g-promo .summary-promo-toggle { color: var(--coral-deep); font-weight: 700; font-size: 15px; text-underline-offset: 3px; }
  html.g-dside-last #g-summary > #g-psum, html.g-dside-last #g-summary > #g-psum-total { display: block; }
  html.g-dside-last #g-summary > #g-promo:not([hidden]), html.g-dside-last #g-summary > #g-express:not([hidden]),
  html.g-dside-last #g-summary > #g-pay-error:not([hidden]) { display: block; }
  html.g-dside-last .g-dside { display: none; }
  html.g-dside-last .g-psum-close { display: none; }
  html.g-dside-last .g-psum-head { padding-top: 4px; }
  html.g-dside-last .g-psum-head img { width: 64px; height: 52px; border-radius: 10px; background: #EFE7DE; object-fit: cover; }
  /* The summary's parts in order: rows, promo code, total, Apple Pay, then Pay and the line under it. */
  html.g-dside-last .g-psum { order: 1; }
  html.g-dside-last #g-promo { order: 2; padding-bottom: 6px; }
  html.g-dside-last .g-psum-total { order: 3; }
  html.g-dside-last #g-express { order: 4; }
  html.g-dside-last #g-pay-error { order: 5; }
  html.g-dside-last .g-dside-go { order: 6; }
  html.g-dside-last .g-dside-foot { order: 7; display: block; font-size: 13px; color: var(--text-mid); text-align: center; margin-top: 10px; }
  html.g-dside-last .g-summary { overflow-y: auto; }

  /* Who it's for (left) and you (right). */
  html.g-screen-3:not(.g-reviewing) #g-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  html.g-screen-3:not(.g-reviewing) #g-form > .g-step[data-step="you"] .g-step-body { padding-top: 0; }
  .g-step[data-step="who"] .g-wide, .g-step[data-step="you"] .g-wide { display: none; }
  .g-step[data-step="who"] .g-phone, .g-step[data-step="you"] .g-phone { display: inline; }
  html.g-screen-3:not(.g-reviewing) .g-step[data-step="who"] h2, html.g-screen-3:not(.g-reviewing) .g-step[data-step="you"] h2 { font-size: 28px; margin-bottom: 10px; }
  html.g-screen-3:not(.g-reviewing) #g-who-sub { display: none; }
  /* Nothing for them to pay on the heading's line. */
  html.g-screen-3:not(.g-reviewing) .g-step[data-step="who"] .g-step-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  html.g-screen-3:not(.g-reviewing) .g-step[data-step="who"] .g-step-body > :not(h2):not(.g-who-free) { grid-column: 1 / -1; }
  html.g-screen-3:not(.g-reviewing) .g-who-free { display: inline-flex; justify-self: start; align-items: center; gap: 6px; background: #E2ECE3; color: var(--sage-dk); font-size: 14px; font-weight: 600; border-radius: 999px; padding: 4px 12px; margin: 0 0 10px; }
  /* Your email and your phone, a line each. */
  html.g-screen-3:not(.g-reviewing) .g-step[data-step="you"] .g-row:has(#g-you-email) { grid-template-columns: minmax(0, 1fr); }
  html.g-screen-3:not(.g-reviewing) .g-step[data-step="who"] .g-hint.g-phone-block { display: block; }
  html.g-screen-3:not(.g-reviewing) .g-add-apt { display: block; background: none; border: 0; padding: 0; margin: -2px 0 12px; color: var(--coral-deep); font: inherit; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  html.g-screen-3:not(.g-reviewing) .g-parent-line2:not(.is-open) { display: none; }
  html.g-screen-3:not(.g-reviewing) .g-add-apt:has(+ .g-parent-line2.is-open) { display: none; }
  html.g-screen-3:not(.g-reviewing) .g-wiz-sum { display: none; }
  html.g-screen-3:not(.g-reviewing) .g-field { margin-bottom: 12px; gap: 5px; }
  html.g-screen-3:not(.g-reviewing) .g-field label { font-size: 14px; }
  html.g-screen-3:not(.g-reviewing) .g-field input { border-radius: 12px; }
}
/* Step 4's side card a touch tighter, so it fits without its own scroll bar. */
@media (min-width: 641px) {
  html.g-dside-last .g-dside-progress { margin-bottom: 18px; }
  html.g-dside-last .g-psum-head { padding-bottom: 10px; }
  html.g-dside-last .g-psum-items, html.g-dside-last .g-psum-facts { gap: 8px; padding: 10px 0; }
  html.g-dside-last .g-psum-row small { margin-top: 0; }
  html.g-dside-last #g-promo { padding-bottom: 2px; }
  html.g-dside-last .g-psum-total { margin-top: 6px; padding-top: 12px; }
  html.g-dside-last .g-psum-row.is-total > span:last-child { font-size: 24px; }
  html.g-dside-last .g-dside-go { margin-top: 14px; padding: 14px; }
  html.g-dside-last .g-dside-foot { margin-top: 8px; }
}
/* The code-versus-savings line among "Your gift" rows (phones' sheet and step 4's side card). */
.g-psum-items .g-sum-note { margin: 0; }