/* Sign-in v2 and business onboarding (owner, 2026-09-26: "Let's build All",
   from the Reachly Sign-in canvas). Drawn by /ui/auth2.js (the sign-in
   screen) and /ui/onboarding.js (verify, setting up, six questions, ready).
   Behind REACHLY_ONBOARDING_V2; with it off the old screen is drawn instead.

   The site's daylight system, not the app theme: paper #FDFCFA, Fraunces over
   Instrument Sans, black pill buttons, coral held back for the moments the AI
   finds someone. The one dark surface is the AI's (the app's rule for AI
   zones). Every class is new (a2-, ob-) because reachly-b2b-theme.css styles
   the old .auth-* classes with !important, and a shared name would fight it. */

.a2-overlay, .ob {
  --a2-paper: #FDFCFA; --a2-paper2: #F6F4EF; --a2-card: #FFFFFF;
  --a2-ink: #111114; --a2-ink2: #5F5F66; --a2-line: #ECEAE4; --a2-line2: #E0DCD3;
  --a2-coral: #FF5C3D; --a2-coral-deep: #E8492B; --a2-coral-text: #B93520; --a2-coral-soft: #FFF1EE; --a2-coral-line: #F8D5CA;
  --a2-eng: #14161D; --a2-eng2: #1C1F29; --a2-on: #F3F1EC; --a2-on2: #A6ABB8; --a2-eline: rgba(255,255,255,.08);
  --a2-wa: #DCF6D0; --a2-wa-ink: #14351C; --a2-ok: #1E7A45; --a2-ok-soft: #E5F4E4; --a2-warn-soft: #FCF3DE; --a2-warn-ink: #7A4A06;
  --a2-serif: 'Fraunces', Georgia, serif; --a2-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --a2-mono: 'DM Mono', ui-monospace, monospace;
  font-family: var(--a2-sans); color: var(--a2-ink); -webkit-font-smoothing: antialiased;
}
.a2-overlay *, .ob * { box-sizing: border-box; }
.a2-overlay a, .ob a { color: var(--a2-coral-text); text-decoration: none; font-weight: 600; }
.a2-overlay a:hover, .ob a:hover { color: #8F2816; }
.a2-overlay :focus-visible, .ob :focus-visible { outline: 2px solid var(--a2-coral); outline-offset: 3px; }
.a2-overlay button, .ob button { font-family: inherit; }

/* ── the sign-in overlay: brand panel left, the form right ─────────────── */
.a2-overlay { position: fixed; inset: 0; z-index: 10000; display: none; background: var(--a2-card); overflow: hidden; }
.a2-overlay.active { display: block; }
.a2-card { height: 100dvh; min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 940px) { .a2-card { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }

.a2-show { display: none; position: relative; flex-direction: column; height: 100%; padding: 40px clamp(32px, 4vw, 56px) 34px; background: var(--a2-paper); border-right: 1px solid var(--a2-line); overflow: hidden; }
@media (min-width: 940px) { .a2-show { display: flex; } }
.a2-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 44% at 18% 0%, #FFEFE7 0%, rgba(255,239,231,0) 100%), radial-gradient(48% 40% at 96% 92%, #EDF3FC 0%, rgba(237,243,252,0) 100%); }
.a2-show > *:not(.a2-wash) { position: relative; }
.a2-mark { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--a2-ink); }
.a2-mark i { font-style: normal; font-weight: 500; color: var(--a2-ink2); }
.a2-mark svg { flex: none; }
.a2-orbit { transform-origin: 16px 16px; animation: a2Orbit 18s linear infinite; }
@keyframes a2Orbit { to { transform: rotate(360deg); } }
.a2-lead { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.a2-claim { margin: 0; max-width: 560px; font-family: var(--a2-serif); font-weight: 420; font-size: clamp(34px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.022em; color: var(--a2-ink); text-wrap: balance; font-variation-settings: 'opsz' 144; }
.a2-claim em, .a2-title em, .ob-title em { font-style: italic; font-weight: 470; color: var(--a2-coral-deep); }
.a2-say { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--a2-ink2); }
.a2-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--a2-ink2); }

/* The engine: one 12-second story (auth2.js writes the per-dot and per-word
   timings; the rest is fixed here). */
