/* 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; }
/* Step 2's plan picker, from the plan mockups (DRAFT copy; prices approved 2026-10-13). */
  .plans { border: 0; margin: 0; padding: 0; min-width: 0; }
  .plans legend { padding: 0; }
  .plan-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
  .plan { position: relative; display: block; background: #fff; border: 1.5px solid var(--hairline); border-radius: 20px; padding: 18px; box-shadow: 0 14px 34px -26px var(--shadow); cursor: pointer; }
  .plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .plan:has(input:checked) { border-color: var(--teal); background: linear-gradient(180deg,#fff 0%,#F2FCFD 100%); }
  .plan:has(input:focus-visible) { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
  .plan-top { display: flex; align-items: flex-start; gap: 12px; }
  .radio { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(20,40,80,0.55); margin-top: 2px; display: flex; align-items: center; justify-content: center; }
  .plan:has(input:checked) .radio { border-color: var(--teal-dark); background: var(--teal-dark); }
  .plan:has(input:checked) .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
  .plan-name { flex: 1; min-width: 0; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
  .plan-price { text-align: right; white-space: nowrap; }
  .plan-price b { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  .plan-price span { display: block; font-size: 12px; color: #5F6B7A; margin-top: -2px; }
  .plan-incl { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #08708A; background: var(--teal-tint); border-radius: 100px; padding: 4px 10px; }
  .plan-head { display: block; margin-top: 12px; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
  .photo { display: block; margin-top: 12px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #EEF0F3; }
  .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .why { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
  .cap { display: block; margin-top: 6px; font-size: 12px; color: #5F6B7A; }
  .adds { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
  .adds li { position: relative; padding-left: 28px; }
  .adds li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--teal-dark); }
  .adds li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .adds li.group { padding-left: 0; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 13px; font-weight: 700; color: #08708A; }
  .adds li.group::before, .adds li.group::after { display: none; }
  .ben { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
  .ev { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: #4A5568; }
  .src { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #08708A; }
  .src { align-items: flex-start; }
  .src svg { flex: 0 0 12px; margin-top: 2px; width: 12px; height: 12px; stroke: #08708A; fill: none; stroke-width: 2; }
  .scope { display: block; margin-top: 12px; font-size: 12px; color: #5F6B7A; }
  .pick { margin-top: 16px; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 100px; border: 1.5px solid var(--teal-dark); color: #08708A; font-weight: 700; font-size: 15px; }
  .plan:has(input:checked) .pick { background: var(--teal-dark); color: #fff; }
  .unsure { margin: 14px auto 0; display: block; background: none; border: none; font-family: var(--font); font-size: 14px; font-weight: 600; color: #4A5568; text-decoration: underline; min-height: 44px; cursor: pointer; }
  @media (min-width: 1040px) {
    #step2 { max-width: 1160px; }
    .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
    .plan { display: flex; flex-direction: column; padding: 22px; }
    .plan-top { min-height: 58px; }
    .plan-head { min-height: 3.75em; font-size: 20px; }
    .photo { aspect-ratio: 4 / 3; }
    .adds { flex: 1; align-content: start; }
  }

.plan .pick{text-align:center}.plan-price .start{display:block;margin-top:2px;font-size:12px;font-weight:700;color:#08708A}.perk{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#08708A;background:var(--teal-tint);border-radius:100px;padding:6px 12px}

/* Step 2: "Reserve now with $49" is the card's main button (it goes straight to Stripe); picking a
   plan for free is the lighter choice under it, and shows a tick once picked. */
.plan .btn.reserve { margin-top: 16px; }
.reserve-note { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: #4A5568; text-align: center; }
.plan .reserve-note + .pick { margin-top: 12px; }
.plan:has(input:checked) .pick { background: var(--teal-tint); color: #08708A; }
.plan:has(input:checked) .pick::before { content: "\2713\00a0"; }
.plan-note:empty { display: none; }
.plan-note { margin: 10px 0 0; text-align: center; font-size: 13.5px; }
.profile-part { margin-top: 30px; }
@media (min-width: 1040px) { .profile-part { max-width: 600px; margin: 40px auto 0; } }
/* Stacked buttons on the confirm and manage pages need air between them. */
#offer .btn + .btn, #reserveButtons .btn + .btn { margin-top: 10px; }
/* Plan cards: compact, with hand-tuned motion (Alex 2026-10-13: the supporting text only once a card is
   selected, and "just do your best to make it really high quality and smooth"). One timing system:
   what opens takes a long, soft landing; what closes is quicker; content moves a beat after the box
   it sits in; only small things (the radio dot) get a spring with a little overshoot. */
:root {
  --ease-settle: cubic-bezier(.22, .9, .24, 1);
  --ease-quick: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* The card: its tint and its lifted shadow live on layers that fade, because a gradient or a shadow
   can't be eased directly without repainting the whole card on every frame. */
.plan { isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s var(--ease-quick), transform .5s var(--ease-settle); }
.plan::before, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease-settle); }
.plan::before { z-index: -1; background: linear-gradient(180deg, #fff 0%, #F2FCFD 100%); }
.plan::after { z-index: -2; box-shadow: 0 1px 2px rgba(8, 112, 138, .06), 0 10px 20px -12px rgba(8, 112, 138, .24),
  0 30px 52px -30px rgba(8, 112, 138, .38); }
.plan:has(input:checked) { background: #fff; transform: translateY(-2px); }
.plan:has(input:checked)::before, .plan:has(input:checked)::after { opacity: 1; }
.plan:active { transform: scale(.992); transition-duration: .3s, .12s; }
@media (hover: hover) {
  .plan:not(:has(input:checked)):hover { transform: translateY(-2px); }
  .plan:not(:has(input:checked)):hover::after { opacity: .5; }
}
.photo img { transition: transform 1.4s var(--ease-settle); }
.plan:has(input:checked) .photo img { transform: scale(1.035); }

/* The radio: the dot springs in rather than appearing. */
.radio { transition: border-color .25s var(--ease-quick), background-color .25s var(--ease-quick); }
.radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0);
  transition: transform .4s var(--ease-spring); }
.plan:has(input:checked) .radio::after { transform: scale(1); }

/* "Saved to your spot", with a tick that draws itself in. */
.plan-name .saved { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-settle); }
.plan-name .saved-in { min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 5px; padding-top: 4px;
  font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: #08708A;
  opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .45s var(--ease-settle); }
.plan:has(input:checked) .saved { grid-template-rows: 1fr; }
.plan:has(input:checked) .saved-in { opacity: 1; transform: none; transition-delay: .06s; }
.tick { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.tick path { stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .5s var(--ease-settle) .16s; }
.plan:has(input:checked) .tick path { stroke-dashoffset: 0; }

/* Folds: what opens on the selected card (the supporting lines, sources, full terms) and what closes
   (the short refund line, the details cue). Grid rows ease from 0 to the content's own height. */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-quick); }
.fold-in { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .14s ease, transform .32s var(--ease-quick); }
.plan:has(input:checked) .fold:not(.shut) { grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease-settle); }
.plan:has(input:checked) .fold:not(.shut) > .fold-in { opacity: 1; transform: none;
  transition: opacity .4s ease .1s, transform .55s var(--ease-settle) .06s; }
.plan:has(input:checked) .adds li:nth-child(2) .fold > .fold-in { transition-delay: .15s, .11s; }
.plan:has(input:checked) .adds li:nth-child(3) .fold > .fold-in { transition-delay: .2s, .16s; }
.plan:has(input:checked) .adds li:nth-child(4) .fold > .fold-in { transition-delay: .25s, .21s; }
.fold.shut { grid-template-rows: 1fr; }
.fold.shut > .fold-in { opacity: 1; transform: none; }
.plan:has(input:checked) .fold.shut { grid-template-rows: 0fr; }
.plan:has(input:checked) .fold.shut > .fold-in { opacity: 0; transform: translateY(-4px); }

.plan-incl { background: none; padding: 0; border-radius: 0; font-size: 13px; }
.reserve-short { display: block; margin-top: 8px; font-size: 13px; color: #4A5568; text-align: center; }
.plan .more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; min-height: 32px;
  font-size: 13.5px; font-weight: 700; color: #08708A; }
.plan .more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); }

/* Buttons press in, lift on hover where there is one, and show a small spinner while Stripe opens. */
.btn { transition: transform .18s var(--ease-quick), box-shadow .35s var(--ease-settle), filter .2s ease; }
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px var(--teal-glow); } }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(4, 46, 52, .22);
  border-top-color: #042e34; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#planContinue { margin-top: 12px; }
@media (min-width: 1040px) { .plan-grid { align-items: start; } }
@media (prefers-reduced-motion: reduce) {
  .plan::before, .plan::after, .tick path { transition: none !important; }
  .btn[aria-busy="true"]::before { animation-duration: 2s; }
}
/* Step 2 opens on the proof they're on the list, before any plan or payment (Alex 2026-10-14). */
.joined { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #F2FCFD 0%, #fff 100%); border: 1.5px solid rgba(12, 147, 176, .22);
  animation: joined-in .6s var(--ease-settle) both; }
.joined-mark { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-dark);
  display: flex; align-items: center; justify-content: center; }
.joined-mark svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.joined-mark path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: joined-tick .55s var(--ease-settle) .25s forwards; }
.joined-text { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.joined-text b { font-family: var(--display); font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.start-over { align-self: flex-start; margin-top: 4px; padding: 6px 0; min-height: 32px; background: none; border: 0;
  font-size: 13px; font-weight: 600; color: #08708A; text-decoration: underline; cursor: pointer; }
@keyframes joined-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes joined-tick { to { stroke-dashoffset: 0; } }
@media (min-width: 1040px) { .joined { max-width: 760px; margin: 0 auto 26px; } }

/* Desktop: wider screens give the plan cards, and their photos, the room they need (Alex 2026-10-14:
   "why are the images so small"). */
@media (min-width: 1360px) {
  .frame { max-width: 1240px; }
  /* UBi's size and landing follow her slot's width, tuned at 436px (the 1040px layout); keep it, so the
     extra width goes to the copy and the cards and she never grows into the banner above. */
  .ubi-slot { flex: 0 0 436px; }
}
@media (min-width: 1680px) { .frame { max-width: 1380px; } }
/* The waitlist page uses more of a wide screen (Alex 2026-10-15); UBi's slot stays 436px. */
@media (min-width: 1360px) { .page:has(.hero-card) .frame { max-width: min(1600px, 94vw); } }

/* The plans come first, under the hero, one set for everyone (Alex 2026-10-14). */
.plans-zone { margin-top: 26px; }
.plans-zone fieldset.plans { scroll-margin-top: 14px; }
/* Reserving comes once they're on the list: until then the kit cards say so instead of showing the button. */
.reserve-later { display: block; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--teal-tint);
  color: #08708A; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; }
body:not(.on-list) .plans-zone button.reserve { display: none; }
body.on-list .reserve-later { display: none; }
/* ── The hero in the business card's colours and three tiers (Sales Deck 41 / card v18; Alex 2026-10-14). Ink-blue field, the
   deck cyan, his headline on the cyan bar, a two-tone line with the speed promise, one button; the three cards as compact card
   fronts (words left under a cyan dash, the real picture right with the card's cyan arc); the plans right under them.
   NO overflow:hidden on any ancestor of #ubiSlot. ── */
.topbanner { font-size: 15.5px; line-height: 1.38; padding: 11px 18px; font-weight: 600; color: var(--ink); }
.topbanner .ub { color: #0C93B0; }
.hero-card { --cyan: #15F7FD; --soft: #B0DFF8; position: relative; margin: 0 -17px; padding: 14px 17px 22px; color: #fff;
  background: radial-gradient(ellipse 130% 56% at 26% 0%, #00638F 0%, #00415F 42%, rgba(0,33,47,0) 100%), #00212F; }
.hero-card .brand { margin: 0 0 2px 1px; }
.hero-card .brand-img { height: 24px; border-radius: 0; box-shadow: none; }
/* Phone: the headline and the button beside UBi (her slot the 42% column her flight was tuned for); the two-tone line full
   width under that row. */
.hero-card .herohead { display: grid; grid-template-columns: minmax(0, 1fr) 42%; grid-template-areas: "h1 slot" "cta slot" "offer offer" "sub sub";
  gap: 0 6px; margin: 0; padding: 0; min-height: 0; background: transparent; align-items: start; justify-items: start; }
.hero-card .h1 { grid-area: h1; position: relative; margin-top: 6px; padding: 0 4px 0 14px; font-size: clamp(21px, 6.4cqw, 30px);
  line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.hero-card .h1::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .08em; width: 4px; border-radius: 2px; background: var(--cyan); }
.hero-card .h1 .h1-b { color: var(--cyan); }
.hero-card .keep { white-space: nowrap; }
.btn.hero-cta { grid-area: cta; align-self: start; justify-self: start; width: auto; margin: 18px 0 0 14px; padding: 13px clamp(18px, 6cqw, 26px);
  font-size: 16px; white-space: nowrap; text-decoration: none; color: #03273A; background: var(--cyan); box-shadow: 0 12px 28px -14px rgba(21,247,253,.8); }
/* What the offer is (Alex 2026-10-15: "its not obvious what the offering is here at all"), then the card's two-tone promise. */
.hoffer { grid-area: offer; margin: 28px 0 0 14px; font-family: var(--display); font-size: 19px; line-height: 1.34; font-weight: 600; color: #fff; text-wrap: pretty; }
.hsub2 { grid-area: sub; margin: 14px 0 0 14px; font-family: var(--display); font-size: 2.88cqw; line-height: 1.35; font-weight: 500; color: var(--soft); white-space: nowrap; }
.hsub2 b { font-weight: 700; color: var(--cyan); }
/* UBi's slot is the OLD header's box, measured on 1c9c0c1: 42% wide, 198px tall, its top 147px down the page. Her canvas, camera
   and whole entrance are computed from this box (driver.js sizeStageToScreen), so the same box = the same flight and rest. */
.hero-card .ubi-slot { grid-area: slot; justify-self: stretch; align-self: start; width: auto; height: clamp(170px, 59.5cqw, 230px); min-height: 0; margin: 28px 0 0; }
/* The tap pill sits just under her feet, never on them. */
.hero-card .tap-hint { right: auto; left: 50%; transform: translateX(-50%); bottom: -17px; font-size: 12.5px; padding: 6px 11px; color: var(--cyan);
  background: rgba(0,33,47,.6); border: 1px solid rgba(21,247,253,.45); box-shadow: none; }
.hero-card .ubi-loader .tagline { color: var(--soft); white-space: normal; text-align: center; font-size: 12px; }
.hero-card .ubi-loader .track { background: rgba(255,255,255,.14); }
.hero-card .ubi-loader .fill { background: var(--cyan); }
.hero-card .ubi-loader .pct { color: var(--soft); }
/* The three cards: [words] [picture] on every screen. On a phone a swipe row of wide cards, one at a time, that moves on by
   itself (Alex 2026-10-16: "it should probably be wide not tall cards and it should auto scroll through", waitlist.js); three
   across on desktop. */
.proofs { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; align-items: stretch;
  margin: 22px -17px 0; padding: 0 17px 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 17px; scrollbar-width: none; }
.proofs::-webkit-scrollbar { display: none; }
.proof { position: relative; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) 38%; overflow: hidden; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, #06405C 0%, #022C40 100%); border: 1px solid rgba(21,247,253,.18); }
.proof .ptx { display: block; padding: 16px 10px 18px 16px; }
.proof .dash { display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--cyan); margin-bottom: 11px; }
.proof .ptx b { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.22; letter-spacing: -.005em; text-wrap: balance; }
.proof .pd { display: block; margin-top: 7px; font-size: 15.5px; line-height: 1.45; color: var(--soft); }
.proof .psrc { display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(21,247,253,.45); font-size: 13.5px; line-height: 1.3; color: var(--cyan); font-weight: 700; }
/* Phone: the guideline pill rides on the foot of the picture, so the card stays wide rather than tall. */
@media (max-width: 1039px) {
  .proof .psrc { position: absolute; z-index: 2; right: 8px; bottom: 10px; max-width: calc(38% - 16px); margin: 0; padding: 4px 9px; border-radius: 12px;
    font-size: 12px; line-height: 1.25; text-align: center; background: rgba(2,44,64,.88); }
}
/* The picture a column beside the words, its left edge the card's arc (drawn cyan). */
.proof .pimg { position: relative; display: block; min-height: 100%; }
.proof .pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: ellipse(100% 130% at 100% 50%); }
.proof .pimg::after { content: ""; position: absolute; left: 0; top: -80%; width: 200%; height: 260%; border-radius: 50%; border: 2px solid var(--cyan); pointer-events: none; }
/* The whole report, zoomed out to fit the panel on the card's blue (Alex 2026-10-15). */
.proof .pimg.brief img { object-fit: contain; object-position: 50% 50%; padding: 6px 4px 6px 10px;
  background: radial-gradient(circle at 55% 45%, #2A86AE 0%, #0D5676 55%, #06405C 100%); }
/* The plans right under the field. */
.plans-zone { margin-top: 22px; }
.plans .perk { margin-top: 12px; }
.plans .plan-grid { margin-top: 12px; }
.plans .plans-intro { margin: 8px 0 0; max-width: 820px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
/* The logos: their own band between the hero and the plans, set apart from both (Alex 2026-10-15: "it used to stand out better"). */
.logos { margin: 28px 0 8px; padding: 16px 12px 18px; text-align: center; border-radius: 22px; background: linear-gradient(180deg, #F3F7FD 0%, #EAF1FB 100%);
  border: 1px solid var(--hairline); }
.logos .from-label { display: block; font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 12px; }
.logo-row img { display: block; width: auto; height: 26px; }
.logo-row .lg-mgh { height: 36px; }
.lg-mgh-lockup { display: inline-flex; align-items: center; gap: 9px; }
.lg-mgh-lockup > span { font-family: Georgia, 'Times New Roman', serif; font-size: 10.5px; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; color: #0B5C8F; font-weight: 600; text-align: left; }
.logo-row .lg-uth { height: 30px; }
.plans-zone { margin-top: 34px; }
/* The partner-GI note at the top of the form. */
.form-note { margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--teal-tint); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 1040px) {
  .topbanner { font-size: 18px; padding: 14px 18px; }
  .hero-card { padding: 22px 46px 22px; }
  .hero-card .brand-img { height: 30px; }
  .hero-card .herohead { grid-template-columns: minmax(0, 1fr) 436px; grid-template-areas: "h1 slot" "offer slot" "sub slot" "cta slot"; gap: 0 30px; }
  .hero-card .keep { white-space: nowrap; }
  .hero-card .h1 { margin-top: 22px; padding-left: 24px; font-size: 56px; line-height: 1.06; }
  .hero-card .h1::before { width: 5px; }
  .hoffer { margin: 22px 0 0 24px; font-size: 26px; line-height: 1.3; }
  .hsub2 { margin: 16px 0 0 24px; font-size: 21px; white-space: nowrap; }
  .btn.hero-cta { margin: 26px 0 0 24px; padding: 17px 36px; font-size: 19px; }
  .hero-card .ubi-slot { height: 284px; min-height: 0; margin-top: 42px; }   /* old desktop box: 436 x 284, top 199 */
  .hero-card .tap-hint { bottom: -30px; }
  .proofs { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; align-items: stretch; gap: 18px; margin: 34px 0 0; padding: 0; overflow: visible; }
  /* Desktop: [text] [image], the picture a wide column beside the words, using the width (Alex 2026-10-15). */
  .proof { grid-template-columns: minmax(0, 1fr) 46%; }
  .proof .pimg.brief img { padding: 8px 6px 8px 12px; }
  .proof .ptx { padding: 18px 12px 20px 20px; }
  .proof .ptx b { font-size: 22px; }
  .proof .psrc { font-size: 13px; white-space: nowrap; }
  .proof .pd { font-size: 17px; }
  .plans-zone { margin-top: 40px; }
  .logos { margin: 30px 0 8px; padding: 18px 20px 20px; }
  .logos .from-label { font-size: 13px; }
  .logo-row { flex-wrap: nowrap; gap: 0 52px; margin-top: 14px; }
  .logo-row img { height: 36px; } .logo-row .lg-uth { height: 40px; }
  .logo-row .lg-mgh { height: 48px; } .lg-mgh-lockup > span { font-size: 12.5px; }
  .form-note { font-size: 15px; }
}
/* Plan benefits: an icon for each instead of the plain tick, and a bold lead-in. */
.adds li:has(.bi) { padding-left: 34px; }
.adds li:has(.bi)::before, .adds li:has(.bi)::after { display: none; }
.bi { position: absolute; left: 0; top: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-dark);
  display: grid; place-items: center; }
.bi svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.1; }
.ben:has(b) { font-weight: 500; }
.ben b { font-weight: 700; }
/* The plan, asked in the sign-up form. */
.plan-pick button { min-height: 44px; }
/* After joining: one tap about their condition. */
.detail-sub { margin: 2px 0 6px; }
.q-sub { font-size: 15px; font-weight: 600; color: var(--ink); margin: 2px 0 8px; }
.plan-chosen { margin: 2px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--teal-tint); color: #08708A;
  font-size: 14px; font-weight: 600; line-height: 1.4; }
.next-step { margin: 0 0 26px; padding: 18px; border-radius: 18px; background: #fff; border: 1.5px solid var(--hairline);
  box-shadow: 0 14px 34px -26px var(--shadow); text-align: center; animation: joined-in .6s var(--ease-settle) .15s both; }
.next-step p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.next-step .reserve-short { margin-top: 8px; }
@media (min-width: 1040px) { .next-step { max-width: 760px; margin: 0 auto 30px; } }

/* The reservation celebration (reserved.html): UBi in a soft glow, spinning and dancing, with confetti
   over the whole view. The stage eases in; she fades up once her scene is live. */
.celebrate { position: relative; width: min(100%, 340px); aspect-ratio: 1 / 1; margin: 4px auto 0;
  opacity: 0; transform: scale(.94); transition: opacity .6s var(--ease-settle), transform .9s var(--ease-settle); }
.celebrate.in { opacity: 1; transform: none; }
.celebrate::before { content: ""; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 205, 222, .30) 0%, rgba(198, 189, 246, .24) 45%, rgba(255, 255, 255, 0) 72%);
  filter: blur(6px); }
.celebrate-ubi { position: absolute; left: 50%; top: 50%; border: 0; background: transparent; pointer-events: none;
  opacity: 0; transition: opacity .6s ease .1s; }
.celebrate.live .celebrate-ubi { opacity: 1; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100; }
.celebrating #title, .celebrating #body, .celebrating #foot { text-align: center; }

/* The plan cards larger on desktop, now that the page is wider and the cards needn't fit the first screen (Alex 2026-10-15). */
@media (min-width: 1360px) {
  .plans .step-head { font-size: 32px; }
  .plans .plans-intro { font-size: 17px; }
  .plans .perk { font-size: 15px; padding: 7px 14px; }
  .plan-name { font-size: 25px; }
  .plan-price b { font-size: 32px; }
  .plan-incl { font-size: 15px; line-height: 1.4; }
  .plan-head { font-size: 23px; }
  .ben { font-size: 17px; }
  .ev { font-size: 15px; }
  .cap { font-size: 14px; }
  .reserve-later { font-size: 15.5px; }
}

/* Does their GI already work with UBi (Alex 2026-10-15): at the top of the sign-up, with why naming them matters. */
.banner-check { color: #0C93B0; font-weight: 700; white-space: nowrap; }
.gi-check { margin: 0 0 18px; padding: 16px; border-radius: 16px; background: var(--teal-tint); border: 1.5px solid rgba(41,205,222,.28); }
.gc-head { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.gc-sub { margin: 6px 0 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.gi-check .gi-search .field input { background: #fff; }
.gi-check .gi-search .field label, .gi-search .field label { background: #fff; white-space: nowrap; max-width: calc(100% - 22px); overflow: hidden; text-overflow: ellipsis; }
.gi-check #chkResults { margin-top: 10px; }
.gi-check #chkNote { margin-top: 8px; }
.gc-result { padding: 14px; border-radius: 13px; background: #fff; border: 1.5px solid var(--hairline); }
.gc-result.yes { border-color: var(--teal); }
.gc-result b { display: block; font-size: 16px; color: var(--ink); }
.gc-result p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.gc-result .btn { margin-top: 12px; text-decoration: none; }
.gi-why { margin: 2px 0 8px; font-size: 14px; }
@media (min-width: 1040px) { .gi-check { padding: 20px 22px; } .gc-head { font-size: 21px; } .gc-sub { font-size: 16px; } }

/* UBi in our own three.js renderer (Alex 2026-10-15): her frame is placed over her hero spot by ubi-host.js, and once the
   hero scrolls away she follows the reader, small, in the bottom-right corner, out of the way. Tapping her plays her pitch. */
.ubi3-dock { position: absolute; z-index: 60; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ubi3-dock:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 16px; }
/* Her frame reaches past the box on every side (ubi-host.js sizes it), so a bigger move is drawn rather than cut. */
.ubi3-frame { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }
/* In the corner she sits on a small tile of the hero's blue, so she reads as floating above the page, not on its words. The tile
   fades in once she has glided down, so no hero-sized panel sweeps across the screen. */
.ubi3-dock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  background: radial-gradient(ellipse 120% 85% at 50% 0%, #00638F 0%, #00415F 55%, #00212F 100%);
  box-shadow: 0 8px 22px rgba(0,33,47,.3), inset 0 0 0 1px rgba(21,247,253,.28); }
.ubi3-dock.docked { position: fixed; left: auto; top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  width: 82px; height: 104px; z-index: 90; border-radius: 20px; transition: opacity .2s ease; }
.ubi3-dock.docked::before { opacity: 1; transition: opacity .3s ease .35s; }
/* While the reader types she steps aside (on a phone the keyboard would otherwise lift her over the field). */
.ubi3-dock.docked.away { opacity: 0; pointer-events: none; }
/* Desktop: larger in the corner (Alex 2026-10-15: "she is getting too small on the bottom right at least on desktop"). */
@media (min-width: 1040px) { .ubi3-dock.docked { right: 24px; bottom: 24px; width: 168px; height: 210px; border-radius: 28px; } }
/* Desktop, beside the content: her hero size in the free space next to what is in view (ubi-host.js places her). */
.ubi3-dock.lane { position: fixed; z-index: 90; }