/* ============================================================
   Lalaluxe — Booking wizard stylesheet
   Mobile-first LOCKED-SCALE system: each surface keys its size off
   ONE fluid font-size clamp (.app and .hero below — clamped on the
   limiting viewport dimension) and every child is sized in em, so
   proportions hold at every width by construction. Do NOT add
   per-element vw/vh clamps. Hues live in colors.css only (loads
   FIRST — the cascade depends on that order); this file consumes
   tokens. Sections run in booking-flow order; the MOBILE-ONLY
   media block at the end is the file's terminal override zone.
   ============================================================ */

/* cross-screen font-weight pin: italic body text should never be
   hairline-thin — every italic caption renders at 500. Extend this
   list when a new screen adds an italic caption class. */
.h-sub,
.opt .meta .desc,
.tile .desc,
.tray .label,
.back-link,
.lb-count,
.kid .label,
.fin .fname,
.fin .fprice,
.des .ddesc,
.des .dprice,
.lbtn .lname,
.lbtn .lprice,
.length-cap,
.addbtn span,
.field label,
.field .field-err,
.rcpt-head .rcpt-date,
.rcpt-total .lbl,
.cal-dow,
.addbtn .ap {
  font-weight: 500;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
}
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* desktop frame: center the mobile-first app on a bold pink-poster background */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 55% at 20% 18%, var(--wash-1) 0%, transparent 60%),
    radial-gradient(80% 65% at 88% 92%, var(--wash-4) 0%, transparent 65%),
    linear-gradient(170deg, var(--wash-2) 0%, var(--wash-4) 100%);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 10% 30%,
      color-mix(in srgb, var(--gold) 16%, transparent) 0 1.5px,
      transparent 2px
    ),
    radial-gradient(
      circle at 80% 65%,
      color-mix(in srgb, var(--ink) 9%, transparent) 0 1.5px,
      transparent 2px
    ),
    radial-gradient(
      circle at 35% 80%,
      color-mix(in srgb, var(--gold) 12%, transparent) 0 1.5px,
      transparent 2px
    );
  background-size:
    320px 320px,
    280px 280px,
    360px 360px;
  pointer-events: none;
  opacity: 0.8;
  mix-blend-mode: multiply;
}

/* No phone-frame shell: the app fills the viewport at every size.
   Booking surfaces (topbar/screen/tray/botbar) center in a scaling
   column (--col); the hero bleeds full-width via the override below. */
.app {
  /* Booking scale knob: one gentle width-driven ramp (mobile floor 15px
     -> desktop cap 20px), capped by svh on short/wide laptop viewports so
     the em-locked one-screen layout never outgrows the visible height
     (2.4svh is inert at h >= ~834px, so the three reference sizes are
     untouched). The booking type/dims below are sized in em off this, so
     the whole booking UI scales as a unit. The hero overrides font-size
     for its own subtree, so it is unaffected. */
  font-size: clamp(15px, min(13px + 0.55vw, 2.4svh), 20px);
  --col: min(100%, 40em);
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}
.app > .topbar,
.app > .screen-wrap,
.app > .tray,
.app > .botbar {
  width: 100%;
  max-width: var(--col);
}
.app > .screen-wrap:has(.hero-screen) {
  max-width: none;
}

/* ============== Backdrop washes ============== */
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 55% at 50% 0%, var(--wash-1) 0%, transparent 65%),
    radial-gradient(70% 50% at 50% 100%, var(--wash-4) 0%, transparent 60%),
    linear-gradient(180deg, var(--wash-2) 0%, var(--wash-3) 45%, var(--wash-4) 100%);
  z-index: 0;
  pointer-events: none;
}
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 12% 22%,
      color-mix(in srgb, var(--gold) 16%, transparent) 0 1.2px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 78% 14%,
      color-mix(in srgb, var(--ink) 9%, transparent) 0 1.2px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 30% 78%,
      color-mix(in srgb, var(--gold) 14%, transparent) 0 1.2px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 88% 64%,
      color-mix(in srgb, var(--ink) 7%, transparent) 0 1.2px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 55% 45%,
      color-mix(in srgb, var(--gold) 12%, transparent) 0 1.2px,
      transparent 1.8px
    );
  background-size: 240px 240px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* ============== Top bar ============== */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.067em 1.467em 0.533em;
}
.mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  color: var(--ink);
}
.mark .roman {
  font-family: var(--wordmark);
  font-weight: 600;
  font-size: 1.6em;
  letter-spacing: -0.015em;
  color: var(--accent-black);
  font-style: normal;
}
.mark .italic {
  font-family: var(--wordmark);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6em;
  letter-spacing: -0.015em;
  color: var(--cognac);
}

.steps {
  display: flex;
  gap: 0.4em;
  align-items: center;
}
.steps .pip {
  width: 0.667em;
  height: 0.667em;
  background: transparent;
  border: 1.4px solid var(--wine-soft);
  transform: rotate(45deg);
  opacity: 0.45;
  transition: all 0.4s ease;
}
.steps .pip.done {
  background: var(--pink-pop);
  border-color: var(--pink-pop);
  opacity: 1;
}
.steps .pip.cur {
  /* --pop-ink (5.6:1 on cream) so the current-step marker clears the 3:1 non-text floor */
  background: var(--pop-ink);
  border-color: var(--pop-ink);
  opacity: 1;
  transform: rotate(45deg) scale(1.18);
  box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--pop-ink) 30%, transparent);
}
.steps .all-done {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.867em;
  color: var(--cherry);
}

.exit-btn {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.933em;
  background: transparent;
  border: 0;
  color: var(--wine-soft);
  cursor: pointer;
  /* transparent padding + offsetting margin: 26px visual, 44px real tap target */
  padding: 13px 8px;
  margin: -9px 0;
  white-space: nowrap;
}
.exit-btn:hover {
  color: var(--cherry);
}

/* ============== Main screen ============== */
.screen-wrap {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.2em 1.6em 0.53em;
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* negative offset: a positive translateY inside the .screen-wrap scroller extends
   scrollable overflow block-end and paints a transient scrollbar on every entrance;
   a negative offset only creates clipped (non-scrollable) overflow. The from-frame
   is opacity:0, so the motion just reads as settle-down instead of rise-up. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.h-question {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.4em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 0.53em;
}
.h-question em {
  font-family: var(--display);
  font-style: italic;
  color: var(--cherry);
}
.h-question .swirl {
  display: inline-block;
  position: relative;
}
/* token-filled mask (file convention) — data URIs can't read CSS vars, so the
   stroke is black alpha and --gold paints through it */
.h-question .swirl::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.42em;
  height: 0.28em;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'><path d='M2 8 C 40 -2, 70 14, 110 7 S 200 -2, 218 8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/></svg>")
    center/100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'><path d='M2 8 C 40 -2, 70 14, 110 7 S 200 -2, 218 8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/></svg>")
    center/100% 100% no-repeat;
}

.h-sub {
  color: var(--wine-soft);
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 1.067em;
  margin-bottom: 1.2em;
  text-wrap: pretty;
}

.body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.667em;
}

/* ============== Picks tray ============== */
.tray {
  position: relative;
  z-index: 2;
  padding: 0.533em 1.467em 0.667em;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--tray-fade) 45%, transparent)
  );
}
.tray .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tray .label {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 0.8em;
  color: var(--wine-soft);
  letter-spacing: 0.04em;
}
.tray .total {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.067em;
  background: var(--ink);
  color: var(--cream);
  padding: 0.1875em 0.6875em;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 6px;
  min-height: 2.133em;
  align-items: center;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.417em;
  white-space: nowrap;
  flex: 0 0 auto;
  background: var(--paper); /* == --white in light; flips to a dark pill in dark mode */
  color: var(--ink);
  border: 1px solid var(--blush);
  border-radius: 999px;
  padding: 0.417em 0.917em 0.417em 0.75em;
  font-size: 0.8em;
  font-weight: 500;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--pink-pop) 8%, transparent);
  animation: pop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.chip .x {
  color: var(--pink-pop);
  font-size: 0.833em;
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(6px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* Both keyframes end at the elements' natural styles, so "none" is lossless. */
@media (prefers-reduced-motion: reduce) {
  .screen,
  .chip {
    animation: none;
  }
}

/* ============== Bottom bar ============== */
.botbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.667em 1.467em 1.6em;
}
.back-link {
  background: transparent;
  border: 0;
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 1.067em;
  color: var(--wine-soft);
  cursor: pointer;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
}
/* invisible hit-area extension: 36px visual -> 44px touch target */
.back-link::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.back-link::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--wine-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
}
.back-link:hover {
  color: var(--cherry);
}
.back-link:hover::before {
  background: var(--cherry);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.067em;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 14px 30px -12px color-mix(in srgb, var(--bar-shadow-ink) 60%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--white) 5%, transparent);
  transition:
    transform 0.12s ease,
    background 0.2s ease;
  flex: 0 0 52px;
  width: 100%;
  text-decoration: none;
}
.botbar .cta {
  width: auto;
  flex: 1 1 auto;
}
.cta:hover {
  background: var(--cognac);
}
.cta:active {
  transform: translateY(1px);
}
.cta:disabled,
.cta.cherry:disabled {
  background: color-mix(in srgb, var(--ink) 45%, var(--cream));
  color: var(--white);
  box-shadow: none;
  cursor: not-allowed;
}
.cta .arrow {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
}
.cta.cherry {
  background: var(--cognac);
}
.cta.cherry:hover {
  background: var(--ink);
}