.a2-engine { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 26px; padding: 16px 20px 18px; border-radius: 24px; background: var(--a2-eng); border: 1px solid #20242F; box-shadow: 0 40px 80px -40px rgba(17,17,20,.55), 0 2px 6px rgba(17,17,20,.12); overflow: hidden; color: var(--a2-on); }
.a2-glow { position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 999px; background: radial-gradient(closest-side, rgba(255,92,61,.30), rgba(255,92,61,0)); pointer-events: none; animation: a2Breathe 6s ease-in-out infinite alternate; }
@keyframes a2Breathe { from { opacity: .55; } to { opacity: .95; } }
.a2-ehead { position: relative; display: flex; align-items: center; gap: 10px; }
.a2-etile { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,92,61,.14); color: #FF9A85; flex: none; }
.a2-elabel { font-family: var(--a2-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--a2-on); }
.a2-live { width: 7px; height: 7px; border-radius: 999px; background: var(--a2-coral); animation: a2Pulse 1.8s ease-out infinite; flex: none; }
@keyframes a2Pulse { 0% { box-shadow: 0 0 0 0 rgba(255,92,61,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,92,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,92,61,0); } }
.a2-status { position: relative; display: grid; flex: 1; min-width: 0; font-size: 13px; }
.a2-status > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a2-sta { color: var(--a2-on2); opacity: 0; animation: a2Sta 12s linear infinite; }
.a2-stb { color: var(--a2-on); animation: a2Stb 12s linear infinite; }
.a2-stb b { font-weight: 600; }
@keyframes a2Sta { 0% { opacity: 1; } 27.5% { opacity: 1; } 30% { opacity: 0; } 96.67% { opacity: 0; } 100% { opacity: 1; } }
@keyframes a2Stb { 0% { opacity: 0; } 30% { opacity: 0; } 32.5% { opacity: 1; } 91.67% { opacity: 1; } 95.83% { opacity: 0; } 100% { opacity: 0; } }
.a2-today { font-family: var(--a2-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--a2-on2); }
.a2-field { position: relative; height: 74px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--a2-eline); overflow: hidden; }
.a2-dot { position: absolute; width: 3px; height: 3px; border-radius: 999px; background: #8C91A0; opacity: .26; animation: a2DotPass 12s linear infinite both; }
@keyframes a2DotPass { 0% { opacity: .26; transform: scale(1); } 1.6% { opacity: .95; transform: scale(1.8); } 5% { opacity: .26; transform: scale(1); } 100% { opacity: .26; transform: scale(1); } }
.a2-lit { position: absolute; width: 3px; height: 3px; border-radius: 999px; background: var(--a2-coral); transform: scale(2.1); box-shadow: 0 0 0 3px rgba(255,92,61,.22), 0 0 12px 2px rgba(255,92,61,.65); }
.a2-rip { position: absolute; width: 12px; height: 12px; border-radius: 999px; border: 1.5px solid var(--a2-coral); opacity: 0; }
.a2-beam { position: absolute; left: 0; top: 0; bottom: 0; width: 160px; opacity: 0; background: linear-gradient(90deg, rgba(255,92,61,0), rgba(255,92,61,.10) 75%, rgba(255,92,61,.55) 98%, #FF5C3D 100%); }
.a2-rows { position: relative; display: flex; flex-direction: column; gap: 7px; }
.a2-row { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--a2-eline); }
.a2-row.is-top { background: rgba(255,255,255,.07); border-color: rgba(255,92,61,.32); }
.a2-row:nth-child(1) { animation: a2Row0 12s cubic-bezier(.16,1,.3,1) infinite; }
.a2-row:nth-child(2) { animation: a2Row1 12s cubic-bezier(.16,1,.3,1) infinite; }
.a2-row:nth-child(3) { animation: a2Row2 12s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes a2Row0 { 0% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 31.67% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 36.25% { opacity: 1; filter: none; transform: none; } 91.67% { opacity: 1; filter: none; transform: none; } 95.83% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 100% { opacity: .16; filter: blur(3px); transform: translateY(4px); } }
@keyframes a2Row1 { 0% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 34.58% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 39.17% { opacity: 1; filter: none; transform: none; } 91.67% { opacity: 1; filter: none; transform: none; } 95.83% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 100% { opacity: .16; filter: blur(3px); transform: translateY(4px); } }
@keyframes a2Row2 { 0% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 37.5% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 42.08% { opacity: 1; filter: none; transform: none; } 91.67% { opacity: 1; filter: none; transform: none; } 95.83% { opacity: .16; filter: blur(3px); transform: translateY(4px); } 100% { opacity: .16; filter: blur(3px); transform: translateY(4px); } }
.a2-av { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; font-size: 11.5px; font-weight: 600; flex: none; }
.a2-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.a2-who b { font-size: 14px; font-weight: 600; color: var(--a2-on); }
.a2-who span { font-size: 12px; color: var(--a2-on2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a2-seg { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; }
.t-coral { background: rgba(255,92,61,.16); color: #FFB4A3; } .a2-av.t-coral { background: rgba(255,92,61,.18); }
.t-mint { background: rgba(95,210,140,.14); color: #9BE3B5; } .a2-av.t-mint { background: rgba(95,210,140,.16); }
.t-lilac { background: rgba(167,139,250,.16); color: #CDBDFF; } .a2-av.t-lilac { background: rgba(167,139,250,.18); }
@property --a2p { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --a2n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.a2-ring { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; flex: none; background: conic-gradient(var(--a2-coral) calc(var(--a2p) * 1%), rgba(255,255,255,.10) 0); }
.a2-num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--a2-eng2); font-family: var(--a2-serif); font-size: 13px; font-weight: 500; color: var(--a2-on); counter-reset: a2n var(--a2n); }
.a2-num::after { content: counter(a2n); }
.a2-draft { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px 14px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--a2-eline); animation: a2Draft 12s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes a2Draft { 0% { opacity: .14; filter: blur(3px); transform: translateY(4px); } 44.17% { opacity: .14; filter: blur(3px); transform: translateY(4px); } 47.92% { opacity: 1; filter: none; transform: none; } 91.67% { opacity: 1; filter: none; transform: none; } 95.83% { opacity: .14; filter: blur(3px); transform: translateY(4px); } 100% { opacity: .14; filter: blur(3px); transform: translateY(4px); } }
.a2-dhead { display: flex; align-items: center; gap: 8px; }
.a2-dhead .a2-today { font-size: 10.5px; letter-spacing: .12em; }
.a2-wachip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(95,210,140,.14); color: #9BE3B5; font-size: 11px; font-weight: 600; }
.a2-bubble { align-self: flex-end; max-width: 86%; padding: 9px 12px; border-radius: 14px 3px 14px 14px; background: var(--a2-wa); color: var(--a2-wa-ink); font-size: 13.5px; line-height: 1.45; }
.a2-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--a2-on2); animation: a2Meta 12s linear infinite; }
@keyframes a2Meta { 0% { opacity: 0; } 64.25% { opacity: 0; } 67.17% { opacity: 1; } 100% { opacity: 1; } }

/* ── the form side ─────────────────────────────────────────────────────── */
.a2-pane { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px clamp(20px, 4vw, 48px) 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--a2-card); }
.a2-top { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 44px; }
.a2-top .a2-mark { margin-right: auto; font-size: 18px; }
@media (min-width: 940px) { .a2-top .a2-mark { display: none; } }
.a2-switch { display: none; align-items: center; gap: 14px; font-size: 14px; color: var(--a2-ink2); }
.a2-overlay[data-mode="login"] .a2-switch[data-for="login"],
.a2-overlay[data-mode="register"] .a2-switch[data-for="register"],
.a2-overlay[data-mode="forgot"] .a2-switch[data-for="forgot"] { display: inline-flex; }
.a2-ghost { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--a2-line); background: var(--a2-card); color: var(--a2-ink) !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.a2-ghost:hover { background: var(--a2-paper2); border-color: var(--a2-line2); }
.a2-back { display: inline-flex; align-items: center; gap: 8px; height: 44px; color: var(--a2-ink) !important; font-size: 14px; }
.a2-main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin: 0 auto; padding: 20px 0; }
.a2-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.a2-eyebrow, .ob-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--a2-ink2); }
.a2-title { margin: 0; font-family: var(--a2-serif); font-weight: 420; font-size: 42px; line-height: 1.06; letter-spacing: -.022em; color: var(--a2-ink); text-wrap: balance; font-variation-settings: 'opsz' 144; }
.a2-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--a2-ink2); }
.a2-sub:empty { display: none; }
.a2-error { display: none; align-items: flex-start; gap: 10px; margin: -8px 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--a2-coral-soft); border: 1px solid var(--a2-coral-line); color: #8F2816; font-size: 14px; line-height: 1.45; }
.a2-error.active { display: flex; }
.a2-form { display: none; flex-direction: column; gap: 18px; }
.a2-form.active { display: flex; }
.a2-fld { display: flex; flex-direction: column; gap: 8px; }
.a2-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.a2-lrow label, .a2-fld > label, .ob label.ob-lbl { font-size: 13.5px; font-weight: 600; color: var(--a2-ink); }
.a2-lrow a { font-size: 13.5px; }
.a2-box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--a2-card); border: 1px solid var(--a2-line2); box-shadow: 0 1px 2px rgba(17,17,20,.04); color: var(--a2-ink2); transition: border-color .15s, box-shadow .15s; }
.a2-box.has-eye { padding-right: 4px; }
.a2-box:focus-within { border-color: var(--a2-coral); box-shadow: 0 0 0 4px rgba(255,92,61,.14); color: var(--a2-coral-deep); }
.a2-box input { flex: 1; min-width: 0; height: 50px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: var(--a2-ink); padding: 0; }
.a2-box input::placeholder { color: #8B8A91; }
.a2-box input.au-bad { color: var(--a2-ink); }
.a2-box:has(input.au-bad) { border-color: var(--a2-coral-deep); background: #FFF7F5; }
.a2-prefix { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 9px; background: var(--a2-paper2); font-size: 14px; font-weight: 600; color: var(--a2-ink); flex: none; }
.a2-eye { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--a2-ink2); cursor: pointer; flex: none; }
.a2-eye:hover { background: var(--a2-paper2); }
.a2-hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--a2-ink2); }
.a2-caps { display: none; align-self: flex-start; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 10px; background: var(--a2-warn-soft); color: var(--a2-warn-ink); font-size: 13px; font-weight: 500; }
.a2-caps.on { display: inline-flex; }
.a2-overlay .au-msg { display: none; font-size: 12.5px; color: #B8321C; }
.a2-overlay .au-msg.on { display: block; }
.a2-pill, .ob-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--a2-ink); color: var(--a2-paper) !important; font-family: var(--a2-sans); font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 22px -14px rgba(17,17,20,.6); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.a2-pill:hover:not(:disabled), .ob-pill:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(17,17,20,.55); }
.a2-pill .rl-ic, .ob-pill .rl-ic { transition: transform .18s ease; }
.a2-pill:hover:not(:disabled) .rl-ic, .ob-pill:hover:not(:disabled) .rl-ic { transform: translateX(3px); }
.a2-pill:disabled, .ob-pill:disabled { cursor: wait; background: #2A2A30; }
.a2-pill.is-busy .rl-ic, .ob-pill.is-busy .rl-ic { display: none; }
.a2-pill.is-busy::before, .ob-pill.is-busy::before { content: ''; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(253,252,250,.3); border-top-color: var(--a2-paper); animation: a2Spin .9s linear infinite; }
@keyframes a2Spin { to { transform: rotate(360deg); } }
.a2-wanote { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--a2-ink2); }
.a2-wanote b { color: var(--a2-ink); font-weight: 600; }
.a2-watile { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--a2-ok-soft); color: var(--a2-ok); flex: none; }
.a2-center { text-align: center; font-size: 14px; color: var(--a2-ink2); }

