:root {
  --ink: #08090A;
  --ink-raised: #141618;
  --milk: #FDF7F4;
  --blush: #FFC2D1;
  --violet: #6D4AFF;
  --violet-lift: #8E75FF;
  --azure: #2C7CFF;

  --positive: #0FB77E;
  --warning: #FFB020;
  --negative: #E5484D;
  --slate-60: #6B7280;
  --slate-30: #C9CDD3;
  --white-60: rgba(255, 255, 255, .62);
  --white-12: rgba(255, 255, 255, .12);

  --grad-brand: linear-gradient(135deg, #6D4AFF 0%, #2C7CFF 100%);

  --r-pill: 999px;
  --r-block: 40px;
  --r-card: 24px;
  --r-tight: 12px;
  --shadow-hero: 0 40px 80px -20px rgba(8, 9, 10, .45);

  --font-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  --ease-enter: cubic-bezier(.32, .72, 0, 1);
  --ease-state: cubic-bezier(.4, 0, .2, 1);

  --pad-section: 120px;
  --max-w: 1200px;
}

@media (max-width: 768px) {
  :root { --pad-section: 72px; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keeps the sticky nav from covering whatever was just jumped to. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 769px) {
  .wrap { padding: 0 48px; }
}

/* Surfaces alternate down the page — that rhythm is the layout. */
.surface-ink { background: var(--ink); color: var(--milk); }
.surface-milk { background: var(--milk); color: var(--ink); }
.surface-blush { background: var(--blush); color: var(--ink); }

/* ---------- Type scale ---------- */

.display-xl, .display-m, h1, h2 {
  font-family: var(--font-display);
  margin: 0;
}

.display-xl {
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.035em;
  max-width: 15ch;
}

.display-m {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.025em;
  max-width: 18ch;
}

.body-l {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -.005em;
  max-width: 52ch;
  margin: 24px 0 0;
}

.body {
  font-size: 16px;
  max-width: 58ch;
  margin: 16px 0 0;
}

.legal {
  font-size: 12px;
  line-height: 1.45;
  max-width: 62ch;
  margin: 24px 0 0;
}

.surface-ink .legal { color: var(--white-60); }
.surface-milk .legal { color: var(--slate-60); }
.surface-blush .legal { color: rgba(8, 9, 10, .68); }

/* ---------- Nav ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--milk);
  color: var(--ink);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  z-index: 10;
}

.skip-link:focus { left: 24px; top: 16px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 72px;
  display: flex;
  align-items: center;
  /* The page's one gradient. The nav is sticky, so it is on screen in every
     viewport — which means nothing else may use a gradient. Opaque, so there is
     nothing for a backdrop blur to do. */
  background: var(--grad-brand);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--milk);
}

/* Where you are, on screen in every viewport because the nav is. Three pills:
   done carries a tick, the current one is filled, the ones you cannot reach
   yet are faded and inert. */
.stepper {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 6px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--milk);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms var(--ease-state), color 120ms var(--ease-state), opacity 120ms var(--ease-state);
}

.step-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.step-pill[data-state="active"] { background: var(--milk); color: var(--ink); border-color: var(--milk); }
.step-pill[data-state="active"] .step-n { background: var(--ink); color: var(--milk); }
.step-pill[data-state="done"] .step-n { background: var(--milk); color: var(--ink); }
.step-pill[data-state="done"] .step-n::before { content: "✓"; }
.step-pill[data-state="done"] .step-n { font-size: 0; }
.step-pill[data-state="done"] .step-n::before { font-size: 12px; }
.step-pill:disabled { opacity: .45; cursor: default; }
.step-pill:not(:disabled):hover { background: rgba(255, 255, 255, .14); }
.step-pill[data-state="active"]:hover { background: var(--milk); }

.step-pill:focus-visible { outline: 3px solid var(--milk); outline-offset: 2px; }

@media (max-width: 480px) {
  .step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .step-pill { padding: 0 6px; }
}

/* Wraps rather than truncating: some of these say the camera has stopped, and
   a clipped instruction is worse than a taller pill. */
