/* ============================================================
   V3 onb hero — FINAL clean rules. Reset all the conflicting
   prior overrides for .v3-onb-hero with concrete per-step rules.
   ============================================================ */
/* Reset base hero to none of: absolute positioning, bottom offset,
   inherited radial-gradient, padding-top of 78px. */
.v3-onb-hero{
  position:relative !important;
  top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
  margin-top:0 !important;
  padding:0 22px 14px !important;
  background:none !important;
  pointer-events:auto !important;
}

/* === Step 1: hero overlays the bottom of a top-half photo === */
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  margin-top:-160px !important;
  padding:0 22px 16px !important;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff !important;font-size:28px;line-height:1.05;font-weight:600;
  text-shadow:0 2px 14px rgba(0,0,0,.65), 0 0 26px rgba(0,0,0,.4) !important;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#f3c8a5 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  -webkit-text-fill-color:#f3c8a5 !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35) !important;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.5) !important;
  font-size:14px;line-height:1.4;margin-top:6px;
}

/* === Step 3 === */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  padding:24px 22px 18px !important;
  background:linear-gradient(180deg,
    rgba(253,250,242,.95) 35%,
    #fdfaf2 100%) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;font-weight:600;
  text-shadow:0 1px 8px rgba(255,253,247,.55) !important;
  line-height:1.1;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  -webkit-text-fill-color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,253,247,.6) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#3c2516 !important;text-shadow:none !important;
  font-size:13px !important;margin-top:6px;
}

/* ============================================================
   V3 onb card — darken frosted glass for better text contrast.
   Was too light/tan; white text was washing out. Switch to a
   darker neutral with stronger backdrop blur.
   ============================================================ */
.v3-onb-card{
  background:linear-gradient(180deg,
    rgba(48,38,30,.62) 0%,
    rgba(48,38,30,.75) 100%) !important;
  backdrop-filter:blur(26px) saturate(1.1) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.1) !important;
  border-top:1px solid rgba(255,255,255,.10);
}
.v3-onb-card .v3-onb-label{
  color:#fff !important;
  font-weight:500;font-size:13.5px;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* Inactive chips: hollow with white border outline (matches ref) */
.v3-onb-type{
  background:rgba(255,255,255,.10) !important;
  border:1.5px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
}
.v3-onb-type:hover{background:rgba(255,255,255,.20) !important}
.v3-onb-type.on{
  background:#dcb195 !important;
  border-color:#dcb195 !important;
  color:#1a1612 !important;
}
.v3-onb-type .ico svg, .v3-onb-type .lbl{
  text-shadow:0 1px 4px rgba(0,0,0,.25);
}
.v3-onb-type.on .ico svg, .v3-onb-type.on .lbl{text-shadow:none}

.v3-onb-gender{
  background:rgba(255,255,255,.10) !important;
  border:1.5px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
}
.v3-onb-gender:hover{background:rgba(255,255,255,.20) !important}
.v3-onb-gender.on{
  background:#dcb195 !important;
  border-color:#dcb195 !important;
  color:#1a1612 !important;
}

/* Inputs: keep frosted but tinted slightly darker */
.v3-onb-card .v3-onb-input{
  background:rgba(255,255,255,.14) !important;
  border:1.5px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
}
.v3-onb-card .v3-onb-input::placeholder{color:rgba(255,255,255,.62) !important}
.v3-onb-card .v3-onb-input:focus{
  background:rgba(255,255,255,.25) !important;
  border-color:#fff !important;
}
.v3-onb-card .v3-onb-input-row .ico{color:rgba(255,255,255,.75) !important}

/* ============================================================
   V3 onb step 2 (presence) — pure white airy bg, scrollable
   grid that holds all 47 portraits with the NEXT button pinned
   below the grid (not floating).
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step2{
  background:#ffffff !important;
  background-image:none !important;
  filter:none !important;
  height:100vh;height:100dvh;bottom:0;
}
.v3-onb-bg.is-step2::before,
.v3-onb-bg.is-step2::after{display:none !important}
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage{padding-top:0 !important}

.v3-onb-presence{
  background:#ffffff;
  padding-top:62px;
}
.v3-onb-presence h1{color:#1a1612;font-weight:700}
.v3-onb-presence h1 i{
  color:#a87555 !important;
  background:none !important;
  -webkit-text-fill-color:#a87555 !important;
}
.v3-onb-presence p{color:rgba(26,22,18,.62)}

/* Grid: keep 3 columns; allow grid + below content to scroll naturally. */
.v3-onb-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:0 14px;margin-top:18px;
}
.v3-onb-portrait{
  aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:2px solid transparent;background:#f5f0e6;
  box-shadow:0 2px 10px rgba(40,30,20,.06);
  cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;
}
.v3-onb-portrait img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:center 22%;
}
.v3-onb-portrait:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,30,20,.16)}
.v3-onb-portrait.on{
  border-color:#a87555;
  box-shadow:0 0 0 2px rgba(168,117,85,.30), 0 12px 24px rgba(168,117,85,.20);
}