/* sign-up steps (wireRegisterSteps drives .au-step / .au-prog i / .au-kopt) */
.a2-overlay .au-prog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.a2-overlay .au-prog i { height: 4px; border-radius: 999px; background: var(--a2-line); transition: background .3s ease; }
.a2-overlay .au-prog i.on { background: var(--a2-ink); }
/* four steps: about you, the code, the password, the business. With no code
   to send the code step is skipped, and its bar with it. */
.a2-overlay .au-prog.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a2-overlay #registerForm[data-nocode="1"] .au-prog.is-four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a2-overlay #registerForm[data-nocode="1"] .au-prog.is-four i:nth-child(2) { display: none; }
.a2-overlay .a2-linkbtn { height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--a2-coral-text); font-variant-numeric: tabular-nums; }
.a2-overlay .a2-linkbtn:hover { color: #8F2816; }
.a2-overlay .a2-linkbtn:disabled { color: var(--a2-ink2); font-weight: 500; cursor: default; }
.a2-overlay .a2-later { align-self: center; }
.a2-steprow { display: flex; align-items: center; justify-content: space-between; }
.a2-overlay .au-step { display: none; flex-direction: column; gap: 16px; }
.a2-overlay .au-step.active { display: flex; animation: a2In .32s cubic-bezier(.16,1,.3,1); }
@keyframes a2In { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.a2-overlay .au-steph { font-size: 13px; color: var(--a2-ink2); }
.a2-overlay .au-hint { font-weight: 500; color: var(--a2-ink2); }
.a2-overlay .au-hint::before { content: '· '; }
.a2-overlay .au-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a2-overlay .au-kopt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 64px; padding: 16px; border-radius: 16px; border: 1px solid var(--a2-line2); background: var(--a2-card); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.a2-overlay .au-kopt:hover { border-color: #CFCAC0; }
.a2-overlay .au-kopt.on { border: 1.5px solid var(--a2-ink); background: var(--a2-paper2); }
.a2-overlay .au-kopt b { font-size: 14.5px; font-weight: 600; color: var(--a2-ink); }
.a2-overlay .au-kopt span.k-sub { font-size: 12.5px; line-height: 1.4; color: var(--a2-ink2); }
.a2-ktile { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--a2-paper2); color: var(--a2-ink2); }
.a2-overlay .au-kopt.on .a2-ktile { background: var(--a2-ink); color: var(--a2-paper); }
.a2-overlay .au-back { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--a2-ink2); }
.a2-overlay .au-back:hover { color: var(--a2-ink); }

/* the 6-box code, here and in onboarding (a real input sits under the boxes) */
.a2-otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.a2-otp input.a2-otp-real { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; cursor: text; }
.a2-otp span { display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 14px; border: 1.5px solid var(--a2-line2); background: var(--a2-card); font-family: var(--a2-serif); font-size: 26px; font-weight: 500; color: var(--a2-ink); pointer-events: none; transition: border-color .15s, box-shadow .15s; }
.a2-otp span.is-filled { border-color: var(--a2-ink); }
.a2-otp span.is-at { border-color: var(--a2-coral); box-shadow: 0 0 0 4px rgba(255,92,61,.14); }
.a2-otp span.is-at::after { content: ''; width: 2px; height: 26px; border-radius: 2px; background: var(--a2-ink); animation: a2Caret 1.05s steps(1) infinite; }
.a2-otp span.is-at.is-filled::after { display: none; }
@keyframes a2Caret { 50% { opacity: 0; } }
.a2-wacard { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--a2-card); border: 1px solid var(--a2-line); box-shadow: 0 18px 40px -22px rgba(17,17,20,.35), 0 1px 2px rgba(17,17,20,.05); animation: a2Note .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes a2Note { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.a2-wacard .a2-watile { width: 34px; height: 34px; border-radius: 11px; }
.a2-wacard b { display: block; font-size: 13px; font-weight: 600; color: var(--a2-ink); }
.a2-wacard span { font-size: 13.5px; color: var(--a2-ink2); }
.a2-rowlinks { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--a2-ink2); }

/* the phone: the engine becomes a strip where the three people take turns */
.a2-strip { display: none; }
@media (max-width: 939px) {
  /* The phone keeps the button and drops the question beside it. */
  .a2-switch { font-size: 0; gap: 0; }
  .a2-ghost { font-size: 14px; white-space: nowrap; height: 40px; padding: 0 14px; }
  .a2-strip { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 16px 16px 18px; border-radius: 22px; background: var(--a2-eng); border: 1px solid #20242F; box-shadow: 0 30px 60px -34px rgba(17,17,20,.55); position: relative; overflow: hidden; color: var(--a2-on); }
  .a2-overlay .a2-pane { background: var(--a2-paper); }
  .a2-main { justify-content: flex-start; padding-top: 22px; }
  .a2-title { font-size: 34px; }
  .a2-head { margin-bottom: 20px; }
}
.a2-srow { grid-area: 1 / 1; display: flex; align-items: center; gap: 11px; min-width: 0; opacity: 0; }
.a2-srows { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 80px; }
.a2-srow:nth-child(1) { opacity: 1; animation: a2S0 9s cubic-bezier(.16,1,.3,1) infinite; }
.a2-srow:nth-child(2) { animation: a2S1 9s cubic-bezier(.16,1,.3,1) infinite; }
.a2-srow:nth-child(3) { animation: a2S2 9s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes a2S0 { 0% { opacity: 1; transform: none; } 28.89% { opacity: 1; transform: none; } 33.33% { opacity: 0; transform: translateY(-8px); } 95% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes a2S1 { 0% { opacity: 0; transform: translateY(10px); } 28.89% { opacity: 0; transform: translateY(10px); } 33.89% { opacity: 1; transform: none; } 62.22% { opacity: 1; transform: none; } 66.67% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes a2S2 { 0% { opacity: 0; transform: translateY(10px); } 62.22% { opacity: 0; transform: translateY(10px); } 67.22% { opacity: 1; transform: none; } 95.56% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.a2-srow .a2-seg { margin-top: 4px; align-self: flex-start; height: 22px; font-size: 11px; }
.a2-srow .a2-ring { width: 44px; height: 44px; }
.a2-srow .a2-num { width: 35px; height: 35px; font-size: 15px; }

/* ── onboarding ───────────────────────────────────────────────────────── */
.ob { position: fixed; inset: 0; z-index: 10001; display: flex; flex-direction: column; background: var(--a2-paper); overflow: hidden; }
.ob-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 12% 0%, #FFEFE7 0%, rgba(255,239,231,0) 100%), radial-gradient(40% 36% at 100% 100%, #EDF3FC 0%, rgba(237,243,252,0) 100%); }
.ob-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--a2-line); background: rgba(253,252,250,.92); flex: none; }
.ob-bar .a2-mark { font-size: 19px; min-width: 150px; }
.ob-steps { display: flex; align-items: center; gap: 12px; }
.ob-step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--a2-ink2); }
.ob-step i { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--a2-line2); font-style: normal; font-size: 11px; font-weight: 600; color: var(--a2-ink2); }
.ob-step.is-done { color: var(--a2-ink); }
.ob-step.is-done i { border: 0; background: var(--a2-ink); color: var(--a2-paper); }
.ob-step.is-now { color: var(--a2-ink); font-weight: 600; }
.ob-step.is-now i { border-color: var(--a2-ink); background: var(--a2-card); color: var(--a2-ink); }
.ob-join { width: 36px; height: 1.5px; border-radius: 2px; background: var(--a2-line2); }
.ob-join.is-done { background: var(--a2-ink); }
.ob-later { min-width: 150px; display: flex; justify-content: flex-end; }
.ob-later button { height: 44px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--a2-ink2); }
.ob-later button:hover { color: var(--a2-ink); }
.ob-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ob-rise { animation: obRise .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes obRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* verify */
.ob-verify { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 32px 16px; }
.ob-rings { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }
.ob-rings span { position: absolute; border-radius: 999px; border: 1px dashed rgba(17,17,20,.08); }
.ob-rings .r1 { left: -470px; top: -470px; width: 940px; height: 940px; animation: a2Spin 70s linear infinite; }
.ob-rings .r2 { left: -330px; top: -330px; width: 660px; height: 660px; border-color: rgba(17,17,20,.07); animation: a2Spin 50s linear infinite reverse; }
.ob-rings .r1::after, .ob-rings .r2::after { content: ''; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 999px; background: var(--a2-coral); opacity: .5; }
.ob-rings .r2::after { background: #6B7280; top: 50%; left: -4px; margin: -4px 0 0; }
.ob-card { position: relative; display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 440px; padding: 34px 34px 30px; border-radius: 28px; background: rgba(255,255,255,.88); border: 1px solid var(--a2-line); box-shadow: 0 40px 80px -48px rgba(17,17,20,.35), 0 1px 2px rgba(17,17,20,.04); }
.ob-title { margin: 0; font-family: var(--a2-serif); font-weight: 420; font-size: 40px; line-height: 1.06; letter-spacing: -.022em; color: var(--a2-ink); text-wrap: balance; font-variation-settings: 'opsz' 144; }
.ob-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--a2-ink2); }
.ob-sub b { color: var(--a2-ink); font-weight: 600; }
.ob-msg { display: none; padding: 10px 12px; border-radius: 12px; background: var(--a2-coral-soft); border: 1px solid var(--a2-coral-line); color: #8F2816; font-size: 13.5px; }
.ob-msg.on { display: block; }
.ob-inline { display: flex; gap: 8px; }
.ob-inline .a2-box { flex: 1; }
.ob-inline button { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--a2-line2); background: var(--a2-card); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--a2-ink); }
.ob-linkbtn { height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--a2-coral-text); }
.ob-linkbtn:disabled { color: var(--a2-ink2); font-weight: 500; cursor: default; }