.badge {
  margin: 32px 0 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: rgba(109, 74, 255, .16);
  color: var(--violet-lift);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 100%;
}

/* ---------- Hero ---------- */

.hero { padding: 120px 0 var(--pad-section); }

@media (max-width: 768px) {
  .hero { padding: 64px 0 var(--pad-section); }
}

/* ---------- Panels: the three steps, each a disclosure in place ---------- */

.panel { padding: 8px 0; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  border: none;
  background: none;
  color: inherit;
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
}

.panel-head:disabled { cursor: default; }

.panel-head:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: var(--r-tight); }

.panel-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1.5px solid currentColor;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.panel-title {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.025em;
}

.panel-mark { flex: 1; font-family: var(--font-text); font-size: 14px; font-weight: 500; }

.panel[data-state="active"] .panel-n { background: var(--ink); color: var(--milk); border-color: var(--ink); }
.panel[data-state="done"] .panel-n { font-size: 0; }
.panel[data-state="done"] .panel-n::before { content: "✓"; font-size: 16px; }
.panel[data-state="done"] .panel-mark::before { content: "Done"; opacity: .6; }
.panel[data-state="locked"] .panel-head { opacity: .38; }

.panel-chevron { flex: none; transition: transform 240ms var(--ease-state); }
.panel-head[aria-expanded="true"] .panel-chevron { transform: rotate(180deg); }

/* Height animates by grid rows, so nothing is measured and nothing jumps.
   The section keeps its place; only its content unfolds. */
.panel-body, .disclosure-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease-state);
}

.panel-body[data-open="true"], .disclosure-body[data-open="true"] { grid-template-rows: 1fr; }

.panel-body > .panel-inner, .disclosure-body > .panel-inner { min-height: 0; overflow: hidden; }

.panel-body > .panel-inner { padding-bottom: 8px; }
.panel-body[data-open="true"] > .panel-inner { padding-bottom: 64px; }

.panel-body:not([data-open="true"]) > .panel-inner { visibility: hidden; }
.disclosure-body:not([data-open="true"]) > .panel-inner { visibility: hidden; }

/* ---------- Identity: who you are, above everything else ---------- */

.identity { margin-bottom: 32px; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 48px;
}

.chip-row[hidden] { display: none; }
.chip-row .person { font-size: 18px; font-weight: 500; }

.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Named signals. Words, never colour alone — the kind is in the text. */
.badge-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(8, 9, 10, .2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 6px;
}

.badge-chip.bankid { background: var(--ink); color: var(--milk); border-color: var(--ink); }
.badge-chip.verified { background: rgba(15, 183, 126, .16); border-color: transparent; color: #0A6B4F; }
.badges .badge-chip { margin-left: 0; }

.btn-small { min-height: 40px; padding: 0 16px; font-size: 14px; }

.btn-text {
  border: none;
  background: none;
  padding: 8px 0;
  color: var(--violet);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(109, 74, 255, .4);
  cursor: pointer;
}

.btn-text:hover { text-decoration-color: var(--violet); }
.btn-text:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 4px; }

/* ---------- Disclosure: the host box ---------- */

.disclosure {
  border: 1.5px solid rgba(8, 9, 10, .18);
  border-radius: var(--r-card);
}

.disclosure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 0 12px 0 24px;
  border: none;
  background: none;
  color: inherit;
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-card);
}

.disclosure-head:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }

.plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--milk);
  transition: transform 240ms var(--ease-state);
}

.disclosure-head[aria-expanded="true"] .plus { transform: rotate(45deg); }

.disclosure-body > .panel-inner { padding: 0 24px; }
.disclosure-body[data-open="true"] > .panel-inner { padding-bottom: 24px; }

.or {
  margin: 24px 0;
  font-size: 14px;
  color: var(--slate-60);
  text-align: center;
}

/* Role decides what a person can see. Nothing is explained twice. */
body[data-role="host"] #joinBlock, body[data-role="host"] .or,
body[data-role="guest"] #hostBlock, body[data-role="guest"] .or { display: none; }
body[data-role="host"] .guest-only, body[data-role="guest"] .host-only { display: none; }
body:not([data-role]) .guest-only, body:not([data-role]) .host-only { display: none; }