.v3-onb-presence-foot{
  margin-top:18px;padding:0 22px;
  color:rgba(26,22,18,.58);font-size:12px;line-height:1.6;
}
.v3-onb-presence-foot svg{color:#a87555;margin:0 auto 4px;display:block}

/* NEXT button — flow inline (NOT fixed), so user scrolls past grid */
.v3-onb-presence + div .v3-onb-next,
.v3-onb-presence .v3-onb-next,
.v3-onb-presence + .v3-onb-next{
  margin:16px 18px 28px !important;
}

/* ============================================================
   V3 fullscreen views — allow content to scroll past viewport.
   Earlier `view-host{overflow:hidden}` + `height:100vh` clipped
   the 47-portrait presence grid. Restore natural body scroll.
   ============================================================ */
body:not(.in-app) .view-host{
  height:auto !important;
  min-height:100vh;min-height:100dvh;
  overflow:visible !important;
}
body:not(.in-app) .view{overflow:visible}
body:not(.in-app) .app-shell{min-height:100vh;min-height:100dvh;height:auto}

/* ============================================================
   V3 presence picker — pagination (9/page × 6 pages).
   Grid is fixed-size (3×3) so the whole page fits in one viewport
   with no scroll; user navigates via arrows / dots / swipe.
   ============================================================ */
.v3-presence-pager{
  position:relative;
  padding:0 14px;margin-top:18px;
  overflow:hidden;
}
.v3-presence-pager .v3-onb-grid{
  /* Override the page-wide grid styling so it sits inside the pager
     without extra padding. */
  padding:0 !important;margin-top:0 !important;
  min-height:330px;
}
@media (min-width:420px){
  .v3-presence-pager .v3-onb-grid{min-height:360px}
}

/* Nav row: prev arrow | dots | next arrow */
.v3-presence-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 14px 4px;
}
.v3-presence-arrow{
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(168,117,85,.25);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#a87555;
  box-shadow:0 2px 10px rgba(40,30,20,.08);
  transition:opacity .15s,transform .15s,background .15s,border-color .15s;
}
.v3-presence-arrow:hover{background:#fdfaf2;border-color:#a87555}
.v3-presence-arrow:active{transform:scale(.94)}
.v3-presence-arrow[disabled]{opacity:.30;cursor:not-allowed;pointer-events:none}
.v3-presence-arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

.v3-presence-dots{
  display:flex;align-items:center;gap:8px;
}
.v3-page-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(26,22,18,.18);
  border:none;cursor:pointer;padding:0;
  transition:background .18s,transform .18s,width .18s;
}
.v3-page-dot:hover{background:rgba(168,117,85,.55)}
.v3-page-dot.on{
  background:#a87555;
  width:24px;border-radius:4px;
}

/* Page info text */
.v3-onb-presence-foot{
  margin-top:6px !important;
  font-size:11.5px;letter-spacing:.06em;
  color:rgba(26,22,18,.55);text-align:center;
  text-transform:uppercase;font-weight:500;
}
.v3-onb-presence-foot svg{display:none !important}

/* ============================================================
   V3 presence picker — warmer cream bg to match splash/step1.
   Was pure white; user wanted the warm sepia tone instead.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step2{
  background:#fdfaf2 !important;
  background-image:none !important;
}
.v3-onb-presence{background:#fdfaf2 !important}
.v3-onb-portrait{background:#f3e8d4 !important}
.v3-presence-arrow{
  background:rgba(255,255,255,.85);
  border-color:rgba(168,117,85,.30);
}

/* ============================================================
   V3 onb step 3 — fix input contrast (was inheriting the dark-
   frost rules from step 1) + collapse trailing whitespace below
   the NEXT button.
   ============================================================ */

