/* State frames: age gate, cookie consent, log in, create account (4 steps),
 * verify email, password reset. Desktop frames 1440 → mobile frames 390.
 * Numbers from fig-spec; line-heights are Figma's integer text-box heights. */

/* ── shared modal shell ───────────────────────────────────────────────── */
.overlay--auth { background: rgba(17, 17, 17, .941); }
.modal { width: 660px; max-width: 100%; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--color-border), var(--shadow-modal); background: var(--color-card-2); overflow: hidden; }
.modal__top { display: flex; flex-direction: column; gap: 16px; padding: 36px 48px; background: var(--color-purple); }
.modal__row { display: flex; align-items: center; justify-content: space-between; min-height: 37px; }
.logo--modal { gap: 2px; font-size: 28px; line-height: 30px; letter-spacing: -1px; }
.logo--modal .logo__b { color: var(--color-brand); }
.u-mobal { display: none; }
.modal__close {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 37px; padding: 0;
  border: 0; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--color-purple-light); background: none; color: var(--color-text);
  font-family: var(--font-mono); font-weight: 700; font-size: 16px; line-height: 21px; cursor: pointer; position: relative;
}
.modal__close::after { content: ""; position: absolute; inset: -8px; }
.modal__close:hover { background: rgba(255, 255, 255, .1); }
.modal__close--lg { width: 36px; height: 36px; font-size: 18px; line-height: 23px; }
.modal__titles { display: flex; flex-direction: column; gap: 4px; }
.modal__eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-brand); }
.modal__title { font-family: var(--font-display); font-size: 40px; line-height: 44px; letter-spacing: -1px; text-transform: uppercase; color: var(--color-text); }
.modal__sub { font-size: 14px; line-height: 18px; color: rgba(255, 255, 255, .7); }
.modal__bottom { display: flex; flex-direction: column; gap: 28px; padding: 48px; background: var(--color-card-2); }
.modal__lead { font-size: 15px; line-height: 20px; color: var(--color-dim); }
.modal__form { display: flex; flex-direction: column; gap: 28px; }
.modal__form > .form__error:not([hidden]) { margin-top: -12px; }

.mfield { display: flex; flex-direction: column; gap: 8px; }
.mfield__label { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-ink); }
.mfield__label .req, .req { font-family: var(--font-body); letter-spacing: 0; color: var(--color-purple-light); }
.mfield__wrap { display: flex; align-items: center; gap: 12px; position: relative; }
.mfield__input, .modal .stake__field {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--color-border-light); border-radius: var(--radius-xs); background: var(--color-card); color: var(--color-ink);
  font-size: 15px; line-height: 20px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mfield__input::placeholder { color: var(--color-muted); }
.mfield__input:focus { outline: none; border-color: var(--color-purple-btn); box-shadow: var(--focus-ring-light); }
.mfield__input[aria-invalid="true"], .has-error .mfield__input { border-color: var(--color-red); }
.mfield__select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; }
.mfield__select:invalid, .mfield__select option[value=""] { color: var(--color-muted); }
.mfield__show {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 4px 8px; border: 0; border-radius: var(--radius-xs); background: none; cursor: pointer;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--color-purple-light);
}
.mfield__show:hover { background: var(--color-card-3); }
.mfield__wrap .mfield__input { padding-right: 64px; }
.mfield__prefix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; line-height: 20px; color: var(--color-dim); pointer-events: none; }
.mfield__prefix + .mfield__input { padding-left: 52px; padding-right: 16px; }
.mfield__hint { font-size: 12px; line-height: 16px; color: var(--color-dim); }

