/* ============================================================================
   inside.live — SHARED ONBOARDING styles (the "get your free page" sheet).
   Host-neutral: every rule keys off the .ob-sheet host class, so any page can
   host the flow (home's #join, and later the viewer's #freeDetail) by putting
   class="… ob-sheet" on its sheet element. Onboarding-specific tokens are
   scoped to .ob-sheet; app tokens (--cream, --font-text, --ctar, …) come from
   the host page's :root. Paired with /viewer/onboarding.js.
   Lifted from home/index.html (the ob-* rules), .join → .ob-sheet.
   ========================================================================== */
.ob-sheet{ /* onboarding-scoped design tokens (was in the page :root) */
  --ob-scrim-top:0.72; --ob-scrim-mid:0.30; --ob-scrim-bot:0.86;
  --ob-glass:rgba(16,12,9,0.42); --ob-glass-line:rgba(255,255,255,0.16); }

.ob-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:0; transition:opacity .45s ease; } /* baked-blur grounds — one per slide, crossfaded via data-obstep */
.ob-sheet[data-obstep="1"] .ob-bg1,.ob-sheet[data-obstep="2"] .ob-bg2,.ob-sheet[data-obstep="3"] .ob-bg3{ opacity:1; }
.ob-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,6,4,var(--ob-scrim-top)) 0%, rgba(8,6,4,var(--ob-scrim-mid)) 32%, rgba(8,6,4,var(--ob-scrim-mid)) 60%, rgba(8,6,4,var(--ob-scrim-bot)) 100%); }
.ob-notch{ position:relative; z-index:2; flex-shrink:0; height:32px; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.ob-notch::before{ content:''; position:absolute; left:0; right:0; top:-6px; bottom:-6px; } /* 44px hit zone */
.notch-pill{ width:38px; height:3px; border-radius:1.5px; background:rgba(255,255,255,0.3); transition:background .16s ease, width .16s ease; }
.ob-notch:active .notch-pill{ background:rgba(255,255,255,0.6); width:44px; }
.ob-progress{ position:relative; z-index:2; flex-shrink:0; display:flex; gap:5px; margin:6px 0 16px; }
.ob-progress span{ flex:1; height:2px; border-radius:999px; background:rgba(255,255,255,0.28); transition:background .3s ease; }
.ob-progress span.on{ background:#fff; }
.ob-brand{ position:relative; z-index:2; flex-shrink:0; display:flex; align-items:center; gap:9px; margin:2px 0 14px; max-height:40px;
  transition:opacity .2s ease, max-height .25s ease, margin .25s ease, transform .25s ease; }
.ob-logo{ width:26px; height:26px; border-radius:50%; -webkit-user-drag:none; user-select:none; box-shadow:0 0 0 1.5px rgba(var(--cream-rgb),0.85), 0 2px 7px rgba(0,0,0,0.35); }
.ob-word{ font-size:15px; font-weight:600; letter-spacing:0.2px; color:#fff; }
.ob-sheet.kb .ob-brand{ opacity:0; max-height:0; margin:0; transform:translateY(-6px); pointer-events:none; }
.ob-steps{ position:relative; z-index:2; flex:1; min-height:0; }
.ob-step{ position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateX(44px); pointer-events:none; visibility:hidden;
  transition:opacity .22s ease, transform .24s cubic-bezier(.4,0,.6,1), visibility 0s linear .24s; }
.ob-step.prev{ transform:translateX(-44px); }
.ob-sheet.open .ob-step.active{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.9,.25,1), visibility 0s; }
.ob-lede{ flex-shrink:0; margin-top:auto; }
.ob-head{ margin-top:6px; font-size:var(--t-display); font-weight:700; line-height:1.1; letter-spacing:var(--track-display); color:#fff; text-shadow:0 1px 14px rgba(0,0,0,0.45); }
.ob-head-lg{ font-size:38px; line-height:1.04; }
.ob-sub{ margin-top:10px; font-family:var(--font-text); font-size:var(--fs-body); font-weight:var(--fw-body); line-height:1.5; color:rgba(255,255,255,0.74); text-wrap:pretty; text-shadow:0 1px 10px rgba(0,0,0,0.4); }
.ob-grid{ flex-shrink:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.ob-chip{ display:flex; align-items:center; justify-content:center; padding:16px 12px; border:0; border-radius:16px; cursor:pointer; -webkit-appearance:none; text-align:center;
  background:var(--ob-glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px var(--ob-glass-line); color:#fff;
  font-size:14px; font-weight:600; transition:transform .14s cubic-bezier(.2,.7,.2,1), background .18s ease, color .18s ease, box-shadow .18s ease; }
.ob-chip:active{ transform:scale(0.96); }
.ob-chip.sel{ background:var(--cream); color:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,0.28); }
.ob-grow{ flex:1 1 0; min-height:0; }
.ob-cluster{ flex-shrink:0; text-align:center; }
#obStep2 .ob-head{ font-size:30px; }
.ob-fields{ margin-top:20px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.ob-input{ width:100%; padding:15px 16px; border:0; border-radius:15px; -webkit-appearance:none; appearance:none;
  background:rgba(26,20,15,0.52); box-shadow:inset 0 0 0 1px var(--ob-glass-line); color:#fff; caret-color:var(--cream);
  font-family:var(--font-text); font-size:16px; font-weight:var(--fw-body); } /* 16px MIN — smaller triggers iOS focus-zoom */
.ob-input::placeholder{ color:rgba(255,255,255,0.44); }
.ob-input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px rgba(var(--cream-rgb),0.65); }
.ob-input.bad{ box-shadow:inset 0 0 0 1.5px var(--hot); }
.ob-input:-webkit-autofill,.ob-input:-webkit-autofill:hover,.ob-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff; caret-color:#fff; transition:background-color 999999s ease-in-out 0s; box-shadow:inset 0 0 0 1px var(--ob-glass-line); }
.ob-err{ flex-shrink:0; margin-top:10px; text-align:center; font-family:var(--font-text); font-size:12px; font-weight:600; color:var(--hot); display:none; }
.ob-step form{ display:flex; flex-direction:column; flex:1; min-height:0; }
.ob-cta{ flex-shrink:0; margin-top:16px; padding:16px; border:0; border-radius:var(--ctar); width:100%;
  background:var(--cream); color:var(--ink); text-align:center; font-size:var(--t-title); font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.28); -webkit-appearance:none; transition:transform .14s cubic-bezier(.2,.7,.2,1), opacity .18s ease; }
.ob-cta:active{ transform:scale(0.97); }
.ob-cta:disabled{ opacity:0.35; pointer-events:none; }
.ob-cta.ghost{ background:rgba(255,255,255,0.08); background-repeat:no-repeat; background-size:100% 100%; color:var(--cream); box-shadow:none; } /* secondary — GLASS capsule: the frost fill + white hairline are ONE inline-SVG background painted by the page's CTA capsule script (single vector AA pass — a border/box-shadow/::after-ring all break on the capsule clip). The color here is the no-JS fallback pill; no backdrop-filter — no clip-path to bound it, and the sheet's ground is already a baked blur. */
.ob-trust{ flex-shrink:0; margin-top:10px; text-align:center; font-family:var(--font-text); font-size:12px; font-weight:var(--fw-body); color:rgba(255,255,255,0.55); max-height:24px;
  transition:opacity .2s ease, max-height .25s ease, margin .25s ease; }
.ob-sheet.kb .ob-trust{ opacity:0; max-height:0; margin:0; }
.ob-sheet.kb .ob-progress{ margin-bottom:6px; }
.ob-sheet.kb #obStep2 .ob-head{ font-size:20px; }
.ob-sheet.kb .ob-fields{ margin-top:12px; gap:8px; }
.ob-sheet.kb .ob-input{ padding:11px 16px; }
.ob-sheet.kb .ob-cta{ margin-top:12px; padding:12px; }
.ob-step3{ justify-content:flex-end; }
.ob-step3 .ob-head{ font-size:38px; line-height:1.04; }
.ob-step3 .ob-cta{ margin-top:22px; }

/* ── accessibility prefs (same coverage as the product) ── */
@media(prefers-reduced-motion:reduce){
  .ob-sheet *{ transition:none !important; animation:none !important; } }
@media(prefers-reduced-transparency:reduce){
  .ob-chip{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(24,18,13,0.96); } } /* (ob-cta.ghost no longer carries a backdrop-filter — its glass is a baked SVG background) */
@media(prefers-contrast:more){
  .ob-input,.ob-chip{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.6); }
  .ob-trust{ color:rgba(255,255,255,0.85); } }