/* ============================================================
   Cue — attendee experience
   Design tokens transcribed from the handoff README.
   No shadows anywhere: hierarchy is border weight + fill.
   ============================================================ */

:root {
  /* Cobalt — the platform / field */
  --cobalt: #223B67;
  --cobalt-tint: #EBEFF5;
  --cobalt-border: #C8D1DF;

  /* Links only */
  --interface-blue: #31558F;
  --link-on-dark: #7FA0FF;

  /* Coral — the one action */
  --coral: #B8753B;
  --coral-tint: #F5ECE3;
  --coral-border: #DFC1A4;
  --coral-text: #8A5226;
  --coral-text-deep: #603719;

  /* Green — consent + now */
  --green: #12805C;
  --green-tint: #E7F5EF;
  --green-border: #A9DCC8;
  --green-text: #0B3D2C;
  --green-text-2: #2F6B56;

  /* Amber — sponsor */
  --amber: #B45309;
  --amber-tint: #FDF3E3;
  --amber-border: #E8CFA4;
  --amber-surface: #FBF7F0;
  --amber-text: #5A3608;

  /* Neutrals */
  --bg: #F2F3F5;
  --surface: #FFFFFF;
  --border: #E3E8F2;
  --border-strong: #D9E0EE;
  --divider: #EDF1F8;
  --map-panel: #E7ECF7;
  --map-panel-border: #D4DDEE;
  --map-zone: #DCE3F0;
  --map-zone-border: #CBD5E8;

  /* Ink */
  --ink: #0F172A;
  --ink-2: #384155;
  --ink-3: #5A6478;
  --ink-4: #7A869E;
  --ink-5: #94A0B8;

  --font: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 20px;
  --logo-color: #6348C6;
  --logo-ink: #FFFFFF;
  color-scheme: light;
}