.modal__forgot { display: flex; }
.modal__link { display: inline; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-purple-light); text-decoration: none; }
.modal__link:hover { text-decoration: underline; }
.modal__link--sm { font-size: 11px; line-height: 14px; }
.modal__link--u { text-decoration: underline; }
.modal__actions { display: flex; flex-direction: column; gap: 16px; }
.modal__primary {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 16px; border: 0; border-radius: var(--radius-xs); cursor: pointer;
  background: var(--color-brand); color: var(--color-ink);
  font-family: var(--font-display); font-size: 15px; line-height: 16px; letter-spacing: .5px; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.modal__primary:hover { background: var(--color-brand-hover); }
.modal__primary:active { transform: translateY(1px); }
.modal__primary:disabled { opacity: .6; cursor: wait; }
.modal__primary:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.modal__secondary {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--radius-xs); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--color-border-light); background: none; color: var(--color-dim);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__secondary:hover { background: var(--color-card); color: var(--color-ink); }
.modal__or { display: flex; align-items: center; gap: 16px; min-height: 14px; }
.modal__or-line { flex: 1; height: 1px; background: var(--color-border-light); }
.modal__or-text { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
.modal__callout { display: flex; flex-direction: column; gap: 12px; }
.modal__callout-text { text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-ink); }
.modal__foot { display: flex; flex-direction: column; gap: 8px; }
.modal__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
.modal__foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; padding: 4px 0; }   /* frame is FIXED 24 with 8px padding: the text overlaps the padding */
.modal__foot-note { font-weight: 600; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted); }
.modal__done { display: flex; flex-direction: column; gap: 16px; }
.modal__done-title { font-family: var(--font-display); font-size: 24px; line-height: 26px; text-transform: uppercase; color: var(--color-ink); }
.modal__done code { font-family: var(--font-mono); font-size: 13px; }

/* ── age gate ─────────────────────────────────────────────────────────── */
.overlay--gate { background: rgba(11, 12, 14, .929); }
.overlay--gate .overlay__panel { width: 640px; }
.gate { display: flex; flex-direction: column; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--color-border), var(--shadow-modal); overflow: hidden; }
.gate__top { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 32px; background: var(--color-purple); }
.logo--gate { gap: 4px; font-size: 32px; line-height: 35px; letter-spacing: -1px; }
.logo--gate .logo__b { color: var(--color-brand); }
.logo--gate .logo__dot { width: 8px; height: 8px; }
.gate__label { display: flex; flex-direction: column; align-items: center; gap: 24px; }   /* eyebrow and 18+ are siblings of the logo in the frame: same 24 gap */
.gate__eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-purple-light); }
.gate__big { font-family: var(--font-display); font-size: 96px; line-height: 90px; text-align: center; color: var(--color-brand); }
.gate__body { display: flex; flex-direction: column; gap: 32px; padding: 48px; background: var(--color-card-2); }
.gate__text { display: flex; flex-direction: column; gap: 16px; }
.gate__kicker { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-purple); }
.gate__title { font-family: var(--font-display); font-size: 28px; line-height: 34px; text-transform: uppercase; color: var(--color-ink); }
.gate__paras { display: flex; flex-direction: column; gap: 12px; }
.gate__p { font-size: 15px; line-height: 22px; color: var(--color-dim); }
.gate__p--strong { font-weight: 600; font-size: 14px; line-height: 18px; color: var(--color-ink); }
.gate__actions { display: flex; flex-direction: column; gap: 12px; }
.gate__yes {
  display: flex; align-items: center; justify-content: center; min-height: 51px; padding: 18px 0; border: 0; border-radius: var(--radius-xs); cursor: pointer;
  background: var(--color-brand); color: var(--color-ink);
  font-family: var(--font-display); font-size: 14px; line-height: 15px; letter-spacing: .5px; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gate__yes:hover { background: var(--color-brand-hover); }
.gate__yes:active { transform: translateY(1px); }
.gate__yes:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.gate__no {
  display: flex; align-items: center; justify-content: center; min-height: 49px; padding: 16px 0; border: 0; border-radius: var(--radius-xs); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--color-border-light); background: none; color: var(--color-ink);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease);
}
.gate__no:hover { background: var(--color-card); }
.gate__no:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-light), var(--focus-ring-light); }
.gate__declined { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-xs); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-red); }
.gate__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
.gate__foot { display: flex; flex-direction: column; gap: 8px; }
.gate__note { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.gate__link { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-purple); text-decoration: none; align-self: flex-start; }
.gate__link:hover { text-decoration: underline; }