/* ============== Generic option list (cards) ============== */
.opt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 0.8em;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 0.933em;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: all 0.18s ease;
  font: inherit;
  color: inherit;
  position: relative;
  min-height: 5.6em;
}
.opt:hover {
  border-color: var(--pink-soft);
}
.opt.sel {
  border-color: var(--cherry);
  background: linear-gradient(
    135deg,
    var(--card-sel) 0%,
    var(--card-sel-2) 100%
  );
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cherry) 40%, transparent);
}
.opt .thumb {
  width: 3.733em;
  height: 3.733em;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--blush);
}
.opt .ico {
  width: 2.154em;
  height: 2.154em;
  border-radius: 14px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--blush);
  color: var(--cherry);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.733em;
}
.opt .meta {
  flex: 1 1 auto;
  min-width: 0;
}
.opt .meta .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.333em;
  line-height: 1.1;
  color: var(--ink);
}
.opt .meta .desc {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 0.867em;
  color: var(--wine-soft);
  margin-top: 2px;
  text-wrap: pretty;
}
.opt .price {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.267em;
  color: var(--cherry);
  white-space: nowrap;
  flex: 0 0 auto;
  padding-left: 4px;
}

/* Photo-forward large option cards */
.opt-lg {
  min-height: 7.333em;
  padding: 1.067em;
  gap: 1.067em;
}
.opt-lg .thumb {
  width: 6.133em;
  height: 6.133em;
  border-radius: 16px;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ink) 25%, transparent);
}
.opt-lg .ico {
  width: 2.875em;
  height: 2.875em;
  border-radius: 16px;
  font-size: 2.133em;
}

/* Base-screen fork: acrylic set vs. standalone gel polish (base.jsx) */
.svc-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.svc-fork-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.7em 0.9em;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: all 0.18s ease;
}
.svc-fork-btn:hover {
  border-color: var(--pink-soft);
}
.svc-fork-btn.sel {
  border-color: var(--cherry);
  background: linear-gradient(135deg, var(--card-sel) 0%, var(--card-sel-2) 100%);
}
.svc-fork-btn .sf-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1em;
  color: var(--ink);
}
.svc-fork-btn .sf-sub {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.8em;
  color: var(--wine-soft);
}
.gel-note {
  font-family: var(--italic);
  font-style: italic;
  color: var(--wine-soft);
  margin: 0;
  padding: 0.6em 0.2em;
  line-height: 1.4;
}

/* Dark dramatic option cards — photos pop on black */
.opt-dark {
  background: linear-gradient(
    135deg,
    var(--dark-card-1) 0%,
    var(--dark-card-2) 100%
  );
  border-color: color-mix(in srgb, var(--white) 7%, transparent);
  color: var(--cream);
}
.opt-dark:hover {
  border-color: color-mix(in srgb, var(--white) 18%, transparent);
}
.opt-dark .meta .name {
  color: var(--white);
}
.opt-dark .meta .desc {
  color: color-mix(in srgb, var(--white) 55%, transparent);
}
.opt-dark .price {
  color: var(--pink-pop);
}
.opt-dark.sel {
  border-color: var(--cherry);
  background: linear-gradient(
    135deg,
    var(--dark-sel-1) 0%,
    var(--dark-sel-2) 100%
  );
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--cherry) 55%, transparent);
}
.opt-dark.sel .meta .name {
  color: var(--white);
}

/* ============== Hero — landing (rebuilt to mockup; palette: colors.css) ============== */
.hero-screen {
  padding: 0;
}
.hero {
  /* One locked scale. Width-driven on a phone, capped by svh on short/
     wide screens so the stack never overflows. Children are sized in em;
     the photo flexes to absorb the leftover height. */
  font-size: clamp(13px, min(6.1vw, 2.7svh), 32px);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 0.9em 0 0;
  background: var(--cream);
}

/* ---- top utility bar: hamburger (left) + theme toggle (right) ---- */
.hero__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 0 1.4em;
  margin-bottom: 0.4em;
}
/* hamburger — visual-only button (no nav exists yet); three em-scaled lines */
.hero__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
}
.hero__menu-lines,
.hero__menu-lines::before,
.hero__menu-lines::after {
  content: "";
  display: block;
  width: 1.25em;
  height: 0.11em;
  border-radius: 999px;
  background: var(--ink);
}
.hero__menu-lines {
  position: relative;
}
.hero__menu-lines::before,
.hero__menu-lines::after {
  position: absolute;
  left: 0;
}
.hero__menu-lines::before {
  top: -0.4em;
}
.hero__menu-lines::after {
  top: 0.4em;
}

/* rotated label running down the LEFT edge of the hero */
.hero__edge-label {
  position: absolute;
  left: 0.55em;
  top: 42%;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.5em;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--wine-soft);
  opacity: 0.8;
  pointer-events: none;
  z-index: 4;
}
.hero__edge-label::after {
  content: "";
  display: block;
  width: 0.32em;
  height: 0.32em;
  margin: 0.9em auto 0;
  border-radius: 50%;
  background: var(--cognac);
}

/* ---- top group: wordmark / tagline / CTA ---- */
.hero__top {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  max-width: 23em;
  margin: 0 auto;
  padding: 0 1.4em;
}
/* Wordmark "Variant A" (brand-plan §1): "Lala" solid jet ink + "luxe" gold-italic.
   The gold lives INSIDE the type — the one new brand treatment, reused on confirmation. */
.hero .wordmark {
  font-family: var(--wordmark);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.86;
  letter-spacing: -0.018em;
  margin: 0;
  text-align: center;
}
.hero .wordmark .roman {
  color: var(--ink);
  font-style: normal;
}
.hero .wordmark .italic {
  font-style: italic;
  font-weight: 600;
  padding-left: 0.04em;
  color: var(--cherry); /* fallback: readable cognac where background-clip:text is unsupported */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .tagline {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82em;
  line-height: 1.32;
  color: var(--tagline-ink);
  margin: 0.1em 0 0.15em;
  text-align: center;
}

/* Gold-in-the-type utility (brand-plan §3). Apply ONLY to heavy/italic Playfair at
   display size — thin or small strokes render the gradient as a smear. Solid cognac
   fallback so no-background-clip browsers see readable text, never transparent. */
.gold-text {
  color: var(--cherry);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  width: fit-content;
  max-width: 100%;
  align-self: center;
  height: auto;
  flex: 0 0 auto;
  min-height: 2.6em;
  margin-top: -0.15em;
  padding: 0 1.7em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--white);
  background: var(--cognac);
  white-space: nowrap;
  box-shadow:
    0 16px 28px -12px color-mix(in srgb, var(--cta-shadow-ink) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.84em;
  letter-spacing: 0.01em;
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    filter 0.22s var(--ease);
}
/* sheen sweep */
.hero .cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 36%,
    color-mix(in srgb, var(--cta-sheen) 34%, transparent) 50%,
    transparent 64%
  );
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}
.hero .cta:hover::before {
  transform: translateX(130%);
}
.hero .cta .startBtn__label {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.hero .cta .startBtn__arrow {
  position: relative;
  z-index: 2;
  top: 0.045em;
  width: 1.45em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  transition: transform 0.22s var(--ease);
}
.hero .cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 36px -12px color-mix(in srgb, var(--cta-shadow-ink) 66%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.hero .cta:hover .startBtn__arrow {
  transform: translateX(0.2em);
}
.hero .cta:active {
  transform: translateY(0) scale(0.99);
}
@media (prefers-reduced-motion: reduce) {
  .hero .cta::before {
    display: none;
  }
}

/* ---- hero photo: white-bg asset dropped onto the pink via multiply;
   the asset carries its own bottom fade. Same width + side padding as
   the Recent Work row so their left/right edges line up exactly. ---- */
.hero__photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: -4em auto 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* faint thin arch/circle drawn behind the cut-out photo */
.hero__arch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 17em;
  height: 17em;
  max-width: 88%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cognac) 22%, transparent);
  z-index: 0;
  pointer-events: none;
}
.hero__photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* transparent cut-out PNG: render true color in BOTH themes, no dim/blend */
  mix-blend-mode: normal;
  pointer-events: none;
  user-select: none;
}

/* ============== Recent Work ==============
   header + portrait frames + edge swipe-hint arrows
   (component: components/RecentWork.jsx) */