/* Step 3 birth/account panels are SOLID WHITE — inputs need DARK
   text + dark placeholder + dark icons. The earlier
   .v3-onb-card .v3-onb-input rule (white text on dark frost) was
   bleeding through. Be explicit. */
.v3-onb-birth-block,
.v3-onb-account-block{
  background:#ffffff !important;
  box-shadow:0 6px 24px rgba(60,40,20,.08);
}
.v3-onb-birth-block .v3-onb-input,
.v3-onb-account-block .v3-onb-input{
  background:rgba(243,232,212,.40) !important;
  border:1.5px solid rgba(168,117,85,.20) !important;
  color:#1a1612 !important;
}
.v3-onb-birth-block .v3-onb-input::placeholder,
.v3-onb-account-block .v3-onb-input::placeholder{
  color:rgba(26,22,18,.50) !important;
  opacity:1 !important;
}
.v3-onb-birth-block .v3-onb-input:focus,
.v3-onb-account-block .v3-onb-input:focus{
  background:#fff !important;border-color:#a87555 !important;
}
.v3-onb-birth-block .v3-onb-input-row .ico svg,
.v3-onb-account-block .v3-onb-input-row .ico svg{color:#a87555 !important}
.v3-onb-birth-block .v3-onb-input-row .ico,
.v3-onb-account-block .v3-onb-input-row .ico{color:#a87555 !important}
/* Country-code chip on phone row */
.v3-onb-card .v3-onb-cc{
  background:rgba(243,232,212,.55) !important;
  border:1.5px solid rgba(168,117,85,.20) !important;
}
.v3-onb-card .v3-onb-cc svg{color:#a87555 !important}
/* OAuth buttons */
.v3-onb-card .v3-onb-oauth{
  background:#fff !important;color:#1a1612 !important;
  border:1.5px solid rgba(26,22,18,.10) !important;
}
.v3-onb-card .v3-onb-oauth:hover{border-color:#a87555 !important}

/* Step 3: SOLID cream card wrapping the white panels (not dark frost) */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 18px 16px !important;
  border-top:none !important;
  border-radius:0 !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card > .v3-onb-next{
  margin-top:16px !important;
  margin-bottom:24px !important;
}
/* Privacy badge text + icon dark on cream for step 3 */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  color:rgba(26,22,18,.78) !important;
  text-shadow:none !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy svg{
  color:#a87555 !important;
}

/* Collapse trailing whitespace — view container shouldn't grow past
   content on step 3. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-bottom:env(safe-area-inset-bottom,0);
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage::after{
  /* fill the gap below the card with the same cream so there's no
     visible empty band even if the document height is taller than
     content. */
  content:"";display:block;
  height:env(safe-area-inset-bottom,0);
  background:#fdfaf2;
}
/* Ensure the page bg under step 3 is cream end-to-end */
#view-onb-v3:has(.v3-onb-bg.is-step3),
.v3-onb:has(.is-step3){background:#fdfaf2}

/* ============================================================
   Step 3 — collapse the empty cream band that appeared below NEXT
   when content height < viewport height. Allow the .v3-onb to
   shrink to content; the cream body bg already extends behind.
   ============================================================ */
#view-onb-v3:has(.v3-onb-bg.is-step3) .v3-onb{
  min-height:0 !important;
}
/* Fallback (no :has support): scope by stage child containing step3 */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage > div{
  padding-bottom:18px;
}
/* Body bg stays cream end-to-end so any leftover gap below the SPA
   view doesn't read as a different color. */
body{background:#fdfaf2}

/* ============================================================
   V3 step 3 — full split layout matching ref #41.
   Photo fills the WHOLE screen (positioned right). Cream gradient
   from left lets the headline read. Form panels become FROSTED
   GLASS so the photo continues to glow through behind them.
   ============================================================ */

/* Photo bg fills the whole page — couple shifted to the right
   side of the frame so the left ~40% is free for the headline. */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:100vh;height:100dvh;
  bottom:0 !important;
  background-position:78% top !important;
  background-size:cover !important;
  background-color:#faf6ed !important;
}
.v3-onb-bg.is-step3::after{
  content:"";position:absolute;inset:0;
  /* Cream-white wash that's near-opaque on the LEFT and fades to
     transparent on the right where the couple should remain
     visible. Plus a soft top + bottom fade to keep depth. */
  background:
    linear-gradient(to right,
      rgba(255,253,247,.96) 0%,
      rgba(255,253,247,.88) 30%,
      rgba(255,253,247,.40) 58%,
      rgba(255,253,247,.10) 78%,
      rgba(255,253,247,0)   100%),
    linear-gradient(to bottom,
      rgba(255,253,247,.20) 0%,
      rgba(255,253,247,0)   25%,
      rgba(255,253,247,0)   75%,
      rgba(255,253,247,.50) 100%);
  pointer-events:none;
}

/* Stage has no top padding — headline now SITS OVER the photo as a
   left-aligned overlay, not below it. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{padding-top:0 !important}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  padding:62px 22px 18px !important;
  background:none !important;
  max-width:60%;  /* keep text on the left half */
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;
  text-shadow:0 1px 6px rgba(255,253,247,.7) !important;
  font-weight:600;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  -webkit-text-fill-color:#8b5e3c !important;
  text-shadow:0 1px 6px rgba(255,253,247,.6) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#1a1612 !important;
  text-shadow:0 1px 6px rgba(255,253,247,.6) !important;
  font-size:13px !important;
  margin-top:8px;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  color:rgba(26,22,18,.78) !important;
  text-shadow:0 1px 4px rgba(255,253,247,.55) !important;
}

/* === The cards: frosted glass over the photo === */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  background:linear-gradient(180deg,
    rgba(255,253,247,.62) 0%,
    rgba(255,253,247,.78) 100%) !important;
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 32px rgba(60,40,20,.10) !important;
  margin-bottom:12px;
  border-radius:20px;
}

/* Inputs inside frosted cards — semi-transparent */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block .v3-onb-input,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-input{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(168,117,85,.18) !important;
  color:#1a1612 !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block .v3-onb-input:focus,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-input:focus{
  background:#fff !important;border-color:#a87555 !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card .v3-onb-cc{
  background:rgba(255,255,255,.45) !important;
  border:1px solid rgba(168,117,85,.18) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card .v3-onb-oauth{
  background:rgba(255,255,255,.85) !important;
  border:1px solid rgba(26,22,18,.10) !important;
  backdrop-filter:blur(8px);
}

/* Block titles inside frosted cards */
.v3-onb-birth-block .v3-onb-block-title,
.v3-onb-account-block .v3-onb-block-title{
  color:#8b5e3c !important;
}

/* Step 3 NEXT button — copper gradient stays prominent over photo */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next{
  margin-top:14px;margin-bottom:24px;
  box-shadow:0 12px 28px rgba(168,117,85,.30), inset 0 1px 0 rgba(255,255,255,.40) !important;
}

/* ============================================================
   V3 step 3 — push photo further right + stronger cream wash on
   left so headline reads cleanly.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step3{
  background-position:95% top !important;
}
.v3-onb-bg.is-step3::after{
  background:
    linear-gradient(to right,
      rgba(255,253,247,.98) 0%,
      rgba(255,253,247,.94) 25%,
      rgba(255,253,247,.72) 45%,
      rgba(255,253,247,.30) 65%,
      rgba(255,253,247,.05) 85%,
      rgba(255,253,247,0)   100%),
    linear-gradient(to bottom,
      rgba(255,253,247,.40) 0%,
      rgba(255,253,247,0)   30%,
      rgba(255,253,247,0)   70%,
      rgba(255,253,247,.60) 100%) !important;
}

/* Card frosted-glass: a bit lighter / whiter so it reads as airy */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  background:linear-gradient(180deg,
    rgba(255,253,247,.78) 0%,
    rgba(255,253,247,.88) 100%) !important;
  backdrop-filter:blur(24px) saturate(1.1);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);
}