/* setting up — the engine turning on */
.ob.is-dark { background: #0E0F14; color: var(--a2-on); }
.ob.is-dark .ob-wash { display: none; }
.ob-setup { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 0 20px 36px; overflow: hidden; }
.ob-stars { position: absolute; inset: 0; pointer-events: none; }
.ob-stars span { position: absolute; width: 1px; height: 1px; border-radius: 999px; background: #C9CDD6; opacity: .35; }
.ob-stars span.tw { animation: obTw 4s ease-in-out infinite alternate; }
@keyframes obTw { from { opacity: .15; } to { opacity: .7; } }
.ob-sglow { position: absolute; left: 50%; top: 250px; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 999px; background: radial-gradient(closest-side, rgba(255,92,61,.20), rgba(255,92,61,0)); pointer-events: none; animation: a2Breathe 6s ease-in-out infinite alternate; }
.ob-stop { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; }
.ob-stop .a2-mark { color: var(--a2-on); }
.ob-stop .a2-mark i { color: var(--a2-on2); }
.ob-skip { display: inline-flex; align-items: center; gap: 6px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--a2-on2); }
.ob-skip:hover { color: var(--a2-on); }
.ob-orbit { position: relative; width: 420px; height: 420px; max-width: 92vw; max-height: 92vw; flex: none; }
.ob-orbit .pr { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 999px; border: 1px solid rgba(255,92,61,.4); animation: obRing 3.6s ease-out infinite; }
.ob-orbit .pr:nth-child(2) { animation-delay: 1.2s; } .ob-orbit .pr:nth-child(3) { animation-delay: 2.4s; }
@keyframes obRing { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
.ob-ring { position: absolute; left: 50%; top: 50%; border-radius: 999px; border: 1px dashed rgba(255,255,255,.14); }
.ob-ring.a { width: 340px; height: 340px; margin: -170px 0 0 -170px; animation: a2Spin 36s linear infinite; }
.ob-ring.b { width: 228px; height: 228px; margin: -114px 0 0 -114px; border-color: rgba(255,255,255,.12); animation: a2Spin 24s linear infinite reverse; }
.ob-ring.a .up { animation: a2Spin 36s linear infinite reverse; }
.ob-ring.b .up { animation: a2Spin 24s linear infinite; }
.ob-ag { position: absolute; }
.ob-ring.a .ob-ag.n { left: 50%; top: 0; transform: translate(-50%, -24px); }
.ob-ring.a .ob-ag.s { left: 50%; bottom: 0; transform: translate(-50%, 36px); }
.ob-ring.b .ob-ag.w { left: 0; top: 50%; transform: translate(-50%, -30px); }
.ob-ring.b .ob-ag.e { right: 0; top: 50%; transform: translate(50%, -30px); }
.ob-ag .up { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; font-size: 11.5px; color: var(--a2-on2); }
.ob-ag .dot { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #FFB4A3; transition: border-color .4s, background .4s, box-shadow .4s; }
.ob-ag.is-on .dot { border-color: var(--a2-coral); background: rgba(255,92,61,.16); box-shadow: 0 0 22px 2px rgba(255,92,61,.35); }
.ob-core { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--a2-paper); box-shadow: 0 0 0 10px rgba(255,92,61,.10), 0 0 60px 10px rgba(255,92,61,.35); }
.ob-stitle { position: relative; display: grid; margin-top: -6px; text-align: center; }
.ob-stitle h1 { grid-area: 1 / 1; margin: 0; font-family: var(--a2-serif); font-weight: 420; font-size: 40px; letter-spacing: -.02em; color: var(--a2-on); transition: opacity .5s, filter .5s; }
.ob-stitle h1 em { font-style: italic; color: #FF9A85; }
.ob-stitle h1.is-off { opacity: 0; filter: blur(6px); }
.ob-checks { position: relative; display: flex; flex-direction: column; width: 440px; max-width: 100%; margin-top: 22px; }
.ob-ck { display: flex; align-items: center; gap: 12px; height: 38px; color: rgba(243,241,236,.42); font-size: 15px; transition: color .3s; }
.ob-ck.is-on, .ob-ck.is-done { color: var(--a2-on); }
.ob-ck em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--a2-on2); }
.ob-ckic { position: relative; display: grid; width: 22px; height: 22px; flex: none; }
.ob-ckic > * { grid-area: 1 / 1; place-self: center; transition: opacity .2s; }
.ob-ckic .d { width: 6px; height: 6px; border-radius: 999px; background: rgba(243,241,236,.3); }
.ob-ckic .s { width: 20px; height: 20px; border-radius: 999px; border: 2px solid rgba(255,92,61,.25); border-top-color: var(--a2-coral); animation: a2Spin .9s linear infinite; opacity: 0; }
.ob-ckic .k { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(95,210,140,.18); color: #9BE3B5; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.ob-ck.is-on .d, .ob-ck.is-done .d { opacity: 0; }
.ob-ck.is-on .s { opacity: 1; }
.ob-ck.is-done .k { opacity: 1; transform: none; }
.ob-bar2 { position: relative; height: 3px; margin-top: 14px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ob-bar2 span { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, #FF8A70, var(--a2-coral)); transform-origin: left center; transform: scaleX(0); transition: transform 6.5s cubic-bezier(.45,0,.25,1); }
.ob-bar2.is-going span { transform: scaleX(1); }
.ob-quotes { position: relative; display: grid; margin-top: auto; padding-top: 28px; max-width: 800px; }
.ob-quotes figure { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; filter: blur(6px); transform: translateY(6px); transition: opacity .6s, filter .6s, transform .6s; }
.ob-quotes figure.is-on { opacity: 1; filter: none; transform: none; }
.ob-quotes blockquote { margin: 0; font-family: var(--a2-serif); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--a2-on); text-align: center; text-wrap: balance; }
.ob-quotes figcaption { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--a2-on2); text-align: center; }

/* the questions: the question on the left, the Brand Brain filling in on the right */
.ob-q { display: grid; grid-template-columns: minmax(0, 1fr) 460px; min-height: 100%; }
.ob-qmain { display: flex; flex-direction: column; gap: 24px; padding: 40px clamp(20px, 4.4vw, 64px) 32px clamp(20px, 8vw, 120px); }
.ob-qin { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 680px; }
.ob-qprog { display: flex; align-items: center; gap: 14px; }
.ob-qprog .ob-eyebrow { white-space: nowrap; }
.ob-qprog .bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; flex: 1; max-width: 240px; }
.ob-qprog .bars i { height: 4px; border-radius: 999px; background: var(--a2-line); }
.ob-qprog .bars i.is-done { background: var(--a2-ink); }
.ob-qprog .bars i.is-now { background: var(--a2-coral); }
.ob-qtitle { margin: 0; font-family: var(--a2-serif); font-weight: 420; font-size: 44px; line-height: 1.06; letter-spacing: -.022em; color: var(--a2-ink); text-wrap: balance; font-variation-settings: 'opsz' 144; }
.ob-qtitle em { font-style: italic; font-weight: 470; color: var(--a2-coral-deep); }
.ob-help { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.5; color: var(--a2-ink2); }
.ob-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-opt { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--a2-line2); background: var(--a2-card); box-shadow: 0 1px 2px rgba(17,17,20,.04); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ob-opt:hover { border-color: #CFCAC0; }
.ob-opt.is-on { border: 1.5px solid var(--a2-ink); box-shadow: 0 14px 30px -18px rgba(17,17,20,.5); }
.ob-opt.is-wide { grid-column: 1 / -1; }
.ob-opt .tile { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--a2-paper2); color: var(--a2-ink2); flex: none; }
.ob-opt.is-on .tile { background: var(--a2-ink); color: var(--a2-paper); }
.ob-opt .txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ob-opt.is-on .txt { padding-right: 26px; }
.ob-opt .nm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--a2-ink); }
.ob-opt .ds { font-size: 13px; line-height: 1.45; color: var(--a2-ink2); }
.ob-opt .why { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--a2-coral-text); }
.ob-opt .ck { position: absolute; right: 14px; top: 14px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--a2-ink); color: var(--a2-paper); }
.ob-opt.is-on .ck { display: flex; }
.ob-opt.is-tone { flex-direction: column; gap: 4px; padding: 14px 16px; }
.ob-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--a2-coral-soft); border: 1px solid var(--a2-coral-line); color: var(--a2-coral-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--a2-line2); background: var(--a2-card); color: var(--a2-ink); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.ob-chip.is-on { border: 1.5px solid var(--a2-ink); background: var(--a2-ink); color: var(--a2-paper); font-weight: 600; }
.ob-chip .rl-ic { display: none; }
.ob-chip.is-on .rl-ic { display: block; }
.ob-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--a2-paper2); border: 1px solid var(--a2-line); }
.ob-seg button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--a2-ink2); cursor: pointer; }
.ob-seg button.is-on { background: var(--a2-card); box-shadow: 0 1px 3px rgba(17,17,20,.14); font-weight: 600; color: var(--a2-ink); }
.ob-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--a2-card); border: 1px solid var(--a2-line); box-shadow: 0 1px 2px rgba(17,17,20,.04); }
.ob-panel-h { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--a2-ink); }
.ob-mini { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--a2-coral-soft); color: var(--a2-coral-text); flex: none; }
.ob-say { display: flex; flex-direction: column; min-height: 104px; padding: 14px 16px; border-radius: 16px; background: var(--a2-card); border: 1px solid var(--a2-line2); transition: border-color .15s, box-shadow .15s; }
.ob-say:focus-within { border-color: var(--a2-coral); box-shadow: 0 0 0 4px rgba(255,92,61,.14); }
.ob-say textarea { width: 100%; min-height: 48px; border: 0; outline: none; resize: vertical; background: transparent; font: inherit; font-size: 16px; line-height: 1.5; color: var(--a2-ink); padding: 0; }
.ob-say textarea::placeholder { color: #8B8A91; }
.ob-say .note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--a2-ink2); }
.ob-offer { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--a2-card); border: 1px solid var(--a2-line); animation: obRise .5s cubic-bezier(.16,1,.3,1) both; }
.ob-offer .tile { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--a2-ok-soft); color: var(--a2-ok); flex: none; }
.ob-offer input { flex: 1; min-width: 0; height: 40px; border: 1px solid transparent; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--a2-ink); padding: 0 8px; }
.ob-offer input:focus { outline: none; border-color: var(--a2-line2); background: var(--a2-paper); }
.ob-offer .pr { font-family: var(--a2-serif); font-size: 19px; font-weight: 500; color: var(--a2-ink); white-space: nowrap; }
.ob-offer .per { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--a2-paper2); font-size: 12px; font-weight: 600; color: var(--a2-ink2); white-space: nowrap; }
.ob-offer button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--a2-ink2); cursor: pointer; flex: none; }
.ob-offer button:hover { background: var(--a2-paper2); }
.ob-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--a2-paper2); border: 1px solid var(--a2-line); font-size: 14px; line-height: 1.5; color: var(--a2-ink2); }
.ob-note .tile { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--a2-ink); color: #FF9A85; flex: none; }
.ob-note b { color: var(--a2-ink); font-weight: 600; }
.ob-note span { padding-top: 4px; }
.ob-nav { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 680px; margin-top: auto; }
.ob-nav .grow { flex: 1; }
.ob-nav .back, .ob-nav .skip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--a2-ink2); }
.ob-nav .back:hover, .ob-nav .skip:hover { color: var(--a2-ink); }
.ob-nav .ob-pill { width: 220px; }
.ob-preview { display: flex; justify-content: flex-end; padding: 12px; border-radius: 16px; background: var(--a2-paper2); border: 1px solid var(--a2-line); }
.ob-preview div { max-width: 92%; padding: 10px 13px; border-radius: 14px 3px 14px 14px; background: var(--a2-wa); color: var(--a2-wa-ink); font-size: 13.5px; line-height: 1.5; }
.ob-preview b { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-right: 4px; border-radius: 6px; background: rgba(20,53,28,.1); font-size: 12px; font-weight: 600; }
.ob-other { display: none; }
.ob-other.on { display: flex; }