/* ── cookie consent (bottom sheet) ────────────────────────────────────── */
.overlay--cookie { display: block; padding: 0; background: rgba(11, 12, 14, .88); overflow: hidden; }
.overlay--cookie .overlay__panel {
  position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: calc(100vh - 47px); overflow: auto;
  border-radius: 0; box-shadow: none; background: #f5f5f7; border-top: 4px solid var(--color-purple-light);   /* one-off sheet tint from the mockup */
  transform: translateY(16px);
}
.overlay--cookie.is-open .overlay__panel { transform: none; }
.cookie { display: flex; flex-direction: column; }
.cookie__strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; padding: 24px var(--container-pad); background: var(--color-surface); }
.cookie__head { display: flex; flex-direction: column; gap: 2px; }
.cookie__eyebrow { font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-purple-light); }
.cookie__title { font-family: var(--font-display); font-size: 24px; line-height: 26px; letter-spacing: .5px; text-transform: uppercase; color: var(--color-text); }
.cookie__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px; padding: 0; border: 0; background: none; color: var(--color-brand); cursor: pointer; border-radius: 50%; }
.cookie__close:hover { background: rgba(255, 255, 255, .08); }
.cookie__close-icon { width: 20px; height: 20px; }
.cookie__body { display: flex; flex-direction: column; gap: 32px; padding: 40px var(--container-pad); }
.cookie__columns { display: flex; gap: 80px; }
.cookie__info { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.cookie__text { font-size: 16px; line-height: 24px; color: var(--color-surface); }
.cookie__links { display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 18px; }
.cookie__link { font-weight: 700; color: var(--color-purple-light); text-decoration: underline; }
.cookie__dot { color: var(--color-muted); }
.cookie__later { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.cookie__actions { display: flex; flex-direction: column; gap: 12px; width: 520px; flex: none; }
.cookie__btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border: 0; cursor: pointer;
  background: var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-border-input);
  font-family: var(--font-display); font-size: 14px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cookie__btn:hover { background: var(--color-card-3); }
.cookie__btn:active { transform: translateY(1px); }
.cookie__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-input), var(--focus-ring-light); }
.cookie__btn--all { background: var(--color-brand); color: var(--color-bg); box-shadow: none; }
.cookie__btn--all:hover { background: var(--color-brand-hover); }
.cookie__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
.cookie__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cookie__cat { display: flex; flex-direction: column; gap: 4px; min-height: 75px; padding: 20px; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.cookie__cat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cookie__cat-name { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-surface); cursor: pointer; }
.cookie__cat-text { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.cookie__locked { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-brand); color: var(--color-bg); font-weight: 900; font-size: 10px; line-height: 13px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.cookie__lock { width: 10px; height: 10px; stroke-width: 3; }

.switch { position: relative; display: inline-flex; flex: none; }
.switch__input { position: absolute; inset: -10px 0; width: 100%; height: calc(100% + 20px); margin: 0; opacity: 0; cursor: pointer; }   /* the hit area reaches 44px while the track stays as drawn */
.switch__track { display: flex; align-items: center; width: 44px; height: 24px; padding: 2px; border-radius: 12px; background: var(--color-border-input); transition: background-color var(--dur-base) var(--ease); }
.switch__knob { width: 20px; height: 20px; border-radius: 50%; background: var(--color-card); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease); }
.switch__input:checked + .switch__track { background: var(--color-purple-btn); }
.switch__input:checked + .switch__track .switch__knob { transform: translateX(20px); }
.switch__input:focus-visible + .switch__track { box-shadow: var(--focus-ring-light); }

/* ── log in / reset ───────────────────────────────────────────────────── */
.modal--login .modal__bottom { gap: 28px; }
.modal--login .modal__form { gap: 28px; }
.modal--login .modal__form > .mfield + .mfield { margin-top: -8px; }   /* fields are 20 apart inside the 28-gap stack */