.rw2 {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 23em;
  padding: 0 2.6em max(0.5em, env(safe-area-inset-bottom));
  margin-top: 0.7em;
}
.rw2-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
.rw2-spark {
  flex: 0 0 auto;
  color: var(--cognac);
  font-size: 0.6em;
  line-height: 1;
  transform: translateY(-0.02em);
}
.rw2-title {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
  color: var(--accent-black);
  margin: 0;
  white-space: nowrap;
}
.rw2-rule {
  flex: 1 1 auto;
  height: 1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cognac) 42%, transparent);
}
.rw2-viewport {
  position: relative;
}
.rw2-track {
  display: flex;
  gap: 1.1em;
  overflow-x: auto;
  /* vertical room so the card shadows/rings aren't clipped by the scroll
     container's overflow; horizontal gutter stays on .rw2 (1.4em). */
  padding: 0.7em 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.rw2-track::-webkit-scrollbar {
  display: none;
}
/* three thumbnails in view; a gold diamond accent sits in the gap between cards */
.rw2-card {
  position: relative;
  flex: 0 0 calc((100% - 2.2em) / 3);
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  border-radius: 0.7em;
}
/* gold diamond/sparkle accent centered in the gap to the LEFT of every card but the first */
.rw2-card + .rw2-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.55em;
  width: 0.38em;
  height: 0.38em;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 0.04em color-mix(in srgb, var(--cognac) 40%, transparent);
  pointer-events: none;
  z-index: 2;
}
.rw2-frame {
  position: relative;
  display: block;
  border-radius: 0.7em;
  overflow: hidden;
  box-shadow:
    0 14px 26px -12px color-mix(in srgb, var(--shadow-warm) 50%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.rw2-card:hover .rw2-frame {
  transform: translateY(-0.12em);
  box-shadow:
    0 20px 32px -12px color-mix(in srgb, var(--shadow-warm) 58%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.rw2-card:active .rw2-frame {
  transform: scale(0.985);
}
.rw2-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 38%;
  transition: transform 0.5s var(--ease);
}
.rw2-card:hover .rw2-img {
  transform: scale(1.05);
}
/* swipe-hint arrows pinned to the strip edges (forward; .rw2-back mirrors it) */
.rw2-more {
  position: absolute;
  top: 0;
  right: -0.7em;
  bottom: 0;
  width: 3.4em;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--cream) 96%, transparent) 55%
  );
  -webkit-mask: linear-gradient(to right, transparent, #000 30%);
  mask: linear-gradient(to right, transparent, #000 30%);
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}
.rw2-more.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.rw2-more::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  background: var(--wine-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--shadow-warm) 35%, transparent));
  animation: rw2-nudge 1.6s var(--ease) infinite;
}
@keyframes rw2-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.22em); }
}
@media (prefers-reduced-motion: reduce) {
  .rw2-more::before { animation: none; }
}
/* mirrored back chevron: scaleX(-1) flips the gradient, edge mask and arrow */
.rw2-back {
  left: -0.7em;
  right: auto;
  transform: scaleX(-1);
}
/* "swipe through recent work" hint — italic, flanked by tiny arrows */
.rw2-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.5em;
}
.rw2-caption-text {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: 0.04em;
  color: var(--wine-soft);
}
.rw2-caption-arrow {
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  background: var(--cognac);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
}
.rw2-caption-arrow--l {
  transform: scaleX(-1);
}

/* ============== Global a11y: branded focus ring ============== */
/* Same branded keyboard ring for every wizard + gallery/lightbox control
   (.cta covers the hero and consent-modal CTAs too; the consent checkbox/cancel
   copy lives with the consent modal). */
.rw2-more:focus-visible,
.rw2-card:focus-visible,
.lightbox .lb-close:focus-visible,
.lightbox .lb-arrow:focus-visible,
.tile:focus-visible,
.who-tile:focus-visible,
.sub-mode-btn:focus-visible,
.opt:focus-visible,
.lbtn:focus-visible,
.fin:focus-visible,
.des:focus-visible,
.addbtn:focus-visible,
.switch:focus-visible,
.cta:focus-visible,
.back-link:focus-visible,
.exit-btn:focus-visible,
.cal-nav button:focus-visible,
.cal-cell:focus-visible,
.slot:focus-visible,
.cal-retry:focus-visible {
  outline: 2px solid var(--cognac);
  outline-offset: 3px;
}
/* the 2px-gap day grid would overdraw a mid-grid ring with later-sibling cells */
.cal-cell:focus-visible {
  z-index: 1;
}

/* Wide landscape: re-compose the same em-locked pieces as two columns
   (text + gallery | photo) so desktop fills instead of stacking a
   phone-width column in dead space. The scale clamp above is untouched;
   minmax(0, 30em) lets the photo column shrink first so nothing overflows. */
@media (min-width: 75em) and (orientation: landscape) {
  .hero {
    display: grid;
    grid-template-columns: 23em minmax(0, 30em);
    grid-template-rows: auto 1fr auto;
    align-content: center;
    justify-content: center;
    column-gap: 3em;
  }
  /* utility bar spans the full width across the top of the two columns */
  .hero__bar {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .hero__top {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: center;
  }
  .hero__photo {
    grid-column: 2;
    grid-row: 2 / span 2;
    max-width: none;
    min-height: 0;
  }
  .hero__photo img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .rw2 {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: center;
    padding-bottom: max(1.6em, env(safe-area-inset-bottom));
  }
}

/* ============== Lightbox ============== */
.lightbox {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--wine) 86%, transparent);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lb-in 0.22s ease;
  padding: 24px;
  cursor: zoom-out;
}
@keyframes lb-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lightbox .lb-stage {
  position: relative;
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: default; /* don't inherit the scrim's zoom-out — stage clicks don't close */
  user-select: none;
}
.lightbox .lb-viewport {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100svh - 150px); /* small viewport: iOS URL-bar chrome must not clip the nav row (svh = hero convention, no resize mid-swipe) */
  overflow: hidden;
  border-radius: 18px;
  touch-action: pan-y;
}
.lightbox .lb-track {
  display: flex;
  width: 300%;
  transform: translate3d(-33.3333%, 0, 0);
  will-change: transform;
  align-items: center;
}
.lightbox .lb-slide {
  width: 33.3333%;
  flex: 0 0 33.3333%;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox .lb-img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100svh - 150px);
  width: auto;
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* second .lb-stage block is an intentional grouping (animation only) —
   no conflicting props with the layout block above (lens-D iter-7) */
.lightbox .lb-stage {
  animation: lb-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes lb-pop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* round ivory button recipe shared by close + prev/next (px = lightbox convention) */
.lightbox .lb-close,
.lightbox .lb-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
  line-height: 1;
  padding: 0;
}
.lightbox .lb-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2;
}
.lightbox .lb-close:hover,
.lightbox .lb-arrow:hover {
  background: var(--card-sel);
}
/* prev/next sit in a row flanking the caption, clear of the image at every width */
.lightbox .lb-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lightbox .lb-count {
  font-family: var(--italic);
  font-style: italic;
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.lightbox .lb-count .dots {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
}
.lightbox .lb-count .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 30%, transparent);
}
.lightbox .lb-count .d.on {
  background: var(--gold);
}
/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox .lb-stage {
    animation: none;
  }
  /* near-zero (not none): the swipe handlers advance on transitionend */
  .lightbox .lb-track {
    transition-duration: 0.01ms !important;
  }
  .rw2-frame,
  .rw2-img {
    transition: none;
  }
}

/* ============== Visit kind ticket tiles ============== */
.tile-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: auto 0;
}

.screen:not(.hero-screen) {
  /* `safe` keeps short screens vertically centered (the locked-scale "one screen
     fills the viewport" look) but falls back to top-aligned the moment content is
     taller than the viewport — otherwise centered overflow pushes the header and
     the first options ABOVE scrollTop:0, where they can never be scrolled to. */
  justify-content: safe center;
  padding-bottom: 24px;
}
/* The hero manages its own padding and fills the screen via flex. */
.screen.hero-screen {
  padding: 0;
}
.screen:not(.hero-screen) .body {
  flex: 0 0 auto;
}
.tile {
  position: relative;
  background: var(--paper);
  border-radius: 22px;
  padding: 1.333em 1.467em;
  text-align: left;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: all 0.18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  justify-content: center;
  min-height: 9.333em;
  width: 100%;
  font: inherit;
  color: inherit;
}
.tile:hover {
  border-color: var(--pink-soft);
  transform: translateY(-1px);
}
.tile.cherry {
  /* cognac (not cherry) start + white text: worst-case stop is 4.85:1, AA for body text */
  background: linear-gradient(150deg, var(--cognac), var(--pink-pop));
  color: var(--white);
  border-color: transparent;
}
.tile .title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.267em;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.tile.cherry .title em {
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  color: var(--white);
}
.tile .desc {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 0.933em;
  opacity: 0.88;
  max-width: 28ch;
  text-wrap: pretty;
}
.tile .ornament {
  position: absolute;
  font-family: var(--script);
  font-size: 7.333em; /* 110px at the 15px design base — em so the decoration tracks the knob */
  line-height: 1;
  color: color-mix(in srgb, var(--pink-pop) 10%, transparent);
  right: -0.127em; /* -14px (em of own 7.333em font) */
  bottom: -0.309em; /* -34px */
  pointer-events: none;
  user-select: none;
}
.tile.cherry .ornament {
  color: color-mix(in srgb, var(--white) 16%, transparent);
}