/* the Brand Brain, filling in */
.ob-brainwrap { padding: 28px clamp(20px, 3vw, 40px) 32px 0; }
.ob-brain { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 14px; min-height: calc(100% - 4px); padding: 22px 20px 20px; border-radius: 24px; background: var(--a2-eng); border: 1px solid #20242F; box-shadow: 0 40px 80px -44px rgba(17,17,20,.6); overflow: hidden; color: var(--a2-on); }
.ob-brain > *:not(.a2-glow) { position: relative; }
.ob-bhead { display: flex; align-items: center; gap: 10px; }
.ob-bhead .n { margin-left: auto; font-size: 12.5px; color: var(--a2-on2); }
.ob-bhead .n b { color: var(--a2-on); font-weight: 600; }
.ob-bitems { display: flex; flex-direction: column; gap: 8px; }
.ob-bi { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.12); overflow: hidden; }
.ob-bi .tile { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.04); color: #6F7483; flex: none; }
.ob-bi .txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ob-bi .k { font-size: 12.5px; color: var(--a2-on2); }
.ob-bi .v { font-size: 14.5px; font-weight: 600; color: var(--a2-on); overflow-wrap: anywhere; }
.ob-bi .s { font-size: 12.5px; color: var(--a2-on2); }
.ob-bi .ph { display: block; width: 60%; height: 8px; margin-top: 5px; border-radius: 999px; background: rgba(255,255,255,.06); }
.ob-bi.is-done { border: 1px solid var(--a2-eline); background: rgba(255,255,255,.04); }
.ob-bi.is-done .tile { background: rgba(95,210,140,.14); color: #9BE3B5; }
.ob-bi.is-now { border: 1px solid rgba(255,92,61,.38); background: rgba(255,92,61,.08); }
.ob-bi.is-now .tile { background: rgba(255,92,61,.18); color: #FF9A85; }
.ob-bi.is-now .s { color: #FFB4A3; }
.ob-bi.is-now::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,154,133,.16) 50%, rgba(255,255,255,0) 70%); animation: obSheen 4.5s ease-in-out infinite; }
@keyframes obSheen { 0% { transform: translateX(-120%); } 35% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
.ob-bi.is-new .txt { animation: obFill .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes obFill { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.ob-bfoot { margin-top: auto; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--a2-on2); }
.ob-bpill { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--a2-eng); color: var(--a2-on); font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-bpill .n { font-weight: 500; color: var(--a2-on2); }
.ob-bpill .dots { margin-left: auto; display: flex; gap: 5px; }
.ob-bpill .dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.2); }
.ob-bpill .dots i.is-done { background: #9BE3B5; }
.ob-bpill .dots i.is-now { background: var(--a2-coral); }

/* ready */
.ob-ready { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 60px) 40px; }
.ob-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ob-rhead .ob-pill { width: 250px; flex: none; }
.ob-rtitle { position: relative; margin: 0; font-family: var(--a2-serif); font-weight: 420; font-size: 52px; line-height: 1.04; letter-spacing: -.022em; color: var(--a2-ink); font-variation-settings: 'opsz' 144; }
.ob-rtitle .u { position: relative; display: inline-block; }
.ob-rtitle em { font-style: italic; font-weight: 470; color: var(--a2-coral-deep); }
.ob-rtitle svg { position: absolute; left: -4px; bottom: -10px; }
.ob-draw { stroke-dasharray: 260; stroke-dashoffset: 260; animation: obDraw 1.1s cubic-bezier(.65,0,.35,1) .5s forwards; }
@keyframes obDraw { to { stroke-dashoffset: 0; } }
.ob-rgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; }
.ob-know { display: flex; flex-direction: column; padding: 22px 24px 12px; border-radius: 22px; background: var(--a2-card); border: 1px solid var(--a2-line); box-shadow: 0 1px 2px rgba(17,17,20,.04), 0 24px 48px -36px rgba(17,17,20,.3); }
.ob-know h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ob-kh { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.ob-kh button { min-height: 32px; border: 0; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--a2-coral-text); }
.ob-kr { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.ob-kr + .ob-kr { border-top: 1px solid var(--a2-line); }
.ob-kr .tile { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--a2-paper2); color: var(--a2-ink2); flex: none; }
.ob-kr .k { display: block; font-size: 12.5px; color: var(--a2-ink2); }
.ob-kr .v { display: block; font-size: 14.5px; font-weight: 600; color: var(--a2-ink); overflow-wrap: anywhere; }
.ob-kr .v.is-empty { font-weight: 500; color: var(--a2-ink2); }
.ob-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border-radius: 22px; background: var(--a2-eng); border: 1px solid #20242F; box-shadow: 0 40px 80px -44px rgba(17,17,20,.6); overflow: hidden; color: var(--a2-on); }
.ob-plan > *:not(.a2-glow) { position: relative; }
.ob-plan .gt { font-family: var(--a2-serif); font-size: 28px; font-weight: 420; letter-spacing: -.015em; }
.ob-plan .quiet { font-size: 12.5px; color: var(--a2-on2); }
.ob-pstep { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--a2-eline); }
.ob-pstep .no { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); font-family: var(--a2-serif); font-size: 14px; flex: none; }
.ob-pstep .t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ob-pstep .t b { font-size: 14.5px; font-weight: 600; }
.ob-pstep .t span { font-size: 12.5px; color: var(--a2-on2); }
.ob-ok { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(245,190,90,.14); color: #F5C77A; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ob-planning { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.16); font-size: 13.5px; color: var(--a2-on2); }
.ob-planning i { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255,92,61,.25); border-top-color: var(--a2-coral); animation: a2Spin .9s linear infinite; flex: none; }
.ob-light { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--a2-paper); color: var(--a2-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ob-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ob-nc { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--a2-line2); background: var(--a2-card); text-align: left; cursor: pointer; transition: border-color .15s; }
.ob-nc:hover { border-color: #CFCAC0; }
.ob-nc .tile { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--a2-paper2); color: var(--a2-ink); flex: none; }
.ob-nc .t { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ob-nc b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--a2-ink); }
.ob-nc span { font-size: 12.5px; line-height: 1.45; color: var(--a2-ink2); }
.ob-req { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--a2-coral-soft); color: var(--a2-coral-text); font-size: 11px; font-weight: 600; }

