:root{
  /* Re-skin the accent slot from olive (green) to copper for the
     primary brand stroke. .btn.primary / .chip.active etc. use --olive
     for the brand fill — remapping makes them copper without touching
     each rule. */
  --olive:#c89878;        /* primary copper */
  --olive-deep:#a87555;   /* deep copper — hover/pressed */
  --olive-light:#dcb195;  /* light copper */
  --olive-tint:#f3e3d0;   /* warm tint */
  --moss:#9b6d4d;         /* deep copper */
  --ink-on-olive:#ffffff; /* white text on copper buttons */

  --rose:#b8825c;         /* italic accent */
  --blush:#f3e3d0;
  --blush-strong:#c89878;

  /* Copper gradient + glow used across CTAs */
  --copper-1:#dcb195;
  --copper-2:#c89878;
  --copper-3:#a87555;
  --copper-grad:linear-gradient(180deg,var(--copper-1) 0%,var(--copper-2) 50%,var(--copper-3) 100%);
  --copper-glow:0 12px 28px rgba(168,117,85,.32);
}

/* Body remains cream — keep base */
body{background:var(--bg);color:var(--ink)}

/* Primary button → copper gradient */
.btn.primary{
  background:var(--copper-grad);
  color:#fff;
  box-shadow:var(--copper-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{filter:brightness(1.04);box-shadow:0 18px 32px rgba(168,117,85,.42), inset 0 1px 0 rgba(255,255,255,.45)}

/* ============================================================
   V3 Splash — full-bleed couple hero + serif headline + copper CTA.
   Matches v2-ref/S__18120780.jpg. Replaces splash-grid/splash-portrait.
   ============================================================ */

#view-splash.view{padding:0;background:#1a1612}
.v3-splash{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  background:#0f0c0a;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.v3-splash-bg{
  position:absolute;inset:0;
  background:url('/static/images/v3/Screen1.jpg?v=5') center top / cover no-repeat;
  z-index:1;
}
.v3-splash-bg::after{
  /* warm vignette bottom for legibility of headline + CTA */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(241,234,215,0) 0%,
    rgba(241,234,215,0) 35%,
    rgba(241,234,215,.55) 55%,
    rgba(241,234,215,.93) 70%,
    #f1ead7 82%);
}
.v3-splash-top{
  position:relative;z-index:3;
  padding:14px 22px 0;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.v3-splash-brand{
  display:flex;flex-direction:column;
  color:var(--ink);
}
.v3-splash-brand h1{
  font-family:'Cal Sans',serif;
  font-weight:600;font-size:22px;line-height:1.05;
  letter-spacing:.02em;color:#7c4a2c;
  text-shadow:0 1px 6px rgba(255,255,255,.4);
}
.v3-splash-brand .sub{
  margin-top:6px;
  font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(26,22,18,.7);
}
.v3-splash-brand .line{
  margin-top:6px;height:1.5px;width:36px;
  background:linear-gradient(90deg,#c89878,transparent);
}

.v3-splash-hero{
  position:relative;z-index:3;
  margin-top:auto;
  padding:0 26px 24px;
}
.v3-splash-headline{
  font-family:'Cal Sans',serif;
  font-weight:700;font-size:54px;line-height:.98;
  letter-spacing:-.02em;
  color:#1a1612;
  text-transform:uppercase;
}
.v3-splash-headline i{
  display:inline-block;
  font-style:italic;font-weight:600;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-splash-sub{
  margin-top:14px;
  font-family:'Cal Sans',serif;
  font-weight:500;font-size:18px;letter-spacing:.02em;
  color:#1a1612;text-transform:uppercase;
}
.v3-splash-tag{
  margin-top:14px;font-size:14.5px;line-height:1.45;
  color:rgba(26,22,18,.78);max-width:380px;
}
.v3-splash-tag u{
  text-decoration:none;color:#a87555;font-weight:500;
  border-bottom:1px solid rgba(168,117,85,.42);
}
.v3-splash-cta{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;
  margin-top:22px;
  background:var(--copper-grad);
  color:#fff;
  border:none;border-radius:999px;
  padding:18px 26px;
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:var(--copper-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .18s,box-shadow .18s;
}
.v3-splash-cta:hover{filter:brightness(1.04);box-shadow:0 18px 32px rgba(168,117,85,.42), inset 0 1px 0 rgba(255,255,255,.45)}
.v3-splash-cta svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.v3-splash-chips{
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;gap:8px 14px;
  flex-wrap:wrap;
  font-size:12px;color:rgba(26,22,18,.75);
}
.v3-splash-chips .ch{
  display:inline-flex;align-items:center;gap:5px;
}
.v3-splash-chips .ch svg{width:14px;height:14px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-splash-chips .sep{color:rgba(26,22,18,.35);font-size:8px;}
.v3-splash-foot{
  position:relative;z-index:3;
  padding:10px 22px 22px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;color:rgba(26,22,18,.68);
  background:#f1ead7;
}
.v3-splash-foot svg{width:13px;height:13px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none;flex-shrink:0}
.v3-splash-foot b{color:#a87555;font-weight:500}

@media (min-width:900px){
  .v3-splash{min-height:100dvh}
  .v3-splash-headline{font-size:72px}
  .v3-splash-sub{font-size:22px}
  .v3-splash-tag{font-size:16px;max-width:520px}
  .v3-splash-hero{padding:0 60px 36px;max-width:720px;margin-left:0;margin-right:auto}
  .v3-splash-cta{max-width:520px}
}

/* ============================================================
   V3 Onboarding — 3-card flow over coastal hero bg.
   Matches v2-ref/S__18120781, S__18120782, S__18120783.
   Card 1: Choose Your Companion (type+gender+name)
   Card 2: Choose Your Companion Presence (3x3 portrait grid)
   Card 3: Birth info + email/phone + OAuth + signup
   ============================================================ */

#view-onb-v3.view{padding:0;background:#1a1612}
.v3-onb{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:#0f0c0a;
  overflow:hidden;
}
.v3-onb-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  background-repeat:no-repeat;
  transition:background-image .4s ease;
  z-index:1;
}
/* All steps use the live Screen2.jpg (same as the BoB-layer overrides). Keeping
   the base rule on the SAME image kills the splash->step1 FLASH: before JS sets
   body[data-v3-step], the ungated base rule used to paint the OLD onb-step1-bg.png,
   which stayed on screen until Screen2 decoded. Same image here = nothing old to flash. */
.v3-onb-bg.is-step1{background-image:url('/static/images/v3/Screen2.jpg?v=5')}
.v3-onb-bg.is-step2{background-image:url('/static/images/v3/Screen2.jpg?v=5');filter:brightness(.55) blur(2px)}
.v3-onb-bg.is-step3{background-image:url('/static/images/v3/Screen2.jpg?v=5')}
.v3-onb-back{
  position:absolute;top:14px;left:14px;z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.85);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.v3-onb-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

.v3-onb-hero{
  position:relative;z-index:3;
  padding:60px 24px 16px;
  color:#1a1612;
}
.v3-onb-hero h1{
  font-family:'Cal Sans',serif;
  font-weight:600;font-size:34px;line-height:1.05;
  letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(255,255,255,.45);
}
.v3-onb-hero h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-onb-hero p{
  margin-top:10px;font-size:15px;line-height:1.45;
  color:rgba(26,22,18,.78);max-width:300px;
}
.v3-onb-hero .privacy{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;color:rgba(26,22,18,.72);
}
.v3-onb-hero .privacy svg{width:18px;height:18px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none}

/* Card (frosted glass overlay) */
.v3-onb-card{
  position:relative;z-index:3;
  margin-top:auto;
  padding:22px 22px 16px;
  background:rgba(241,234,215,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top-left-radius:26px;border-top-right-radius:26px;
  box-shadow:0 -10px 40px rgba(0,0,0,.20);
}
.v3-onb-section{margin-bottom:18px}
.v3-onb-section:last-of-type{margin-bottom:0}
.v3-onb-label{
  font-size:13px;font-weight:500;color:#1a1612;
  margin-bottom:10px;
}

/* Type chips (Warm / Playful / Romantic) — 3 in a row */
.v3-onb-types{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.v3-onb-type{
  position:relative;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:16px;
  padding:18px 8px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:all .2s;
  color:#1a1612;
  font-family:inherit;
}
.v3-onb-type:hover{background:rgba(255,255,255,.7)}
.v3-onb-type.on{
  background:#dcb195;
  border-color:#a87555;
  color:#1a1612;
}
.v3-onb-type.on::after{
  content:"";position:absolute;top:8px;right:8px;
  width:18px;height:18px;border-radius:50%;
  background:#1a1612;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcb195' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:11px;background-repeat:no-repeat;
}
.v3-onb-type .ico{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.v3-onb-type .ico svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-onb-type .lbl{font-size:13px;font-weight:500}

/* Gender pair (Male / Female) */
.v3-onb-genders{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v3-onb-gender{
  position:relative;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  padding:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:all .2s;color:#1a1612;
  font-family:inherit;font-size:14px;
}
.v3-onb-gender.on{background:#dcb195;border-color:#a87555;font-weight:500}
.v3-onb-gender.on::after{
  content:"";position:absolute;top:8px;right:8px;
  width:16px;height:16px;border-radius:50%;
  background:#1a1612;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcb195' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:10px;background-repeat:no-repeat;
}
.v3-onb-gender svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}

/* Inputs */
.v3-onb-input-row{position:relative}
.v3-onb-input-row .ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:rgba(26,22,18,.55);pointer-events:none;
}
.v3-onb-input-row .ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-onb-input{
  width:100%;
  padding:14px 14px 14px 42px;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  font-family:inherit;font-size:14.5px;color:#1a1612;
  transition:border-color .18s,background .18s;
}
.v3-onb-input::placeholder{color:rgba(26,22,18,.45)}
.v3-onb-input:focus{outline:none;border-color:#a87555;background:rgba(255,255,255,.85)}
.v3-onb-input.dropdown{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a87555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position:right 14px center;background-size:18px;background-repeat:no-repeat;
  padding-right:42px;
}

/* Big NEXT button */
.v3-onb-next{
  width:100%;
  margin-top:18px;
  padding:18px 22px;
  background:var(--copper-grad);
  color:#fff;border:none;border-radius:999px;
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:var(--copper-glow), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:filter .18s,box-shadow .18s,opacity .18s;
}
.v3-onb-next:hover{filter:brightness(1.04);box-shadow:0 18px 32px rgba(168,117,85,.42), inset 0 1px 0 rgba(255,255,255,.45)}
.v3-onb-next:disabled{opacity:.5;cursor:not-allowed}
.v3-onb-next svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

/* Step 2: presence picker — light cream full-page, no bg image overlay */
/* Step 2 — keep a soft cream background but restore a height-bounded
   slot so the layout matches step 1's photo-banner footprint. (No
   actual photo because the 32 portrait tiles ARE the visual hero.) */
#view-onb-v3 .v3-onb-bg.is-step2{
  background:#f1ead7;
  background-image:none;
  filter:none;
  height:60px;  /* leave room above the title so the back button + spacing match step 1 */
}
.v3-onb-presence{
  position:relative;z-index:3;
  padding:62px 22px 24px;
  text-align:center;
}
.v3-onb-presence h1{
  font-family:'Cal Sans',serif;
  font-weight:600;font-size:22px;line-height:1.15;
  letter-spacing:-.005em;color:#1a1612;
  /* Mixed-case to match step 1's "Choose Your Companion" treatment.
     Italicised <i> word still gets the copper gradient via the rule
     below. */
}
.v3-onb-presence h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-onb-presence p{
  margin:8px auto 0;font-size:13px;line-height:1.45;
  color:rgba(26,22,18,.7);max-width:320px;
}
.v3-onb-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;
  margin-top:22px;padding:0 4px;
}
.v3-onb-portrait{
  position:relative;
  aspect-ratio:3/4;
  background:#f0e6d3;
  border-radius:12px;overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.v3-onb-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.v3-onb-portrait:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.v3-onb-portrait.on{
  border-color:#a87555;
  box-shadow:0 0 0 2px rgba(168,117,85,.25), 0 12px 24px rgba(168,117,85,.20);
}
.v3-onb-portrait.on::after{
  content:"";position:absolute;bottom:8px;right:8px;
  width:24px;height:24px;border-radius:50%;
  background:#1a1612;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcb195' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:14px;background-repeat:no-repeat;
}
.v3-onb-presence-foot{
  margin-top:24px;padding:0 22px 16px;
  text-align:center;color:rgba(26,22,18,.6);
  font-size:12px;line-height:1.6;
}
.v3-onb-presence-foot svg{width:18px;height:18px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none;margin:0 auto 6px;display:block}

/* Step 3: birth info — bg image w/ panels stacked over cream gradient */
.v3-onb-birth-block,
.v3-onb-account-block{
  background:rgba(255,255,255,.85);
  border-radius:18px;
  padding:18px;
  margin-bottom:12px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.v3-onb-block-title{
  font-family:'Cal Sans',serif;font-weight:500;
  font-size:18px;color:#1a1612;
  margin-bottom:14px;
}
.v3-onb-account-block .v3-onb-block-title{font-size:18px}
.v3-onb-account-block .v3-onb-block-sub{
  margin-top:-10px;margin-bottom:14px;
  font-size:13px;color:rgba(26,22,18,.65);line-height:1.4;
}
.v3-onb-field+.v3-onb-field{margin-top:10px}
.v3-onb-phone-row{display:flex;gap:8px}
.v3-onb-phone-row .v3-onb-input-row{flex:1}
.v3-onb-cc{
  flex:0 0 90px;position:relative;
  background:rgba(241,234,215,.6);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;
}
.v3-onb-cc .flag{font-size:18px}
.v3-onb-cc svg{width:14px;height:14px;color:#a87555;stroke:currentColor;stroke-width:2;fill:none}
.v3-onb-oauth-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;
}
.v3-onb-oauth{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 8px;
  background:#fff;
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  cursor:pointer;font-size:12.5px;color:#1a1612;font-family:inherit;
  transition:border-color .18s,box-shadow .18s;
}
.v3-onb-oauth:hover{border-color:#a87555;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.v3-onb-oauth svg{width:16px;height:16px}
.v3-onb-oauth.apple svg{fill:#000;stroke:none}
.v3-onb-oauth.google svg{fill:none;stroke:none}

/* Mobile-only — phone shell handles outer chrome already */
@media (min-width:900px){
  #view-onb-v3 .v3-onb{
    max-width:480px;margin:0 auto;
    box-shadow:0 30px 80px rgba(0,0,0,.20);
  }
}

/* ============================================================
   V3 Chat — full portrait hero + overlay bubbles.
   Matches v2-ref/S__18120784.jpg. Replaces .chat-shell layout.
   ============================================================ */

#view-chat.view{padding:0;background:#f1ead7}
.v3-chat{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:#f1ead7;
  overflow:hidden;
}
.v3-chat-head{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:10px;
  /* env(safe-area-inset-top) — reserves room for the iOS Safari
     URL bar / notch so the back arrow + companion name aren't
     hidden behind the browser chrome (#107 report). */
  padding:max(14px, env(safe-area-inset-top, 14px)) 14px 12px;
  background:#f1ead7;
  border-bottom:1px solid rgba(26,22,18,.06);
}
.v3-chat-back{
  flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;
}
.v3-chat-back svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}
.v3-chat-avatar{
  flex-shrink:0;
  width:42px;height:42px;border-radius:50%;
  overflow:hidden;background:#e6dcc4;
  border:1.5px solid rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.v3-chat-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.v3-chat-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.v3-chat-name{
  font-family:'Cal Sans',serif;
  font-size:18px;font-weight:500;color:#1a1612;
}
.v3-chat-status{
  margin-top:3px;
  font-size:11.5px;color:rgba(26,22,18,.62);
  display:flex;align-items:center;gap:5px;
}
.v3-chat-status .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 2px rgba(74,222,128,.18);
}
.v3-chat-acts{display:flex;align-items:center;gap:6px}
.v3-chat-dream{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;background:#dcb195;color:#1a1612;
  border:none;border-radius:999px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  transition:filter .18s;
}
.v3-chat-dream:hover{filter:brightness(1.06)}
.v3-chat-dream svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}

.v3-chat-stage{
  position:relative;flex:1;
  background:#f1ead7;
  overflow:hidden;
}
.v3-chat-hero{
  position:absolute;inset:0;
  background:url('/static/images/v3/chat-hero-james.png') center top / cover no-repeat;
  z-index:1;
}
.v3-chat-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(241,234,215,0) 0%,
    rgba(241,234,215,0) 55%,
    rgba(241,234,215,.6) 80%,
    rgba(241,234,215,.92) 100%);
}
.v3-chat-body{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  /* CRITICAL: `justify-content:flex-end` + `overflow-y:auto` is a
     known Chromium bug — the flex-end alignment collapses
     scrollHeight to clientHeight so the user can't scroll up to see
     history (#96 report). The fix is `justify-content:flex-start`
     (default) + `margin-top:auto` on the first child below — that
     pins content to the bottom when short AND lets the user scroll
     up freely when content overflows. */
  padding:18px 14px 14px;gap:10px;z-index:3;
  overflow-y:auto;
  /* no overscroll-behavior:contain — it kills the iOS rubber-band bounce so the
     scroll "hits" a hard stop at the ends; the view is locked so nothing chains */
}
/* Pin content to the bottom when shorter than the body (the
   "starting state" the user sees when they first open chat). When
   the content grows past the body height, this margin collapses to
   0 and the scroll engages naturally. */
.v3-chat-body > *:first-child{margin-top:auto}
.v3-chat-body::-webkit-scrollbar{width:6px}
.v3-chat-body::-webkit-scrollbar-thumb{background:rgba(168,117,85,.25);border-radius:3px}

/* Bubbles — overlay on hero */

/* Input bar */
.v3-chat-input{
  position:relative;z-index:5;
  padding:10px 14px 14px;
  background:#f1ead7;
  display:flex;align-items:center;gap:10px;
}
.v3-chat-input .pill{
  flex:1;display:flex;align-items:center;
  background:#fff;border-radius:999px;
  padding:0 8px 0 18px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.v3-chat-input input{
  flex:1;border:none;outline:none;background:transparent;
  padding:14px 0;font-size:14.5px;color:#1a1612;
  font-family:inherit;
}
.v3-chat-input input::placeholder{color:rgba(26,22,18,.42)}
.v3-chat-input-send{
  width:36px;height:36px;border-radius:50%;
  background:var(--copper-grad);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 4px 12px rgba(168,117,85,.30);
  flex-shrink:0;
}
.v3-chat-input-send svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.v3-chat-input-side{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(26,22,18,.10);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.v3-chat-input-side svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

/* ============================================================
   V3 Dream Life — 3 lifestyle selector cards.
   Matches v2-ref/S__18120785.jpg. New view #view-dream-life.
   ============================================================ */

#view-dream-life.view{padding:0;background:#f1ead7}
.v3-dream{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:#f1ead7;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.v3-dream-head{
  display:flex;align-items:center;
  padding:14px 14px 0;
}
.v3-dream-back{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;box-shadow:0 2px 10px rgba(0,0,0,.10);
}
.v3-dream-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.v3-dream-hero{
  padding:14px 22px 18px;
}
.v3-dream-hero h1{
  font-family:'Cal Sans',serif;font-weight:600;
  font-size:30px;line-height:1.1;letter-spacing:-.01em;color:#1a1612;
}
.v3-dream-hero h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-dream-cards{
  display:flex;flex-direction:column;gap:12px;
  padding:0 18px;
}
.v3-dream-card{
  position:relative;
  display:block;width:100%;
  aspect-ratio:5/2.4;
  border-radius:16px;overflow:hidden;
  background:#1a1411;
  border:none;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .2s,box-shadow .2s;
}
.v3-dream-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.v3-dream-card .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  background-repeat:no-repeat;
}
.v3-dream-card .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(10,8,7,.85) 0%,
    rgba(10,8,7,.50) 50%,
    rgba(10,8,7,.20) 100%);
}
.v3-dream-card.c-billionaire .bg{background-image:url('/static/images/v3/dreamlife/billionaire.png')}
.v3-dream-card.c-wealth .bg{background-image:url('/static/images/v3/dreamlife/generational-wealth.png')}
.v3-dream-card.c-love .bg{background-image:url('/static/images/v3/dreamlife/love-freedom.png')}
.v3-dream-card .body{
  position:relative;z-index:2;
  height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:16px 60px 16px 18px;text-align:left;
  color:#fff;
}
.v3-dream-card .body h3{
  font-family:'Cal Sans',serif;font-weight:600;
  font-size:19px;line-height:1.12;letter-spacing:-.005em;
}
.v3-dream-card .body p{
  margin-top:6px;font-size:11.5px;line-height:1.45;
  color:rgba(255,255,255,.82);max-width:200px;
}
.v3-dream-card .pick{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  background:transparent;
  z-index:3;
}
.v3-dream-card.on{
  outline:2px solid #c89878;outline-offset:-2px;
  box-shadow:0 0 0 4px rgba(168,117,85,.18), 0 14px 28px rgba(168,117,85,.28);
}
.v3-dream-card.on .pick{
  background:#c89878;border-color:#c89878;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:12px;background-repeat:no-repeat;
}

.v3-dream-toggle{
  margin:14px 18px 0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;
  background:rgba(255,255,255,.65);
  border:1.5px solid rgba(26,22,18,.08);
  border-radius:16px;
  color:#a87555;font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;
}
.v3-dream-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

.v3-dream-cta{
  margin:14px 18px 0;
  padding:18px;
  background:linear-gradient(180deg,#b8825c,#8b5e3c);
  color:#fff;border:none;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px;
  letter-spacing:.005em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px rgba(139,94,60,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.v3-dream-cta:hover{filter:brightness(1.05)}
.v3-dream-cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}

.v3-dream-foot{
  margin-top:auto;
  padding:14px 22px 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;color:rgba(26,22,18,.65);
}
.v3-dream-foot svg{width:13px;height:13px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-dream-foot b{color:#a87555;font-weight:500}

@media (min-width:900px){
  .v3-dream{max-width:480px;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.20)}
}

/* ============================================================
   V3 chat — adapt existing .msg.her / .msg.me to overlay style
   when inside .v3-chat-body (so we don't have to rewrite the
   message renderer). White bubble for her, copper for me.
   ============================================================ */
.v3-chat-body .msg{
  max-width:84%;padding:10px 16px;border-radius:22px;
  font-size:14.5px;line-height:1.4;color:#1a1612;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  margin:0;
  border:none;
}
.v3-chat-body .msg.her{
  align-self:flex-start;background:#fff;color:#1a1612;
  border-top-left-radius:6px;
}
.v3-chat-body .msg.me{
  align-self:flex-end;
  background:var(--copper-grad);color:#fff;
  border-top-right-radius:6px;
  box-shadow:0 4px 14px rgba(168,117,85,.25);
}
.v3-chat-body .msg .md-body p{margin:0;color:inherit}
.v3-chat-body .msg .md-body a{color:#a87555}
.v3-chat-body .msg-feedback{
  margin:4px 0 8px 6px;display:flex;gap:6px;align-self:flex-start;
}
.v3-chat-body .msg-feedback button{
  background:rgba(255,255,255,.85);border:1px solid rgba(26,22,18,.10);
  color:#a87555;border-radius:999px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.v3-chat-body .msg-feedback button .i{width:14px;height:14px}
.v3-chat-body .msg-feedback button.on{background:#dcb195;color:#1a1612;border-color:#a87555}
.v3-chat-body .day-divider{
  align-self:center;background:rgba(255,255,255,.7);color:rgba(26,22,18,.65);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.v3-chat-body .typing{
  background:#fff;padding:14px 16px;border-radius:22px;
  border-top-left-radius:6px;align-self:flex-start;
  display:inline-flex;gap:5px;box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.v3-chat-body .typing span{
  width:7px;height:7px;border-radius:50%;background:#a87555;opacity:.35;
  animation:typing-dot 1.2s ease-in-out infinite;
}
.v3-chat-body .typing span:nth-child(2){animation-delay:.15s}
.v3-chat-body .typing span:nth-child(3){animation-delay:.30s}
@keyframes typing-dot{
  0%,80%,100%{opacity:.35;transform:translateY(0)}
  40%{opacity:.95;transform:translateY(-3px)}
}
.v3-chat-body .chat-empty-wrap{
  margin:auto;text-align:center;padding:20px;
}
.v3-chat-body .chat-starters{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;
}
.v3-chat-body .chat-starter{
  background:rgba(255,255,255,.85);color:#1a1612;
  border:1.5px solid rgba(168,117,85,.25);border-radius:999px;
  padding:8px 14px;font-size:13px;cursor:pointer;
}
.v3-chat-body .chat-starter:hover{background:#fff;border-color:#a87555}

/* ── Tap-to-continue follow-up chips ──────────────────────────────────────
   Rendered under the companion's latest reply. A vertical "↳ suggestion"
   list (cf. the SuperGrok reference) re-skinned into the cream/copper theme:
   a soft white card with copper arrows and hairline dividers. Tapping a row
   sends it as the next message. */
.v3-chat-body .chat-followups{
  /* !important on the load-bearing box props: the generic ".v3-chat-body > *"
     and "> div:not(...)" rules force width:auto/max-width:84%/margin:0 with
     !important on every direct child, which would otherwise clobber the card. */
  align-self:flex-start !important;
  width:min(100%, 330px) !important;
  max-width:330px !important;
  margin:2px 0 10px 2px !important;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(168,117,85,.20);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(168,117,85,.13);
  animation:followIn .42s cubic-bezier(.2,.7,.3,1) both;
}
.v3-chat-body .chat-followups-hint{
  font:600 10.5px 'Inter',sans-serif;
  letter-spacing:.13em;text-transform:uppercase;
  color:#a87555;
  padding:11px 16px 7px;
}
.v3-chat-body .chat-followup{
  display:flex;align-items:center;gap:11px;
  width:100%;text-align:left;
  background:transparent;border:none;
  border-top:1px solid rgba(168,117,85,.12);
  padding:12px 16px;cursor:pointer;
  font:500 14px 'Inter',sans-serif;color:#3a3327;
  transition:background .15s ease,padding-left .15s ease;
}
.v3-chat-body .chat-followup::before{
  content:"↳";
  color:#a87555;font-size:16px;font-weight:700;line-height:1;
  flex:0 0 auto;transform:translateY(1px);
}
.v3-chat-body .chat-followup span{flex:1 1 auto;line-height:1.35}
.v3-chat-body .chat-followup:hover{background:rgba(220,177,149,.20);padding-left:19px}
.v3-chat-body .chat-followup:active{background:rgba(220,177,149,.34)}
@keyframes followIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Free-trial countdown strip (chat view) ──────────────────────────────── */
.trial-banner{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;width:100%;
  border:none;cursor:pointer;text-align:left;
  padding:8px 16px;
  background:var(--copper-grad, linear-gradient(180deg,#dcb195,#a87555));
  color:#fff;font:600 12.5px 'Inter',sans-serif;letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(168,117,85,.28);
}
.trial-banner-dot{font-size:13px;opacity:.9;line-height:1}
.trial-banner-text{flex:1 1 auto}
.trial-banner-cta{
  flex:0 0 auto;background:rgba(255,255,255,.22);
  padding:3px 12px;border-radius:999px;font-weight:700;
  border:1px solid rgba(255,255,255,.35);
}
.trial-banner:hover .trial-banner-cta{background:rgba(255,255,255,.32)}

/* ── Trial-ended gate header (upgrade view) ──────────────────────────────── */
.trial-ended-notice{
  margin:4px 0 18px;padding:20px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(220,177,149,.22),rgba(168,117,85,.12));
  border:1px solid rgba(168,117,85,.28);
}
.trial-ended-emoji{font-size:26px;color:var(--rose,#a6724b);margin-bottom:4px}
.trial-ended-title{
  font-family:'Cal Sans',serif;font-weight:600;font-size:22px;
  color:#3c2516;margin:0 0 6px;
}
.trial-ended-sub{margin:0;color:var(--ink-soft,#5a604a);font-size:14px;line-height:1.45}

/* ── Monthly / yearly billing toggle (upgrade page) ──────────────────────── */
.billing-cycle{
  display:inline-flex;align-self:center;margin:0 auto 6px;gap:4px;
  padding:4px;border-radius:999px;
  background:rgba(168,117,85,.10);border:1px solid rgba(168,117,85,.20);
}
.billing-cycle[hidden]{display:none}
.billing-cycle .bc-opt{
  display:inline-flex;align-items:center;gap:7px;
  border:none;background:transparent;cursor:pointer;
  padding:7px 16px;border-radius:999px;
  font:600 13px 'Inter',sans-serif;color:var(--ink-soft,#5a604a);
  transition:background .15s ease,color .15s ease;
}
.billing-cycle .bc-opt.active{
  background:var(--copper-grad, linear-gradient(180deg,#dcb195,#a87555));
  color:#fff;box-shadow:0 3px 10px rgba(168,117,85,.28);
}
.billing-cycle .bc-save{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.25);padding:2px 7px;border-radius:999px;
}
.billing-cycle .bc-opt:not(.active) .bc-save{
  background:rgba(166,114,75,.16);color:var(--rose,#a6724b);
}
.plan-subprice{margin-top:4px;font-size:12px;color:var(--ink-mute,#8a8d76)}

/* Splash trial note under the CTA — sits on the CREAM area, so it must be a
   dark copper tone, not white (white was invisible on cream). */
.v3-splash-trial{
  margin:12px 0 0;text-align:center;
  font:700 12px 'Inter',sans-serif;letter-spacing:.04em;
  color:#8a5a38;
}

/* ============================================================
   V3 polish — pass after first capture.
   1) Bump DEEPLY copper darker for legibility on cream.
   2) Add a soft cream scrim behind v3-onb hero text so the
      headline stays readable even when the bg portrait fills
      the full frame (step3).
   3) Sidebar / tabbar restyle for cream/copper consistency.
   ============================================================ */

/* 1) Splash headline italic — deeper copper for stronger contrast. */
.v3-splash-headline i{
  background:linear-gradient(180deg,#a87555 0%,#7c4a2c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.18));
}

/* 2) Onboarding hero scrim — cream radial behind the top text */
.v3-onb-hero{
  background:
    radial-gradient(ellipse 95% 70% at 35% 30%,
      rgba(241,234,215,.85) 0%,
      rgba(241,234,215,.55) 45%,
      rgba(241,234,215,0) 75%);
  padding-top:78px;
}
.v3-onb-hero h1, .v3-onb-hero p, .v3-onb-hero .privacy{
  text-shadow:0 1px 6px rgba(255,255,255,.55);
}
/* Soft top bar so the back button + status text always read well */
.v3-onb::before{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(180deg,
    rgba(241,234,215,.55) 0%,
    rgba(241,234,215,0) 100%);
  z-index:2;pointer-events:none;
}

/* 3) Re-skin the legacy olive sidebar to cream/copper so authed views
   (home, mood, memory, profile) sit consistently with the new theme. */
.sidebar{
  background:linear-gradient(170deg,#e8d8be 0%,#dcc9a6 55%,#cfb88c 100%) !important;
  border-right:1px solid rgba(168,117,85,.25) !important;
  box-shadow:inset -1px 0 0 rgba(168,117,85,.10), 4px 0 24px rgba(60,40,20,.10) !important;
}
.sidebar::before{opacity:.18;mix-blend-mode:multiply !important}
.sidebar .brand-mark{outline:1px solid rgba(168,117,85,.30);box-shadow:0 4px 14px rgba(168,117,85,.18)}
.sidebar .brand-name{color:#3c2516;text-shadow:none !important}
.side-item{color:rgba(60,37,22,.78) !important}
.side-item:hover{background:rgba(168,117,85,.10) !important;color:#1a1612 !important}
.side-item.active{
  background:var(--copper-grad) !important;color:#fff !important;
  box-shadow:0 8px 22px rgba(168,117,85,.30) !important;
}
.side-item.active svg{stroke:#fff !important}
.side-user{background:rgba(255,255,255,.45) !important;border-color:rgba(168,117,85,.20) !important}
.side-user:hover{background:rgba(255,255,255,.75) !important}
.side-user-name{color:#3c2516 !important}
.side-user-sub{color:rgba(60,37,22,.65) !important}

/* Body cream override for V3 fullscreen views (no chrome) */
body:not(.in-app) .content-area,
body:not(.in-app) .app-shell{
  background:#f1ead7;
  display:block;
}
body:not(.in-app) .view-host{height:100vh;height:100dvh}
body:not(.in-app) .view{
  min-height:100vh;min-height:100dvh;
  padding:0 !important;
}

/* ============================================================
   V3 polish pass 2 — readability + scrim strength.
   Italic copper accent inside onb hero was getting lost on busy
   portraits. Solid darker copper + stronger cream scrim.
   ============================================================ */

/* Onboarding hero italic — use a solid darker copper (no gradient) so
   the word reads cleanly even over a busy photo bg. */
.v3-onb-hero h1 i,
.v3-onb-presence h1 i{
  background:none !important;
  -webkit-background-clip:initial;
  -webkit-text-fill-color:initial;
  background-clip:initial;
  color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,255,255,.55);
}

/* Stronger cream scrim — left side near-opaque, fades to transparent
   across the upper third. Keeps headline + sub crisp. */
.v3-onb-hero{
  background:
    linear-gradient(180deg,
      rgba(241,234,215,.95) 0%,
      rgba(241,234,215,.85) 35%,
      rgba(241,234,215,.40) 70%,
      rgba(241,234,215,0) 100%),
    radial-gradient(ellipse 75% 90% at 5% 25%,
      rgba(241,234,215,.85) 0%,
      rgba(241,234,215,.30) 50%,
      rgba(241,234,215,0) 80%);
  padding-top:78px;padding-bottom:14px;
}
.v3-onb-hero p{color:#3c2516 !important}

/* Splash DEEPLY — even darker italic */
.v3-splash-headline i{
  background:linear-gradient(180deg,#8b5e3c 0%,#5e3a20 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

/* ============================================================
   V3 polish pass 3 — match ref's frosted-glass card transparency.
   Ref shows ~55% gray frosted card; we were at 92% cream which
   read as a solid panel. Drop opacity so the photo glows through.
   ============================================================ */
.v3-onb-card{
  background:linear-gradient(180deg,
    rgba(170,150,130,.55) 0%,
    rgba(170,150,130,.70) 100%);
  backdrop-filter:blur(22px) saturate(1.05);
  -webkit-backdrop-filter:blur(22px) saturate(1.05);
}
.v3-onb-card .v3-onb-label{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.18)}
.v3-onb-type{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22);color:#fff}
.v3-onb-type:hover{background:rgba(255,255,255,.28)}
.v3-onb-type.on{background:#dcb195;border-color:#a87555;color:#1a1612}
.v3-onb-gender{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22);color:#fff}
.v3-onb-gender.on{background:#dcb195;border-color:#a87555;color:#1a1612}
.v3-onb-input{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.28);
  color:#fff;
}
.v3-onb-input::placeholder{color:rgba(255,255,255,.65)}
.v3-onb-input:focus{background:rgba(255,255,255,.40);border-color:#fff}
.v3-onb-input-row .ico{color:rgba(255,255,255,.75)}
/* On step3 the cards (white "Birth Information" / "Save your journey") need
   to remain solid white — they're stacked panels, not floating fields. */
.v3-onb-birth-block, .v3-onb-account-block{
  background:rgba(255,255,255,.92);
}
.v3-onb-birth-block .v3-onb-input,
.v3-onb-account-block .v3-onb-input{
  background:rgba(241,234,215,.55);
  border-color:rgba(26,22,18,.10);color:#1a1612;
}
.v3-onb-birth-block .v3-onb-input::placeholder,
.v3-onb-account-block .v3-onb-input::placeholder{color:rgba(26,22,18,.45)}
.v3-onb-birth-block .v3-onb-input:focus,
.v3-onb-account-block .v3-onb-input:focus{
  background:#fff;border-color:#a87555;
}
.v3-onb-birth-block .v3-onb-input-row .ico,
.v3-onb-account-block .v3-onb-input-row .ico{color:rgba(26,22,18,.55)}

/* ============================================================
   V3 splash — rework to match ref (image #28) more closely.
   Lighter / airier feel, smaller type, chips wrapped in a
   rounded outline pill, photo dominates the upper ~2/3.
   ============================================================ */
.v3-splash-bg::after{
  /* Lighter white fade — less cream, more airy. Photo dominates
     the upper 65% of the screen; the bottom fades to soft cream. */
  background:linear-gradient(180deg,
    rgba(255,253,247,0) 0%,
    rgba(255,253,247,0) 50%,
    rgba(255,253,247,.40) 62%,
    rgba(255,253,247,.85) 74%,
    #fdfaf2 84%) !important;
}
.v3-splash{background:#fdfaf2}
.v3-splash-foot{background:#fdfaf2}

/* Wordmark: brighter copper, slightly smaller */
.v3-splash-brand h1{
  font-size:18px;font-weight:700;letter-spacing:.04em;
  color:#a87555;
  text-shadow:0 1px 4px rgba(255,253,247,.7);
  line-height:1.05;
}
.v3-splash-brand .sub{
  margin-top:4px;font-size:8.5px;letter-spacing:.30em;
  color:rgba(26,22,18,.62);
  font-weight:500;
}
.v3-splash-brand .line{margin-top:5px;width:32px;height:1.5px;background:#c89878}

/* Account icon: hollow circle, no opaque bg */

/* Hero: smaller headline. Sits lower on the screen so the photo gets
   more vertical real estate. */
.v3-splash-hero{padding:0 22px 14px}
.v3-splash-headline{
  font-size:26px;line-height:1.02;
  font-weight:700;letter-spacing:-.018em;
  color:#1a1612;
}
.v3-splash-headline i{
  font-size:.95em;
  background:linear-gradient(180deg,#c89878 0%,#9e6b48 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-splash-sub{
  margin-top:10px;font-size:15px;letter-spacing:.04em;
  font-weight:500;color:#1a1612;
}
.v3-splash-tag{
  margin-top:8px;font-size:13.5px;line-height:1.4;
  color:rgba(26,22,18,.72);max-width:340px;
}
.v3-splash-tag u{
  color:#c89878;
  border-bottom:none;font-weight:400;
}

/* CTA: slightly smaller, more subtle copper, arrow on right */
.v3-splash-cta{
  margin-top:16px;
  padding:16px 22px;
  font-size:13px;letter-spacing:.16em;
  background:linear-gradient(180deg,#d8a78a 0%,#b8825c 100%);
  box-shadow:0 8px 20px rgba(168,117,85,.22), inset 0 1px 0 rgba(255,255,255,.30);
  justify-content:space-between;
}
.v3-splash-cta span{flex:1;text-align:center}
.v3-splash-cta svg{width:18px;height:18px;flex-shrink:0}

/* Chips: wrap in a rounded outline pill, 4 in one row, no separators */
.v3-splash-chips{
  margin-top:12px;
  padding:11px 16px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(168,117,85,.22);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(60,40,20,.06);
  gap:6px 12px;flex-wrap:nowrap;justify-content:space-around;
  font-size:11.5px;font-weight:500;color:#1a1612;
}
.v3-splash-chips .ch{gap:5px;font-weight:500}
.v3-splash-chips .ch svg{width:14px;height:14px;color:#a87555}
.v3-splash-chips .sep{display:none}

/* Footer: smaller, no bg block — sits flush in the splash */
.v3-splash-foot{
  padding:10px 22px 16px;
  font-size:11px;color:rgba(26,22,18,.55);
  background:transparent;
}
.v3-splash-foot b{color:#a87555;font-weight:600}

@media (min-width:900px){
  .v3-splash-headline{font-size:60px}
  .v3-splash-sub{font-size:18px}
  .v3-splash-tag{font-size:14.5px;max-width:480px}
  .v3-splash-hero{padding:0 60px 24px;max-width:680px;margin-left:0;margin-right:auto}
  .v3-splash-cta{max-width:520px;padding:18px 24px}
  .v3-splash-chips{max-width:520px;margin-left:0;margin-right:auto;justify-content:space-between}
  .v3-splash-foot{padding:10px 60px 18px;justify-content:flex-start}
}

/* ============================================================
   V3 splash polish 2 — fix DEEPLY contrast + scrim start.
   ============================================================ */
.v3-splash-bg::after{
  background:linear-gradient(180deg,
    rgba(255,253,247,0) 0%,
    rgba(255,253,247,0) 38%,
    rgba(255,253,247,.55) 52%,
    rgba(255,253,247,.92) 66%,
    #fdfaf2 78%) !important;
}
/* Headline: solid black, text-shadow for crisp edges on photo bleed */
.v3-splash-headline{
  text-shadow:0 1px 8px rgba(255,253,247,.65), 0 0 22px rgba(255,253,247,.55);
}
/* DEEPLY italic — solid darker copper (no gradient clip = no photo bleed) */
.v3-splash-headline i{
  background:none !important;
  -webkit-background-clip:initial;-webkit-text-fill-color:initial;
  background-clip:initial;
  color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,253,247,.7), 0 0 16px rgba(255,253,247,.55);
}
.v3-splash-sub{text-shadow:0 1px 6px rgba(255,253,247,.6)}
.v3-splash-tag{text-shadow:0 1px 4px rgba(255,253,247,.55)}

/* ============================================================
   V3 splash polish 3 — wordmark contrast over bright sky.
   ============================================================ */
/* Soft cream-white panel behind the wordmark area top-left so the
   copper title + sub never collide with a busy sky/photo. */
.v3-splash-top::before{
  content:"";position:absolute;top:0;left:0;
  width:260px;height:140px;
  background:radial-gradient(ellipse 70% 90% at 30% 30%,
    rgba(255,253,247,.85) 0%,
    rgba(255,253,247,.5) 45%,
    rgba(255,253,247,0) 80%);
  z-index:1;pointer-events:none;
}
.v3-splash-top > *{position:relative;z-index:2}
.v3-splash-brand h1{text-shadow:0 1px 8px rgba(255,253,247,.7), 0 0 16px rgba(255,253,247,.45)}
.v3-splash-brand .sub{text-shadow:0 1px 6px rgba(255,253,247,.6)}

/* ============================================================
   V3 onboarding step 1 — restructure: photo TOP, headline overlay
   bottom-left of photo, card at BOTTOM only. Matches ref #31.
   ============================================================ */
.v3-onb{
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#fdfaf2;
}
/* BG image now only covers TOP HALF of screen so the card can sit at the
   bottom without compressing the photo. */
.v3-onb-bg{
  position:absolute;top:0;left:0;right:0;
  height:58vh;height:58dvh;
  bottom:auto !important;
  background-size:cover;background-position:center top;
  z-index:1;
}
/* Soft white fade at the very bottom of the photo so the headline reads
   cleanly when it sits over the lower portion of the image. */
.v3-onb-bg::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,
    rgba(40,30,20,0) 0%,
    rgba(40,30,20,.25) 55%,
    rgba(40,30,20,.55) 90%,
    rgba(40,30,20,.65) 100%);
  pointer-events:none;
}
/* Soft tan transition between photo and card (no harsh edge) */
.v3-onb-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(180deg,rgba(40,30,20,0),rgba(40,30,20,.10));
  pointer-events:none;
}

/* Hero text now WHITE, overlaid on the bottom-left of the photo. */
.v3-onb-hero{
  position:absolute;z-index:3;
  top:auto !important;
  bottom:calc(42vh + 8px);
  left:0;right:0;
  padding:0 22px 22px;
  background:none !important;
  pointer-events:none;
}
.v3-onb-hero h1{
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  font-size:30px;line-height:1.05;
}
.v3-onb-hero h1 i{
  color:#f0c8a6 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45) !important;
  background:none !important;-webkit-text-fill-color:initial;
}
.v3-onb-hero p{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  font-size:14px;line-height:1.4;
  margin-top:6px;
}
.v3-onb-hero .privacy{color:rgba(255,255,255,.92) !important}
.v3-onb-hero .privacy svg{color:#f0c8a6 !important}

/* Card: short, fixed at bottom. Reduced padding for compact layout. */
.v3-onb-card{
  position:relative;z-index:3;
  margin-top:0;
  padding:18px 18px 18px;
  border-top-left-radius:24px;border-top-right-radius:24px;
}
.v3-onb-section{margin-bottom:14px}

/* Step 1-specific overrides so the card height stays predictable.
   Photo height bumped 42vh -> 48vh so the photo extends down to meet the card
   (closes the cream gap between them; a small overlap just tucks the card's
   rounded top onto the photo). Hero text stays pinned near the photo's lower
   third (bottom:calc(52vh + 8px) = ~48vh from the top). */
#view-onb-v3 .v3-onb-bg.is-step1{height:48vh;height:48dvh}
#view-onb-v3 .v3-onb-bg.is-step1 + .v3-onb-back ~ * .v3-onb-hero,
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  bottom:calc(52vh + 8px);
}

/* Soft brand-cream backdrop behind the back button so it doesn't blend
   into a dark photo area. */
.v3-onb-back{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
}

/* Step 2 / step 3 keep their existing layouts (presence has no photo
   overlap; step 3 still uses split cream cards). Resetting step3 hero
   back to dark text on cream scrim since it sits over a tall photo. */
#view-onb-v3 .v3-onb-bg.is-step3{height:40vh;height:40dvh}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;bottom:auto;
  padding:78px 22px 14px;
  background:linear-gradient(180deg,
    rgba(253,250,242,.95) 0%,
    rgba(253,250,242,.78) 55%,
    rgba(253,250,242,.30) 100%);
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;text-shadow:0 1px 8px rgba(255,253,247,.55);
  font-size:28px;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,253,247,.6) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#3c2516 !important;text-shadow:0 1px 4px rgba(255,253,247,.45);
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy svg{color:#a87555 !important}

/* ============================================================
   Reset previous attempt — pure step1 layout via direct selectors.
   ============================================================ */
/* Common: card pinned at bottom, photo absolute behind */
.v3-onb{display:flex;flex-direction:column;background:#fdfaf2;justify-content:flex-end}
.v3-onb-bg{position:absolute;inset:0;z-index:1}
#onbV3Stage{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Step 1: photo TOP-HALF, headline overlay bottom of photo, card BOTTOM */
#view-onb-v3 .v3-onb-bg.is-step1{
  height:50vh;height:50dvh;
  bottom:auto;
  background-position:center 30%;
}
/* Dark scrim at bottom of photo for white text legibility */
.v3-onb-bg.is-step1::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg,
    rgba(20,15,10,0) 0%,
    rgba(20,15,10,.15) 45%,
    rgba(20,15,10,.55) 85%,
    rgba(20,15,10,.75) 100%);
}

/* Step 1 hero — sits at the bottom of the photo as a WHITE overlay */
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  margin-top:calc(50vh - 130px);
  margin-top:calc(50dvh - 130px);
  background:none;
  padding:0 22px 14px;
  z-index:3;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff;font-size:30px;line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.35);
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#f3c8a5 !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.35) !important;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  font-size:14px;line-height:1.4;margin-top:6px;
}

/* Step 3: photo 30vh top, hero text DARK on cream scrim, panels below */
#view-onb-v3 .v3-onb-bg.is-step3{height:40vh;height:40dvh;bottom:auto}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;margin-top:0;
  padding:78px 22px 18px;
  background:linear-gradient(180deg,
    rgba(253,250,242,0) 0%,
    rgba(253,250,242,.55) 35%,
    rgba(253,250,242,.92) 65%,
    #fdfaf2 100%);
  z-index:3;
}

/* Step 2 (presence): full cream bg, no photo overlay (existing behavior) */

/* All steps' BACK button gets a white pill background */
.v3-onb-back{background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.7)}

/* ============================================================
   V3 onb step1 — clean rewrite. Removes flex conflicts; uses
   absolute positioning for the photo + hero overlay, with the
   card pushed down via padding-top in normal flow.
   ============================================================ */
.v3-onb{
  display:block !important;
  position:relative;
  min-height:100vh;min-height:100dvh;
  background:#fdfaf2;
}
#onbV3Stage{
  display:block !important;
  position:relative;z-index:2;
  min-height:auto !important;
}

/* === Step 1 === */
#view-onb-v3 .v3-onb-bg.is-step1{
  position:absolute;top:0;left:0;right:0;bottom:auto !important;
  height:50vh;height:50dvh;
  background-position:center 32%;
  z-index:1;
}
/* Dark gradient at bottom of photo so the white hero text reads */
.v3-onb-bg.is-step1::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:55%;
  background:linear-gradient(180deg,
    rgba(20,15,10,0) 0%,
    rgba(20,15,10,.20) 50%,
    rgba(20,15,10,.65) 90%,
    rgba(20,15,10,.78) 100%);
  pointer-events:none;
}

/* Stage pushed below the photo. Hero gets a NEGATIVE margin so it lifts
   into the photo's lower fade. */
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage{
  padding-top:50vh;padding-top:50dvh;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage > div > .v3-onb-hero,
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  margin-top:-150px !important;
  padding:0 22px 18px !important;
  background:none !important;
  z-index:5;
  pointer-events:auto;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff !important;font-size:28px;line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 26px rgba(0,0,0,.4) !important;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#f3c8a5 !important;
  background:none !important;-webkit-text-fill-color:initial !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35) !important;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.95) !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{
  height:30vh;height:30dvh;bottom:auto !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{padding-top:18vh;padding-top:18dvh}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;margin-top:0 !important;
  padding:24px 22px 18px !important;
  background:linear-gradient(180deg,
    rgba(253,250,242,.95) 35%,
    #fdfaf2 100%) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;
  text-shadow:0 1px 8px rgba(255,253,247,.55) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;background:none !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:0 1px 8px rgba(255,253,247,.6) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#3c2516 !important;text-shadow:none !important;
  font-size:13px !important;
}