/* Dark dramatic visit tiles */
.tile-dark {
  background: linear-gradient(
    150deg,
    var(--dark-card-1),
    var(--dark-card-2)
  );
  color: var(--cream);
  border-color: color-mix(in srgb, var(--white) 7%, transparent);
}
.tile-dark:hover {
  border-color: color-mix(in srgb, var(--white) 18%, transparent);
  transform: translateY(-1px);
}
.tile-dark .title {
  color: var(--white);
}
.tile-dark .title em {
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  color: var(--pink-pop);
}
.tile-dark .desc {
  color: color-mix(in srgb, var(--white) 70%, transparent);
}
.tile-dark .ornament {
  color: color-mix(in srgb, var(--pink-pop) 14%, transparent);
}
.tile-dark.sel {
  border-color: var(--cherry);
  background: linear-gradient(
    150deg,
    var(--dark-sel-1),
    var(--dark-sel-2)
  );
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--cherry) 50%, transparent);
  transform: translateY(-2px);
}
.tile.cherry.sel {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--pink-pop) 50%, transparent);
}

/* ============== Who tiles (3-up) ============== */
.who-grid {
  display: grid;
  /* minmax(0,…) lets tracks compress below min-content so 3-up never overflows the 390 base */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.who-tile {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 0.933em 0.4em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.667em;
  font: inherit;
  color: inherit;
  transition: all 0.2s ease;
  aspect-ratio: 3 / 4;
  /* aspect-ratio makes `normal` alignment behave as `start` in BOTH grid axes:
     unstretched tiles took their own content height, and width transferred from
     the stretched row height (199px row -> 150px tile in a 111px track, clipping
     3-up offscreen at the 393 base) — pin both axes to the grid area */
  align-self: stretch;
  justify-self: stretch;
}
.who-tile:hover {
  border-color: var(--pink-soft);
}
.who-tile.sel {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.who-tile.sel .who-name {
  color: var(--cream);
}
.who-tile .who-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.467em;
  line-height: 1;
}
.who-tile .who-sub {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  font-size: 0.8em;
  color: var(--wine-soft);
  text-align: center;
  line-height: 1.2;
  margin-top: 0.25em;
  text-wrap: balance;
  max-width: 9.167em;
}
.who-tile.sel .who-sub {
  color: color-mix(in srgb, var(--white) 70%, transparent);
}

.nail-photo {
  height: 7.467em;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}
.toe-photo {
  height: 6.4em;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}
/* ============== Length picker ============== */
/* length/plan screens: let the body flex (overrides the global flex:0 0 auto at 1286)
   so the stage fills header→botbar — the preview absorbs free space, never a dead void,
   and the chips always sit above the botbar when the stage's em floor fits. */
.screen:not(.hero-screen) .body:has(.length-stage) {
  flex: 1 1 auto;
}
.length-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 12px;
}
.length-vis {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  /* low floor: in cramped landscape the stage compresses so the length
     chips stay discoverable; portrait flex still grants it ~20em. */
  min-height: 6em;
  max-height: 23em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  container-type: size; /* lets .finger key its scale off 100cqh */
}
.finger {
  /* one composition scale keyed to the stage's height: 15em = nail-bed
     bottom (3.333em) + XXL nail (11.667em), so XXL exactly fills the vis and
     the fingertip grows with it. Every child is em — the whole composition
     scales as a unit (never stretches). Falls back to inherited 1em
     (today's px baseline) where cqh is unsupported. */
  font-size: calc(100cqh / 15);
  position: relative;
  width: 5.2em;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.finger .skin {
  position: absolute;
  bottom: 0;
  width: 3.7em;
  /* 7.333em (the 70:110 base-fork ratio) keeps the fingertip BELOW the
     shortest nail's top, so every length reads as an extension. */
  height: 7.333em;
  /* soft cylindrical shading: lit centre, shaded sides, warm tip */
  background:
    radial-gradient(
      120% 80% at 50% 8%,
      color-mix(in srgb, var(--white) 22%, var(--skin)) 0%,
      transparent 55%
    ),
    linear-gradient(
      90deg,
      var(--skin-deep) 0%,
      var(--skin) 28%,
      var(--skin) 72%,
      var(--skin-deep) 100%
    );
  border-radius: 1.85em 1.85em 0.5em 0.5em;
  box-shadow:
    inset -7px 0 14px -8px color-mix(in srgb, var(--ink) 45%, transparent),
    inset 7px 0 14px -8px color-mix(in srgb, var(--white) 14%, transparent),
    0 6px 16px -10px color-mix(in srgb, var(--ink) 50%, transparent);
}
.finger .knuckle {
  position: absolute;
  bottom: 1.6em;
  left: 1em;
  right: 1em;
  height: 0.5em;
  background: radial-gradient(
    60% 100% at 50% 0%,
    color-mix(in srgb, var(--ink) 16%, transparent) 0%,
    transparent 100%
  );
  border-radius: 999px;
}
.finger .nail-bed {
  position: absolute;
  bottom: 3.333em;
  left: 50%;
  transform: translateX(-50%);
  width: 2.9em;
  /* clear acrylic: translucent so the finger/background reads through, just a
     faint frost and a cooler tip — no colored fill, no glow. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--white) 48%, transparent) 0%,
    color-mix(in srgb, var(--white) 20%, transparent) 50%,
    color-mix(in srgb, var(--blush) 26%, transparent) 100%
  );
  /* squared free edge (top), gently curved cuticle (bottom) */
  border-radius: 0.3em 0.3em 42% 42% / 0.3em 0.3em 16% 16%;
  /* thin plastic rim + soft neutral ground shadow (no cherry halo) */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--white) 35%, transparent),
    0 3px 7px -4px color-mix(in srgb, var(--ink) 35%, transparent);
  transition: height 0.45s cubic-bezier(0.3, 1.2, 0.4, 1);
  overflow: hidden;
}
/* lengthwise sheen down the plate */
.finger .nail-bed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  width: 26%;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--white) 85%, transparent) 0%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(1.5px);
  opacity: 0.7;
}
/* lunula — the half-moon at the cuticle */
.finger .nail-bed::after {
  content: "";
  position: absolute;
  bottom: 0.3em;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8em;
  height: 0.55em;
  background: color-mix(in srgb, var(--white) 55%, transparent);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: blur(1px);
}
/* sparkle near the free edge */
.finger .glint {
  position: absolute;
  top: 0.8em;
  left: 38%;
  transform: translateX(-50%);
  width: 0.5em;
  height: 0.7em;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.9;
}

.length-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  width: 100%;
}
.lbtn {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: inherit;
  color: inherit;
  transition: all 0.18s ease;
}
.lbtn:hover {
  border-color: var(--pink-soft);
}
.lbtn.sel {
  border-color: var(--cherry);
  background: linear-gradient(180deg, var(--card-sel), var(--card-sel-2));
}
.lbtn .lname {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.267em;
  line-height: 1;
}
/* settled money speaks the display voice; italic umber is reserved for
   not-a-number price text ("Included", "Quoted") */
.lbtn .lprice {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.867em;
  color: var(--cherry);
}

.length-cap {
  font-family: var(--italic);
  font-style: italic;
  font-size: 1em;
  color: var(--cherry);
  text-align: center;
  margin: 0 auto;
  min-height: 2.8em;
  max-width: 28ch;
  text-wrap: balance;
  padding: 4px 0;
}

/* ============== Finish (4 mini nails) ============== */
.finish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.fin {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 14px 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  color: inherit;
  transition: all 0.18s ease;
  min-height: 8.667em;
}
.fin:hover {
  border-color: var(--pink-soft);
}
.fin.sel {
  border-color: var(--cherry);
  background: linear-gradient(180deg, var(--card-sel), var(--card-sel-2));
  transform: translateY(-2px);
}
.fin .fname {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.067em;
  line-height: 1.05;
  text-align: center;
}
.fin .fprice {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8em;
  color: var(--cherry);
}
/* zero-price base styles read "Included" — the open/not-a-number voice */
.fin .fprice.included {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  color: var(--wine-soft);
}

/* mini nail shape */
.mini-nail {
  width: 2.267em;
  height: 3.333em;
  border-radius: 17px 17px 6px 6px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 -3px 6px -2px color-mix(in srgb, var(--cherry) 20%, transparent),
    inset 0 3px 6px -2px color-mix(in srgb, var(--white) 50%, transparent);
}
.mini-nail.solid {
  background: var(--swatch-solid);
}
.mini-nail.fr-classic {
  background: var(--swatch-french);
}
.mini-nail.fr-classic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: var(--swatch-tip);
  border-radius: 0 0 8px 8px / 0 0 14px 14px;
  border-bottom: 1.5px solid var(--swatch-tip-edge);
}
.mini-nail.ombre {
  background: var(--swatch-ombre);
}
.mini-nail.marble {
  background: var(--swatch-marble);
}

/* ============== Design level dial ============== */
.design-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.des {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  font: inherit;
  color: inherit;
  transition: all 0.18s ease;
  text-align: left;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}