/* shorter screens: the orbit shrinks so the quote stays on screen */
@media (max-height: 860px) { .ob-orbit { transform: scale(.78); margin: -46px 0 -46px; } .ob-stop { min-height: 60px; } }
@media (max-height: 720px) { .ob-orbit { transform: scale(.6); margin: -84px 0 -84px; } .ob-checks { margin-top: 14px; } .ob-ck { height: 32px; } }

/* narrower screens: the panel folds into a pill; one column */
@media (max-width: 1180px) {
  .ob-q { grid-template-columns: minmax(0, 1fr); }
  .ob-brainwrap { display: none; }
  .ob-bpill { display: flex; }
  .ob-qmain { padding-left: clamp(20px, 6vw, 72px); }
}
@media (max-width: 820px) {
  .ob-steps .ob-step span, .ob-join { display: none; }
  .ob-steps { gap: 6px; }
  .ob-bar .a2-mark { min-width: 0; }
  .ob-later { min-width: 0; }
  .ob-qtitle { font-size: 32px; }
  .ob-title { font-size: 34px; }
  .ob-grid2, .ob-grid3, .ob-rgrid, .ob-next { grid-template-columns: minmax(0, 1fr); }
  .ob-qmain { padding: 22px 16px 20px; gap: 18px; }
  .ob-nav { position: sticky; bottom: 0; padding: 12px 0 4px; background: linear-gradient(rgba(253,252,250,0), var(--a2-paper) 30%); }
  .ob-nav .skip { display: none; }
  .ob-nav .ob-pill { flex: 1; width: auto; }
  .ob-rhead { flex-direction: column; align-items: stretch; }
  .ob-rhead .ob-pill { width: 100%; }
  .ob-rtitle { font-size: 38px; }
  .ob-stitle h1 { font-size: 30px; }
  .ob-quotes blockquote { font-size: 19px; }
  .ob-orbit { transform: scale(.8); margin: -30px 0; }
  .ob-card { padding: 26px 20px 22px; }
}

