/* Waitlist page — Figma: 💻 Ambi · Desktop App → "Waitlist Website · States"
 * (3762:22023), states 01–09. Ported from the ambi-early-access prototype;
 * every selector is namespaced `wl-` because this page also loads
 * site-chrome.css, which owns .header, .nav and .cta.
 *
 * One state is visible at a time, chosen by [data-state] on the root; each
 * state is a centred column with the same grammar: mark → copy → optional
 * figure or meta → white pill → sub-line.
 *
 * Type follows Alisa's 2026-09-28 pages: Optima ("Optima Web", from
 * site-chrome.css) for display, Inter for small print — the survey and the
 * sign-in included. Inter and Marcellus are OFL and self-hosted from
 * /assets/fonts rather than pulled from Google Fonts — fonts.googleapis.com
 * is unreachable from mainland China.
 *
 * The chrome both pages share — nav, footer, the white pill and the cream
 * frame a finished step sits on — is defined here, and /invite/ reuses it. */

@font-face {
  font-family: Marcellus;
  src: url("/assets/fonts/marcellus-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* one variable file covers the 400 and 500 the design uses */
  font-family: Inter;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.wl-page {
  --wl-text: #ffffff;
  --wl-serif: "Optima Web", Optima, "Gill Sans", "Gill Sans MT", Seravek, Candara, Calibri, sans-serif;
  --wl-sans: Inter, "Medium LL", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* the design's text opacities, kept as tokens so a state cannot drift */
  --wl-dim: rgba(255, 255, 255, 0.8);
  --wl-faint: rgba(255, 255, 255, 0.76);
  --wl-rule: rgba(255, 255, 255, 0.18);
  --wl-cream: #f5f2ef;
  /* one design pixel on the 1440 board, never larger than the board */
  --u: clamp(0.8px, 0.0694vw, 1px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #9fb8ad; /* the still-water green, visible before the canvas paints */
  transition: background 1.5s ease;
  color: var(--wl-text);
  font-family: var(--wl-serif);
  -webkit-font-smoothing: antialiased;
}

/* the inactive state is toggled with el.hidden, and the blocks below set
   display:flex — which would otherwise win over the attribute */
.wl-page [hidden] { display: none !important; }

.wl-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The still image remains visible until the supplier renderer draws, or without WebGL. */
.wl-fallback {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat url("/assets/water/bg.jpg");
  display: block;
}
.wl-page.is-live .wl-fallback { visibility: hidden; }
.wl-gl { opacity: 0; pointer-events: none; }
.wl-page.is-live .wl-gl { opacity: 1; }
.wl-gl, .wl-fallback { transition: filter 250ms ease, transform 250ms ease; }
.wl-page.is-water-blurred .wl-gl,
.wl-page.is-water-blurred .wl-fallback { filter: blur(12px); transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .wl-gl, .wl-fallback { transition: none; }
}
/* phones: the 1024w cut, like the water itself */
@media (max-width: 767px) {
  .wl-fallback { background-image: url("/assets/water/bg-1024.jpg"); }
}

/* ---------- nav: 72px bar, wordmark left, links right ---------- */
.wl-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: env(safe-area-inset-top, 0px);
  height: 72px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 32px; /* Figma 4188:49328 */
  pointer-events: none;
}
.wl-nav > * { pointer-events: auto; }

.wl-wordmark { display: block; width: 53px; height: 21px; flex: none; }
.wl-wordmark img { display: block; width: 100%; height: 100%; }

.wl-links { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 40px;
  font: 400 16px/24px var(--wl-serif);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .35s ease, background .35s ease, border-color .35s ease, color 1.5s ease;
}
.wl-links a:not(.wl-pill):hover { opacity: .62; }
.wl-links .wl-pill { border: 1px solid rgba(255, 255, 255, 0.4); }
.wl-links .wl-pill:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.14); }

/* Signed in, the avatar replaces the join pill; Download stays available. */
.wl-page[data-auth="in"] .wl-pill { display: none; }
/* site-chrome.css styles .nav-account for the light header; on the water
   it needs the light-on-dark treatment the rest of this nav uses. */
.wl-nav .nav-avatar {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.wl-nav .nav-avatar:hover { background: rgba(255, 255, 255, 0.26); }
.wl-nav .nav-avatar:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; }

/* ---------- stage ---------- */
/* Every state is centred in the frame. The stage itself ignores the pointer
   so the water still ripples in the margins around the column. */