.des:hover {
  border-color: var(--pink-soft);
}
.des.sel {
  border-color: var(--cherry);
  background: linear-gradient(150deg, var(--card-sel), var(--card-sel-2));
}
/* Imageless tier ("No design"): blush swatch field + bare mini-nail, sized by .des-photo
   so it matches sibling photos at every scale. */
.des-bare {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--pink-soft), var(--blush));
}
.des .dname {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.467em;
  line-height: 1;
}
.des .ddesc {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.8em;
  line-height: 1.25;
  color: var(--wine-soft);
  text-wrap: pretty;
  width: 100%;
}
.des .dprice {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2em;
  color: var(--cherry);
  margin-top: auto;
}

/* Design option with photo thumbnail */
.des-photo {
  width: 100%;
  height: 6em;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 4px;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ink) 20%, transparent);
}

/* Choosing "Other" (custom) de-emphasizes the menu it opts out of — still clickable, so
   tapping a base style / preset art re-enters the menu. */
.is-dim {
  opacity: 0.4;
  transition: opacity 0.18s ease;
}
/* "Other — my own inspo": the full-width menu-escape bar under the art tiers. */
.des-other {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.des-other .other-glyph {
  font-family: var(--italic);
  font-style: italic;
  font-size: 1.733em;
  line-height: 1;
  color: var(--cherry);
  flex: 0 0 auto;
}
.des-other .other-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.des-other .dname {
  font-size: 1.2em;
}
.des-other .ddesc {
  width: auto;
}
.des-other .dprice {
  margin: 0;
  flex: 0 0 auto;
}
.custom-hint {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.833em;
  line-height: 1.3;
  color: var(--wine-soft);
  margin: 0 2px 6px;
}
.quote-note {
  color: var(--cherry);
}

/* ============== Add-ons chip cloud ============== */
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.addon-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: flex-start;
}
/* Wide desktop: the one-at-a-time row lists waste the 40em column — re-compose
   the same em-locked rows as two columns (composition only; the scale clamp is
   untouched). An odd last row spans full width so no half-width orphan strands.
   (Lives AFTER both base rules — .addon-list's 1fr would out-cascade it otherwise.) */
@media (min-width: 75em) {
  .opt-list,
  .addon-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .opt-list > :last-child:nth-child(odd),
  .addon-list > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.addbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px 9px 11px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  font-size: 0.9em;
  min-height: 44px; /* touch floor — a physical-device constant, so px */
  transition: all 0.18s ease;
}
.addbtn.addon-row {
  width: 100%;
  min-height: 5.778em;
  display: grid;
  grid-template-columns: 4.593em minmax(0, 1fr) auto 1.778em; /* last track = the 24px .plus circle (1.778em of the 0.9em row font) */
  gap: 10px;
  align-items: center;
  border-radius: 18px;
  padding: 8px 10px 8px 8px;
  text-align: left;
}
.addbtn:hover {
  border-color: var(--pink-soft);
}
.addbtn.sel {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
/* circle + glyph scale together off the knob (toes add-ons render "On" in the
   circle — a fixed circle would spill at the desktop cap). 0.963em of the 0.9em
   .addbtn context = 13px at the 15px base; 1.385em of that own font = 18px. */
.addbtn .plus {
  width: 1.385em;
  height: 1.385em;
  border-radius: 50%;
  background: var(--cognac); /* white glyph/"On" text needs ≥4.5:1 — --cherry is 4.21:1 */
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 0.963em;
  line-height: 1;
  flex: 0 0 auto;
}
.addbtn.sel .plus {
  background: var(--cream);
  color: var(--ink);
}
/* NOTE: child em sizes here are exact compensations for the .addbtn 0.9em
   context (e.g. 1.037em x 0.9 = 0.933 app-em; .addon-name 1.185 x 0.9 = 1.067) —
   editing a parent font-size silently breaks the landing values. */
.addbtn .ap {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.037em;
  color: var(--cherry);
}
.addbtn.sel .ap {
  color: var(--pink-soft);
}
.addbtn.addon-row .addon-img {
  width: 4.593em;
  height: 4.593em;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ink) 45%, transparent);
}
/* Swatch tile in the image column: base styles (mini-nail) and the art tiers'
   imageless rows reuse the addon-row layout, so the swatch sits in the same
   4.593em slot a thumbnail would. */
.addbtn.addon-row .addon-swatch {
  width: 4.593em;
  height: 4.593em;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--pink-soft), var(--blush));
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ink) 45%, transparent);
}
.addbtn.addon-row .addon-swatch .mini-nail {
  width: 1.733em;
  height: 2.6em;
}
.addbtn.addon-row .other-swatch .other-glyph {
  font-family: var(--italic);
  font-style: italic;
  font-size: 1.9em;
  line-height: 1;
  color: var(--cherry);
}
/* "Included" base styles keep the open, non-numeric voice even in the price slot. */
.addbtn.addon-row .ap.ap-included {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  color: var(--wine-soft);
}
.addbtn.addon-row.sel .ap.ap-included {
  color: var(--pink-soft);
}
/* Prep rows (soak-off / repair) are utilitarian service items, not a look — no aesthetic
   thumbnail, so drop the image column (decisions.md F21). */
.addbtn.addon-row.prep-row {
  grid-template-columns: minmax(0, 1fr) auto 1.778em;
  min-height: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}
.addbtn.addon-row .addon-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.addbtn.addon-row .addon-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.185em;
  line-height: 1.05;
  color: inherit;
}
.addbtn.addon-row .addon-desc {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.852em;
  line-height: 1.25;
  color: var(--wine-soft);
}
.addbtn.addon-row.sel .addon-desc {
  color: color-mix(in srgb, var(--white) 72%, transparent);
}
.addbtn.addon-row .plus {
  width: 2.182em; /* 24px: 2.182em of the own 0.815em (=11px) font below */
  height: 2.182em;
  font-size: 0.815em; /* 11px in the 0.9em .addbtn context at the 15px base */
  text-transform: uppercase;
}
/* Art already bundled into the chosen design tier: shown, but locked off so it
   can't be added (and double-charged) a second time. */
.addbtn.addon-row.included {
  opacity: 0.62;
  cursor: default;
  border-style: dashed;
}
.addbtn.addon-row.included:hover {
  border-color: var(--line, var(--pink-soft));
}
.addbtn.addon-row.included .ap {
  color: var(--wine-soft);
  font-style: italic;
}
.addbtn.addon-row.included .plus {
  background: var(--wine-soft);
  color: var(--white);
}

/* ============== Summary / receipt ============== */
.receipt {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 30px,
      color-mix(in srgb, var(--blush) 45%, transparent) 30px 31px
    ),
    var(--paper);
  border-radius: 18px;
  padding: 18px 18px 14px;
  border: 1.5px solid var(--blush);
  overflow: hidden;
  position: relative;
}
.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background-image: radial-gradient(
    circle at 7px 0,
    var(--cream) 0 6px,
    transparent 7px
  );
  background-size: 14px 14px;
  background-repeat: repeat-x;
}
.receipt::before {
  top: -7px;
}
.receipt::after {
  bottom: -7px;
  transform: rotate(180deg);
}

.rcpt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1.5px dashed
    color-mix(in srgb, var(--wine-soft) 18%, transparent);
  padding-bottom: 10px;
}
.rcpt-head .rcpt-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.733em;
  line-height: 1;
}
.rcpt-head .rcpt-date {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.8em;
  color: var(--wine-soft);
  white-space: nowrap;
}
.rcpt-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 0;
}
.rcpt-list::-webkit-scrollbar {
  width: 6px;
}
.rcpt-list::-webkit-scrollbar-thumb {
  background: var(--blush);
  border-radius: 3px;
}
.rcpt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.933em;
  border-bottom: 1px dotted
    color-mix(in srgb, var(--wine-soft) 12%, transparent);
}
.rcpt-row:last-child {
  border-bottom: 0;
}
.rcpt-row .l {
  color: var(--ink);
}
.rcpt-row .r {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.143em; /* compensation: 1.143 x the row's 0.933em = 1.067 app-em — edit in lockstep with .rcpt-row */
  color: var(--ink);
}
/* open price (custom design quoted in studio) — must not read as settled */
.rcpt-row .r.quoted {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  color: var(--wine-soft);
}
/* code-shaped values (subscription code) — same mono convention as .field.mono */
.rcpt-row .r.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.05em;
}

.rcpt-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px dashed
    color-mix(in srgb, var(--wine-soft) 22%, transparent);
  padding-top: 12px;
  margin-top: 4px;
}
.rcpt-total .lbl {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.867em;
  color: var(--wine-soft);
  white-space: nowrap;
}
.rcpt-total .amt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.2em;
  color: var(--cherry);
  line-height: 1;
  letter-spacing: -0.01em;
}

.rcpt-note {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.767em;
  color: var(--wine-soft);
  margin-top: 6px;
  text-align: center;
  text-wrap: pretty;
}

.rcpt-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    var(--card-sel) 0%,
    var(--card-sel-2) 100%
  );
  border: 1.5px solid var(--cherry);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
  gap: 10px;
}
.rcpt-due-lbl {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.067em;
  color: var(--cherry-ink);
  letter-spacing: 0.01em;
}
.rcpt-due-amt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.867em;
  color: var(--cherry);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ============== Kid toggle ============== */