/* ---------- Layout ---------- */

.step-grid {
  display: grid;
  gap: 48px;
  align-items: start;
}

@media (min-width: 900px) {
  .step-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.check-main, .check-side { min-width: 0; }

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  border: none;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms var(--ease-state), transform 120ms var(--ease-state), color 120ms var(--ease-state);
}

@media (max-width: 768px) {
  .btn { min-height: 52px; }
}

.btn:active:not(:disabled) { transform: scale(.98); }

.btn:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: var(--milk); }
.btn-primary:hover:not(:disabled) { background: #24272A; }

.btn-primary-dark { background: var(--milk); color: var(--ink); }
.btn-primary-dark:hover:not(:disabled) { background: #FFFFFF; }

.btn-accent { background: var(--blush); color: var(--ink); }
.btn-accent:hover:not(:disabled) { background: #FFB3C6; }
.surface-blush .btn-accent { background: var(--ink); color: var(--milk); }
.surface-blush .btn-accent:hover:not(:disabled) { background: #24272A; }

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

.btn-secondary:hover:not(:disabled) { background: rgba(8, 9, 10, .06); }

/* ---------- Inputs ---------- */

.field-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}

.text-field {
  width: 100%;
  min-width: 0;
  height: 56px;
  margin-top: 8px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(8, 9, 10, .3);
  background: transparent;
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--ink);
}

.control-row > .text-field { flex: 1 1 160px; margin-top: 0; }
.code-field { flex: 0 1 150px; letter-spacing: .1em; text-transform: uppercase; }
.code-field::placeholder { letter-spacing: 0; text-transform: none; }
.text-field::placeholder { color: rgba(8, 9, 10, .45); }

.text-field:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, .2);
}

.field-action {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(8, 9, 10, .6);
  cursor: pointer;
  transition: background-color 120ms var(--ease-state), color 120ms var(--ease-state);
}

.field-action:hover { background: rgba(8, 9, 10, .08); color: var(--ink); }

.field-action:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

/* The code, big enough to read out over a call. */
.code-display {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 24px;
  padding: 8px 8px 8px 24px;
  border-radius: var(--r-pill);
  background: rgba(8, 9, 10, .06);
}

.code-text {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .12em;
}

#expectPhoto { font-size: 14px; color: rgba(8, 9, 10, .7); max-width: 100%; }

#expectPhoto::file-selector-button {
  min-height: 44px;
  padding: 0 20px;
  margin-right: 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(8, 9, 10, .35);
  background: transparent;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

#expectPreview {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-card);
  margin-top: 16px;
}

#expectPreview[hidden] { display: none; }

/* Deliberately warm. This runs when someone is already uneasy — a first date, a
   call that feels off — so it should read as a greeting, not an inspection. */
.expect { margin-top: 32px; }

.expect-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 4px;
}

.hint { color: rgba(8, 9, 10, .68); margin: 0 0 12px; }

.optional {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 2px 10px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: rgba(8, 9, 10, .1);
  color: rgba(8, 9, 10, .7);
  vertical-align: middle;
}

/* ---------- Poses: a face that looks where it is told ---------- */

.pose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pose-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px 0 10px;
  border: 1.5px solid rgba(8, 9, 10, .25);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms var(--ease-state), border-color 120ms var(--ease-state), transform 120ms var(--ease-state);
}

.pose-btn:hover { background: rgba(8, 9, 10, .06); }
.pose-btn:active { transform: scale(.98); }
.pose-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--milk); }
.pose-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

.pose-icon { flex: none; }
.pose-btn:not(:has(.pose-icon)) { padding-left: 16px; }

/* ---------- People, cards, timeline ---------- */

.people {
  list-style: none;
  padding: 0;
  margin: 0;
}

.people li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(8, 9, 10, .18);
  font-size: 16px;
}