.wl-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 24px calc(50px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.wl-block {
  grid-area: 1 / 1;
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px; /* the design's default step */
  text-align: center;
  pointer-events: auto;
}
.wl-block--landing { gap: 44px; }
.wl-block--checking { gap: 28px; }

/* the mark is 63×41 artwork inside the design's 56×28 slot: match the height
   and let the width follow, rather than squashing it */
.wl-mark { display: block; height: 28px; flex: none; }
.wl-mark img { display: block; width: auto; height: 100%; }

/* ---------- copy ---------- */
.wl-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.wl-block h1 {
  margin: 0;
  font: 400 36px/46px var(--wl-serif);
  color: #fff;
  width: 100%;
}
.wl-block--checking h1 { font-size: 32px; line-height: 40px; }
.wl-block--queued { gap: 32px; }
.wl-block--queued h1 { font-size: 32px; line-height: 40px; margin-bottom: 32px; }
.wl-block--queued > .wl-body { margin-top: 24px; }
.wl-block[data-wl-state="failed"] h1 { font-size: 32px; line-height: 42px; }

.wl-body {
  margin: 0;
  font: 400 16px/24px var(--wl-serif);
  color: var(--wl-dim);
}
.wl-body--narrow { width: min(520px, 100%); }

/* the big serif number shared by 05 and 06 */
.wl-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.wl-figure {
  margin: 0;
  font: 400 104px/116px var(--wl-serif);
  color: #fff;
  font-variant-numeric: lining-nums proportional-nums; /* the design sets "#1,248" tight */
}
.wl-caption {
  margin: 0;
  font: 400 14px/20px var(--wl-sans);
  color: var(--wl-faint);
}
/* Queue position and joined date share the display face in both states. */
.wl-block--queued .wl-caption {
  font-family: var(--wl-serif);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- 06 · meta strip ---------- */
.wl-meta {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--wl-rule);
  border-bottom: 1px solid var(--wl-rule);
}
.wl-meta > div {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wl-meta dt {
  font: 400 11px/16px var(--wl-sans);
  letter-spacing: 0.88px;
  color: rgba(255, 255, 255, 0.55);
}
.wl-meta dd {
  margin: 0;
  font: 400 16px/24px var(--wl-serif);
  color: rgba(255, 255, 255, 0.95);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 04 · loading track ---------- */
.wl-track {
  position: relative;
  width: 180px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.wl-track i {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.95);
  animation: wl-track 1.5s ease-in-out infinite;
}
@keyframes wl-track {
  0% { transform: translateX(0); }
  50% { transform: translateX(116px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-track i { animation: none; transform: translateX(58px); }
}

/* ---------- landing copy painted into the water ---------- */
.wl-copy--join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.wl-copy--join h1 { font-size: 36px; line-height: 44px; }
.wl-copy--join p {
  margin: 0;
  width: min(586px, 100%);
  font: 400 16px/24px var(--wl-serif);
  color: rgba(255, 255, 255, 0.78);
}
/* Copy remains ordinary DOM text above the supplier water surface. */

/* ---------- actions ---------- */
.wl-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* The white pill (Alisa's demo): never touched by the water, and hover
   only opens the white up. */
.wl-cta {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: calc(200 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(24 * var(--u));
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #0d0f10;
  font: 400 max(16px, calc(20 * var(--u)))/calc(28 * var(--u)) var(--wl-serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background .45s ease, color .45s ease;
  -webkit-tap-highlight-color: transparent;
}
.wl-cta:hover,
.wl-cta:focus-visible { background: rgba(255, 255, 255, 0.72); color: #10151a; outline: none; }
.wl-cta:active { background: rgba(255, 255, 255, 0.86); transition-duration: .12s; }
.wl-cta:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
/* while a call is out: the button stops taking clicks */
.wl-cta[aria-busy="true"] { opacity: .6; cursor: progress; }
.wl-cta:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .wl-cta { transition: none; }
}

/* the sub-line under every pill, and the text buttons that sit in it */
.wl-sub {
  margin: 0;
  font: 400 14px/20px var(--wl-sans);
  color: var(--wl-faint);
}
.wl-sub a, .wl-link {
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}
.wl-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 14px/20px var(--wl-sans);
  color: var(--wl-faint);
}
/* the "Signed in as …" half of a sub-line only exists when there is a
   session; without one its separator would dangle */
.wl-page:not([data-auth="in"]) .wl-sep { display: none; }
.wl-sub a:hover, .wl-link:hover { color: #fff; }
.wl-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; border-radius: 4px; }

/* ---------- footer (Figma 4188:49313): 50 tall, 32 gutters, Inter 12/18 ---------- */
.wl-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  height: calc(50 * var(--u));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(32 * var(--u));
  pointer-events: none;
  font: 400 max(11px, calc(12 * var(--u)))/calc(18 * var(--u)) var(--wl-sans);
  letter-spacing: 0.02em;
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.08), 0 -6px 12px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.wl-foot > * { pointer-events: auto; }
.wl-foot__row { display: flex; align-items: center; gap: calc(24 * var(--u)); white-space: nowrap; }
.wl-foot a { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: opacity .3s ease, color 1.5s ease; }
.wl-foot a:hover { opacity: .58; }
.wl-foot__note { color: rgba(255, 255, 255, 0.75); transition: color 1.5s ease; }
.wl-foot__sep { display: block; width: 1px; height: calc(12 * var(--u)); background: rgba(255, 255, 255, 0.45); }

/* ---------- the cream frame (Figma 4188:50614, "已加入 waitlist") ----------
   A finished step — a place in line, an accepted invitation — sits on a
   cream feather that pulls the water back from the edges. The page script
   sets [data-surface="cream"] on the root for those states. */
.wl-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to right,  rgba(245,242,239,1) 0%, rgba(245,242,239,.97) 1.5%, rgba(245,242,239,.86) 3.5%, rgba(245,242,239,.62) 6%, rgba(245,242,239,.34) 9%, rgba(245,242,239,.12) 13%, rgba(245,242,239,0) 18%),
    linear-gradient(to left,   rgba(245,242,239,1) 0%, rgba(245,242,239,.97) 1.5%, rgba(245,242,239,.86) 3.5%, rgba(245,242,239,.62) 6%, rgba(245,242,239,.34) 9%, rgba(245,242,239,.12) 13%, rgba(245,242,239,0) 18%),
    linear-gradient(to bottom, rgba(245,242,239,1) 0%, rgba(245,242,239,.96) 1%,   rgba(245,242,239,.82) 2.6%, rgba(245,242,239,.55) 4.6%, rgba(245,242,239,.28) 7%,  rgba(245,242,239,.09) 10%, rgba(245,242,239,0) 14%),
    linear-gradient(to top,    rgba(245,242,239,1) 0%, rgba(245,242,239,.96) 1%,   rgba(245,242,239,.82) 2.4%, rgba(245,242,239,.55) 4.2%, rgba(245,242,239,.28) 6.4%, rgba(245,242,239,.09) 9%, rgba(245,242,239,0) 12.5%);
  transition: opacity 1.5s ease;
}
.wl-page[data-surface="cream"] { background: var(--wl-cream); }
.wl-page[data-surface="cream"] .wl-frame { opacity: 1; }
/* nav and footer sit on the cream margin now */
.wl-page[data-surface="cream"] .wl-wordmark img { filter: brightness(0) invert(0.6); }
.wl-page[data-surface="cream"] .wl-links a,
.wl-page[data-surface="cream"] .wl-foot a,
.wl-page[data-surface="cream"] .wl-foot__note { color: #999; }
.wl-page[data-surface="cream"] .wl-links .wl-pill { border-color: rgba(153, 153, 153, 0.4); }
.wl-page[data-surface="cream"] .wl-foot__sep { background: rgba(153, 153, 153, 0.4); }
.wl-page[data-surface="cream"] .wl-foot { text-shadow: none; }
.wl-page[data-surface="cream"] .wl-nav .nav-avatar {
  border-color: rgba(153, 153, 153, 0.25);
  background: rgba(255, 255, 255, 0.55);
  color: #999;
}

@media (max-width: 720px) {
  .wl-page { --u: clamp(0.62px, 0.155vw, 1px); }
  .wl-nav { height: 64px; padding: 0 12px 0 18px; }
  .wl-wordmark { width: 46px; height: 18px; }
  .wl-links { gap: 0; }
  .wl-links a { padding: 8px 10px; font-size: 14px; }
  .wl-stage { padding: calc(env(safe-area-inset-top, 0px) + 72px) 12px calc(env(safe-area-inset-bottom, 0px) + 92px); }
  .wl-foot {
    height: auto;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    bottom: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
  }
  .wl-foot__row { gap: 16px; }
  /* on a phone the header and footer live on the cream margin, so its solid
     bands are sized to them (nav 64 below the top inset, footer 84) */
  .wl-frame { background:
    linear-gradient(to bottom, rgba(245,242,239,1) 0, rgba(245,242,239,1) calc(env(safe-area-inset-top, 0px) + 70px), rgba(245,242,239,.97) calc(env(safe-area-inset-top, 0px) + 78px), rgba(245,242,239,.86) calc(env(safe-area-inset-top, 0px) + 88.6px), rgba(245,242,239,.62) calc(env(safe-area-inset-top, 0px) + 102px), rgba(245,242,239,.34) calc(env(safe-area-inset-top, 0px) + 118px), rgba(245,242,239,.12) calc(env(safe-area-inset-top, 0px) + 139px), rgba(245,242,239,0) calc(env(safe-area-inset-top, 0px) + 164px)),
    linear-gradient(to top, rgba(245,242,239,1) 0, rgba(245,242,239,1) calc(env(safe-area-inset-bottom, 0px) + 84px), rgba(245,242,239,.97) calc(env(safe-area-inset-bottom, 0px) + 92px), rgba(245,242,239,.86) calc(env(safe-area-inset-bottom, 0px) + 102.6px), rgba(245,242,239,.62) calc(env(safe-area-inset-bottom, 0px) + 116px), rgba(245,242,239,.34) calc(env(safe-area-inset-bottom, 0px) + 132px), rgba(245,242,239,.12) calc(env(safe-area-inset-bottom, 0px) + 153px), rgba(245,242,239,0) calc(env(safe-area-inset-bottom, 0px) + 178px)),
    linear-gradient(to right, rgba(245,242,239,1) 0, rgba(245,242,239,1) 4px, rgba(245,242,239,.97) 9.3px, rgba(245,242,239,.86) 16.4px, rgba(245,242,239,.62) 25.3px, rgba(245,242,239,.34) 36px, rgba(245,242,239,.12) 50.2px, rgba(245,242,239,0) 68px),
    linear-gradient(to left, rgba(245,242,239,1) 0, rgba(245,242,239,1) 4px, rgba(245,242,239,.97) 9.3px, rgba(245,242,239,.86) 16.4px, rgba(245,242,239,.62) 25.3px, rgba(245,242,239,.34) 36px, rgba(245,242,239,.12) 50.2px, rgba(245,242,239,0) 68px);
  }
  .wl-page[data-surface="cream"] .wl-links a,
  .wl-page[data-surface="cream"] .wl-foot a { color: #8c8c8c; }
  .wl-page[data-surface="cream"] .wl-foot__note { color: #a3a3a3; }
}
/* phones: keep Download and the join action or account avatar in view */
@media (max-width: 560px) {
  [data-waitlist] .wl-links .wl-nav-secondary { display: none; }
  .wl-nav { padding: 0 12px 0 20px; }
  .wl-links a { padding: 6px 7px; font-size: 13px; line-height: 20px; }
  .wl-links .wl-pill { padding: 5px 12px; margin-left: 4px; font-size: 13px; }
  .wl-foot { height: 72px; box-sizing: content-box; gap: 6px; font-size: 11px; line-height: 16px; padding: 0 16px env(safe-area-inset-bottom, 0px); }
  .wl-foot__row { gap: 6px 14px; flex-wrap: wrap; justify-content: center; }
  .wl-foot__note { flex-basis: 100%; text-align: center; }
  .wl-foot__sep { display: none; }
}

/* ---------- toast ---------- */
.wl-toast {
  position: absolute;
  left: 50%;
  bottom: calc(4vh + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(20px);
  z-index: 7;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  border-radius: 999px;
  padding: 10px 20px;
  font: 400 15px var(--wl-serif);
  opacity: 0;
  transition: opacity .4s, transform .4s;
  pointer-events: none;
  max-width: calc(100vw - 48px);
  text-align: center;
}
.wl-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 720px) {
  .wl-block { gap: 28px; }
  .wl-block--landing { gap: 32px; }
  .wl-block h1 { font-size: 28px; line-height: 36px; }
  .wl-copy--join h1 { font-size: 30px; line-height: 38px; }
  .wl-block--queued h1 { font-size: 26px; line-height: 34px; margin-bottom: 16px; }
  .wl-block--queued > .wl-body { margin-top: 8px; }
  .wl-block[data-wl-state="failed"] h1 { font-size: 26px; line-height: 34px; }
  .wl-figure { font-size: 68px; line-height: 78px; }
  /* three columns will not fit a phone: stack them */
  .wl-meta { flex-direction: column; gap: 16px; padding: 16px 0; }
  .wl-cta { height: 52px; font-size: 18px; line-height: 24px; }
}

/* ---------- survey (Figma: "问卷 · 常驻文案版" 5048:12872) ----------
   Q1 → Q2 → Q3 → Thank you, desktop 4498:46919… and mobile 4507:12529….

   The card mounts on <body>, NOT inside .wl-page, so it cannot borrow that
   element's custom properties — an undefined var() in a `font` shorthand
   invalidates the whole declaration and silently drops the size with it.
   Every token it needs is declared here.

   Persistent copy sits beside the card from 1200px and above it below that.
   Q2 switches to a single column below 768px. Only the overlay scrolls;
   the phone card keeps the action at its bottom. */
.sv-overlay {
  --sv-ink: #152b2d;
  --sv-text: #fff;
  --sv-dim: rgba(255, 255, 255, 0.8);
  --sv-faint: rgba(255, 255, 255, 0.6);
  --sv-fill: rgba(255, 255, 255, 0.1);
  --sv-serif: Marcellus, "Optima Web", Optima, serif;
  --sv-sans: Inter, "Medium LL", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 80px 64px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sv-layout {
  position: relative;
  display: grid;
  grid-template-columns: 400px 648px;
  align-items: center;
  gap: 104px;
  flex: none;
  margin-block: auto;
  max-width: 100%;
}
.sv-intro { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.sv-intro[hidden] { display: none; }
.sv-intro h1 { margin: 0; font: 400 56px/64px var(--sv-serif); }
.sv-intro p { width: 306px; max-width: 100%; margin: 0; font: 400 18px/28px var(--sv-sans); color: rgba(255, 255, 255, 0.72); }
/* the design's blur overlay (Figma 4188:48868, shared with the sign-in):
   #143C20 at 40% over a 60 background blur */
.sv-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 60, 32, 0.4);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.sv-card {
  position: relative;
  box-sizing: border-box;
  width: 648px;
  max-width: 100%;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 48px 40px 40px;
  border-radius: 28px;
  background: var(--sv-fill);
  -webkit-backdrop-filter: blur(36px) saturate(1.3);
  backdrop-filter: blur(36px) saturate(1.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--sv-text);
  text-align: left;
}
.sv-card > * { flex-shrink: 0; }

.sv-close {
  position: fixed;
  z-index: 1;
  top: calc(40px + env(safe-area-inset-top, 0px));
  right: 40px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .3s;
}
.sv-close img { display: block; width: 20px; height: 20px; }
.sv-close:hover { opacity: 0.55; }
.sv-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

.sv-head { display: flex; flex-direction: column; gap: 24px; }
.sv-step {
  margin: 0;
  font-family: var(--sv-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--sv-dim);
}
.sv-head h2 {
  margin: 0;
  /* the design breaks Q1 and Q3 before the column edge, not at it */
  max-width: 100%;
  font-family: var(--sv-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: var(--sv-text);
}

.sv-head h2 span { display: block; }
.sv-card[data-question="time_loss"] h2 { font-size: 34px; line-height: 40px; }

.sv-options { display: flex; flex-direction: column; gap: 10px; }
.sv-card--grid .sv-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sv-option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--sv-fill);
  color: var(--sv-text);
  font-family: var(--sv-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.sv-card--grid .sv-head h2 { max-width: none; }
.sv-card--grid .sv-option { min-height: 52px; padding: 8px 15px; gap: 8px; }
/* the design sets each two-column label on one line */
.sv-card--grid .sv-option > span { white-space: nowrap; }
.sv-option:hover { background: rgba(255, 255, 255, 0.16); }
.sv-option:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sv-option.is-on { border-color: var(--sv-faint); }
.sv-option > span { min-width: 0; }
.sv-option[hidden] { display: none; }

.sv-radio {
  flex: none;
  width: 18px;
  height: 18px;
  background: center / 100% 100% no-repeat url("/assets/survey/radio.svg");
}
.sv-option.is-on .sv-radio { background-image: url("/assets/survey/radio-on.svg"); }

/* Other, once picked, turns into its own text field in place — the row
   keeps its size, and "Other" stays as the placeholder */
.sv-option--field { cursor: text; }
.sv-option--field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sv-text);
  font: inherit;
  caret-color: #fff;
  outline: none;
}
.sv-option--field input::placeholder { color: rgba(255, 255, 255, 0.3); }
.sv-option--field:focus-within { border-color: rgba(255, 255, 255, 0.85); }

.sv-foot { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sv-next {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--sv-ink);
  font-family: var(--sv-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.32px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .35s;
}
.sv-next:hover { background: rgba(255, 255, 255, 0.78); }
/* waiting for this question's answer */
.sv-next:disabled { opacity: 0.45; cursor: default; }
.sv-next:disabled:hover { background: #fff; }
.sv-next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sv-dots { display: flex; gap: 4px; }
.sv-dot { width: 18px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.2); }
.sv-dot.is-on { background: #fff; }
/* an answered step: a larger hit area than the 2px dash, drawn the same */
.sv-dot--back {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: opacity .25s;
}
.sv-dot--back::before { content: ""; position: absolute; inset: -11px -2px; }
.sv-dot--back:hover { opacity: .6; }
.sv-dot--back:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Completion returns to a centered, unframed layout. */
.sv-overlay--thanks .sv-layout { display: block; width: min(560px, 100%); }
.sv-card--thanks {
  width: 100%;
  min-height: 0;
  align-items: center;
  gap: 40px;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-align: center;
}
.sv-check { display: block; width: 64px; height: 64px; }
.sv-thanks { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.sv-thanks h2 { margin: 0; font: 400 56px/62px var(--sv-serif); }
.sv-thanks p { margin: 0; font: 400 18px/28px var(--sv-sans); color: var(--sv-faint); }
.sv-thanks p b { font-weight: 400; color: #fff; }
.sv-card--thanks .sv-next { width: min(320px, 100%); }

@media (min-width: 1200px) and (max-width: 1359px) {
  .sv-layout { grid-template-columns: 360px 648px; gap: 64px; }
  .sv-intro h1 { font-size: 44px; line-height: 50px; }
  .sv-intro p { width: 272px; font-size: 16px; line-height: 25px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sv-overlay { padding: 80px 40px; }
  .sv-layout { width: 648px; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sv-intro h1 { font-size: 44px; line-height: 50px; }
  .sv-intro p { width: 100%; }
}
@media (max-width: 767px) {
  .sv-overlay { padding: calc(72px + env(safe-area-inset-top, 0px)) 24px calc(42px + env(safe-area-inset-bottom, 0px)); }
  .sv-layout { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block: 0; }
  .sv-intro h1 { font-size: 36px; line-height: 42px; }
  .sv-intro p { width: 100%; }
  .sv-close { right: 24px; }
  .sv-card { width: 100%; min-height: 0; padding: 32px; gap: 24px; }
  .sv-options, .sv-card--grid .sv-options { display: flex; flex-direction: column; gap: 6px; }
  .sv-option, .sv-card--grid .sv-option { min-height: 44px; padding: 10px 19px; }
  .sv-card--grid .sv-option > span { white-space: normal; }
  .sv-overlay--thanks .sv-layout { margin-block: auto; }
  .sv-card--thanks { padding: 0; gap: 32px; }
  .sv-thanks { gap: 8px; }
  .sv-thanks h2 { font-size: 36px; line-height: 42px; }
  .sv-thanks p { font-size: 15px; line-height: 22px; }
}
@media (max-width: 479px) {
  .sv-overlay { padding: calc(58px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .sv-layout { gap: 36px; }
  .sv-intro { width: calc(100% - 58px); margin-left: 8px; }
  .sv-intro h1 { font-size: 26px; line-height: 30px; }
  .sv-intro p { width: 238px; font-size: 14px; line-height: 20px; }
  .sv-close { top: calc(62px + env(safe-area-inset-top, 0px)); }
  .sv-card { min-height: 610px; padding: 20px 24px 24px; gap: 16px; justify-content: flex-start; }
  .sv-head h2, .sv-card[data-question="time_loss"] h2 { font-size: 24px; line-height: 30px; }
  .sv-options, .sv-card--grid .sv-options { gap: 5px; }
  .sv-option, .sv-card--grid .sv-option { min-height: 40px; padding: 8px 19px; }
  .sv-foot { margin-top: auto; gap: 14px; }
  .sv-next { height: 52px; }
  .sv-overlay--thanks { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  .sv-overlay--thanks .sv-close { top: calc(68px + env(safe-area-inset-top, 0px)); right: 26px; }
  .sv-overlay--thanks .sv-layout { width: calc(100% - 32px); }
  .sv-card--thanks { min-height: 0; padding: 0; gap: 32px; }
  .sv-card--thanks .sv-next { width: 100%; }
}
/* Keep the start reachable in short windows; only the page scrolls. */
@media (max-height: 759px) {
  .sv-layout, .sv-overlay--thanks .sv-layout { margin-block: 0; }
}