.kid {
  cursor: pointer;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 60%, transparent);
  border: 1.5px solid var(--line);
}
/* --white isn't re-pinned in dark mode, so the 60%-white pill would glare on espresso;
   match the dark card surface instead. */
[data-theme="dark"] .kid {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.kid .label {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.867em;
  color: var(--wine-soft);
  flex: 1;
  line-height: 1.3;
}
.switch {
  width: 2.8em;
  height: 1.6em;
  position: relative;
  flex: 0 0 auto;
  background: var(--blush);
  border-radius: 999px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  font: inherit; /* em dims key off the locked screen scale, not the UA button font */
  transition: background 0.2s;
}
/* invisible hit-area extension: ~42x24px visual -> 45x45 touch target
   (::after is the knob, so the extension lives on ::before) */
.switch::before {
  content: "";
  position: absolute;
  inset: -12px -3px;
}
.switch::after {
  content: "";
  position: absolute;
  top: 0.133em;
  left: 0.133em;
  width: 1.067em;
  height: 1.067em;
  background: var(--cream);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}
.switch.on {
  background: var(--cherry);
  border-color: var(--cherry);
}
.switch.on::after {
  transform: translateX(1.2em);
}
/* deco corner sparkle */
.deco-spark {
  position: absolute;
  pointer-events: none;
  width: 14px;
  height: 14px;
  background: var(--cherry);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.5 10.5 L22 12 L13.5 13.5 L12 22 L10.5 13.5 L2 12 L10.5 10.5 Z'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.5 10.5 L22 12 L13.5 13.5 L12 22 L10.5 13.5 L2 12 L10.5 10.5 Z'/></svg>")
    center/contain no-repeat;
}

/* ============== Existing-subscription redemption (visit sub-mode, code entry, status) ============== */
.sub-mode-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.sub-mode-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 13px 16px;
  cursor: pointer;
  font: inherit; /* children's em type keys off the locked screen scale */
  transition: all 0.16s ease;
}
.sub-mode-btn:hover {
  border-color: var(--pink-soft);
  transform: translateY(-1px);
}
.sub-mode-btn.sel {
  border-color: var(--cherry);
  background: var(--card-sel);
}
/* sub-mode picker hosted in a modal (visit step) */
.sub-mode-card .sub-mode-row {
  margin-top: 14px;
}
.sub-mode-card .modal-actions {
  justify-content: center;
  margin-top: 14px;
}
.sub-mode-btn .smb-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1em;
  color: var(--ink);
}
.sub-mode-btn .smb-sub {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.8em;
  color: var(--wine-soft);
}
.sub-status {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-status .ss-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.sub-status .ss-k {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.833em;
  color: var(--wine-soft);
}
.sub-status .ss-v {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.933em;
  color: var(--ink);
}
.sub-error {
  font-family: var(--sans);
  font-size: 0.867em;
  color: var(--cherry-ink);
  background: color-mix(in srgb, var(--cherry) 8%, transparent);
  border-radius: 12px;
  padding: 9px 14px;
  text-align: center;
}

/* ============== Calendar ============== */
/* Wide viewports: month grid and time slots side by side so picking a day
   never leaves the slot list below the fold (composition-only — the locked
   scale clamp is untouched). */
@media (min-width: 69em) {
  .cal-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1em;
    align-items: start;
  }
  .cal-body .slot-section {
    margin-top: 0;
  }
}
/* Short bases: the calendar outgrows the one-screen budget. The generic
   .screen:not(.hero-screen) .body { flex: 0 0 auto } exception let it spill
   past the screen's bottom padding to the botbar edge. Letting .cal-body
   shrink (base .body already has min-height: 0) passes the deficit through
   the card to .cal-grid — the card's only scroller (see .cal-grid below) —
   so the month ROWS scroll inside the card while the head, legend, and the
   slot-section (incl. the empty-state hint) stay pinned on screen at rest,
   clear of the botbar by the screen's own bottom padding. */
.screen:not(.hero-screen) .cal-body {
  flex-shrink: 1;
}
.cal-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  /* no min-height:0 — the auto min (head+dow+legend+grid's min-height) is the
     floor that stops shrinking and hands further overflow to .screen-wrap */
  border: 1.5px solid var(--blush);
  border-radius: 22px;
  padding: 14px 14px 16px;
  box-shadow: 0 6px 18px -10px
    color-mix(in srgb, var(--cherry) 16%, transparent);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 12px;
}
.cal-month {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.467em;
  line-height: 1;
  letter-spacing: -0.005em;
}
.cal-month em {
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  color: var(--cherry);
}
.cal-nav {
  display: flex;
  gap: 12px; /* 12px gap + the -6px hit extensions = adjacent, non-overlapping 44px zones */
}
.cal-nav button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all 0.18s ease;
  padding: 0;
  position: relative;
}
/* invisible hit-area extension: 32px circle -> 44px touch target */
.cal-nav button::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.cal-nav button:hover:not(:disabled) {
  border-color: var(--cherry);
  color: var(--cherry);
}
.cal-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cal-nav button .chev {
  width: 14px;
  height: 14px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
}
.cal-nav button.next .chev {
  transform: scaleX(-1);
}

.cal-dow-row,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px; /* tight gutters keep day cells >=44px at the 390 base */
}
/* The grid is the card's ONLY scroller: on short bases the .cal-body shrink
   lands here (393x659: ~204px = 4 rows + a ~19px row-5 peek as the scroll
   affordance), keeping legend + slot-section hint visible at rest. Net-zero
   padding/margin inset keeps edge cells' focus rings (2px outline + 3px
   offset) inside the scrollport instead of clipping. */
.cal-grid {
  overflow-y: auto;
  min-height: 136px; /* ~3 day rows (px like the 44px cell floor) — the month never collapses; beyond this .screen-wrap scrolls */
  padding: 5px;
  margin: -5px;
}
.cal-dow {
  text-align: center;
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.733em;
  color: var(--wine-soft);
  padding: 0 0 8px;
  letter-spacing: 0.04em;
}
.cal-cell {
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.067em;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ink);
  position: relative;
  padding: 0;
  transition: all 0.16s ease;
}
.cal-cell.empty {
  visibility: hidden;
  cursor: default;
}
.cal-cell.past {
  color: color-mix(in srgb, var(--wine-soft) 22%, transparent);
  cursor: not-allowed;
}
/* availability still loading: dimmed, no strikethrough — the month is not "closed" */
.cal-cell.wait {
  color: color-mix(in srgb, var(--wine-soft) 35%, transparent);
  cursor: progress;
}
.cal-cell.closed {
  color: color-mix(in srgb, var(--wine-soft) 28%, transparent);
  cursor: not-allowed;
}
.cal-cell.closed::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 22%;
  right: 22%;
  height: 1px;
  background: color-mix(in srgb, var(--wine-soft) 22%, transparent);
}
.cal-cell.avail {
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  border-color: var(--line);
}
.cal-cell.avail:hover {
  border-color: var(--cherry);
  transform: translateY(-1px);
}
.cal-cell.today {
  box-shadow: inset 0 0 0 1.5px var(--pink-soft);
}
.cal-cell.sel {
  background: var(--cognac); /* white date text needs ≥4.5:1 — --cherry is 4.21:1 */
  color: var(--white);
  border-color: var(--cognac);
  box-shadow: 0 6px 14px -6px
    color-mix(in srgb, var(--cherry) 55%, transparent);
}
.cal-cell .ddot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink-pop);
  position: absolute;
  bottom: 6px;
  opacity: 0.85;
}
.cal-cell.sel .ddot {
  background: rgba(255, 255, 255, 0.85);
}

.cal-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px; /* 14/12→8/8: banks ~10px for the grid's row-5 scroll peek at 393x659 */
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.767em;
  color: var(--wine-soft);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.cal-legend .l-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cal-legend .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-pop);
}
.cal-legend .swatch.closed {
  background: transparent;
  position: relative;
}
.cal-legend .swatch.closed::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  right: -1px;
  height: 1px;
  background: var(--wine-soft);
}
.cal-legend .swatch.sel {
  background: var(--cognac); /* matches the .cal-cell.sel surface it stands for */
}

