/* Waitlist page styles. Everything above the WAITLIST marker is the enrollment page's stylesheet
   (LiveKitUbiExternal enroll_assets/landing.html, origin/main 48ecea5), unchanged except the orbit image path. */
@import url('/assets/fonts/fonts.css');
  :root {
    /* UBi brand tokens (DESIGN.md) */
    --teal: #29CDDE;
    --teal-light: #5CE5EC;
    --teal-dark: #0C93B0;
    --teal-glow: rgba(41,205,222,0.22);
    --teal-tint: rgba(41,205,222,0.12);
    --ink: #0F1520;
    --ink-2: #4A5568;
    --muted: #8896A8;
    --sheet: #FFFFFF;
    --sheet-warm: #F4F6FB;
    --hairline: rgba(20,40,80,0.08);
    --shadow: rgba(100,130,180,0.18);
    --green: #22C55E;
    --sky-1: #E4ECFF;
    --sky-2: #EFF4FF;
    --sky-3: #F8FAFF;
    --peri-1: #DEE5F6;
    --peri-2: #E7ECF8;
    --peri-ink: #4F66C2;
    --logo-bg: #C6BDF6;   /* exact background of 3dlogofinal.png, so the logo blends */
    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Funnel Display', var(--font);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { height: 100%; }
  body {
    min-height: 100%;
    font-family: var(--font);
    color: var(--ink);
    background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  .page {
    position: relative; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  }
  .frame { position: relative; width: 100%; max-width: 460px; }

  /* ── Card ── */
  .panel {
    position: relative; z-index: 1; width: 100%; overflow: visible;   /* let UBi rise above every layer, never clipped by the card */
    container-type: inline-size;   /* children can size with the card (cqw), not the raw viewport */
    background: linear-gradient(180deg, var(--sheet) 0%, var(--sheet-warm) 100%);
    border-radius: 28px;
    padding: 16px 17px 17px;
    box-shadow: 0 28px 70px -30px var(--shadow), 0 1px 0 0 rgba(255,255,255,0.8) inset, 0 0 0 1px rgba(255,255,255,0.6);
  }
  /* Full-width light banner above everything (like the email) */
  .topbanner {
    margin: -16px -17px 0; padding: clamp(11px, 1.5cqw, 16px) 18px;
    color: var(--ink-2); text-align: center; font-size: clamp(12px, 1.65cqw, 17px); font-weight: 500; line-height: 1.45;
    border-bottom: 1px solid var(--hairline);
  }
  .topbanner b { color: var(--ink-2); font-weight: 600; }
  .topbanner .ub { color: var(--peri-ink); font-weight: 700; }
  /* site's gradient "loop divider" replaces the flat hairline */
  .gradline { height: 2px; margin: 0 -17px; background: linear-gradient(90deg,#D9EBFF 0%,#3694FF 50%,#D9EBFF 100%); }
  .topbanner { border-bottom: none; }

  /* Brand: the full-color 3D logo; its lavender background reads as a neat chip
     in the white area, where the old logo sat. */
  .brand { margin: 14px 0 12px 1px; }
  .brand-img { height: 30px; width: auto; display: block; border-radius: 8px; box-shadow: 0 4px 12px -6px rgba(80,90,160,.35); }

  /* ── Hero band (periwinkle): welcome + intro LEFT, prominent live UBi RIGHT ── */
  .herohead {
    margin: 0 -17px; padding: 20px 18px 24px;
    min-height: clamp(196px, 60cqw, 248px);
    background: linear-gradient(165deg, var(--peri-1) 0%, var(--peri-2) 100%);
    display: flex; align-items: stretch; gap: 6px; position: relative;
    z-index: 70;   /* hero (and UBi inside it) paints above every later sibling — she is always the top layer */
  }
  .herohead-copy { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .wpill {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
    background: #fff; color: var(--peri-ink); font-size: 12px; font-weight: 700;
    padding: 5px 11px; border-radius: 100px; margin-bottom: 11px;
    box-shadow: 0 4px 12px -6px rgba(40,60,120,.28);
  }
  .h1 { font-family: var(--display); font-size: clamp(17px, 5.7cqw, 23px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; color: var(--ink); }
  .hsub { font-size: clamp(11.5px, 3.6cqw, 13.5px); font-weight: 500; color: var(--ink-2); line-height: 1.42; margin-top: 8px; }
  /* floating mini-chips (approved welcome-email motif) */
  .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
  .hchip {
    display: inline-flex; align-items: center; gap: 5px; background: #fff; border-radius: 100px;
    padding: 5px 10px; font-size: 10.5px; font-weight: 600; color: var(--ink);
    box-shadow: 0 5px 14px -7px rgba(40,90,170,0.35);
  }
  .hchip .dotg { color: var(--green); } .hchip .dott { color: #0EAEE0; }

  /* UBi's DEDICATED POCKET (hero-right). The live canvas renders at 2.5× and is
     scaled to fit, so she's crisp; a generous on-top container keeps her uncut. */
  /* UBi's NOOK — a soft recessed alcove in the hero's top-right. The live canvas
     is rendered at 2.4× and CSS-scaled to fit, so she stays crisp; the scene's
     entrance frames her inside it, and a generous on-top stage keeps her uncut. */
  /* UBi position MARKS: each intro stop as a point in the hero row (% of its width/height),
     with its depth in --ubi-z. driver.js measures them at load/resize and converts to the
     Spline bridge's screen fractions, so the intro and the position anchors both land on the
     same page spot at any window size. Values below are the positions each stop already had
     in production, phone and desktop measured separately. */
  /* Absolutely positioned and inset over the hero, NOT a flex child: as a block child of the
     hero's flex row it became a flex item and changed the row's height (271 -> 288px on a
     phone), which moved every mark with it. inset:0 keeps the percentages resolving against
     the same hero box while staying out of layout. */
  /* Marks are OFF. They existed to re-aim UBi after the canvas grew; the camera-frame
     compensation in the bridge makes that unnecessary, because her world position is no
     longer affected by the canvas size. driver.js treats a display:none container as
     "no marks" and leaves the stock choreography alone. */
  .ubi-marks { position: absolute; inset: 0; pointer-events: none; display: none; }
  .ubi-marks .ubi-mark { position: absolute; width: 0; height: 0; pointer-events: none; }
  /* Phone / tablet */
  /* Phone stops, DERIVED (not eyeballed) from the geometry that shipped: canvas =
     224% of the slot at 30/53, centred on (slot 50%, slot 92%), times the stock STATES
     fractions, plus __landingDyFrac on the landing. Re-derive the same way if the hero
     or slot proportions change. The previous hand-set values put state1 (the wave) and
     state5 past the right edge of a 375px-wide screen. */
  .ubi-mark[data-mark="state1"]   { left: 99.23%;  top: 137.45%; --ubi-z: -300; }
  .ubi-mark[data-mark="state2"]   { left: 78.38%;  top: 133.79%; --ubi-z: 100; }
  .ubi-mark[data-mark="state3"]   { left: 76.07%;  top: 137.45%; --ubi-z: 200; }
  .ubi-mark[data-mark="state5"]   { left: 103.45%; top: 67.38%;  --ubi-z: -300; }
  .ubi-mark[data-mark="state6_5"] { left: 76.07%;  top: 1.46%;   --ubi-z: -200; }
  .ubi-mark[data-mark="landing"]  { left: 76.07%;  top: 54.57%;  --ubi-z: 100; }
  .ubi-slot { flex: 0 0 42%; align-self: stretch; position: relative; min-height: 150px; overflow: visible; }
  .ubi-slot::before {
    content: ""; position: absolute; left: 52%; top: 54%; width: 140px; height: 140px;
    transform: translate(-50%,-50%); z-index: 0;
    background: radial-gradient(circle, var(--teal-glow) 0%, rgba(41,205,222,0) 70%);
    filter: blur(8px);
  }
  /* The live canvas is sized RELATIVE to its nook (% of the slot) with a fixed
     portrait aspect-ratio, so it scales with the column → the screen. No px.
     A wide portrait canvas frames her large; she overflows the nook (visible). */
  .ubi-stage {
    position: absolute; left: 50%; top: 92%;
    width: 224%; aspect-ratio: 30 / 53;
    transform: translate(-50%, -50%);
    overflow: visible; pointer-events: none; z-index: 60;   /* UBi sits above every other layer */
  }
  /* Supersampled: the iframe lays out at 2.4× the stage and is CSS-scaled back
     down, so the bridge canvas has 2.4× the pixels of what's shown — crisp UBi,
     matching the puppet/onboarding render quality (restores the documented 2.5×
     design the plain inset:0 sizing had lost). */
  .ubi-bridge {
    position: absolute; left: 50%; top: 50%; width: 240%; height: 240%;
    transform: translate(-50%, -50%) scale(0.41667); transform-origin: center;
    border: 0; display: block; background: transparent; opacity: 1;
  }
  /* Boot loader — mirrors the app's BootLoadingScreen (components/BootLoadingScreen.tsx):
     brand + "Your AI nurse UBi is loading…" + 6px teal track that fills to 90% while the
     Spline scene loads, snaps to 100% on ready (driver.js adds .loaded), then fades.
     Hard 8s fallback so it can never sit there forever. */
  .ubi-shimmer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; opacity: 1; transition: opacity .8s ease .35s; }
  .ubi-loader { display: flex; flex-direction: column; align-items: center; width: 72%; max-width: 230px; }
  .ubi-loader .tagline { font-size: 13px; color: var(--ink-2); margin-bottom: 16px; white-space: nowrap; }
  .ubi-loader .track { width: 100%; height: 6px; border-radius: 3px; background: rgba(15,21,32,0.08); overflow: hidden; }
  .ubi-loader .fill { height: 100%; width: 0; border-radius: 3px; background: var(--teal); }
  .ubi-loader .pct { margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ubi-slot.loaded .ubi-shimmer, .ubi-shimmer.timeout { opacity: 0; }
  .tap-hint {
    position: absolute; z-index: 61; right: 2px; bottom: 0;
    display: inline-flex; align-items: center; gap: 5px; pointer-events: auto;
    background: rgba(255,255,255,0.82); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.9);
    color: var(--teal-dark); font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 100px; cursor: pointer;
    box-shadow: 0 6px 18px -8px var(--shadow); opacity: 0; animation: fadeIn .5s ease 1.6s forwards;
  }
  .tap-hint.hidden { opacity: 0 !important; pointer-events: none; transition: opacity .4s; }
  @keyframes fadeIn { to { opacity: 1; } }

  /* ── Intro line (UBi voice) ── */
  .intro { font-size: 12.5px; line-height: 1.36; font-weight: 500; color: var(--ink-2); margin: 7px 0 0; }
  .intro b { color: var(--ink); font-weight: 600; }

  /* ── Features (real, Lottie-iconed) ── */
  .feats { margin: 13px 0 2px; display: flex; flex-direction: column; gap: 9px; }
  .feat { display: flex; gap: 11px; align-items: flex-start; }
  .feat-ic {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
    background: var(--teal-tint); display: flex; align-items: center; justify-content: center; margin-top: 1px;
  }
  .feat-ic svg { width: 19px; height: 19px; stroke: var(--teal-dark); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .feat-ic svg .fillteal { fill: var(--teal-dark); stroke: none; }
  .feat-tx { font-size: 13px; line-height: 1.38; color: var(--ink-2); padding-top: 1px; }
  .feat-tx b { color: var(--ink); font-weight: 700; }
  .howhelp { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 12px; }
  /* 2-column: compact pillars (left) + app screenshot (right) — keeps the form above the fold */
  .midrow { display: flex; gap: 13px; align-items: center; margin: 0 0 4px; }
  .pillars-col { flex: 1 1 63%; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
  .pillars-col .feat { gap: 9px; }
  .pillars-col .feat-ic { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; }
  .pillars-col .feat-ic svg { width: 15px; height: 15px; }
  .pillars-col .feat-tx { font-size: 11px; line-height: 1.36; padding-top: 1px; }
  /* numbered gradient chips (approved welcome-email pillar anchors) */
  .feat-num {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px;
    background: linear-gradient(150deg,#085BC5,#1EA9FF 70%);
    color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 12px -6px rgba(14,90,196,0.55);
  }
  .feat-tx .kw { color: var(--teal-dark); }
  .phone-col { flex: 0 0 34%; display: flex; align-items: center; justify-content: center; }
  .phone-col img { width: 100%; max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px -20px var(--shadow), 0 0 0 1px rgba(255,255,255,0.5); }
  .safety { display: flex; gap: 9px; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); margin-top: 14px; }
  .safety svg { flex: 0 0 15px; width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
  .safety b { color: var(--ink); font-weight: 600; }

  /* ── Outcomes — gradient-border proof card (approved welcome-email motif) ── */
  .statcard { margin: 18px 0 0; border-radius: 19px; padding: 1.5px; background: linear-gradient(120deg,#0EBAEB 0%,#C5BCF5 50%,#0EBAEB 100%); }
  .statinner { background: #F5FAFE; border-radius: 17.5px; padding: 14px 12px 13px; }
  .stat-eyebrow { font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5AA8CB; text-align: center; margin: 0 0 10px; }
  .stats { display: flex; gap: 0; }
  .stat { flex: 1; text-align: center; padding: 2px 8px; }
  .stat + .stat { border-left: 1px solid #E2EFFA; }
  .stat .num { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #19C3DB; line-height: 1; }
  .stat:last-child .num { color: #1E90D8; }
  .stat .lbl { font-size: 10.5px; line-height: 1.28; color: var(--ink-2); margin-top: 5px; font-weight: 500; }
  .stat-src { font-size: 10px; color: var(--muted); text-align: center; margin: 10px 0 0; }
  .trust { display: flex; align-items: center; gap: 9px; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); margin-top: 16px; background: var(--teal-tint); padding: 12px 14px; border-radius: 12px; }
  .trust svg { flex: 0 0 15px; width: 15px; height: 15px; stroke: var(--teal-dark); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .trust b { color: var(--ink); font-weight: 600; }

  .divider { height: 1px; background: var(--hairline); margin: 24px 0 18px; }

  /* ── Form (orbit rings behind, approved CTA motif) ── */
  #formZone {
    margin-top: 20px; position: relative;
    background-image: url('/assets/img/orbit.png'); background-position: center 58%; background-repeat: no-repeat; background-size: 430px;
  }
  .form-head { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
  .form-sub { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin: 5px 0 14px; }
  form { display: flex; flex-direction: column; gap: 11px; }
  .row { display: flex; gap: 11px; }
  .field { position: relative; flex: 1; }
  .field input {
    width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
    background: #fff; border: 1.5px solid var(--hairline); border-radius: 13px;
    padding: 14px 16px; outline: none; transition: border-color .18s, box-shadow .18s;
  }
  .field input::placeholder { color: transparent; }
  .field label { position: absolute; left: 15px; top: 13px; font-size: 16px; color: var(--muted); pointer-events: none; transition: all .16s ease; background: #fff; padding: 0 4px; }
  .field input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(41,205,222,0.13); }
  .field input:focus + label, .field input:not(:placeholder-shown) + label { top: -8px; font-size: 12px; font-weight: 600; color: var(--teal-dark); }
  /* The primary-concern select: same box as the inputs; the disabled placeholder
     option keeps the control :invalid until a choice is made, which is what
     floats the label (the select has no placeholder-shown state). */
  .field select {
    width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
    background: #fff; border: 1.5px solid var(--hairline); border-radius: 13px;
    padding: 14px 16px; outline: none; transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .field select:invalid { color: transparent; }
  .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(41,205,222,0.13); }
  .field select:focus + label, .field select:valid + label { top: -8px; font-size: 12px; font-weight: 600; color: var(--teal-dark); }
  .btn {
    margin-top: 8px; width: 100%; font-family: var(--font); font-size: 16px; font-weight: 700;
    color: #042e34; background: linear-gradient(180deg, var(--teal-light), var(--teal));
    border: none; border-radius: 100px; padding: 16px; cursor: pointer;
    box-shadow: 0 14px 30px -12px var(--teal-glow); transition: transform .12s ease, filter .12s;
    display: flex; align-items: center; justify-content: center; gap: 9px;
  }
  .btn:active { transform: scale(.985); filter: brightness(1.03); }
  .btn svg { width: 19px; height: 19px; stroke: #042e34; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  .err { color: #E1465B; font-size: 14px; text-align: center; margin-top: 4px; display: none; }
  .spin { display: none; text-align: center; color: var(--teal-dark); font-weight: 600; font-size: 14px; margin-top: 6px; }
  .privacy { font-size: 11.5px; line-height: 1.45; color: var(--muted); text-align: center; margin-top: 14px; }
  .privacy svg { width: 12px; height: 12px; stroke: var(--muted); fill: none; stroke-width: 1.8; vertical-align: -2px; margin-right: 3px; }
  .footline { height: 3px; border-radius: 2px; margin: 20px -4px 0; background: linear-gradient(90deg,#085BC5 0%,#1EA9FF 50%,#19C3DB 100%); opacity: .85; }
  .foot { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 12px; letter-spacing: .01em; }
  /* desktop comfort: slightly wider card; everything scales via container queries */
  @media (min-width: 760px) { .frame { max-width: 520px; } .page { padding-top: 34px; } }
  .cf { margin-top: 2px; display: flex; justify-content: center; }

  /* success */
  .done { display: none; text-align: center; padding: 18px 4px 8px; }
  .done .check { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-tint); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
  .done .check svg { width: 32px; height: 32px; stroke: var(--teal-dark); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .done h2 { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
  .done p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-bottom: 22px; }
  .done a.store { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; padding: 16px; border-radius: 100px; text-decoration: none; }

  /* entrance */
  .reveal { opacity: 0; transform: translateY(12px); animation: rise .7s cubic-bezier(.16,1,.3,1) forwards; }
  .d1 { animation-delay: .10s; } .d2 { animation-delay: .20s; } .d3 { animation-delay: .30s; } .d4 { animation-delay: .40s; } .d5 { animation-delay: .50s; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }

  /* ── Tablet: roomier card ── */
  @media (min-width: 760px) { .frame { max-width: 680px; } }

  /* ── Desktop: reflow + enlarge for big screens, like a real web layout ── */
  @media (min-width: 1040px) {
    .frame { max-width: 1040px; }
    .page { padding-top: 48px; }

    /* Hero: larger, UBi gets a wider column */
    .herohead { padding: 36px 46px 40px; min-height: 360px; gap: 26px; }
    .herohead-copy { flex: 1 1 54%; }
    .wpill { font-size: 14px; padding: 7px 14px; margin-bottom: 16px; }
    .h1 { font-size: 38px; line-height: 1.08; }
    .hsub { font-size: 17px; margin-top: 14px; }
    .hero-chips { gap: 9px; margin-top: 18px; }
    .hchip { font-size: 13px; padding: 7px 14px; }
    .ubi-slot { flex: 0 0 46%; }
    /* 2026-09-05: desktop canvas spans from the hero's LEFT content edge to the old right edge (slot = right 46% of the hero,
       so the hero's left edge is 117.4% of the slot width to the left). Was width 144% centered on the slot. */
    /* Desktop stop positions */
    .ubi-mark[data-mark="state1"]   { left: 91.22%; top: 163.46%; --ubi-z: -300; }
    .ubi-mark[data-mark="state2"]   { left: 76.27%; top: 157.66%; --ubi-z: 100; }
    .ubi-mark[data-mark="state3"]   { left: 74.61%; top: 163.46%; --ubi-z: 200; }
    .ubi-mark[data-mark="state5"]   { left: 94.24%; top: 52.48%;  --ubi-z: -300; }
    .ubi-mark[data-mark="state6_5"] { left: 74.61%; top: -51.93%; --ubi-z: -200; }
    /* Measured against the last-good build (7af1fb8) at 1440x900: it rests at page (968, 338)
       at depth +100. The old 71%/67%/z:0 sat 37px left, 71px low and 100 units further from
       the camera, which also rendered her ~12% small. */
    .ubi-mark[data-mark="landing"]  { left: 74.61%; top: 48.92%; --ubi-z: 100; }
    /* Canvas = the whole hero row (content edge to content edge, +2% each side) with headroom above
       (-55% of the row height, up to about the page top) and below (to about the form's bottom). Aspect
       is free. The iframe's CSS scale (.ubi-bridge) is unchanged, so UBi renders at the same size; only
       the transparent surface around her grows, and the marks keep her on the page. */
    /* Desktop: the canvas is the SCREEN — content-width (+2% each side) by the full viewport height, so the
       original choreography fractions land on screen-relative spots and can never leave it. Exact box set by
       driver.js from measurement (sizeStageToScreen); these are the pre-measure fallbacks. */
    /* Pre-measure fallback only. driver.js replaces this with the screen-covering box the
       moment it can measure the slot; until then this is exactly the box that ships today,
       so a slow first frame looks like the live build rather than like nothing. */
    .ubi-stage { width: 144%; top: 88%; }

    /* Form: a comfortable centered block, not stretched edge to edge */
    #formZone { max-width: 600px; margin: 30px auto 0; }
    #done { max-width: 600px; margin: 0 auto; }
    .form-head { font-size: 26px; }
    .form-sub { font-size: 15px; margin: 7px 0 18px; }
    form { gap: 14px; }
    .row { gap: 14px; }
    .field input { font-size: 17px; padding: 16px 18px; }
    .field label { font-size: 17px; }
    .btn { font-size: 18px; padding: 18px; }
    .privacy { font-size: 13px; }

    /* How I help — the showcase: pillars in a 2x2 grid beside a BIG phone */
    .divider { margin: 46px 0 30px; }
    .howhelp { font-size: 14px; text-align: center; margin-bottom: 24px; }
    .midrow { gap: 46px; align-items: center; }
    .pillars-col { flex: 1 1 56%; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
    .pillars-col .feat { gap: 13px; }
    .feat-num { flex: 0 0 30px; width: 30px; height: 30px; font-size: 12px; }
    .pillars-col .feat-tx { font-size: 14.5px; line-height: 1.5; }
    .phone-col { flex: 0 0 38%; }
    .phone-col img { max-width: 330px; margin: 0 auto; }

    /* Proof + trust: bigger, centered for readability */
    .statcard { max-width: 720px; margin: 38px auto 0; }
    .statinner { padding: 22px 20px 20px; }
    .stat-eyebrow { font-size: 11px; }
    .stat .num { font-size: 34px; }
    .stat .lbl { font-size: 13px; }
    .stat-src { font-size: 12px; }
    .trust, .safety { font-size: 13.5px; max-width: 760px; margin-left: auto; margin-right: auto; }
    .foot { font-size: 12px; }
  }

  @media (prefers-reduced-motion: reduce) { *, .reveal, .ubi-loader { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }

/* ===== WAITLIST ===== */
/* Waitlist additions, in the enrollment page's tokens. */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot */
.q-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); margin: 6px 0 -2px; }
.seg { display: flex; gap: 8px; }
.seg button, .alt button {
  flex: 1; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1.5px solid var(--hairline); border-radius: 13px; padding: 12px 10px; cursor: pointer;
}
.seg button[aria-pressed="true"], .alt button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-tint); color: var(--ink); }
.alt { display: flex; gap: 8px; }
.alt button { font-size: 13px; padding: 10px 8px; }
.field textarea {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink); background: #fff; resize: vertical;
  border: 1.5px solid var(--hairline); border-radius: 13px; padding: 14px 16px; outline: none; min-height: 96px;
}
.field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(41,205,222,0.13); }
.static-label { position: static !important; display: block; font-size: 12px !important; font-weight: 600; color: var(--teal-dark) !important; margin: 0 0 6px 2px; padding: 0 !important; background: none !important; }
.gi-search { display: flex; gap: 8px; }
.gi-search .field { flex: 1; }
.gi-search .find {
  font-family: var(--font); font-size: 15px; font-weight: 700; color: #042e34; border: none; border-radius: 13px;
  padding: 0 18px; background: linear-gradient(180deg, var(--teal-light), var(--teal)); cursor: pointer;
}
.card-pick {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font-family: var(--font);
  background: #fff; border: 1.5px solid var(--hairline); border-radius: 13px; padding: 12px 14px; cursor: pointer;
}
.card-pick.confirmed { border-color: var(--teal); background: var(--teal-tint); cursor: default; }
.card-pick .who { flex: 1; min-width: 0; }
.card-pick .nm { font-size: 15px; font-weight: 700; color: var(--ink); }
.card-pick .sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.35; }
.card-pick .act { font-size: 13px; font-weight: 700; color: var(--teal-dark); white-space: nowrap; background: none; border: none; cursor: pointer; font-family: var(--font); }
.note { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.consents { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.42; color: var(--ink-2); cursor: pointer; }
.consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--teal-dark); }
.consent a { color: var(--teal-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: #fff;
  border: 1.5px solid var(--hairline); border-radius: 100px; padding: 9px 14px; cursor: pointer;
}
.chips button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-tint); color: var(--ink); }
.field-err { color: #C2334A; font-size: 12.5px; margin: 4px 0 0 4px; }
.btn.secondary { background: #fff; color: var(--ink-2); border: 1.5px solid var(--hairline); box-shadow: none; margin-top: 0; }
.done .routed { background: var(--teal-tint); border-radius: 16px; padding: 16px; margin: 0 0 18px; text-align: left; }
.done .routed b { color: var(--ink); }
.done .share { margin-top: 12px; }
.done .safety-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 18px 0 0; text-align: left; }
.step-head { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 1040px) { #step2 { max-width: 600px; margin: 30px auto 0; } .step-head { font-size: 26px; } }
.mini-page .panel { padding-bottom: 28px; }
.mini-page h1 { font-family: var(--display); font-size: 24px; margin: 18px 0 10px; }
.mini-page p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
/* Phones: UBi's canvas extends past the right edge of the screen (it is centred on her, and she sits
   on the right), which widened the page and let it pan sideways. Clip that empty overflow at the
   page edge; overflow-x: clip, unlike hidden, leaves vertical overflow (her rising above the card) alone. */
.page { overflow-x: clip; }
/* Buttons don't inherit the page font by default; the enrollment page's "tap to hear me" pill
   relied on the browser's default, which differs by engine. */
button { font-family: inherit; }
/* Phone walk: "Not them" on the confirmed-doctor card was a 20px-tall target. */
.card-pick .act { min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; }
/* 320px phones: "tap to hear me" wrapped onto two lines and sat on UBi's feet. */
.tap-hint { white-space: nowrap; }