/* Step 3 — solid cream backdrop behind the headline area only.
   Photo continues right + below the cards but the headline pocket
   is opaque so the words read crisply. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  background:linear-gradient(110deg,
    rgba(255,253,247,.97) 0%,
    rgba(255,253,247,.95) 55%,
    rgba(255,253,247,.55) 75%,
    rgba(255,253,247,0) 100%) !important;
  padding:62px 22px 20px !important;
  max-width:100% !important;
}

/* Step 3 — ensure the photo bg DOESN'T cap at 100vh when content
   is taller. Extend with the container so cards always have photo
   bleeding behind them, and the bottom doesn't show a stale cap. */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:100% !important;height:auto !important;
  top:0;bottom:0 !important;
  min-height:100vh;min-height:100dvh;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  /* Pad bottom so NEXT button has breathing room above the safe-area */
  padding-bottom:max(env(safe-area-inset-bottom),12px);
}

/* ============================================================
   V3 step 3 — FINAL: photo as small banner at top, form lives
   on cream BELOW the photo (no overlap). Page sized to fit
   content (no trailing empty band).
   ============================================================ */

/* Photo: confined to a top banner ~38vh. Body below is solid cream. */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:38vh !important;height:38dvh !important;
  bottom:auto !important;top:0 !important;
  background-position:center 28% !important;
  background-size:cover !important;
}
/* Soft cream fade at the bottom of the photo (transitions into the
   solid cream section below). No diagonal scrim — text lives below. */