.slot-section {
  margin-top: 14px;
}
.slot-section .slabel {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.867em;
  color: var(--wine-soft);
  margin-bottom: 8px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slot-section .slabel .picked {
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  color: var(--cherry-ink);
  font-size: 1.077em;
}
.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.slot {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 4px;
  font: inherit;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1em;
  color: var(--ink);
  transition: all 0.18s ease;
  text-align: center;
  line-height: 1;
  position: relative;
}
.slot small {
  display: block;
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.667em;
  color: var(--wine-soft);
  margin-top: 3px;
}
.slot:hover:not(:disabled) {
  border-color: var(--pink-soft);
}
/* picked slot matches the picked day-cell recipe (one selection color per screen) */
.slot.sel {
  background: var(--cognac); /* white time text needs ≥4.5:1 — --cherry is 4.21:1 */
  color: var(--white);
  border-color: var(--cognac);
  box-shadow: 0 6px 14px -6px
    color-mix(in srgb, var(--cherry) 55%, transparent);
}
.slot.sel small {
  color: color-mix(in srgb, #fff 85%, transparent);
}
.slot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot:disabled small {
  text-decoration: none;
}

.empty-slots {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.867em;
  color: var(--wine-soft);
  text-align: center;
  padding: 14px 8px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
}
/* refetch live hours after an availability error (>=44px touch target) */
.cal-retry {
  display: block;
  margin: 8px auto 0;
  min-height: 44px;
  padding: 0 18px;
  font: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--cherry-ink);
  background: transparent;
  border: 1.5px solid var(--cherry);
  border-radius: 999px;
  cursor: pointer;
}
.cal-retry:hover {
  color: var(--white);
  background: var(--cognac); /* white text needs ≥4.5:1 — --cherry is 4.21:1 */
}

/* ============== Checkout ============== */
.co-summary {
  background: var(--paper);
  border: 1.5px solid var(--blush);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.co-summary::before {
  content: "♡";
  position: absolute;
  right: 1.429em; /* 80px at the 15px design base (em of own 3.733em font) */
  bottom: -0.286em; /* -16px */
  font-family: var(--script);
  font-size: 3.733em; /* 56px at the 15px design base — em so the decoration tracks the knob */
  color: color-mix(in srgb, var(--pink-pop) 6%, transparent);
  pointer-events: none;
}
.co-summary .l {
  line-height: 1.25;
}
.co-summary .l .when-line {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2em;
  color: var(--ink);
  line-height: 1.1;
}
.co-summary .l .when-sub {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.8em;
  color: var(--wine-soft);
  margin-top: 2px;
}
.co-summary .r {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.co-summary .r .total-lbl {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.733em;
  color: var(--wine-soft);
  line-height: 1;
  white-space: nowrap;
}
/* the amount owed NOW outranks the total — summary's due-pill recipe, compacted */
.co-summary .r .co-due {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    var(--card-sel) 0%,
    var(--card-sel-2) 100%
  );
  border: 1.5px solid var(--cherry);
}
.co-summary .r .co-due .due-lbl {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8em;
  color: var(--cherry-ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.co-summary .r .co-due .due-amt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2em;
  color: var(--cherry);
  line-height: 1;
}

.co-section {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.8em;
  color: var(--wine-soft);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 2px;
}
.co-section::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--cherry);
}
.co-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field .lab {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400; /* pin: the generic `.field label` group rule above sets 500 */
  font-size: 0.767em;
  color: var(--wine-soft);
  padding-left: 4px;
  letter-spacing: 0.02em;
}
.field input,
.field textarea,
.look-note {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-family: var(--sans);
  /* 16px floor: anything smaller makes iOS Safari auto-zoom the page on focus */
  font-size: max(16px, 1em);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
  -webkit-appearance: none;
}
.field textarea,
.look-note {
  resize: none;
  min-height: 60px;
  font-family: var(--sans);
}
.look-note {
  margin-bottom: 6px;
}
.field input::placeholder,
.field textarea::placeholder,
.look-note::placeholder {
  color: color-mix(in srgb, var(--wine-soft) 32%, transparent);
}
.field input:focus,
.field textarea:focus,
.look-note:focus {
  border-color: var(--cherry);
  background: var(--card-sel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cherry) 10%, transparent);
}
/* touched-and-invalid hint under a gating field (same predicates as the CTA gate) */
.field .field-err {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.767em;
  color: var(--pop-ink);
  padding-left: 4px;
}
.upload-box {
  position: relative;
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--wine-soft) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 48%, transparent);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.1s ease;
}
.upload-box:active {
  transform: translateY(1px);
}
.upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.upload-main {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1em;
  color: var(--ink);
}
.upload-sub,
.upload-help,
.upload-error {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.767em;
  color: var(--wine-soft);
}
.upload-error {
  color: var(--pop-ink);
}
.share-previews {
  display: grid;
  gap: 6px;
}
.share-preview {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
}
.share-preview img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.share-preview-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.share-preview-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.833em;
  font-weight: 600;
}
.share-preview-meta small {
  font-family: var(--italic);
  font-style: italic;
  color: var(--wine-soft);
}
.share-preview button {
  border: 0;
  background: transparent;
  color: var(--cherry);
  font: inherit;
  font-size: 0.767em;
  font-weight: 700;
  cursor: pointer;
  padding: 6px;
}
.field.mono input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.05em;
}
/* stacked at the mobile base (~171px halves overflow a typed email); paired from 768px */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 768px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}
.field-row.three {
  grid-template-columns: 2fr 1fr 1fr;
}

.co-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.767em;
  color: var(--wine-soft);
  text-wrap: pretty;
}
.co-secure .lock {
  width: 14px;
  height: 14px;
  background: var(--wine-soft);
  flex: 0 0 auto;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 10V8a6 6 0 0 1 12 0v2M5 10h14v11H5z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 10V8a6 6 0 0 1 12 0v2M5 10h14v11H5z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
}

.co-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 2px 4px;
  margin: 0 -2px;
}
.co-scroll::-webkit-scrollbar {
  width: 6px; /* match .rcpt-list — one branded scrollbar width */
}
.co-scroll::-webkit-scrollbar-thumb {
  background: var(--blush);
  border-radius: 3px;
}

.modal-error {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.867em;
  color: var(--pop-ink);
  padding-left: 4px;
}

/* ============== Consent modal ============== */
.modal-scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--scrim-ink) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px 20px;
  animation: scrim-in 0.22s ease both;
}
@keyframes scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 25.333em;
  background: var(--paper); /* ivory card on the rose canvas — same figure-ground as every other money surface */
  border-radius: 24px;
  padding: 1.467em 1.467em 1.2em;
  box-shadow:
    0 30px 70px -20px color-mix(in srgb, var(--scrim-ink) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--modal-edge) 6%, transparent);
  animation: modal-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
  overflow: hidden;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal-scrim,
  .modal-card {
    animation: none;
  }
}
.modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 40% at 50% 0%,
    color-mix(in srgb, var(--pink-pop) 10%, transparent),
    transparent 70%
  );
  pointer-events: none;
}
.consent-check input:focus-visible + .cbox,
.modal-cancel:focus-visible {
  outline: 2px solid var(--cognac);
  outline-offset: 3px;
}

.modal-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2em;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.533em;
}
.modal-title em {
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  color: var(--cherry-ink);
}