.people li:last-child { border-bottom: none; }
.people .person { font-weight: 500; }
.people .you { font-weight: 400; opacity: .7; }
.people .tick { color: #0A7355; }

.people .status {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.people li.ok .status { color: #0A7355; }
.people li.waiting .status { color: rgba(8, 9, 10, .6); }

.card {
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .55);
}

.card[hidden] { display: none; }

.card-text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.card-text > .tl-icon { vertical-align: -7px; margin-right: 6px; }

.terms {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 400;
}

.terms li { padding: 4px 0 4px 34px; text-indent: -34px; }
.terms li::before { content: "·"; display: inline-block; width: 34px; text-indent: 0; text-align: center; }
.terms li:has(.pose-icon)::before { content: none; }
.terms li .pose-icon { vertical-align: -8px; margin-right: 6px; }

.terms-preview {
  margin: 32px 0 0;
  font-size: 16px;
  font-weight: 500;
}

.sent-card { margin-top: 24px; }
.sent-card img { max-width: 240px; border-radius: var(--r-card); box-shadow: none; }

.timeline {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.tl-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(8, 9, 10, .18);
}

.tl-row:last-child { border-bottom: none; }

.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-weight: 500;
}

.tl-icon { display: inline-grid; place-items: center; }
.tl-detail { font-weight: 400; opacity: .7; font-size: 14px; }

.tl-states {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
}

.tl-states li {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(8, 9, 10, .2);
  opacity: .45;
}

.tl-states li.done { opacity: 1; background: rgba(8, 9, 10, .08); border-color: transparent; }
.tl-states li.done::before { content: "✓ "; }
.tl-states li.on { opacity: 1; background: var(--ink); color: var(--milk); border-color: var(--ink); }
.tl-row.failed .tl-states li.on { background: var(--negative); border-color: var(--negative); }
.tl-row.done .tl-states li.on { background: #0A7355; border-color: #0A7355; }
.tl-row.done .tl-states li.on::before { content: "✓ "; }

.photo-card {
  margin: 0;
}

.photo-card img {
  display: block;
  width: 100%;
  max-width: 480px;
  border-radius: var(--r-block);
  box-shadow: var(--shadow-hero);
}

.photo-card figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 500;
}

.photo-card[hidden] { display: none; }

.meet-verdict {
  margin-top: 8px;
  padding: 20px 24px;
  border-radius: var(--r-card);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: rgba(8, 9, 10, .05);
}

.meet-verdict[hidden] { display: none; }
.meet-verdict:not([hidden]) { animation: rise 600ms var(--ease-enter) both; }
.meet-verdict.yes { background: rgba(15, 183, 126, .16); color: #0A6B4F; }
.meet-verdict.no { background: rgba(229, 72, 77, .14); color: #8E2427; }
.meet-verdict.neutral { color: rgba(8, 9, 10, .75); }

#askBlock { margin-top: 32px; }
#askBlock[hidden] { display: none; }

/* ---------- Camera ---------- */

/* The button that starts the camera sits in the empty box it is about to fill,
   rather than somewhere above it. It goes once there is a picture to look at. */
.stage-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.stage-start[hidden] { display: none; }

.stage-start:active:not(:disabled) { transform: translate(-50%, -50%) scale(.98); }

.stage-wrap { position: relative; }

/* Not inside .stage: that is mirrored, and a left arrow in it would read right. */
.cue {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(8, 9, 10, .72);
  color: var(--milk);
  pointer-events: none;
  z-index: 3;
  animation: cue-pulse 1.4s var(--ease-state) infinite;
}

.cue[hidden] { display: none; }

/* One arrow, pointing up, rotated. */
.cue-right { transform: rotate(90deg); }
.cue-down { transform: rotate(180deg); }
.cue-left { transform: rotate(-90deg); }

@keyframes cue-pulse {
  0%, 100% { opacity: .95; }
  50% { opacity: .45; }
}

/* Mirrored, like every selfie camera and video call. An unmirrored preview
   makes "turn to your left" look like it moved you the wrong way, which reads
   as the app being backwards. Display only: pose is measured from the video's
   own pixels via drawImage, which a CSS transform does not touch. Both video
   and overlay are inside, so they mirror together and stay aligned. */
.stage {
  position: relative;
  width: 100%;
  min-height: 220px;
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--ink-raised);
  transform: scaleX(-1);
  /* The one shadow on the page. */
  box-shadow: var(--shadow-hero);
}

/* The stage takes its shape from the camera rather than imposing one. Forcing a
   ratio here would crop the video to fill while the overlay stretched to fit,
   putting the guide oval somewhere other than where the face actually is on any
   camera that isn't 4:3. */
.stage video {
  display: block;
  width: 100%;
  height: auto;
}

/* height:auto makes the canvas render at its bitmap's ratio, which is set from
   the video's own dimensions — so it lands exactly on the video however tall
   the stage happens to be, rather than stretching to the stage box. */
.stage canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: transparent;
  pointer-events: none;
}

/* ---------- Progress: drawn on the camera ---------- */

.progress {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-radius: var(--r-block);
  color: var(--milk);
  pointer-events: none;
}

.progress[hidden] { display: none; }

.progress-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-dots li {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .35);
  transition: background-color 240ms var(--ease-state), transform 240ms var(--ease-state);
}