.v3-onb-bg.is-step3::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:35%;
  background:linear-gradient(180deg,
    rgba(253,250,242,0) 0%,
    rgba(253,250,242,.55) 60%,
    rgba(253,250,242,1) 100%) !important;
  pointer-events:none;
}

/* Stage starts BELOW the photo (padding-top = photo height). */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:38vh !important;
  padding-top:38dvh !important;
  background:#fdfaf2;
  padding-bottom:18px;
}

/* Hero — solid cream bg, dark text. NOT a scrim overlay. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  padding:18px 22px 8px !important;
  background:#fdfaf2 !important;
  max-width:100% !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;
  text-shadow:none !important;font-weight:600;line-height:1.1;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  -webkit-text-fill-color:#8b5e3c !important;text-shadow:none !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(26,22,18,.78) !important;text-shadow:none !important;
  font-size:13px !important;margin-top:8px;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  color:rgba(26,22,18,.72) !important;text-shadow:none !important;
  margin-top:10px;
}

/* Cards — solid WHITE panels on cream, with subtle shadow. No frosted
   glass since they're not over a photo. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card{
  background:#fdfaf2 !important;
  padding:0 18px 16px !important;
  backdrop-filter:none !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  background:#ffffff !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:1px solid rgba(168,117,85,.10) !important;
  box-shadow:0 6px 18px rgba(60,40,20,.06) !important;
}

/* NEXT button — sits after the card stack, normal flow */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next{
  margin:14px 0 0 !important;
}

/* Outer container fits content — STEP 3 ONLY. Step 1 + step 2 need
   the shell to fill 100vh/100dvh like splash/login. Otherwise the
   bezel shrinks 61px and bg bleeds past the rounded corner. */
body[data-v3-step="3"] #view-onb-v3 .v3-onb{min-height:0 !important}
body[data-v3-step="3"] .view-host{min-height:0 !important;height:auto !important}

/* ============================================================
   Step 3 — NUCLEAR overrides for the bg sizing/positioning.
   Earlier accumulated rules left min-height:100vh + bottom:auto
   conflicts which forced the bg to fill the screen even though
   we wanted a 38vh banner.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step3{
  position:absolute !important;
  top:0 !important;left:0 !important;right:0 !important;
  bottom:auto !important;
  height:38vh !important;height:38dvh !important;
  min-height:0 !important;max-height:38dvh !important;
  background-position:center 28% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Nuke the leftover ::after gradient that was covering the whole photo. */
#view-onb-v3 .v3-onb-bg.is-step3::after{
  content:"" !important;
  position:absolute !important;
  inset:auto !important;
  top:auto !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  height:30% !important;
  background:linear-gradient(180deg,
    rgba(253,250,242,0) 0%,
    rgba(253,250,242,.60) 65%,
    rgba(253,250,242,1) 100%) !important;
  pointer-events:none;
}

/* Step 3 — stage must NOT paint a cream bg over the top portion
   where the photo banner lives. Use transparent for the stage,
   then put cream on each content child instead so the layout is
   photo (visible at top) → cream area (form below). */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  background:transparent !important;
  padding-top:0 !important;
}
/* The wrap div that JS injects holds: .v3-onb-hero + .v3-onb-card.
   Push it down via margin-top so the photo above stays visible,
   and give the wrap a cream bg so anything from .v3-onb-hero down
   reads on cream. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage > div{
  margin-top:38vh;margin-top:38dvh;
  background:#fdfaf2;
  border-top-left-radius:24px;border-top-right-radius:24px;
  position:relative;z-index:2;
  box-shadow:0 -10px 28px rgba(60,40,20,.10);
}

/* Step 3 — prevent the wrap's margin-top:38vh from escaping the
   stage (margin-collapse was adding 320px of phantom height to
   the .v3-onb container, leaving an empty band below NEXT). Use
   padding-top on the stage instead so the photo banner sits in
   the stage's padding area + content stacks naturally. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:38vh !important;padding-top:38dvh !important;
  background:transparent !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage > div{
  margin-top:0 !important;
  background:#fdfaf2 !important;
  border-top-left-radius:24px !important;border-top-right-radius:24px !important;
}
/* The photo banner area + everything below is now in one stacked column
   inside the stage. v3-onb height = stage height. No phantom margin. */