.modal-stmt {
  background: var(--paper);
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  padding: 0.933em 1.067em;
  margin-bottom: 1.067em;
  position: relative;
}
.modal-stmt .stmt-label {
  font-family: var(--sans);
  font-size: 0.867em;
  line-height: 1.35;
  color: var(--wine-soft);
}
.modal-stmt .stmt-preview {
  display: flex;
  align-items: center;
  gap: 0.667em;
  margin-top: 0.667em;
  padding: 0.8em 0.933em;
  border: 1.5px solid var(--line-strong);
  background: var(--cream);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.modal-stmt .stmt-name,
.modal-stmt .stmt-amt {
  white-space: nowrap;
}
.modal-stmt .stmt-dash {
  flex: 1 1 auto;
  min-width: 18px;
  height: 1px;
  border-top: 1px dashed var(--line-strong);
}
.modal-stmt .stmt-amt {
  color: var(--cherry-ink);
}
.modal-policy {
  border-left: 3px solid var(--cherry);
  padding: 0.2em 0 0.2em 0.8em;
  margin-bottom: 1.067em;
}
.modal-policy .policy-label {
  font-family: var(--sans);
  font-size: 0.733em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cherry-ink);
  margin-bottom: 0.2em;
}
.modal-policy .policy-body {
  font-family: var(--sans);
  font-size: 0.867em;
  line-height: 1.4;
  color: var(--wine-soft);
  margin: 0;
}
.modal-policy .policy-body strong {
  color: var(--ink);
}
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 0.733em;
  padding: 0.8em 0.933em;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blush) 30%, transparent); /* soft separation now the card itself is paper */
  cursor: pointer;
  transition: all 0.18s ease;
  margin-bottom: 1.2em;
}
.consent-check:hover {
  border-color: var(--pink-soft);
}
.consent-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.consent-check .cbox {
  flex: 0 0 1.467em;
  width: 1.467em;
  height: 1.467em;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: all 0.16s ease;
  margin-top: 1px;
}
.consent-check .cbox .check {
  width: 0.8em;
  height: 0.8em;
  background: transparent;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  transition: background 0.16s ease;
}
.consent-check input:checked + .cbox {
  background: var(--cherry);
  border-color: var(--cherry);
}
.consent-check input:checked + .cbox .check {
  background: var(--white);
}
.consent-check .ctxt {
  font-size: 0.867em;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.consent-check .ctxt strong {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-cancel {
  background: transparent;
  border: 0;
  font-family: var(--italic);
  font-style: italic;
  font-size: 1em;
  color: var(--wine-soft);
  cursor: pointer;
  padding: 0.933em 0.533em;
  white-space: nowrap;
}
.modal-cancel:hover {
  color: var(--cherry);
}
.modal-actions .cta {
  height: 3em;
}

/* ============================================================
   THEME TOGGLE control (light ⇆ dark). Small icon button; lives in
   the topbar on flow screens and the hero corner on the landing.
   ============================================================ */
/* ONE theme toggle treatment everywhere (hero + topbar): a clean borderless
   icon that spins in on flip. No ring, no background. Size scales with the
   surrounding em context so the hero's larger scaled subtree gets a bigger
   glyph for free. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cognac);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s var(--ease);
}
.theme-toggle:hover {
  color: var(--cherry);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--cherry);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.4s var(--ease);
  animation: toggle-pop 0.45s var(--ease);
}
.theme-toggle:hover svg {
  transform: rotate(18deg) scale(1.08);
}
.theme-toggle:active svg {
  transform: scale(0.88);
}
/* topbar right cluster keeps its slot in the 3-way space-between. */
.topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.hero {
  position: relative;
}
/* Theme cross-fade: the whole page dissolves between palettes (theme.js wraps
   the data-theme flip in a View Transition). Tune the fade length here. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: var(--ease);
}
@keyframes toggle-pop {
  0% {
    transform: rotate(-120deg) scale(0.4);
    opacity: 0;
  }
  60% {
    transform: rotate(12deg) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg {
    animation: none;
  }
}

/* ============================================================
   DARK THEME — component overrides (brown + gold)
   The token flips in colors.css handle ~every surface, text colour and
   accent. These rules fix only what a token flip can't: inversion
   patterns ("dark fill == selected / primary") that must re-invert on a
   dark page, and warm-fill controls whose white glyph needs to go dark
   on gold. [data-theme="dark"] adds specificity, so order vs. the base
   rule is irrelevant.
   ============================================================ */

/* Primary actions → champagne-gold button, espresso text (the default
   .cta background is --ink, which is now a light ivory in dark mode). */
[data-theme="dark"] .cta {
  background: var(--cherry);
  color: var(--espresso);
  box-shadow:
    0 14px 30px -12px color-mix(in srgb, #000 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--espresso) 12%, transparent);
}
[data-theme="dark"] .cta.cherry {
  background: var(--cherry);
}
[data-theme="dark"] .cta:hover,
[data-theme="dark"] .cta.cherry:hover,
[data-theme="dark"] .hero .cta:hover {
  background: var(--gold-light);
}
[data-theme="dark"] .cta:disabled,
[data-theme="dark"] .cta.cherry:disabled {
  background: color-mix(in srgb, var(--cherry) 26%, var(--cream));
  color: color-mix(in srgb, var(--ink) 55%, var(--cream));
}
[data-theme="dark"] .hero .cta {
  background: var(--cherry);
  color: var(--espresso);
}

/* Theme toggle on dark pages: warm gold glyph */
[data-theme="dark"] .theme-toggle {
  color: var(--cherry);
}

/* Topbar wordmark "luxe" → gold (echoes the hero gradient) */
[data-theme="dark"] .mark .italic {
  color: var(--cherry);
}

/* Picks-tray total pill: --ink fill → gold pill with espresso text */
[data-theme="dark"] .tray .total {
  background: var(--cherry);
  color: var(--espresso);
}

/* Selection inversions: who-tile / addbtn used an --ink fill to mean
   "selected". On a dark page that flips to a glaring ivory card — recast
   as a warm raised panel with a gold border and light text instead. */
[data-theme="dark"] .who-tile.sel,
[data-theme="dark"] .addbtn.sel {
  background: var(--card-sel);
  color: var(--ink);
  border-color: var(--cherry);
}
[data-theme="dark"] .who-tile.sel .who-name {
  color: var(--ink);
}
[data-theme="dark"] .who-tile.sel .who-sub {
  color: var(--wine-soft);
}
[data-theme="dark"] .addbtn.sel .ap {
  color: var(--wine-soft);
}
[data-theme="dark"] .addbtn.sel .plus {
  background: var(--cherry);
  color: var(--espresso);
}

/* Consent checkbox: checked box is gold — its tick must go dark to read */
[data-theme="dark"] .consent-check input:checked + .cbox .check {
  background: var(--espresso);
}

/* Receipt (summary + confirmation): the light-mode paper look — ruled lines and
   torn perforated edges — reads cheap on dark, so flatten it to a clean dark
   card with a gold hairline border. */
[data-theme="dark"] .receipt {
  background: var(--paper);
  border-color: color-mix(in srgb, var(--cherry) 30%, transparent);
}
[data-theme="dark"] .receipt::before,
[data-theme="dark"] .receipt::after {
  display: none;
}

/* Sizing tweaks for short screens */
@media (max-height: 720px) {
  .h-question {
    font-size: 2.13em;
  }
}

/* ============================================================
   MOBILE-ONLY (<768px): let the middle region scroll while
   topbar/tray/botbar stay put, shrink-to-fit type and paddings,
   and respect the bottom safe-area inset. (The dvh visible-viewport
   height and the scroller itself live on the base .app/.screen-wrap
   rules — do not restate them here.)
   ============================================================ */
@media (max-width: 767.98px) {
  /* keep the last line clear of the tray/botbar below the scroller */
  .screen-wrap {
    scroll-padding-bottom: 12px;
    padding-bottom: 4px;
  }
  /* Keep the card groups vertically centered when they fit; fall back safely for tall
     screens. (split .screen:not(.hero-screen) blocks below are intentional groupings;
     no conflicting props — lens-D iter-7) */
  .screen:not(.hero-screen) {
    justify-content: safe center;
  }
  .screen {
    padding: 14px 20px 8px;
  }
  .screen:not(.hero-screen) {
    padding-bottom: 16px;
  }
  .screen-wrap:has(.hero-screen) {
    padding-bottom: 0;
  }
  .screen.hero-screen {
    padding: 0;
  }

  /* Shrink-to-fit oversized type.
     rule-1 exemption: the vw term is the shrink-to-fit escape and only binds
     below ~424px (the knob's own 15px floor pins below ~364px); above that the
     2.4em/2.267em cap locks these back to the system scale — no frozen band,
     no snap at the 768px boundary. */
  .h-question {
    font-size: min(2.4em, max(22px, 6.6vw));
    margin-bottom: 1.4em;
  }
  /* When a subtitle follows, the heading's bottom margin would gap title from sub —
     collapse it (keep just enough for the swirl underline); .h-sub owns the gap to body. */
  .h-question:has(+ .h-sub) {
    margin-bottom: 0.5em;
  }
  .tile .title {
    font-size: min(2.267em, max(20px, 5.8vw));
  }

  /* Visit tiles: center the title/desc block inside the bubble, tighter on phones */
  .tile {
    text-align: center;
    align-items: center;
    min-height: 7.2em;
    padding: 1.05em 1.3em;
    border-radius: 18px;
  }
  .tile .ornament {
    font-size: 5.6em;
  }
  .tile-stack {
    gap: 12px;
  }
  .tile .desc {
    margin: 0 auto;
  }

  /* Photo option rows (base/length screens): the desktop 7.3em card + 6.1em photo
     run too tall on a phone — the 4th option fell below the fold. Tighten to fit. */
  .opt-lg {
    min-height: 5.4em;
    padding: 0.8em;
    gap: 0.8em;
  }
  .opt-lg .thumb {
    width: 4.4em;
    height: 4.4em;
  }
  .opt-lg .meta .name {
    font-size: 1.2em;
  }

  /* More compact picks tray */
  .tray {
    padding: 6px 18px 8px;
  }
  .tray .head {
    margin-bottom: 3px;
  }
  .chips {
    padding: 2px 0 3px;
    min-height: 28px;
  }

  /* Bottom bar: respect the iOS home-indicator safe area, keep CTA visible */
  .botbar {
    padding: 8px 18px max(14px, env(safe-area-inset-bottom));
  }

  /* Consent modal: on small/short phones the card can outgrow the viewport and
     clip its title / confirm-cancel buttons. Cap the height to the visible
     viewport (minus the scrim's 24px top+bottom padding) and let it scroll. The
     base .modal-card has overflow:hidden — this later, equal-specificity rule
     overrides it only below 768px, so >=768px stays byte-identical. */
  .modal-scrim {
    overflow-y: auto;
  }
  .modal-card {
    max-height: calc(100vh - 48px); /* fallback for browsers without dvh */
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Extra tightening on short phones so the common steps fit without scrolling */
@media (max-width: 767.98px) and (max-height: 760px) {
  .screen {
    padding-top: 10px;
  }
  .h-question {
    margin-bottom: 22px;
  }
  .h-question:has(+ .h-sub) {
    margin-bottom: 8px;
  }
  .h-sub {
    margin-bottom: 12px;
  }
  .tile {
    min-height: 116px;
    padding: 16px 18px;
  }
  .tile .desc {
    font-size: 13px;
  }
  .who-tile {
    padding: 12px 6px;
  }
  .body {
    gap: 8px;
  }
}

/* mobile-only zone ends here — the two media blocks above are the file's terminal
   override zone (later source order at equal specificity is what makes them win).
   File new screen sections ABOVE the MOBILE-ONLY banner, never after it. */