/* ── create account ───────────────────────────────────────────────────── */
.overlay--register { align-items: start; }
.overlay--register .overlay__panel { max-height: none; }   /* taller than a short viewport: the overlay scrolls, not the panel */
.modal--register { width: 800px; }
.modal__top--register { gap: 24px; padding: 32px 40px 28px; }
.modal__top--register .modal__row { min-height: 36px; }
.modal__top--register .modal__titles { gap: 6px; }
.modal__top--register .modal__eyebrow { font-size: 11px; line-height: 14px; }
.modal__title--register { font-size: 32px; line-height: 35px; letter-spacing: -.02em; white-space: nowrap; }   /* 751px text in a 720px column: Figma lets it run into the padding, so do we */
.steps { display: flex; align-items: center; gap: 16px; min-height: 20px; }
.steps__item { display: flex; align-items: center; gap: 8px; position: relative; }
.steps__item + .steps__item::before { content: ""; width: 20px; height: 1px; margin-right: 16px; background: rgba(255, 255, 255, .2); }   /* connector, drawn as a 20px LINE with 16px gaps */
.steps__badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-family: var(--font-mono); font-weight: 700; font-size: 10px; line-height: 13px; color: rgba(255, 255, 255, .302); }
.steps__name { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: rgba(139, 92, 246, .502); white-space: nowrap; }
.steps__item.is-current .steps__badge { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-black); }
.steps__item.is-current .steps__name { color: var(--color-brand); }
.steps__item.is-done .steps__badge { background: var(--color-purple-light); box-shadow: inset 0 0 0 1px var(--color-purple-light); color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1.5 4l2.5 2.5L8.5 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 8px; }
.steps__item.is-done .steps__name { color: var(--color-text); }
.msteps { display: none; }
.modal__bottom--register { gap: 32px; padding: 40px 48px; min-height: 580px; }
.step { display: flex; flex-direction: column; gap: 32px; }
.step--tight, .step[data-step="3"], .step[data-step="4"] { gap: 24px; }
.modal__bottom--register:has(.step[data-step="3"]:not([hidden])), .modal__bottom--register:has(.step[data-step="4"]:not([hidden])) { padding: 32px 48px; }
.step__intro { display: flex; flex-direction: column; gap: 6px; }
.step__title { font-family: var(--font-display); font-size: 24px; line-height: 26px; text-transform: uppercase; color: var(--color-ink); }
.step__lead { font-size: 14px; line-height: 18px; color: var(--color-dim); }
.step__stack { display: flex; flex-direction: column; gap: 20px; }
.step__stack--tight { gap: 16px; }
.step__row { display: flex; gap: 16px; }
.step__row > .mfield { flex: 1; min-width: 0; }
.step__row--title .mfield--title { flex: 0 0 240px; }
.step__row--address .mfield--state { flex: 0 0 175px; }
.step__row--address .mfield--postcode { flex: 0 0 140px; }
.dob { display: flex; gap: 12px; }
.dob__part { flex: 1; min-width: 0; }
.limitbox { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.limitbox__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 16px; }
.limitbox__titles { display: flex; align-items: center; gap: 8px; }
.limitbox__title { font-family: var(--font-display); font-size: 14px; line-height: 15px; letter-spacing: .5px; text-transform: uppercase; color: var(--color-ink); }
.limitbox__badge { display: inline-flex; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); font-family: var(--font-mono); font-weight: 700; font-size: 9px; line-height: 12px; text-transform: uppercase; color: var(--color-dim); }
.limitbox__text { font-size: 13px; line-height: 17px; color: var(--color-dim); }
.limitbox__row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.limitbox__prefix { display: flex; align-items: center; height: 52px; padding: 0 16px; border-radius: var(--radius-xs); background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-ink); white-space: nowrap; }
.limitbox__input { flex: 1; }
.agree { display: flex; flex-direction: column; gap: 12px; }
.agree__row { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 20px; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); cursor: pointer; }
.agree__box { width: 24px; height: 24px; margin: 0; flex: none; appearance: none; border: 2px solid var(--color-purple-light); border-radius: var(--radius-sm); background: var(--color-card); display: grid; place-content: center; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.agree__box::before { content: ""; width: 12px; height: 12px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: var(--color-text); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.agree__box:checked { background: var(--color-purple-light); }
.agree__box:checked::before { transform: scale(1); }
.agree__box:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.agree__text { flex: 1; font-weight: 500; font-size: 15px; line-height: 20px; color: var(--color-ink); }
.agree__text a { color: var(--color-purple-btn); }
.review { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 15px; }
.review__title { font-family: var(--font-display); font-size: 14px; line-height: 15px; letter-spacing: .5px; text-transform: uppercase; color: var(--color-ink); }
.review__note { font-family: var(--font-mono); font-weight: 700; font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--color-dim); }
.review__grid { display: flex; flex-direction: column; gap: 12px; }
.review__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 18px; }
.review__cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.review__cell dt { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-dim); white-space: nowrap; }
.review__cell dd { font-weight: 600; font-size: 14px; line-height: 18px; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review__cell dd.review__muted { color: var(--color-dim); }
.review__edit { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-purple-light); text-decoration: underline; position: relative; }
.review__edit::after { content: ""; position: absolute; inset: -8px -4px; }
.review__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
.step__compliance { font-weight: 600; font-size: 12px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
.modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 102px; padding: 24px 48px; background: var(--color-card); box-shadow: inset 0 1px 0 var(--color-border-light); }
.modal__back { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 16px 24px; border: 0; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--color-border-light); background: none; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-dim); }
.modal__back:hover { background: var(--color-card-2); color: var(--color-ink); }
.modal__footer-note { margin-right: auto; }
.modal__primary--footer { min-height: 54px; padding: 16px 32px; font-size: 14px; line-height: 15px; }