/* reachly-b2b-theme.css gives every input, textarea and select a border, a
   radius, an inset shadow and a min-height, all !important (and a ring on
   focus). Inside these boxes the BOX is the field, so the input itself has to
   be bare — measured 2026-09-26: a second border drawn inside every field. */
.a2-overlay .a2-box input, .ob .a2-box input, .ob .ob-say textarea, .ob .ob-offer input,
.a2-overlay .a2-box input:focus, .ob .a2-box input:focus, .ob .ob-say textarea:focus,
.a2-otp input.a2-otp-real, .a2-otp input.a2-otp-real:focus {
  border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  min-height: 0 !important; padding: 0 !important; outline: none !important;
}
.ob .ob-offer input, .ob .ob-offer input:focus { border: 1px solid transparent !important; border-radius: 10px !important; padding: 0 8px !important; min-height: 0 !important; box-shadow: none !important; background: transparent !important; outline: none !important; }
.ob .ob-offer input:focus { border-color: var(--a2-line2) !important; background: var(--a2-paper) !important; }
.a2-otp input.a2-otp-real { opacity: 0 !important; }
/* The theme greys every label (label:not(.ooo-day), !important). */
.a2-overlay label, .ob label { color: var(--a2-ink) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Toasts sit at 9999, under both screens; while one is up they come above it,
   or a "could not save" would be said to nobody. */
body:has(.ob) .toast-container, body:has(.a2-overlay.active) .toast-container { z-index: 10002; }

@media (prefers-reduced-motion: reduce) {
  .a2-overlay *, .a2-overlay *::before, .a2-overlay *::after,
  .ob *, .ob *::before, .ob *::after { animation: none !important; transition: none !important; }
  .ob-draw { stroke-dashoffset: 0; }
}