.progress-dots li.on { background: var(--milk); transform: scale(1.3); }
.progress-dots li.done { background: var(--positive); }

.progress-panel {
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: rgba(8, 9, 10, .72);
}

.progress-text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}

.progress-hint {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--white-60);
  min-height: 1.4em;
}

/* The computing ring and the final mark share the centre of the frame. */
.progress-ring, .progress-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
}

.progress-ring {
  border-radius: var(--r-pill);
  border: 4px solid rgba(255, 255, 255, .25);
  border-top-color: var(--milk);
  animation: spin 900ms linear infinite;
}

.progress-ring[hidden], .progress-mark[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Drawn, not popped: the ring closes, then the check strokes in. */
.progress-mark .mark-ring, .progress-mark .mark-check, .progress-mark .mark-cross {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.progress-mark .mark-ring { animation: draw 500ms var(--ease-enter) forwards; }
.progress[data-state="pass"] .mark-check { animation: draw 360ms var(--ease-enter) 380ms forwards; }
.progress[data-state="fail"] .mark-cross { animation: draw 360ms var(--ease-enter) 380ms forwards; }
.progress[data-state="pass"] .mark-cross, .progress[data-state="fail"] .mark-check { display: none; }
.progress[data-state="pass"] { color: #6CF0B8; }
.progress[data-state="fail"] { color: #FF8A8E; }
.progress[data-state="pass"] .progress-panel, .progress[data-state="fail"] .progress-panel { color: var(--milk); }

@keyframes draw { to { stroke-dashoffset: 0; } }

/* A photo was just taken: a brief edge, not a flash across the room. */
.progress.snap { box-shadow: inset 0 0 0 6px var(--milk); }

/* On a phone the camera scrolls away easily. The instruction follows. */
.strip {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--milk);
  font-weight: 500;
  box-shadow: 0 16px 40px -12px rgba(8, 9, 10, .6);
  animation: toast-in 240ms var(--ease-enter);
}

.strip[hidden] { display: none; }
.strip .btn { flex: none; min-height: 44px; padding: 0 20px; }

/* ---------- Status text ---------- */

.note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--slate-60);
  min-height: 1.4em;
}

.surface-blush .note { color: rgba(8, 9, 10, .68); }
#checkNote:empty, #hostNote:empty, #roomNote:empty, #requestNote:empty, #identityNote:empty { display: none; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 21;
  margin: 0;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--milk);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px -8px rgba(8, 9, 10, .5);
  animation: toast-in 240ms var(--ease-enter);
}

.toast[hidden] { display: none; }

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.strip { animation-name: strip-in; }

@keyframes strip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */

.site-footer { padding: 96px 0 64px; }

.footer-legal { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--white-12); max-width: none; }

/* ---------- Motion: one orchestrated arrival ---------- */

.hero-copy > * {
  animation: rise 600ms var(--ease-enter) both;
}

.hero-copy > *:nth-child(2) { animation-delay: 60ms; }
.hero-copy > *:nth-child(3) { animation-delay: 120ms; }
.hero-copy > *:nth-child(4) { animation-delay: 180ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}