/* Step 3 — make ALL container chains height:auto so the document
   ends right after the NEXT button (no 600px trailing cream band). */
body:has(#view-onb-v3.active) .view-host,
body:has(#view-onb-v3.active) #view-onb-v3,
body:has(#view-onb-v3.active) .app-shell,
body:has(#view-onb-v3.active) .content-area{
  min-height:0 !important;
  height:auto !important;
}
/* Body bg is cream so anything overflow shows the same color. */

/* Body class added by JS when v3 onboarding is active. */
/* Step 3 fit-content overrides — SCOPED to step 3 only. Step 1+2
   must keep 100vh/100dvh to render at the splash/login footprint. */
body[data-v3-step="3"] .v3-onb-active,
body[data-v3-step="3"] .view-host,
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] #view-onb-v3{
  min-height:0 !important;
  height:auto !important;
}
body.v3-onb-active{background:#fdfaf2 !important}

/* Step 3 — force the v3-onb container + stage to fit content. */
body[data-v3-step="3"] #onbV3Stage{overflow:visible}
body[data-v3-step="3"] #view-onb-v3,
body[data-v3-step="3"] #view-onb-v3 > div{
  overflow:hidden;
}
/* Also kill the photo bg's ::after gradient extending past 100vh */
#view-onb-v3 .v3-onb-bg.is-step3{
  max-height:38vh !important;max-height:38dvh !important;
}

/* Step 1 + step 2 — fill the view completely + clip at rounded edge.
   Need to override the rogue `display:block !important` from earlier
   that broke the flex layout — without flex the .v3-onb collapsed to
   content height (784px) instead of viewport height. */
body[data-v3-step="1"] #view-onb-v3 .v3-onb,
body[data-v3-step="2"] #view-onb-v3 .v3-onb{
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
}

/* Body cream must extend perfectly under the v3-onb so any trailing
   document height blends seamlessly. No visible edge between
   content end and document end. */
body.v3-onb-active{
  background:#fdfaf2 !important;
  background-image:none !important;
}
body.v3-onb-active::after{
  /* In case any container ends with a shadow, blanket cream over */
  content:"";position:fixed;left:0;right:0;bottom:0;
  height:env(safe-area-inset-bottom,0);
  background:#fdfaf2;z-index:1;pointer-events:none;
}

/* ============================================================
   V3 onb — scroll lock. Make the view itself the scroll
   container (fixed to viewport height), so the document body
   NEVER grows beyond viewport. Result: user can't scroll past
   the NEXT button into empty cream — the view scrolls within
   its 100vh window and stops at the content's end.
   ============================================================ */
html, body.v3-onb-active{
  height:100vh;height:100dvh;
  overflow:hidden !important;
  margin:0;
}
body.v3-onb-active .app-shell,
body.v3-onb-active .content-area,
body.v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body.v3-onb-active #view-onb-v3{
  height:100vh !important;height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
/* The .v3-onb wrapper inside the view fits content normally. */
body.v3-onb-active[data-v3-step="3"] .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* Undo the unconditional html overflow:hidden — only body+inner
   containers should lock when v3 onboarding is active. */
html{overflow:auto !important}
html:has(body.v3-onb-active){overflow:hidden}

/* UNDO the scroll lock — it broke step 1/2 clicks. JS handles
   step 3 scroll constraint instead. */
html{overflow:auto !important}
body.v3-onb-active,
body.v3-onb-active .app-shell,
body.v3-onb-active .content-area,
body.v3-onb-active .view-host,
body.v3-onb-active #view-onb-v3{
  height:auto !important;
  overflow:visible !important;
}

/* ============================================================
   Step 3 ONLY — scroll lock at the document level.
   Uses body[data-v3-step="3"] set by JS, so step 1 + step 2
   keep their natural scroll. Document height is capped to the
   viewport, eliminating the empty cream band below NEXT.
   ============================================================ */