:root[data-theme="custom"] {
  --cobalt: var(--client-primary, #223B67);
  --cobalt-tint: color-mix(in srgb, var(--client-primary, #223B67) 10%, white);
  --cobalt-border: color-mix(in srgb, var(--client-primary, #223B67) 28%, white);
  --interface-blue: var(--client-primary, #223B67);
  --coral: var(--event-accent, #B8753B);
  --coral-tint: color-mix(in srgb, var(--event-accent, #B8753B) 11%, white);
  --coral-border: color-mix(in srgb, var(--event-accent, #B8753B) 34%, white);
  --coral-text: color-mix(in srgb, var(--event-accent, #B8753B) 78%, black);
  --coral-text-deep: color-mix(in srgb, var(--event-accent, #B8753B) 60%, black);
}

:root[data-theme="nocturne"] {
  color-scheme: dark;
  --cobalt: #C1A36F; --cobalt-tint: #2A251E; --cobalt-border: #4A4031;
  --interface-blue: #D0B47F; --coral: #B8753B; --coral-tint: #33251A;
  --coral-border: #66472B; --coral-text: #DCA76F; --coral-text-deep: #F0C99A;
  --green: #779681; --green-tint: #1B2921; --green-border: #385043;
  --green-text: #C5D8CC; --green-text-2: #9BB9A5; --amber: #C49A58;
  --amber-tint: #30271B; --amber-border: #5B482D; --amber-surface: #17140F; --amber-text: #E7CEA5;
  --bg: #0F1115; --surface: #17191E; --border: #292C33; --border-strong: #383C45;
  --divider: #24272E; --map-panel: #191C22; --map-panel-border: #30343D;
  --map-zone: #22262D; --map-zone-border: #3A3F49; --ink: #F1EEE8;
  --ink-2: #D3CEC5; --ink-3: #A9A39A; --ink-4: #817C75; --ink-5: #69645E;
}

:root[data-theme="verdant"] {
  --cobalt: #29332D; --cobalt-tint: #E9ECE9; --cobalt-border: #C7CEC9;
  --interface-blue: #3D5146; --coral: #A78345; --coral-tint: #F3EEE4;
  --coral-border: #D9C59F; --coral-text: #795B28; --coral-text-deep: #503A18;
  --green: #4E6A59; --green-tint: #E7ECE8; --green-border: #B6C7BC;
  --amber: #98733C; --amber-tint: #F4EFE5; --amber-border: #DBC7A3;
  --bg: #F0F1ED; --surface: #FAFBF7; --border: #DDE1DC; --border-strong: #CFD5CF;
  --divider: #E7EAE5; --map-panel: #E4E7E2; --map-panel-border: #CED4CE;
  --ink: #1C211E; --ink-2: #414A44; --ink-3: #666F69; --ink-4: #818983;
}

:root[data-theme="plum"] {
  --cobalt: #4A1E2C; --cobalt-tint: #F1E9EB; --cobalt-border: #DCC8CE;
  --interface-blue: #6B3042; --coral: #B28A45; --coral-tint: #F5F0E5;
  --coral-border: #DDCAA4; --coral-text: #806127; --coral-text-deep: #574018;
  --green: #556A5E; --green-tint: #E9EDEB; --green-border: #BDC9C2;
  --amber: #9B7437; --amber-tint: #F5EFE4; --amber-border: #DFC9A4;
  --bg: #F4F0ED; --surface: #FDFBF9; --border: #E5DCD8; --border-strong: #D9CDCA;
  --divider: #ECE5E1; --map-panel: #EAE3E0; --map-panel-border: #D8CDCA;
  --ink: #251A1D; --ink-2: #504347; --ink-3: #76696D; --ink-4: #918489;
}

/* Display mode is independent from event branding. Brand hues remain intact
   while surfaces, type, borders, maps, and tonal fills move into darkness. */
:root[data-resolved-mode="dark"] {
  color-scheme: dark;
  --bg: #0D0F13; --surface: #16191F; --border: #292D35; --border-strong: #373C46;
  --divider: #23272E; --map-panel: #191D24; --map-panel-border: #303640;
  --map-zone: #222832; --map-zone-border: #3A424F;
  --ink: #F3F0EA; --ink-2: #D4D0C8; --ink-3: #AAA59C; --ink-4: #827E77; --ink-5: #6B6761;
  --cobalt-tint: color-mix(in srgb, var(--cobalt) 22%, #11141A);
  --cobalt-border: color-mix(in srgb, var(--cobalt) 42%, #20242C);
  --coral-tint: color-mix(in srgb, var(--coral) 20%, #171411);
  --coral-border: color-mix(in srgb, var(--coral) 45%, #2A241D);
  --coral-text: color-mix(in srgb, var(--coral) 70%, white);
  --coral-text-deep: color-mix(in srgb, var(--coral) 52%, white);
  --green-tint: #18261F; --green-border: #375144; --green-text: #C4D8CC; --green-text-2: #9BB8A6;
  --amber-tint: #30261A; --amber-border: #5B472C; --amber-surface: #17140F; --amber-text: #E7CEA5;
}

/* ---- reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ============================================================
   App frame — a fixed-height phone column.
   Header (static) / content (scrolls) / action + tabbar (static).
   ============================================================ */

#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Each screen fills the frame and lays out header / scroll / action */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* The tab bar is a persistent layer. Only .screen__page changes between tabs. */
.screen--tabbed {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.screen__page {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
  background: var(--bg);
}

/* Gentle, directional page transitions above the anchored navigation. */
.page--tab-enter {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.page--tab-exit {
  z-index: 1;
  pointer-events: none;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 380ms ease;
  will-change: transform, opacity;
}
.page--from-right { transform: translate3d(14px, 0, 0) scale(0.997); }
.page--from-left { transform: translate3d(-14px, 0, 0) scale(0.997); }
.page--tab-enter.page--tab-active { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.page--to-left.page--tab-active { opacity: 0; transform: translate3d(-6px, 0, 0) scale(0.999); }
.page--to-right.page--tab-active { opacity: 0; transform: translate3d(6px, 0, 0) scale(0.999); }

.screen__header {
  flex: 0 0 auto;
  padding:
    max(16px, env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    14px
    max(var(--gutter), env(safe-area-inset-left));
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}

.screen__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    16px
    max(var(--gutter), env(safe-area-inset-right))
    16px
    max(var(--gutter), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.screen__action {
  flex: 0 0 auto;
  padding:
    12px
    max(var(--gutter), env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  background: var(--surface);
  border-top: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sponsor surface takes over the whole background */
.screen--amber { background: var(--amber-surface); }
.screen--amber .screen__header,
.screen--amber .screen__action { background: var(--amber-surface); }

/* ============================================================
   Typography helpers
   ============================================================ */
.display { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.title   { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; }
.card-title { font-size: 17px; font-weight: 600; }
.body    { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.label   { font-size: 14px; color: var(--ink-3); }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.micro   { font-size: 12px; color: var(--ink-4); }

.status-line { font-size: 15px; color: var(--ink-3); margin-top: 4px; }

/* ============================================================
   Header row (title + signal avatar)
   ============================================================ */
.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.avatar--amber { background: var(--amber); border-radius: 14px; }
.avatar--square { border-radius: 14px; }
.avatar--lg { width: 48px; height: 48px; font-size: 17px; background: var(--logo-color); color: var(--logo-ink); }

/* Back header for pushed views */
.back-header { display: flex; align-items: center; gap: 10px; }
.back-btn {
  width: 44px; height: 44px; color: var(--ink-2);
  display: grid; place-items: center; margin-left: -10px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink-3); border: 1px solid var(--border);
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent);
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease;
}
.icon-btn:active { transform: scale(.94); color: var(--cobalt); border-color: var(--cobalt-border); }
.icon { width: 24px; height: 24px; display: block; }
.back-header__titles h2 { font-size: 18px; font-weight: 600; }
.back-header__titles p { font-size: 13px; color: var(--ink-4); margin-top: 1px; }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
}

/* ============================================================
   Timeline block — time gutter + card
   ============================================================ */
.timeline { display: flex; flex-direction: column; gap: 8px; }

.tblock {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  align-items: stretch;
}
.tblock__time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-4);
  padding-top: 14px;
  text-align: left;
}
.tblock__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tblock__card h3 { font-size: 16px; font-weight: 600; }
.tblock__card p { font-size: 14px; color: var(--ink-3); margin-top: 2px; }

/* variants */
.tblock--now .tblock__time { color: var(--green); font-weight: 600; }
.tblock--now .tblock__card { background: var(--green-tint); border: 1.5px solid var(--green); }
.tblock--sponsor .tblock__card { background: var(--amber-tint); border: 1px solid var(--amber-border); }
.tblock--sponsor .eyebrow { color: var(--amber); margin-bottom: 4px; }
.tblock--open .tblock__card { background: var(--surface); border: 1px dashed #C7D0E2; }
.tblock--open h3 { color: var(--ink-3); font-weight: 600; }
.tblock--open p { color: var(--ink-4); }

.tblock__card .stack { min-width: 0; }

/* ============================================================
   One-line receipt
   ============================================================ */
.receipt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.receipt__text { font-size: 15px; color: var(--ink-2); }
.receipt__text .sub { display: block; font-size: 13px; color: var(--ink-4); margin-top: 1px; }
.receipt--request { border: 1px solid var(--coral-border); }

.dot-coral {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--coral); display: inline-block;
  margin-right: 8px; vertical-align: middle;
}

/* ============================================================
   Chips / pills
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  font-size: 14px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
}
.chip--selected { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.chip--negated { background: var(--divider); border-color: var(--divider); color: var(--ink-4); text-decoration: line-through; }
.chip--consent { background: var(--green-tint); border-color: var(--green-border); color: var(--green-text); }

/* small status pill (e.g. "25 min away", "Protected", "Requested") */
.pill { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.pill--coral { background: var(--coral-tint); color: var(--coral-text); }
.pill--green { background: var(--green-tint); color: var(--green-text-2); }
.pill--cobalt { background: var(--cobalt-tint); color: var(--cobalt); }

/* ============================================================
   Buttons — always min-height, never fixed height (44px min)
   ============================================================ */
.btn {
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: filter 0.12s ease;
}
.btn:active { filter: brightness(0.94); }

.btn--cobalt { background: var(--cobalt); color: #fff; }
.btn--coral  { background: var(--coral); color: #fff; }
.btn--green  { background: var(--green); color: #fff; }
.btn--amber  { background: var(--amber); color: #fff; }
.btn--outline { background: var(--surface); border: 1.5px solid #C3CAD8; color: var(--ink-2); }

/* small "Go" / "Look" pill button on a block */
.btn-pill { min-height: 40px; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.btn-pill--green { background: var(--green); }
.btn-pill--coral { background: var(--coral); }

/* text link — a link, not a decision */
.link { color: var(--interface-blue); font-size: 15px; font-weight: 500; background: none; padding: 4px 2px; }
.link--center { align-self: center; text-align: center; padding: 10px; }

/* two equal-dignity buttons side by side */
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; }

.skip { align-self: center; color: var(--ink-3); font-size: 15px; padding: 10px; }
.foot-note { font-size: 13px; color: var(--ink-4); text-align: center; line-height: 1.4; }

/* ============================================================
   Tab bar
   ============================================================ */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-top: 0.5px solid var(--border);
  padding:
    0 max(4px, env(safe-area-inset-right))
    env(safe-area-inset-bottom)
    max(4px, env(safe-area-inset-left));
}
.tab {
  flex: 1;
  min-height: 48px;
  padding: 8px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-4);
  font-size: 12px;
  font-weight: 400;
}
.tab[aria-selected="true"] { color: var(--cobalt); font-weight: 600; }
.tab__icon { width: 23px; height: 23px; }
.tab[aria-selected="true"] .tab__icon { stroke-width: 2.3; }
.tab {
  transition:
    color 360ms ease,
    font-weight 360ms ease;
}
.tab--activated .tab__icon {
  animation: tabIconSettle 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 65%;
}
@keyframes tabIconSettle {
  0%   { transform: translateY(1px) rotate(0deg) scale(.96); }
  24%  { transform: translateY(-2px) rotate(-7deg) scale(1.07); }
  48%  { transform: translateY(-1px) rotate(5deg) scale(1.04); }
  70%  { transform: translateY(0) rotate(-2deg) scale(1.015); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* ============================================================
   Map — floor plan
   ============================================================ */
.floor-selector { display: flex; gap: 8px; margin-bottom: 12px; }
.floor-pill {
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.floor-pill[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.floor-pill .up-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--cobalt); }

.floorplan { background: var(--map-panel); border: 1px solid var(--map-panel-border); border-radius: 20px; padding: 14px; }
.floorplan__label {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-4); text-transform: uppercase; margin-bottom: 10px;
}
.floor-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.zone {
  background: var(--surface); border: 1px solid var(--map-zone-border);
  border-radius: 12px; padding: 10px; min-height: 64px;
  font-size: 12px; color: var(--ink-3);
}
.zone--circ { background: var(--map-zone); border-color: var(--map-zone-border); color: var(--ink-4); display: grid; place-items: center; text-align: center; }
.zone--wide { grid-column: 1 / -1; }
.zone--now { background: var(--green-tint); border: 1.5px solid var(--green); color: var(--green-text); }
.zone__name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.zone .pin { display: inline-block; margin-top: 6px; margin-right: 4px; padding: 3px 7px; border-radius: 6px; background: var(--cobalt); color: #fff; font-size: 11px; font-weight: 500; }
.zone--now .zone__name { color: var(--green); }

/* Route segment + destination inside a plan */
.zone--route { background: rgba(30, 58, 138, 0.09); border: 1px dashed #8FA4D8; color: var(--cobalt); display: flex; align-items: center; gap: 8px; }
.zone--route .rdot { width: 8px; height: 8px; border-radius: 999px; background: var(--cobalt); flex: 0 0 auto; }
.zone--dest { background: var(--surface); border: 1.5px solid var(--coral); color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.zone--dest .eyebrow { color: var(--coral-text); }
.zone--dest h3 { font-size: 15px; font-weight: 600; margin-top: 2px; }
.zone--dest p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.section-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin: 16px 2px 4px; }

/* Advisories — cobalt bullets */
.advisories { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.advisory { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.advisory::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 999px; background: var(--cobalt); margin-top: 7px; }

/* Coral banner (route) */
.coral-banner { background: var(--coral-tint); border: 1px solid var(--coral-border); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.coral-banner h3 { color: var(--coral-text-deep); font-size: 17px; font-weight: 600; }
.coral-banner p { color: var(--coral-text); font-size: 14px; margin-top: 2px; }

/* ============================================================
   The flashing coral dot
   ============================================================ */
.pulse-dot { position: relative; flex: 0 0 auto; }
.pulse-dot .core { position: relative; z-index: 1; border-radius: 999px; background: var(--coral); box-shadow: 0 0 0 3px rgba(236, 106, 76, 0.22); animation: cueDot 1.6s ease-in-out infinite; }
.pulse-dot .ring { position: absolute; inset: 0; border-radius: 999px; background: var(--coral); animation: cuePulse 1.6s ease-out infinite; }
.pulse-dot--banner .core, .pulse-dot--banner .ring { width: 14px; height: 14px; animation-duration: 1.8s; }
.pulse-dot--dest .core, .pulse-dot--dest .ring { width: 18px; height: 18px; }

@keyframes cuePulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cueDot   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot .ring { display: none; }
  .pulse-dot .core { animation: none; }
  .page--tab-enter,
  .page--tab-exit {
    transition-duration: 1ms;
    transform: none;
  }
  .tab--activated .tab__icon { animation: none; }
  .theme-scrim, .theme-sheet { transition-duration: 1ms; }
}

/* ============================================================
   Lock-screen nudge
   ============================================================ */
.nudge {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #16233F 0%, #0A0F1C 62%, #000 100%);
  color: #fff;
  display: flex; flex-direction: column;
  padding: 60px 20px max(20px, env(safe-area-inset-bottom));
}
.nudge__clock { text-align: center; }
.nudge__clock .date { font-size: 17px; opacity: 0.85; }
.nudge__clock .time { font-size: 76px; font-weight: 300; letter-spacing: -0.02em; margin-top: 2px; }
.nudge__stack { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.notif { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); border-radius: 18px; padding: 14px 16px; }
.notif__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.notif__app { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.notif__app .mark { width: 20px; height: 20px; border-radius: 5px; background: var(--logo-color); color: var(--logo-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.notif__time { font-size: 12px; opacity: 0.6; }
.notif h3 { font-size: 16px; font-weight: 600; }
.notif p { font-size: 14px; opacity: 0.85; margin-top: 3px; line-height: 1.35; }
.notif__link { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid rgba(255,255,255,0.15); font-size: 13px; }
.notif__link a { color: var(--link-on-dark); }
.notif--min { padding: 12px 16px; opacity: 0.9; }
.notif--min .row { display: flex; align-items: center; justify-content: space-between; }
.notif--min .row span:first-child { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.nudge__hint { text-align: center; color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 12px; }

/* ============================================================
   Voice-note / record card (Tap to connect)
   ============================================================ */
.voice-card { background: var(--coral-tint); border: 1px solid var(--coral-border); border-radius: 16px; padding: 16px; text-align: center; }
.voice-btn { background: var(--coral); color: #fff; min-height: 50px; padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; width: 100%; }
.voice-card p { font-size: 13px; color: var(--coral-text); margin-top: 8px; }

/* ============================================================
   Consent card (the meeting request)
   ============================================================ */
.consent-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.consent-card .eyebrow { margin-bottom: 12px; }
.consent-rows { display: flex; flex-direction: column; gap: 8px; }
.quote { font-size: 16px; color: var(--ink); line-height: 1.45; font-style: normal; }

/* Scoreboard (My record) */
.scoreboard { background: var(--cobalt); color: #fff; border-radius: 18px; padding: 18px; }
.scoreboard h3 { font-size: 17px; font-weight: 600; line-height: 1.35; }
.score-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 0.5px solid rgba(255,255,255,0.16); }
.score-row:first-of-type { border-top: none; margin-top: 6px; }
.score-row .num { font-size: 28px; font-weight: 600; min-width: 34px; letter-spacing: -0.02em; }
.score-row .txt { font-size: 15px; opacity: 0.92; line-height: 1.3; }

/* Add-to-home-screen prompt (contextual, after booking) */
.a2hs { background: var(--cobalt); color: #fff; border-radius: 18px; padding: 18px; text-align: center; }
.a2hs .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--logo-color); color: var(--logo-ink); display: inline-grid; place-items: center; font-weight: 700; margin-bottom: 10px; }
.a2hs h3 { font-size: 18px; font-weight: 600; }
.a2hs p { font-size: 14px; opacity: 0.9; margin: 6px 0 14px; line-height: 1.4; }
.a2hs .foot-note { color: rgba(255,255,255,0.75); margin-top: 10px; }

/* connected-account + compose (email) */
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.field > label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-family: var(--mono); }
.field .value { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 15px; background: var(--surface); color: var(--ink-2); }
.field .value--body { min-height: 120px; line-height: 1.45; white-space: pre-wrap; }
.attach { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.attach .doc { width: 30px; height: 36px; border-radius: 4px; background: var(--cobalt-tint); color: var(--cobalt); display: grid; place-items: center; font-size: 10px; font-weight: 700; }

.check { width: 30px; height: 30px; border-radius: 999px; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; }

.dev-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--border); padding: 16px 2px 4px;
}
.dev-tools h3 { font-size: 15px; font-weight: 600; }
.dev-tools p { margin-top: 3px; color: var(--ink-4); font-size: 13px; line-height: 1.35; }
.btn--compact { width: auto; min-height: 40px; padding: 8px 14px; flex: 0 0 auto; }
.btn:disabled { cursor: wait; opacity: .6; }

.empty-state {
  min-height: 260px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 28px 22px;
}
.empty-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--logo-color); color: var(--logo-ink); font-weight: 750; margin-bottom: 16px; }
.empty-state h2 { font-size: 21px; letter-spacing: -.02em; }
.empty-state p { max-width: 330px; margin: 7px 0 18px; color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.setup-form { display: flex; flex-direction: column; gap: 12px; }
.setup-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 650; }
.setup-form input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.setup-form input:focus { outline: 2px solid var(--cobalt-border); border-color: var(--cobalt); }

/* toggle */
.toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--border-strong); position: relative; flex: 0 0 auto; transition: background 0.15s ease; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform 0.15s ease; }
.toggle[aria-checked="true"] { background: var(--green); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 0.5px solid var(--divider); }
.toggle-row:first-child { border-top: none; }

/* Appearance picker */
.theme-layer { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.theme-scrim {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(5, 9, 16, .42); opacity: 0;
  backdrop-filter: blur(2px); transition: opacity 340ms ease;
}
.theme-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: min(88dvh, 760px); overflow-y: auto;
  padding: 10px max(var(--gutter), env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-top: 1px solid var(--border); border-radius: 28px 28px 0 0;
  transform: translate3d(0, 105%, 0);
  transition: transform 440ms cubic-bezier(.22, 1, .36, 1);
}
.theme-layer--open { pointer-events: auto; }
.theme-layer--open .theme-scrim { opacity: 1; }
.theme-layer--open .theme-sheet { transform: translate3d(0, 0, 0); }
.sheet-handle { display: block; width: 38px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 0 auto 16px; }
.theme-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.theme-sheet__head h2 { font-size: 23px; letter-spacing: -.025em; margin-top: 4px; }
.sheet-close { color: var(--cobalt); font-weight: 600; min-height: 40px; padding: 7px 2px 7px 12px; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-picker {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; margin-bottom: 14px; border-radius: 15px;
  background: var(--divider); border: 1px solid var(--border);
}
.mode-picker button {
  min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 11px; color: var(--ink-3); font-size: 13px; font-weight: 600;
  transition: color 220ms ease, background 220ms ease, transform 180ms ease;
}
.mode-picker button:active { transform: scale(.97); }
.mode-picker button[aria-pressed="true"] { color: var(--ink); background: var(--surface); }
.mode-picker .icon { width: 17px; height: 17px; }
.theme-option {
  min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center; gap: 10px; text-align: left; padding: 13px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.theme-option:active { transform: scale(.975); }
.theme-option[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); }
.theme-swatch { width: 40px; height: 40px; display: flex; overflow: hidden; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .08); }
.theme-swatch i { flex: 1; background: var(--swatch); }
.theme-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.theme-copy strong { font-size: 14px; }
.theme-copy small { color: var(--ink-4); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-check { color: var(--cobalt); }
.theme-check .icon { width: 19px; height: 19px; stroke-width: 2.4; }

.brand-builder, .logo-builder {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.brand-builder--active { border-top-color: var(--cobalt); }
.brand-builder {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto;
  align-items: end; gap: 10px;
}
.brand-builder__title p, .logo-builder > div:first-child p {
  color: var(--ink-4); font-size: 12px; line-height: 1.35; margin-top: 4px;
}
.color-field { display: flex; flex-direction: column; gap: 5px; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.color-field input {
  width: 46px; height: 40px; padding: 3px; border: 1px solid var(--border);
  border-radius: 11px; background: var(--surface); cursor: pointer;
}
.brand-apply {
  min-height: 40px; padding: 8px 14px; border-radius: 11px;
  background: var(--cobalt); color: #fff; font-size: 13px; font-weight: 650;
}
.logo-builder { display: grid; grid-template-columns: minmax(150px, .8fr) 1.2fr; align-items: center; gap: 14px; }
.logo-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.logo-option {
  min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px;
  gap: 7px; align-items: center; padding: 9px; text-align: left;
  border: 1px solid var(--border); border-radius: 13px; background: var(--bg);
  transition: transform 180ms ease, border-color 180ms ease;
}
.logo-option:active { transform: scale(.97); }
.logo-option[aria-pressed="true"] { border-color: var(--logo-color); }
.logo-color-dot {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: var(--logo-preview); color: var(--logo-preview-ink); font-size: 12px; font-weight: 750;
}
.logo-option > span:nth-child(2) { overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.15; }

@media (max-width: 370px) {
  .theme-options { grid-template-columns: 1fr; }
  .brand-builder { grid-template-columns: 1fr auto auto; }
  .brand-builder__title { grid-column: 1 / -1; }
  .logo-builder { grid-template-columns: 1fr; }
  .logo-options { grid-template-columns: 1fr; }
}

/* transient toast */
.toast {
  position: absolute;
  left: 50%; bottom: calc(70px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: 14px; padding: 12px 18px; border-radius: 999px;
  z-index: 50; animation: toastIn 0.2s ease; max-width: 90%; text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* small utility */
.stack { display: flex; flex-direction: column; gap: 2px; }
.mt-16 { margin-top: 16px; }
.center { text-align: center; }

/* mutual matchmaking */
.matchmaker-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; padding: 18px; border: 1px solid var(--cobalt-border);
  border-radius: 20px; background: var(--cobalt-tint);
}
.matchmaker-intro h2 { margin: 4px 0; font-size: 21px; letter-spacing: -.025em; }
.matchmaker-intro p { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.match-card { margin-bottom: 12px; }
.match-card__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 15px; }
.match-card__top .eyebrow { color: var(--green-text-2); }
.match-card__availability { margin: 14px 0; color: var(--green-text-2); }
.match-setup { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.scenario-card { display: grid; gap: 15px; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.scenario-card--active { border-color: var(--green-border); background: var(--green-tint); }
.scenario-card h3 { margin: 5px 0 6px; font-size: 20px; letter-spacing: -.025em; }
.scenario-card p { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.scenario-card__people { display: flex; align-items: center; gap: 10px; }
.scenario-card__people span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: var(--cobalt); color: #fff; font-weight: 750; }
.scenario-card__people span:last-child { background: var(--coral); }
.scenario-card__people i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green-tint); color: var(--green); }
.scenario-card__people .icon { width: 17px; height: 17px; }
.match-explainer { padding: 8px 0 2px; }
.match-explainer h1, .match-explainer h2 { margin: 6px 0 8px; letter-spacing: -.035em; }
.match-explainer h1 { font-size: 30px; }
.match-explainer h2 { font-size: 24px; }
.match-explainer p { color: var(--ink-3); line-height: 1.5; }
.match-explainer--vendor { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.match-setup .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) {
  .match-card__top { grid-template-columns: auto minmax(0, 1fr); }
  .match-card__top .pill { grid-column: 2; justify-self: start; }
  .match-setup .form-pair { grid-template-columns: 1fr; }
}

/* first launch */
.splash {
  position: absolute; inset: 0; z-index: 100; display: grid; place-content: center;
  justify-items: center; gap: 12px; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(circle at 50% 39%, color-mix(in srgb, var(--logo-color) 18%, transparent), transparent 31%),
    linear-gradient(155deg, var(--surface), var(--bg));
  animation: splash-arrive 700ms cubic-bezier(.2,.8,.2,1) both;
}
.splash__mark {
  width: 88px; height: 88px; display: grid; place-items: center; border-radius: 28px;
  background: var(--logo-color); color: var(--logo-ink); font-size: 46px; font-weight: 800;
  letter-spacing: -.08em; box-shadow: 0 20px 60px color-mix(in srgb, var(--logo-color) 25%, transparent);
}
.splash__word { font-size: 18px; font-weight: 730; letter-spacing: .14em; }
.splash__line { width: 72px; height: 2px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: var(--border); }
.splash__line span { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--logo-color); animation: splash-line 1.1s ease-in-out infinite; }
@keyframes splash-arrive { from { opacity: 0; transform: scale(1.025); } }
@keyframes splash-line { 0% { transform: translateX(-110%); } 50%,100% { transform: translateX(245%); } }

.onboarding {
  position: absolute; inset: 0; overflow: auto; color: var(--ink);
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--logo-color) 11%, transparent), transparent 30%),
    var(--surface);
}
.welcome-shell {
  min-height: 100%; max-width: 620px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  animation: welcome-in 650ms cubic-bezier(.2,.8,.2,1) both;
}
.welcome-top { min-height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.welcome-top > :first-child { justify-self: start; }
.welcome-top > :last-child { justify-self: end; }
.welcome-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 720; letter-spacing: .02em; }
.welcome-brand i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--logo-color); color: var(--logo-ink); font-style: normal; font-weight: 800; letter-spacing: -.06em; }
.welcome-skip { color: var(--ink-3); font-size: 13px; font-weight: 650; padding: 10px 0 10px 12px; }
.welcome-stage { align-self: center; display: grid; justify-items: center; gap: 34px; text-align: center; }
.welcome-stage--roles { gap: 20px; width: 100%; }
.welcome-stage--roles .welcome-copy { order: -1; }
.welcome-stage--roles .welcome-copy h1 { font-size: clamp(29px, 7vw, 42px); }
.role-intro { width: 100%; display: grid; gap: 8px; text-align: left; }
.role-intro article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface) 92%, var(--logo-color)); }
.role-intro strong { display: block; margin: 1px 0 3px; font-size: 14px; }
.role-intro p { color: var(--ink-3); font-size: 12px; line-height: 1.42; }
.role-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--cobalt); color: #fff; font-size: 12px; font-weight: 800; }
.role-icon--sponsor { background: var(--coral); }
.role-icon--attendee { background: var(--green); }
.welcome-copy { max-width: 430px; }
.welcome-copy .eyebrow, .onboard-form-head .eyebrow { color: var(--logo-color); font-size: 12px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.welcome-copy h1, .onboard-form-head h1 { margin: 9px 0 12px; font-size: clamp(34px, 9vw, 52px); line-height: .98; letter-spacing: -.045em; }
.welcome-copy p, .onboard-form-head p { color: var(--ink-3); font-size: 16px; line-height: 1.55; }
.welcome-bottom, .onboard-save { display: grid; gap: 18px; }
.welcome-bottom .btn, .onboard-save .btn { width: 100%; min-height: 54px; border-radius: 17px; font-size: 15px; }
.demo-link { width: 100%; display: grid; gap: 3px; justify-items: center; padding: 4px 12px 0; color: var(--interface-blue); }
.demo-link span { font-size: 14px; font-weight: 720; }
.demo-link small { color: var(--ink-4); font-size: 11px; }
.demo-banner { margin-bottom: 6px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid color-mix(in srgb, var(--logo-color) 28%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--logo-color) 7%, var(--surface)); }
.demo-banner > div { display: grid; gap: 3px; }
.demo-banner .eyebrow { color: var(--logo-color); }
.demo-banner strong { font-size: 15px; }
.demo-banner p { color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.demo-banner button { flex: 0 0 auto; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 680; }
.welcome-dots { display: flex; justify-content: center; gap: 7px; }
.welcome-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--border-strong); transition: width 350ms ease, background 350ms ease; }
.welcome-dot.is-active { width: 22px; background: var(--logo-color); }

.welcome-orbit, .privacy-visual { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.welcome-orbit::before, .welcome-orbit::after, .privacy-visual::before, .privacy-visual::after { content: ''; position: absolute; border: 1px solid color-mix(in srgb, var(--logo-color) 25%, var(--border)); border-radius: 50%; }
.welcome-orbit::before, .privacy-visual::before { inset: 8px; }
.welcome-orbit::after, .privacy-visual::after { inset: 36px; }
.welcome-logo, .privacy-check { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 30px; background: var(--logo-color); color: var(--logo-ink); font-size: 44px; font-weight: 800; box-shadow: 0 22px 55px color-mix(in srgb, var(--logo-color) 22%, transparent); }
.orbit { position: absolute; top: 2px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 5px solid var(--surface); border-radius: 50%; background: var(--coral); transform-origin: 9px 103px; animation: cue-orbit 9s linear infinite; }
.orbit--two { top: 31px; width: 13px; height: 13px; margin-left: -6px; border-width: 3px; background: var(--green); transform-origin: 6px 74px; animation-duration: 12s; animation-direction: reverse; }
.privacy-check { width: 92px; height: 92px; padding: 26px; stroke-width: 2.4; }
.privacy-ring { position: absolute; inset: 20px; border: 1px solid color-mix(in srgb, var(--logo-color) 16%, transparent); border-radius: 50%; }
.privacy-visual { animation: privacy-float 5s ease-in-out infinite; }
@keyframes cue-orbit { to { transform: rotate(360deg); } }
@keyframes privacy-float { 50% { transform: translateY(-7px); } }
@keyframes welcome-in { from { opacity: 0; transform: translateY(10px); } }

.welcome-shell--setup { grid-template-rows: auto auto 1fr; }
.onboard-form-head { align-self: end; max-width: 470px; padding-top: 18px; }
.onboard-form-head h1 { font-size: clamp(32px, 8vw, 46px); }
.onboarding-form { align-self: start; padding-top: 4px; }
.onboarding-form .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onboard-save { margin-top: 10px; }

@media (max-width: 480px) {
  .welcome-shell { padding-left: 20px; padding-right: 20px; gap: 18px; }
  .welcome-stage { gap: 25px; }
  .welcome-orbit, .privacy-visual { width: 180px; height: 180px; }
  .orbit { transform-origin: 9px 88px; }
  .orbit--two { transform-origin: 6px 59px; }
  .onboarding-form .form-pair { grid-template-columns: 1fr; }
}
@media (max-height: 680px) {
  .welcome-orbit, .privacy-visual { width: 148px; height: 148px; }
  .welcome-logo, .privacy-check { width: 74px; height: 74px; border-radius: 24px; }
  .privacy-check { padding: 20px; }
  .orbit { transform-origin: 9px 72px; }
  .orbit--two { transform-origin: 6px 43px; }
  .welcome-stage { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash, .welcome-shell, .privacy-visual, .orbit, .splash__line span { animation: none !important; }
}