/* ── verify email ─────────────────────────────────────────────────────── */
.modal--verify { width: 640px; }
.modal__top--verify { gap: 20px; padding: 40px 48px 36px; }
.modal__top--verify .modal__row { min-height: 36px; }
.modal__top--verify .logo--modal { font-size: 24px; line-height: 26px; letter-spacing: -.5px; }
.modal__title--verify { font-size: 32px; line-height: 35px; letter-spacing: -.5px; }
.modal__bottom--verify { gap: 28px; }
.verify__text { display: flex; flex-direction: column; gap: 16px; }
.verify__kicker { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-purple); }
.verify__box { display: flex; flex-direction: column; gap: 8px; }
.verify__p { font-size: 15px; line-height: 22px; color: var(--color-dim); }
.verify__p--sm { font-size: 14px; }
.verify__email { display: flex; align-items: center; min-height: 45px; padding: 12px 16px; border-radius: var(--radius-xs); background: #eaeff5; box-shadow: inset 0 0 0 1px var(--color-border-light); font-family: var(--font-mono); font-weight: 700; font-size: 16px; line-height: 21px; color: var(--color-ink); }   /* one-off pill tint from the mockup */
.verify__form { display: flex; flex-direction: column; gap: 28px; }
.code { display: flex; gap: 12px; }
.code__box { flex: 1; min-width: 0; min-height: 64px; padding: 0; border: 1px solid var(--color-border-light); border-radius: var(--radius-xs); background: var(--color-card); text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 24px; line-height: 31px; color: var(--color-ink); }
.code__box::placeholder { color: var(--color-muted); }
.code__box:focus { outline: none; border-color: var(--color-purple-btn); box-shadow: var(--focus-ring-light); }
.verify__resend { display: flex; justify-content: center; }
.verify__resend .modal__link { font-size: 13px; line-height: 17px; color: var(--color-purple); }
.modal--verify .modal__foot { gap: 12px; }
.modal--verify .modal__foot-row { min-height: 16px; padding: 0; }
.modal--verify .modal__link--sm { color: var(--color-purple); }

/* ── mobile (390 frames) ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .overlay--auth, .overlay--gate { padding: 16px; }
  .modal { width: 100%; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sheet); }
  .modal__top { gap: 20px; padding: 24px; }
  .modal__row { min-height: 44px; }
  .logo--modal { font-size: 24px; line-height: 26px; letter-spacing: -1px; }
  .logo--modal .logo__b, .logo--gate .logo__b { color: var(--color-brand-2); }
  .logo--modal .logo__dot, .logo--gate .logo__dot { background: var(--color-brand-2); }
  .u-mobal { display: inline; }
  .modal__close { width: 44px; height: 44px; border-radius: var(--radius-sm); font-size: 20px; line-height: 26px; }
  .modal__eyebrow { font-size: 11px; line-height: 14px; letter-spacing: 1.5px; color: var(--color-brand-2); }
  .modal__title { font-size: 32px; line-height: 35px; letter-spacing: -.5px; }
  .modal__bottom { gap: 0; padding: 24px; }
  .modal__form { gap: 0; }
  .modal--login .modal__bottom { gap: 0; }
  .modal--login .modal__form { gap: 0; padding-top: 20px; }              /* form-stack: 20 top, bottom clipped by the fixed frame */
  .modal--login .modal__form > .mfield + .mfield { margin-top: 20px; }
  .modal--login .modal__forgot { margin-top: 0; padding: 14px 0 0; }
  .modal--login .modal__actions { padding: 28px 0 0; }
  .modal--login .modal__callout-text { font-size: 12px; line-height: 17px; color: var(--color-muted-2); }
  .modal--login .modal__foot { gap: 12px; padding-top: 24px; }
  .modal--login .modal__foot-row { gap: 8px; min-height: 0; padding: 0; }
  .modal--login .modal__foot-row .modal__link { font-size: 11px; line-height: 16px; }
  .mfield__label { font-size: 12px; line-height: 16px; }
  .mfield__input { border-radius: var(--radius-sm); border-color: var(--color-border-input); font-size: 16px; line-height: 21px; }
  .mfield__show { color: var(--color-purple-btn); }
  .modal__forgot { padding: 14px 0; margin-top: 20px; }
  .modal__link { color: var(--color-purple-btn); font-size: 13px; line-height: 17px; }
  .modal__actions { padding: 28px 0; }
  .modal__primary { background: var(--color-brand-2); border-radius: var(--radius-sm); }
  .modal__secondary { border-radius: var(--radius-sm); }
  .modal__foot-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .overlay--gate .overlay__panel { width: 100%; }
  .gate { border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet); }
  .gate__top { gap: 20px; padding: 32px 24px 28px; }
  .gate__label { gap: 20px; }
  .logo--gate { gap: 2px; font-size: 24px; line-height: 26px; }
  .logo--gate .logo__dot { width: 6px; height: 6px; }
  .gate__eyebrow { font-size: 11px; line-height: 14px; color: #c084fc; text-align: center; }   /* one-off lilac from the frame */
  .gate__big { font-size: 72px; line-height: 72px; color: var(--color-brand-2); }
  .gate__body { gap: 0; padding: 24px; background: var(--color-card); }
  .gate__text { gap: 0; }
  .gate__title { padding: 12px 0 16px; font-size: 24px; line-height: 28px; }
  .gate__paras { padding-bottom: 24px; }
  .gate__p { line-height: 23px; }
  .gate__p--strong { line-height: 18px; }
  .gate__actions { gap: 10px; padding-bottom: 24px; }
  .gate__yes { min-height: 56px; padding: 16px 0; border-radius: var(--radius-md); background: var(--color-brand-2); }
  .gate__no { min-height: 52px; padding: 14px 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border-input); font-family: var(--font-body); color: var(--color-ink-2); }
  .gate__declined { margin-bottom: 24px; }
  .gate__foot { gap: 12px; padding: 24px 0 0; }
  .gate__note { font-size: 13px; line-height: 18px; color: var(--color-muted-2); }
  .gate__link { font-size: 13px; line-height: 17px; color: var(--color-purple-btn); text-decoration: underline; }

  .overlay--cookie .overlay__panel { background: var(--color-card-2); border-top-color: var(--color-purple-btn); }
  .cookie__strip { min-height: 82px; padding: 20px; background: #18181b; }   /* one-off strip tone from the frame */
  .cookie__eyebrow { font-size: 11px; line-height: 14px; color: var(--color-purple-btn); }
  .cookie__close { width: 44px; height: 44px; margin: -6px -6px -6px 0; }
  .cookie__close-icon { width: 32px; height: 32px; color: var(--color-brand-2); }
  .cookie__body { gap: 0; padding: 24px 20px 28px; }
  .cookie__columns { flex-direction: column; gap: 24px; }
  .cookie__info { gap: 0; }
  .cookie__text { font-size: 15px; line-height: 22px; color: var(--color-ink-2); }
  .cookie__links { gap: 8px; margin-top: 16px; }
  .cookie__link { color: var(--color-purple-btn); }
  .cookie__later { margin-top: 12px; font-size: 13px; line-height: 17px; }
  .cookie__actions { width: auto; gap: 10px; }
  .cookie__btn { min-height: 52px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border-input); color: var(--color-ink-2); }
  .cookie__btn--all { min-height: 54px; background: var(--color-brand-2); color: var(--color-ink); box-shadow: none; }
  .cookie__line { margin-top: 24px; }
  .cookie__cats { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .cookie__cat { gap: 8px; min-height: 0; padding: 16px; border-radius: var(--radius-sm); }
  .cookie__cat-name { color: var(--color-ink); }
  .cookie__cat-text { font-size: 13px; line-height: 17px; color: var(--color-muted-2); }
  .cookie__locked { border-radius: var(--radius-pill); background: #fef3c7; color: #92400e; }   /* amber pill from the frame */

  .overlay--register { padding: 12px; }
  .modal--register { border-radius: var(--radius-lg); box-shadow: none; background: var(--color-card); }
  .modal__top--register { gap: 16px; padding: 12px 20px 24px; }
  .modal__top--register .modal__row { min-height: 36px; }
  .modal__close--lg { width: 36px; height: 36px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-size: 18px; line-height: 23px; }
  .modal__top--register .modal__eyebrow { letter-spacing: 2px; }
  .modal__title--register { font-size: 24px; line-height: 29px; letter-spacing: 0; white-space: normal; }
  .steps { display: none; }
  .msteps { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--color-card); box-shadow: inset 0 -1px 0 var(--color-border-input); }
  .msteps__row { display: flex; align-items: center; justify-content: space-between; min-height: 17px; }
  .msteps__count { font-weight: 600; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-2); }
  .msteps__name { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-ink); }
  .msteps__track { display: flex; align-items: center; gap: 4px; }
  .msteps__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-border-input); flex: none; transition: background-color var(--dur-base) var(--ease); }
  .msteps__dot.is-on { background: var(--color-brand-2); }
  .msteps__bar { flex: 1; height: 2px; background: var(--color-border-input); }
  .modal__bottom--register, .modal__bottom--register:has(.step:not([hidden])) { gap: 0; min-height: 0; padding: 24px 20px 0; }
  .step, .step[data-step="3"], .step[data-step="4"] { gap: 0; }
  .step__intro { gap: 6px; }
  .step__title { font-size: 22px; line-height: 24px; }
  .step__lead { font-size: 14px; line-height: 20px; color: var(--color-muted-2); }
  .step__stack, .step__stack--tight { gap: 20px; padding: 24px 0 0; }   /* the frame's bottom 24 is clipped; the footer carries the space */
  .mfield__label { font-family: var(--font-body); letter-spacing: .5px; color: var(--color-ink-2); }
  .mfield__label .req { color: var(--color-purple-btn); }
  .step__row { flex-direction: column; gap: 20px; }
  .step__row--title .mfield--title, .step__row--address .mfield--state, .step__row--address .mfield--postcode { flex: none; }
  .dob { gap: 8px; }
  .dob__part { flex: 0 0 96px; }
  .dob__part:last-of-type { flex: 1; }
  .mfield__hint { margin-top: 12px; font-size: 13px; line-height: 17px; color: var(--color-muted-2); }   /* 8 gap + 12 = the 20 the frame puts before the hint */
  .limitbox, .agree, .review { margin-top: 20px; }
  .step__compliance { margin-top: 20px; }
  .modal__footer { flex-wrap: wrap; gap: 20px; min-height: 0; padding: 48px 20px 32px; background: var(--color-card-2); box-shadow: none; }   /* 20 gap + 8 spacer + 20 gap above the button, as drawn */
  .modal__primary--footer, .modal__primary--wide { order: -1; width: 100%; min-height: 54px; border-radius: var(--radius-sm); background: var(--color-brand-2); }
  .modal__back { min-height: 44px; padding: 12px 16px; }
  .modal__footer-note { margin: 0; width: 100%; padding-top: 16px; line-height: 17px; text-align: center; }
  .modal__footer-note .modal__link { font-size: 12px; line-height: 17px; }

  .modal--verify { width: 100%; }
  .modal__top--verify { gap: 20px; padding: 24px; }
  .modal__title--verify { font-size: 28px; line-height: 31px; }
  .modal__bottom--verify { gap: 24px; padding: 24px; }
  .verify__form { gap: 24px; }
  .code { gap: 8px; }
  .code__box { min-height: 56px; border-color: var(--color-border-input); border-radius: var(--radius-sm); }
}