body[data-v3-step="3"].v3-onb-active{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body[data-v3-step="3"].v3-onb-active .app-shell,
body[data-v3-step="3"].v3-onb-active .content-area,
body[data-v3-step="3"].v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body[data-v3-step="3"].v3-onb-active #view-onb-v3{
  height:100vh !important;height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
/* Make the photo banner align to top of the scrollable view */
body[data-v3-step="3"].v3-onb-active .v3-onb-bg.is-step3{
  position:sticky;top:0;
  height:38vh;height:38dvh;
  max-height:38dvh !important;
  z-index:1;
}

/* ============================================================
   FINAL: scroll lock for step 3. Use simplest possible cascade.
   Step 3 = body height capped, view-onb-v3 = scroll container.
   ============================================================ */
body[data-v3-step="3"]{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;max-height:100dvh !important;
  overflow:hidden !important;
  margin:0 !important;padding:0 !important;
}
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] .view-host{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;
  overflow:hidden !important;
  min-height:0 !important;
}
body[data-v3-step="3"] #view-onb-v3{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  -webkit-overflow-scrolling:touch;
}
body[data-v3-step="3"] #view-onb-v3 > .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* ============================================================
   Step 3 — alternative: photo smaller + form compact so EVERYTHING
   fits in 1 viewport without needing scroll. Removes the need for
   scroll-lock entirely. Undoes the broken view-scroll attempts.
   ============================================================ */
body[data-v3-step="3"]{height:auto !important;overflow:visible !important}
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] .view-host,
body[data-v3-step="3"] #view-onb-v3{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  max-height:none !important;
}

/* Smaller photo banner — 24vh (was 38vh) */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:24vh !important;height:24dvh !important;
  max-height:24dvh !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:24vh !important;padding-top:24dvh !important;
}

/* Tighter spacing on hero + cards */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  padding:12px 22px 4px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{font-size:21px !important;line-height:1.05}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{font-size:12.5px !important;margin-top:4px}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  margin-top:6px;font-size:11px;
}

#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card{
  padding:0 16px 12px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  padding:12px !important;margin-bottom:8px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block .v3-onb-block-title,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-block-title{
  font-size:15px !important;margin-bottom:8px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-block-sub{
  font-size:11.5px !important;margin-bottom:8px !important;margin-top:-4px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-field{margin-bottom:6px !important}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-input{
  padding:10px 14px 10px 38px !important;
  font-size:13px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-oauth-row{margin-top:6px !important}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-oauth{
  padding:9px 8px !important;font-size:11.5px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next{
  padding:14px 18px !important;
  font-size:13px !important;
  margin-top:8px !important;margin-bottom:12px !important;
}

/* ============================================================
   RESET — restore default .view-host overflow:hidden + .view
   overflow-y:auto so .view is the scroll container.
   ============================================================ */
body.v3-onb-active{height:auto !important;overflow:visible !important}
body.v3-onb-active .app-shell{
  height:auto !important;min-height:100vh !important;min-height:100dvh !important;
  overflow:visible !important;
}
body.v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;
  min-height:100vh !important;min-height:100dvh !important;
  overflow:hidden !important;
}
body.v3-onb-active .content-area{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body.v3-onb-active #view-onb-v3{
  /* The original .view CSS already sets position:absolute, inset:0,
     overflow-y:auto, so we just need to make sure nothing fights it. */
  height:auto !important;
  overflow-y:auto !important;
}
/* Step 3: the v3-onb fits content inside the scrollable view. The .view
   absolute box clips beyond viewport, so no overflow on body. */
body[data-v3-step="3"] #view-onb-v3 .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* ============================================================
   FULL RESET — wipe all the v3-onb-active scroll/height overrides.
   Restore default: .view-host{overflow:hidden} + .view scrolls
   inside. No special v3 layout overrides. Page natural.
   ============================================================ */
body.v3-onb-active,
body.v3-onb-active *{
  /* don't touch */
}
body.v3-onb-active{
  height:100% !important;overflow:hidden !important;
  background:#fdfaf2;
}
html:has(body.v3-onb-active){overflow:hidden}
body.v3-onb-active .app-shell{
  height:100vh !important;height:100dvh !important;min-height:0 !important;
  overflow:hidden;
}
body.v3-onb-active .content-area{
  height:100vh !important;height:100dvh !important;min-height:0 !important;
  overflow:hidden;
}
body.v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;min-height:0 !important;
  overflow:hidden;
}
/* The .view itself is the scroll container (overflow-y:auto by default).
   Don't override its position:absolute or overflow rules. */
body.v3-onb-active #view-onb-v3{
  /* inherit default .view styling — explicit min-height/height:auto so
     v3-onb fits content. */
  height:100% !important;
  min-height:0 !important;
}
body.v3-onb-active[data-v3-step="3"] .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* html + body need explicit 100vh, not %, since % needs ancestor with set height */
html, body{height:100%}
body.v3-onb-active{
  height:100vh !important;height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* ============================================================
   REMOVE all CSS-driven scroll-lock attempts (broke step 1/2
   clicks). JS now toggles inline body+html overflow on step 3.
   ============================================================ */
body.v3-onb-active,
body.v3-onb-active .app-shell,
body.v3-onb-active .content-area,
body.v3-onb-active .view-host,
body.v3-onb-active #view-onb-v3{
  height:auto !important;min-height:auto !important;
  overflow:visible !important;
}
body[data-v3-step="3"],
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] .view-host,
body[data-v3-step="3"] #view-onb-v3{
  height:auto !important;min-height:auto !important;
  overflow:visible !important;max-height:none !important;
}
/* Restore view-host's natural overflow:hidden (was set in original CSS) */
.view-host{overflow:hidden}
.view{overflow-y:auto;overflow-x:hidden}
body.v3-onb-active::after{content:none !important;display:none !important}

/* ============================================================
   App-shell + content-area + view-host need 100vh to give the
   .view content room. My earlier min-height:auto collapsed them
   to 0. Restore explicit 100vh.
   ============================================================ */
.app-shell{min-height:100vh;min-height:100dvh}
body.v3-onb-active .app-shell,
body[data-v3-step='1'] .app-shell,
body[data-v3-step='2'] .app-shell,
body[data-v3-step='3'] .app-shell{
  min-height:100vh !important;min-height:100dvh !important;
  height:100vh !important;height:100dvh !important;
}
body.v3-onb-active .content-area,
body[data-v3-step='1'] .content-area,
body[data-v3-step='2'] .content-area,
body[data-v3-step='3'] .content-area{
  height:100vh !important;height:100dvh !important;
}
body.v3-onb-active .view-host,
body[data-v3-step='1'] .view-host,
body[data-v3-step='2'] .view-host,
body[data-v3-step='3'] .view-host{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
/* view itself is the scroll container (default .view styling) */
body.v3-onb-active #view-onb-v3{
  position:absolute !important;inset:0 !important;
  overflow-y:auto !important;overflow-x:hidden !important;
  height:auto !important;
}

/* Force 100vh (not 100dvh) since dvh resolves oddly in some headless
   browser contexts. Last word; should win. */
.app-shell{min-height:100vh}
body.v3-onb-active .app-shell,
body[data-v3-step='1'] .app-shell,
body[data-v3-step='2'] .app-shell,
body[data-v3-step='3'] .app-shell{
  min-height:100vh !important;height:100vh !important;
}
body.v3-onb-active .content-area,
body[data-v3-step='1'] .content-area,
body[data-v3-step='2'] .content-area,
body[data-v3-step='3'] .content-area{height:100vh !important}
body.v3-onb-active .view-host,
body[data-v3-step='1'] .view-host,
body[data-v3-step='2'] .view-host,
body[data-v3-step='3'] .view-host{height:100vh !important;overflow:hidden !important}

/* Higher-specificity rule with id-based selector to force win over
   all earlier !important min-height:auto rules. */
html body.v3-onb-active div.app-shell{
  min-height:100vh !important;height:100vh !important;
  display:flex !important;
}
html body.v3-onb-active div.app-shell main.content-area{
  height:100vh !important;
  flex:1 !important;
}
html body.v3-onb-active div.app-shell main.content-area .view-host{
  height:100vh !important;
  overflow:hidden !important;
}

/* Critical: body itself must be 100vh so children can fill. The latest
   rule matching `body.v3-onb-active` had height:auto which was making
   body collapse to 0. This rule MUST come last. */
body.v3-onb-active{
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
}

/* === MARKER-2026-FINAL === unique rule to verify css freshness */
body.v3-onb-active .app-shell{
  min-height:100vh !important;
  height:100vh !important;
  display:flex !important;
}
body.v3-onb-active .content-area{
  height:100vh !important;
  flex:1 !important;
}
body.v3-onb-active .view-host{
  height:100vh !important;
  overflow:hidden !important;
}