/* ============================================================
   NOVA OS — onboarding brand system (onboard.css)          ★ nova-os only ★

   One visual language for the whole funnel:
     • signup.html (public configurator — select-driven steps, body.onb4,
       o4-* classes; the AI synthesizes in the background)
     • views/onboarding.js (authed fallback wizard, .v-onb scope)

   Direction (Vincent, 2026-07, v2): BASIC + LATEST + ROUND. The landing
   page's final-section statue (assets/img/onb-bg.jpg) sits fixed behind
   EVERY step, heavily scrimmed exactly like usenovaos.com's .final
   section — pure atmosphere, never competing with the content. On top:
   one rounded glass panel ("round page"), question/content on the LEFT,
   a single accent image in a rounded frame on the RIGHT rail. Every
   control mirrors the ACTUAL website: pill radius-100px buttons and
   chips, pill inputs, 24px cards, 26px frames. NOTHING blocky.

   Radius tokens — 1:1 with /root/nova-site/index.html:
     pill 100px  (.btn / nav links / #claim-email)
     card 24px   (--r: .plan / .chatcard / .vcard)
     frame clamp(20px,2.6vw,30px)  (.glowframe / .claim-card 26px)
     page  clamp(22px,3vw,34px)    (echoes .sheet 28–44px)

   Palette (1:1 with the landing):
     diamond cyan #7FE0FF · azure #3FB9E8 · pale #CFF3FF · deep #0E6A8A
     blue-black void #05070A · glass panel rgba(13,17,20,.72→.84)
     bone #E9F1F6 · fog #93A3AE · hairlines rgba(215,235,250,.10)

   Type: Archivo 850 stretched questions + Instrument Serif italic accent
   + JetBrains Mono eyebrows. Cyan accent, focus rings, reduced-motion
   guarded, 390px-first.
   ============================================================ */

/* ================================================================
   SHARED TOKENS — both flows read the same primitives
   ================================================================ */
body.onb4, .v-onb {
  --nv-cyan: #7FE0FF;
  --nv-azure: #3FB9E8;
  --nv-pale: #CFF3FF;
  --nv-ice: #8FDFFF;
  --nv-void: #05070A;
  --nv-hair: rgba(215, 235, 250, .10);
  --nv-hair2: rgba(215, 235, 250, .20);
  --nv-bone: #E9F1F6;
  --nv-fog: #93A3AE;
  --nv-fog2: #74838D;
  --nv-tint: rgba(127, 224, 255, .10);
  --nv-ring: rgba(127, 224, 255, .30);
  --nv-grad: linear-gradient(160deg, #CFF3FF 0%, #7FE0FF 45%, #3FB9E8 100%);
  /* the website's exact .btn-moss shadow */
  --nv-glow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 40px -10px rgba(127, 224, 255, .55);
  --err: #FF8A80;
  --onb-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --onb-serif: "Instrument Serif", Georgia, serif;
  --onb-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --onb-ease: cubic-bezier(.19, 1, .22, 1);
  /* radius scale — mirrored from the live website */
  --r-pill: 100px;                       /* .btn / chips / inputs */
  --r-card: 24px;                        /* --r on the landing */
  --r-frame: clamp(20px, 2.6vw, 30px);   /* .glowframe / .claim-card */
  --r-page: clamp(22px, 3vw, 34px);      /* the "round page" panel */
  --r-ctl: 18px;                         /* option rows, textareas */
  --r-sm: 12px;                          /* icon squares */
}

/* website focus language: cyan ring that FOLLOWS each control's own
   rounding — never force a radius here or pills go square on focus.
   The browser draws `outline` along the element's border-radius, so a
   pill input rings as a pill, a 24px card rings at 24px, a link rings
   square. Kill the square mobile tap-highlight too. */
body.onb4, .v-onb { -webkit-tap-highlight-color: transparent; }
body.onb4 :focus-visible, .v-onb :focus-visible {
  outline: 2px solid var(--nv-cyan);
  outline-offset: 3px;
}

/* ================================================================
   ============  PART ONE — the public flow (signup.html)  ========
   ================================================================ */
body.onb4 {
  margin: 0;
  min-height: 100dvh;
  background: var(--nv-void);
  color: var(--nv-bone);
  font-family: var(--onb-sans);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  color-scheme: dark;
}
body.onb4 ::selection { background: var(--nv-cyan); color: var(--nv-void); }

/* ---------------- the atmosphere: the landing's final-section statue,
                    fixed behind every step, heavily scrimmed
                    (mirrors usenovaos.com .final .bg) ---------------- */
.o4-scene, .onb-scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1000px 560px at 50% 118%, rgba(56, 160, 215, .22), transparent 62%),
    radial-gradient(700px 460px at 78% -10%, rgba(159, 184, 204, .07), transparent 60%),
    linear-gradient(180deg, var(--nv-void) 0%, #0B0D09 100%);
}
.v-onb .onb-scene { position: absolute; }
.o4-scene img, .onb-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; opacity: .5;
}
.o4-scene::after, .onb-scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 10, .8) 0%, rgba(5, 7, 10, .2) 32%),
    radial-gradient(120% 100% at 50% 60%, rgba(5, 7, 10, .3) 38%, rgba(5, 7, 10, .86) 100%);
}

/* ---------------- the round page: one rounded glass panel over the
                    statue — content left, accent image right ---------------- */
.o4-page {
  position: fixed; inset: clamp(10px, 1.4vw, 18px); z-index: 1;
  display: flex; gap: clamp(20px, 3vw, 44px);
  background: linear-gradient(180deg, rgba(13, 17, 20, .72), rgba(9, 12, 15, .84));
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--nv-hair);
  border-radius: var(--r-page);
  padding: clamp(18px, 3vw, 44px) clamp(18px, 3.4vw, 52px);
  overflow: hidden;
  box-sizing: border-box;
}
.o4-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* the right rail — a single 1024×1536 portrait in a rounded frame */
.o4-rail { flex: none; width: clamp(280px, 29vw, 440px); display: flex; min-height: 0; }
.o4-frame {
  position: relative; flex: 1; min-height: 0;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--nv-hair);
  background: #080B0E;
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .8);
}
.o4-frame-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 24%;
  opacity: 0; transition: opacity .9s var(--onb-ease);
}
.o4-frame-img.on { opacity: 1; }
/* portrait-in-portrait: only gentle per-act reframing (keep the faces) */
.o4-frame[data-act="offer"] .o4-frame-img { object-position: 50% 42%; }
.o4-frame[data-act="build"] .o4-frame-img { object-position: 50% 16%; }
.o4-frame[data-act="ready"] .o4-frame-img { object-position: 50% 18%; }
/* a whisper of depth so the frame reads as a window, not a sticker */
.o4-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -60px 90px -60px rgba(4, 6, 9, .55);
}

/* ---------------- top chrome (in flow, inside the panel) ---------------- */
.o4-top {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 clamp(18px, 3.4vh, 34px);
}
.o4-mark { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.o4-mark img { width: 26px; height: 26px; display: block; }
.o4-mark b {
  font-family: "Unbounded", var(--onb-sans);
  font-weight: 700; font-size: .84rem; letter-spacing: .02em;
}
.o4-act {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--onb-mono); text-transform: uppercase;
}
.o4-act-n { color: var(--nv-cyan); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .18em; }
.o4-act-n::after { content: ""; display: inline-block; width: 26px; height: 1px; background: rgba(127, 224, 255, .4); vertical-align: 3px; margin-left: 12px; }
.o4-act-t { color: rgba(233, 241, 246, .62); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .3em; }

/* ---------------- the content column ---------------- */
.o4-col {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  width: min(640px, 100%);
}
/* the configurator scroller (steps) — same envelope as the theater thread */
.o4-stage, .o4-thread {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 4px 26px 0;
  scrollbar-width: thin; scrollbar-color: rgba(127, 224, 255, .25) transparent;
}
/* only the theater thread scrolls continuously — fade its top edge */
.o4-thread {
  padding-top: 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px);
  mask-image: linear-gradient(180deg, transparent 0, #000 36px);
}
.o4-stage::-webkit-scrollbar, .o4-thread::-webkit-scrollbar { width: 4px; }
.o4-stage::-webkit-scrollbar-thumb, .o4-thread::-webkit-scrollbar-thumb { background: rgba(127, 224, 255, .22); border-radius: 4px; }

/* ---------------- messages ---------------- */
.o4-msg { margin: 0 0 26px; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--onb-ease), transform .55s var(--onb-ease); }
.o4-msg.in { opacity: 1; transform: none; }
.o4-tag {
  display: block; margin-bottom: 9px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--nv-fog2);
}
.o4-nova .o4-tag { color: var(--nv-cyan); }
.o4-body {
  font-size: 1.05rem; line-height: 1.68; color: var(--nv-bone);
  max-width: 56ch; text-wrap: pretty;
}
/* the big cinematic lines — the landing's display voice */
.o4-big .o4-body {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  font-weight: 850; font-stretch: 118%;
  line-height: 1.05; letter-spacing: -.03em;
  max-width: 20ch;
}
/* ONE accent word — Instrument Serif italic with the hero's ice gradient */
.o4-ac {
  font-family: var(--onb-serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  font-size: 1.06em; letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFFFFF 18%, #BCE4F8 66%, #8FCBE8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* typing caret */
.o4-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px;
  background: var(--nv-cyan); border-radius: 1px; box-shadow: 0 0 10px rgba(127, 224, 255, .9);
  animation: o4Blink 1s steps(1) 5;
}

/* ================================================================
   THE CONFIGURATOR — selectable steps. Rounded option cards + pill
   chips, 1-2 clicks per step, minimal typing.
   ================================================================ */
.o4-step { padding: 2px 0 40px; }

/* staggered reveal: any element with .o4-rv (+ --i) rises into place */
.o4-rv { animation: o4Up .6s var(--onb-ease) both; animation-delay: calc(var(--i, 0) * 65ms); }
.o4-step-back .o4-rv { animation-duration: .3s; animation-delay: calc(var(--i, 0) * 25ms); }

/* progress dashes — one per step, rounded */
.o4-dashes { display: flex; gap: 7px; margin: 0 0 26px; max-width: 320px; }
.o4-dashes i {
  height: 3px; flex: 1; background: rgba(215, 235, 250, .14);
  border-radius: var(--r-pill); position: relative; overflow: hidden;
}
.o4-dashes i.done::after, .o4-dashes i.on::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--nv-azure), var(--nv-cyan));
  box-shadow: 0 0 12px rgba(127, 224, 255, .5);
}
.o4-dashes i.on::after { animation: o4Seg .5s var(--onb-ease) both; }

/* step counter riding the eyebrow */
.o4-eyebrow-n { color: rgba(233, 241, 246, .55); letter-spacing: .18em; }
.o4-eyebrow-n::after {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: rgba(127, 224, 255, .4); vertical-align: 3px; margin-left: 12px;
}

/* the question — the landing's display voice */
.o4-q {
  margin: 10px 0 14px;
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  font-weight: 850; font-stretch: 118%;
  line-height: 1.05; letter-spacing: -.03em; color: var(--nv-bone);
  max-width: 18ch; text-wrap: balance;
}
.o4-sub {
  margin: 0 0 24px; font-size: .96rem; line-height: 1.64; color: #AEBEC8;
  max-width: 50ch;
}

/* option cards — rounded rows (website card language), digit quick-pick */
.o4-cards { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.o4-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--nv-hair); border-radius: var(--r-ctl); padding: 14px 18px;
  font-family: inherit; color: var(--nv-bone); letter-spacing: inherit;
  animation: o4Up .6s var(--onb-ease) both; animation-delay: calc(var(--i, 0) * 65ms);
  transition: transform .16s var(--onb-ease), border-color .16s, background .16s, box-shadow .2s;
}
.o4-card:hover { transform: translateY(-1px); border-color: rgba(127, 224, 255, .5); background: rgba(255, 255, 255, .045); box-shadow: 0 10px 28px -14px rgba(127, 224, 255, .3); }
.o4-card:active { transform: translateY(0) scale(.994); }
.o4-card.on {
  border-color: var(--nv-cyan); background: rgba(127, 224, 255, .07);
  box-shadow: 0 0 0 1px var(--nv-cyan) inset, 0 12px 32px -16px rgba(127, 224, 255, .4);
}
.o4-card-key {
  flex: none; width: 20px; text-align: center;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600; color: var(--nv-fog2);
}
.o4-card.on .o4-card-key { color: var(--nv-cyan); }
.o4-card-ico {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(127, 224, 255, .08); color: var(--nv-cyan);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .16);
  transition: background .2s, color .2s, box-shadow .2s;
}
.o4-card.on .o4-card-ico { background: var(--nv-grad); color: var(--nv-void); box-shadow: 0 4px 18px rgba(127, 224, 255, .45); }
.o4-card-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.o4-card-t { font-weight: 640; font-size: .98rem; }
.o4-card-s { font-size: .82rem; color: var(--nv-fog); }
.o4-card-check {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--nv-grad); color: var(--nv-void); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--onb-ease), transform .25s var(--onb-ease);
}
.o4-card.on .o4-card-check { opacity: 1; transform: scale(1); }

/* chips — the website's pills, generous touch targets */
.o4-chiprow { display: flex; flex-wrap: wrap; gap: 9px; max-width: 560px; }
.o4-chip {
  border: 1px solid var(--nv-hair2); background: rgba(255, 255, 255, .03);
  color: #B4C6CF; border-radius: var(--r-pill); padding: 13px 20px; min-height: 44px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s, transform .16s var(--onb-ease);
}
.o4-chip:hover { transform: translateY(-1px); border-color: rgba(127, 224, 255, .55); color: var(--nv-cyan); }
.o4-chip:active { transform: translateY(0) scale(.97); }
.o4-chip.on {
  background: var(--nv-grad); border-color: transparent; color: var(--nv-void);
  font-weight: 600; box-shadow: 0 8px 24px -8px rgba(127, 224, 255, .5);
}
.o4-chipgroup { margin: 0 0 22px; }
.o4-chipgroup .o4-flabel { margin-bottom: 10px; }

/* the optional note + offer-doc attach */
.o4-notewrap { max-width: 560px; }
.o4-note {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--nv-hair2); border-radius: var(--r-ctl);
  padding: 14px 18px; color: var(--nv-bone);
  font-family: var(--onb-sans); font-size: .96rem; line-height: 1.6;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.o4-note::placeholder { color: #5E6F7A; }
.o4-note:focus {
  outline: none; border-color: var(--nv-cyan);
  box-shadow: 0 0 0 1px rgba(127, 224, 255, .35);
  background: rgba(127, 224, 255, .06);
}
.o4-attach {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  border: 1px dashed rgba(127, 224, 255, .4); background: transparent;
  border-radius: var(--r-pill);
  color: #B4C6CF; padding: 12px 20px; cursor: pointer;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}
.o4-attach svg { color: var(--nv-cyan); flex: none; }
.o4-attach:hover { border-color: var(--nv-cyan); color: var(--nv-cyan); background: rgba(127, 224, 255, .05); }
.o4-attached { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.o4-attached-doc {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--nv-hair2); background: rgba(255, 255, 255, .04);
  border-radius: var(--r-pill);
  padding: 8px 14px; color: #C3D3DC; font-size: .82rem;
}
.o4-attached-doc svg { color: var(--nv-cyan); flex: none; }
.o4-attached-doc em { font-style: normal; font-family: var(--onb-mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--nv-fog2); }
.o4-attached-err { border-color: rgba(255, 138, 128, .4); color: #FFC7C2; }

/* step nav — back is quiet text, forward is the website CTA */
.o4-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; max-width: 560px; }
.o4-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 12px 4px; cursor: pointer;
  color: var(--nv-fog); font-family: var(--onb-mono); font-size: var(--fs-2xs);
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: color .2s;
}
.o4-back svg { transition: transform .3s var(--onb-ease); }
.o4-back:hover { color: var(--nv-bone); }
.o4-back:hover svg { transform: translateX(-4px); }
.o4-hint {
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--nv-fog2);
}

.o4-foot {
  flex: none; margin: 0; padding: 14px 2px 2px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nv-fog2);
}
.o4-foot a { color: rgba(233, 241, 246, .72); text-decoration: none; }
.o4-foot a:hover { color: var(--nv-cyan); }
.o4-foot-sep { display: inline-block; width: 3px; height: 3px; border-radius: var(--r-pill); background: rgba(147, 163, 174, .5); vertical-align: 3px; margin: 0 10px; }

/* drag-drop veil for offer docs — rounded inner plate */
.o4-drop {
  position: fixed; inset: 0; z-index: 60; display: none; place-items: center;
  background: rgba(4, 6, 9, .78); backdrop-filter: blur(6px);
}
.o4-drop.on { display: grid; }
.o4-drop-inner {
  text-align: center; color: var(--nv-bone);
  border: 1px dashed rgba(127, 224, 255, .55); border-radius: var(--r-card);
  padding: clamp(32px, 6vw, 56px) clamp(40px, 8vw, 80px);
  background: rgba(13, 17, 20, .6);
}
.o4-drop-inner svg { color: var(--nv-cyan); margin-bottom: 14px; }
.o4-drop-t { font-weight: 800; font-stretch: 114%; font-size: 1.3rem; letter-spacing: -.02em; }
.o4-drop-s { font-family: var(--onb-mono); font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--nv-fog); margin-top: 8px; }

/* ---------------- the build ledger ---------------- */
.o4-build { margin: 4px 0 10px; border-top: 1px solid var(--nv-hair); padding-top: 18px; }
.o4-build-lines { min-height: 1.6em; }
.o4-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--nv-cyan);
}
.o4-live { width: 7px; height: 7px; flex: none; border-radius: var(--r-pill); background: var(--nv-cyan); box-shadow: 0 0 0 0 var(--nv-ring); animation: o4Pulse 1.4s ease-out infinite; }
.o4-wait {
  font-family: var(--onb-mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--nv-fog); padding: 14px 0 6px; min-height: 1.6em;
}
.o4-brow {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--nv-hair);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--onb-ease), transform .5s var(--onb-ease);
}
.o4-brow.in { opacity: 1; transform: none; }
.o4-brow-k {
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--nv-fog2);
}
.o4-brow-v { font-size: .95rem; line-height: 1.6; color: var(--nv-bone); }
.o4-brow-v .o4-flow { display: block; margin-top: 4px; color: #C3D3DC; font-size: .9rem; }
.o4-brow-v .o4-flow i { font-style: normal; color: rgba(127, 224, 255, .65); margin: 0 7px; }
.o4-brow-tick { color: var(--nv-cyan); align-self: center; }

/* ---------------- CTA + forms — the website's exact pill button -------- */
.o4-cta { margin: 24px 0 10px; }
.o4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; cursor: pointer;
  border-radius: var(--r-pill);
  padding: 16px 28px;
  background: var(--nv-grad); background-size: 150% 150%; background-position: 28% 28%;
  color: #06131B;
  font-family: var(--onb-sans); font-size: 13px; font-weight: 800; font-stretch: 114%;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  box-shadow: var(--nv-glow);
  transition: transform .3s var(--onb-ease), box-shadow .3s var(--onb-ease), background-position .4s var(--onb-ease);
}
.o4-btn svg { transition: transform .3s var(--onb-ease); }
.o4-btn:hover {
  transform: translateY(-2px) scale(1.015);
  background-position: 72% 72%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 22px 55px -12px rgba(127, 224, 255, .65);
}
.o4-btn:hover svg { transform: translateX(4px); }
.o4-btn:active { transform: translateY(0); }
.o4-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* quiet pill — secondary actions (resend email) */
.o4-btn-ghost {
  background: rgba(255, 255, 255, .05);
  color: var(--nv-bone);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: none;
}
.o4-btn-ghost:hover {
  background: rgba(255, 255, 255, .09); color: #fff;
  transform: translateY(-1px); box-shadow: none;
}
.o4-sentx { margin: 18px 0 8px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.o4-sentx .o4-fine { margin: 0; }

.o4-form { margin: 20px 0 8px; max-width: 460px; }
.o4-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.o4-field { display: block; }
.o4-flabel {
  display: block; margin-bottom: 8px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--nv-fog);
}
/* inputs — the website's #claim-email pill */
.o4-tinput {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--nv-hair2);
  border-radius: var(--r-pill);
  padding: 14px 20px;
  color: var(--nv-bone); font-family: var(--onb-sans); font-size: .98rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.o4-tinput::placeholder { color: #5E6F7A; }
.o4-tinput:focus {
  outline: none; border-color: var(--nv-cyan);
  box-shadow: 0 0 0 1px rgba(127, 224, 255, .35);
  background: rgba(127, 224, 255, .06);
}
/* keep browser autofill inside the pill (no white/yellow square) */
.o4-tinput:-webkit-autofill,
.o4-tinput:-webkit-autofill:focus,
.o4-note:-webkit-autofill {
  -webkit-text-fill-color: var(--nv-bone);
  -webkit-box-shadow: 0 0 0 100px rgba(16, 21, 25, 1) inset;
  caret-color: var(--nv-bone);
  transition: background-color 9999s ease-out 0s;
}
.o4-err {
  display: none; margin-bottom: 16px; padding: 12px 16px;
  font-size: .88rem; color: #FFC7C2; border-radius: 14px;
  background: rgba(255, 138, 128, .09); border: 1px solid rgba(255, 138, 128, .4);
}
.o4-err.show { display: block; }
.o4-fine { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .8rem; color: var(--nv-fog); }
.o4-fine svg { color: var(--nv-cyan); flex: none; }
.o4-fine a { color: var(--nv-cyan); text-decoration: none; }
.o4-fine a:hover { text-decoration: underline; }
.o4-fine-solo { display: block; margin: 18px 0 0; }

/* founding plan — rounded card (website --r), price in the landing serif */
.o4-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid rgba(127, 224, 255, .28);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(127, 224, 255, .07), rgba(127, 224, 255, .015));
  padding: 20px 24px; margin: 2px 0 18px;
}
.o4-plan-l { display: flex; flex-direction: column; gap: 9px; }
.o4-plan-badge {
  align-self: flex-start;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--nv-void); background: var(--nv-grad);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.o4-plan-price { font-family: var(--onb-serif); font-size: 2.7rem; line-height: 1; letter-spacing: -.03em; color: var(--nv-bone); }
.o4-plan-price i { font-family: var(--onb-sans); font-style: normal; font-size: .95rem; color: var(--nv-fog); letter-spacing: 0; }
.o4-plan-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.o4-plan-perks li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: #C6D6DE; }
.o4-plan-perks svg { color: var(--nv-cyan); flex: none; }

/* ---------------- payment act — embedded Square card in our chrome ----------
   The card field chrome (.sqx-card) is drawn by assets/js/square-embed.js so it
   is identical here and in the in-app Billing tab; these rules own the act's
   layout + the quiet fail-open skip link, in the same pill/rounded language. */
.o4-payform { max-width: 460px; }
.o4-payfield { margin: 4px 0 18px; }
.o4-payfield .o4-flabel { margin-bottom: 10px; }
.o4-cardmount { width: 100%; }
/* discount code (checkout) — pill input + ghost Apply, matching the card field */
.o4-discfield { margin: 0 0 16px; }
.o4-discfield .o4-flabel { margin-bottom: 10px; }
.o4-flabel-opt { font-weight: 500; letter-spacing: .12em; color: var(--nv-fog2); text-transform: none; }
.o4-disc-row { display: flex; gap: 10px; align-items: stretch; }
/* min-width:0 — without it the input keeps its intrinsic width as a flex floor
   and, once the phone rule below stretches .o4-btn to 100%, the field collapses
   to a sliver while "Apply" eats the row. */
.o4-disc-row .o4-tinput { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.o4-disc-row .o4-tinput::placeholder { text-transform: none; }
.o4-disc-apply { flex: 0 0 auto; white-space: nowrap; padding-left: 22px; padding-right: 22px; }
.o4-disc-apply:disabled { opacity: .55; cursor: default; }
.o4-disc-msg { display: none; margin-top: 9px; font-size: .82rem; line-height: 1.45; font-family: var(--onb-sans); }
.o4-disc-msg.is-ok, .o4-disc-msg.is-err { display: block; }
.o4-disc-msg.is-ok { color: var(--nv-cyan); }
.o4-disc-msg.is-err { color: var(--err); }
.o4-co-price s { color: var(--nv-fog2); font-size: .58em; margin-right: .14em; text-decoration-thickness: 1px; }
.o4-skip {
  display: block; width: 100%; margin: 16px auto 2px; padding: 8px;
  background: none; border: none; cursor: pointer;
  font-family: var(--onb-sans); font-size: .85rem; color: var(--nv-fog);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.o4-skip:hover { color: var(--nv-bone); }
.o4-skip-strong { color: var(--nv-cyan); font-weight: 600; }

/* full-width primary pill — used across the pay/password/details acts */
.o4-btn-block { display: flex; width: 100%; }

/* ---------------- WS-1: two-column checkout ----------------
   LEFT = order summary (wordmark, price, what's-included checklist);
   RIGHT = the Square card field in our chrome + the trust strip. Stacks on
   narrow; the checklist collapses to a <details> below the phone breakpoint. */
.o4-checkout { max-width: 640px; }
.o4-co-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 18px; align-items: start;
}
.o4-co-sum {
  border: 1px solid rgba(127, 224, 255, .24);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(127, 224, 255, .07), rgba(127, 224, 255, .012));
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.o4-co-mark { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.o4-co-mark img { width: 22px; height: 22px; display: block; }
.o4-co-mark b { font-family: "Unbounded", var(--onb-sans); font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.o4-co-sum .o4-plan-badge { align-self: flex-start; }
.o4-co-price { font-family: var(--onb-serif); font-size: 2.5rem; line-height: 1; letter-spacing: -.03em; color: var(--nv-bone); }
.o4-co-price i { font-family: var(--onb-sans); font-style: normal; font-size: .9rem; color: var(--nv-fog); letter-spacing: 0; }
.o4-co-charge { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #C6D6DE; }
.o4-co-charge svg { color: var(--nv-cyan); flex: none; }
/* email-first: quantified "what Nova built" tiles on the checkout summary */
.o4-co-built { display: flex; align-items: center; gap: 8px; font-size: .8rem; line-height: 1.4; color: #C6D6DE; }
.o4-co-built svg { color: var(--nv-cyan); flex: none; }
.o4-co-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.o4-stat {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--nv-hair); border-radius: 12px; padding: 11px 12px;
  background: rgba(127, 224, 255, .04);
}
.o4-stat-n { font-family: var(--onb-serif); font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; color: var(--nv-cyan); }
.o4-stat-l {
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--nv-fog2);
}
.o4-co-incl { border-top: 1px solid var(--nv-hair); padding-top: 12px; }
.o4-co-incl > summary {
  list-style: none; cursor: default;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--nv-fog2);
  margin-bottom: 10px;
}
.o4-co-incl > summary::-webkit-details-marker { display: none; }
.o4-co-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.o4-co-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; line-height: 1.4; color: #C6D6DE; }
.o4-co-list svg { color: var(--nv-cyan); flex: none; margin-top: 2px; }
.o4-co-pay { min-width: 0; display: flex; flex-direction: column; }
.o4-co-pay .o4-payfield { margin: 0 0 14px; }

/* ---------------- checkout add-on picker ----------------
   Buyer self-selects add-ons before the full-page handoff to Stripe. Rows are
   whole-row hit targets (the <label> wraps everything) so they work with a thumb,
   and the layout is single-column at every width — the payment step must never
   depend on side-by-side space. */
.o4-addons { margin: 0 0 18px; }
.o4-addons-h {
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--nv-fog2);
  margin-bottom: 10px;
}
.o4-addons-h em { font-style: normal; color: var(--nv-fog2); opacity: .75; margin-left: 6px; letter-spacing: .12em; }
.o4-addon {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; margin-bottom: 9px;
  border: 1px solid var(--nv-hair2); border-radius: 12px;
  background: rgba(255, 255, 255, .015);
  cursor: pointer; transition: border-color .16s ease, background .16s ease;
}
.o4-addon:hover { border-color: var(--nv-hair); background: rgba(255, 255, 255, .03); }
.o4-addon:has(input:checked) { border-color: var(--nv-cyan); background: rgba(0, 209, 255, .06); }
.o4-addon:focus-within { outline: 2px solid var(--nv-cyan); outline-offset: 2px; }
.o4-addon input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--nv-cyan); cursor: pointer; }
.o4-addon-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.o4-addon-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.o4-addon-top b { font-size: .89rem; font-weight: 620; color: var(--nv-bone); }
.o4-addon-price { margin-left: auto; font-size: .85rem; font-weight: 620; color: var(--nv-bone); white-space: nowrap; }
.o4-addon-price i { font-style: normal; font-size: var(--fs-2xs); color: var(--nv-fog2); }
.o4-addon-tag {
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-style: normal;
  color: var(--nv-ink, #06121a); background: var(--nv-cyan);
  border-radius: var(--r-pill); padding: 2px 7px;
}
.o4-addon-desc { font-size: .79rem; line-height: 1.45; color: #C6D6DE; }
.o4-addon.is-upsell { border-color: rgba(0, 209, 255, .34); }

/* trust strip below the card input */
.o4-trust { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.o4-trust-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--nv-fog); }
.o4-trust-row svg { color: var(--nv-cyan); flex: none; }
.o4-trust-row i { color: var(--nv-fog2); font-style: normal; }
.o4-trust-cancel { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; line-height: 1.45; color: #C6D6DE; }
.o4-trust-cancel svg { color: var(--nv-cyan); flex: none; margin-top: 1px; }
.o4-cards { display: flex; gap: 7px; margin-top: 2px; }
.o4-cards svg { border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* ---------------- WS-3: "set up your details" act ---------------- */
.o4-details { max-width: 560px; }
.o4-det-h {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 12px; font-size: .82rem; font-weight: 640; color: var(--nv-bone);
}
.o4-det-h:first-of-type { margin-top: 6px; }
.o4-det-h svg { color: var(--nv-cyan); flex: none; }
.o4-det-opt {
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--nv-fog2);
  border: 1px solid var(--nv-hair2); border-radius: var(--r-pill); padding: 2px 8px;
}
/* email-first: prominent "check spam" callout on the sent screen */
.o4-spamtip {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid rgba(127, 224, 255, .28); border-radius: 14px;
  background: rgba(127, 224, 255, .06); padding: 13px 15px; margin-bottom: 14px;
}
.o4-spamtip-ico { color: var(--nv-cyan); flex: none; margin-top: 1px; }
.o4-spamtip-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.o4-spamtip-body b { font-size: .88rem; font-weight: 650; color: var(--nv-bone); }
.o4-spamtip-body span { font-size: .82rem; line-height: 1.5; color: #C6D6DE; }
.o4-spamtip-body em { font-style: normal; color: var(--nv-cyan); font-weight: 500; }

.o4-fields-stack { grid-template-columns: 1fr; }
.o4-fields-3 { grid-template-columns: 1fr 1fr; }
.o4-col-span { grid-column: 1 / -1; }
.o4-details .o4-field { margin-bottom: 14px; }
.o4-details .o4-fields .o4-field { margin-bottom: 0; }
.o4-freedom .o4-note { min-height: 0; }

/* checkout stacks below the two-column breakpoint; the checklist becomes a real
   collapsible so the card form is what's in view first on a phone. */
@media (max-width: 720px) {
  .o4-co-grid { grid-template-columns: 1fr; }
  .o4-co-incl > summary { cursor: pointer; position: relative; padding-right: 18px; }
  .o4-co-incl > summary::after {
    content: "+"; position: absolute; right: 0; top: -2px;
    font-family: var(--onb-mono); font-size: 1rem; color: var(--nv-cyan);
  }
  .o4-co-incl[open] > summary::after { content: "\2013"; }
}

/* ---------------- keyframes + motion guards ---------------- */
@keyframes o4Blink { 50% { opacity: 0; } }
@keyframes o4Up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes o4Seg { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
@keyframes o4Pulse { 0% { box-shadow: 0 0 0 0 var(--nv-ring); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .o4-rail { width: clamp(240px, 26vw, 320px); }
}
@media (max-width: 900px) {
  /* content-first on small screens: the accent image steps aside */
  .o4-rail { display: none; }
  .o4-col { width: min(640px, 100%); margin: 0 auto; }
  .o4-page { padding: clamp(16px, 4vw, 28px) clamp(16px, 5vw, 32px); }
}
@media (max-width: 560px) {
  .o4-page { inset: 8px; border-radius: 22px; padding: 16px 16px 12px; }
  .o4-act-t { display: none; }
  .o4-act-n::after { display: none; }
  .o4-fields { grid-template-columns: 1fr; }
  .o4-big .o4-body { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .o4-brow { grid-template-columns: minmax(0, 1fr) auto; }
  .o4-brow-k { grid-column: 1 / -1; margin-bottom: -6px; }
  .o4-btn { width: 100%; }
  /* ...but NOT a button that shares a row with a field. Apply sits beside the
     discount input; stretching it to 100% squashed the input to a sliver. */
  .o4-disc-row .o4-btn { width: auto; }
  .o4-plan { flex-direction: column; align-items: flex-start; }
  .o4-foot-hide { display: none; }
  /* configurator on a phone: full-width answers, thumb-sized targets */
  .o4-q { font-size: clamp(1.7rem, 8.6vw, 2.2rem); max-width: none; }
  .o4-dashes { max-width: none; margin-bottom: 20px; }
  .o4-card { padding: 13px 14px; gap: 11px; }
  .o4-card-key { display: none; }        /* digit quick-pick is keyboard-only */
  .o4-card-ico { width: 38px; height: 38px; }
  .o4-chip { flex: 1 1 calc(50% - 9px); text-align: center; padding: 13px 10px; }
  .o4-nav { flex-wrap: wrap; }
  .o4-nav .o4-btn { order: -1; flex: 1 1 100%; }
  .o4-hint { padding: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.onb4 *, body.onb4 *::before, body.onb4 *::after { animation: none !important; transition: none !important; }
  .o4-msg, .o4-brow { opacity: 1 !important; transform: none !important; }
  .o4-rv, .o4-card { opacity: 1 !important; transform: none !important; }
  .o4-frame-img { opacity: 0; } .o4-frame-img.on { opacity: 1; }
}

/* ================================================================
   ==========  PART TWO — the authed wizard (views/onboarding.js) ==
   Same round page: rounded panel, content left, accent image in a
   rounded frame on the right. Class names unchanged — only the skin.
   ================================================================ */

/* Full-bleed gate: hide app chrome while the wizard is mounted */
body.onb-gate .rail, body.onb-gate .topbar, body.onb-gate .eos-backdrop, body.onb-gate .ai-fab { display: none !important; }
body.onb-gate .app { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; grid-template-areas: "content" !important; }
body.onb-gate .content { overflow: hidden !important; }
body.onb-gate #view { padding: 0 !important; overflow: hidden !important; }

.v-onb {
  /* re-token the app component library inside this scope (always-dark) */
  --surface-0: #0B0F13;
  --surface-1: #0E1318;
  --surface-2: #12181E;
  --text-100: var(--nv-bone);
  --text-200: #D3DEE6;
  --text-300: #B2C0CA;
  --text-400: var(--nv-fog);
  --text-500: var(--nv-fog2);
  --border-soft: var(--nv-hair);
  --border: var(--nv-hair);
  --border-strong: var(--nv-hair2);
  --accent: var(--nv-cyan);
  --accent-hover: #A5EAFF;
  --accent-fg: var(--nv-void);
  --accent-soft: rgba(127, 224, 255, .06);
  --accent-ring: var(--nv-ring);
  --blue-400: var(--nv-ice);
  --blue-bg: var(--nv-tint);

  position: fixed; inset: 0; z-index: 200;
  background: var(--nv-void);
  color: var(--nv-bone);
  font-family: var(--onb-sans);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  color-scheme: dark;
  padding: clamp(10px, 1.4vw, 18px);
  box-sizing: border-box;
}
.v-onb ::selection { background: var(--nv-cyan); color: var(--nv-void); }
.v-onb .onb-mono { font-family: var(--onb-mono); }

/* ---------- the round page (glass over the statue scene) ---------- */
.onb-page {
  position: relative; z-index: 1;
  height: 100%; box-sizing: border-box;
  display: flex; gap: clamp(20px, 3vw, 44px);
  background: linear-gradient(180deg, rgba(13, 17, 20, .72), rgba(9, 12, 15, .84));
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--nv-hair);
  border-radius: var(--r-page);
  padding: clamp(18px, 3vw, 44px) clamp(18px, 3.4vw, 52px);
  overflow: hidden;
}

/* the right rail — one portrait accent image in a rounded frame */
.onb-rail { flex: none; width: clamp(280px, 29vw, 440px); display: flex; min-height: 0; }
.onb-frame {
  position: relative; flex: 1; min-height: 0;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--nv-hair);
  background: #080B0E;
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .8);
}
.onb-frame-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 24%;
  opacity: 0; transition: opacity .9s var(--onb-ease);
}
.onb-frame-img.on { opacity: 1; }
.onb-frame[data-act="build"] .onb-frame-img { object-position: 50% 16%; }
.onb-frame[data-act="ready"] .onb-frame-img { object-position: 50% 18%; }
.onb-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -60px 90px -60px rgba(4, 6, 9, .55);
}

/* ---------- the content column ---------- */
.onb-panel { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; display: flex; scrollbar-width: thin; scrollbar-color: rgba(127, 224, 255, .25) transparent; }
.onb-panel::-webkit-scrollbar { width: 4px; }
.onb-panel::-webkit-scrollbar-thumb { background: rgba(127, 224, 255, .22); border-radius: 4px; }
.onb-panel-inner {
  margin: auto 0;
  width: min(620px, 100%);
  padding: 4px 4px 12px 0;
}
.onb-brand { margin: 0 0 clamp(20px, 4vh, 36px); }
.onb-lock { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.onb-lock img { width: 26px; height: 26px; display: block; }
.onb-lock b { font-family: "Unbounded", var(--onb-sans); font-weight: 700; font-size: .84rem; letter-spacing: .02em; }

.onb-progress { display: flex; gap: 8px; margin-bottom: 34px; max-width: 300px; }
.onb-seg { height: 3px; flex: 1; background: rgba(215, 235, 250, .14); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.onb-seg.on::after, .onb-seg.done::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--nv-azure), var(--nv-cyan));
  box-shadow: 0 0 12px rgba(127, 224, 255, .5);
}
.onb-seg.on::after { animation: obSeg .5s var(--onb-ease) both; }

/* the card is just the content — the round page is the container */
.onb-card { background: transparent; border: 0; padding: 0; }
.onb-card.is-in { animation: obCardIn .55s var(--onb-ease) both; }
.onb-card [style*="--i"] { animation: obUp .55s var(--onb-ease) both; animation-delay: calc(var(--i) * 70ms); }

/* eyebrow */
.onb-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--onb-mono);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--nv-cyan); margin: 0 0 18px;
}
.onb-eyebrow::before { content: ""; height: 1px; width: 34px; background: currentColor; opacity: .4; flex: none; }
/* headline — the landing's display voice */
.onb-title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 850; font-stretch: 118%;
  letter-spacing: -.03em; line-height: 1.04; margin: 0 0 16px; color: var(--nv-bone);
  text-wrap: balance; outline: none;
}
.onb-title .ac {
  font-family: var(--onb-serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  font-size: 1.06em; letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFFFFF 18%, #BCE4F8 66%, #8FCBE8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.onb-title-c { text-align: left; }
.onb-sub { font-size: .98rem; line-height: 1.66; color: #AEBEC8; margin: 0 0 26px; max-width: 52ch; }
.onb-sub-c { text-align: left; }
.onb-opt2 { color: var(--nv-fog2); font-weight: 500; }

.onb-welcome-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.onb-welcome-list li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: #C6D6DE; }
.onb-welcome-list svg { color: var(--nv-cyan); flex: none; }

/* fields */
.onb-field { margin-bottom: 20px; }
.v-onb .onb-field .field-label, .v-onb .onb-field label {
  display: block; margin-bottom: 9px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--nv-fog);
}
.onb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/* inputs — the website's pill input */
.v-onb .onb-input, .v-onb .input.onb-input {
  width: 100%; height: auto; box-sizing: border-box;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--nv-hair2); border-radius: var(--r-pill);
  padding: 14px 20px; font-size: .96rem; color: var(--nv-bone); font-family: var(--onb-sans);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.v-onb .onb-input::placeholder { color: #5E6F7A; }
.v-onb .onb-input:focus {
  outline: none; border-color: var(--nv-cyan);
  box-shadow: 0 0 0 1px rgba(127, 224, 255, .35); background: rgba(127, 224, 255, .06);
}
.v-onb .onb-input:-webkit-autofill,
.v-onb .onb-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nv-bone);
  -webkit-box-shadow: 0 0 0 100px rgba(16, 21, 25, 1) inset;
  caret-color: var(--nv-bone);
  transition: background-color 9999s ease-out 0s;
}
.v-onb .onb-textarea, .v-onb .input.onb-textarea { min-height: 84px; resize: vertical; line-height: 1.55; margin-top: 12px; border-radius: var(--r-ctl); }
.onb-block { padding: 4px 0 2px; }

/* icon option rows — rounded cards */
.onb-opts { display: flex; flex-direction: column; gap: 10px; }
.onb-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--nv-hair); border-radius: var(--r-ctl); padding: 13px 17px;
  font-family: inherit; color: var(--nv-bone);
  transition: transform .15s var(--onb-ease), border-color .15s, background .15s, box-shadow .2s;
}
.onb-opt:hover { transform: translateY(-1px); border-color: rgba(127, 224, 255, .5); background: rgba(255, 255, 255, .045); box-shadow: 0 10px 26px -14px rgba(127, 224, 255, .3); }
.onb-opt:active { transform: translateY(0) scale(.994); }
.onb-opt.on { border-color: var(--nv-cyan); background: rgba(127, 224, 255, .07); box-shadow: 0 0 0 1px var(--nv-cyan) inset, 0 12px 30px -16px rgba(127, 224, 255, .4); }
.onb-opt-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: rgba(127, 224, 255, .08); color: var(--nv-cyan);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .16);
  transition: background .2s, color .2s, box-shadow .2s;
}
.onb-opt.on .onb-opt-ico { background: var(--nv-grad); color: var(--nv-void); box-shadow: 0 4px 18px rgba(127, 224, 255, .45); }
.onb-opt-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.onb-opt-t { font-weight: 640; font-size: .96rem; }
.onb-opt-s { font-size: .82rem; color: var(--nv-fog); }
.onb-opt-check {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--nv-grad); color: var(--nv-void); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--onb-ease), transform .25s var(--onb-ease);
}
.onb-opt.on .onb-opt-check { opacity: 1; transform: scale(1); }

/* chips — website pills */
.onb-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.onb-chip {
  border: 1px solid var(--nv-hair2); background: rgba(255, 255, 255, .03);
  color: #B4C6CF; border-radius: var(--r-pill); padding: 10px 18px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .16s var(--onb-ease);
}
.onb-chip:hover { transform: translateY(-1px); border-color: rgba(127, 224, 255, .55); color: var(--nv-cyan); }
.onb-chip:active { transform: translateY(0) scale(.97); }
.onb-chip.on { background: var(--nv-grad); border-color: transparent; color: var(--nv-void); font-weight: 600; box-shadow: 0 8px 22px -8px rgba(127, 224, 255, .5); }

/* buttons — the website's exact .btn pill */
.onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.v-onb .btn.onb-btn {
  height: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill); padding: 16px 28px; border: 1px solid transparent;
  font-family: var(--onb-sans); font-size: 13px; font-weight: 800; font-stretch: 114%;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  transition: transform .3s var(--onb-ease), box-shadow .3s var(--onb-ease), background .2s, color .2s, border-color .2s, background-position .4s var(--onb-ease);
}
.v-onb .btn.onb-btn svg { width: 15px; height: 15px; transition: transform .3s var(--onb-ease); }
.v-onb .btn.onb-btn:hover svg { transform: translateX(4px); }
.v-onb .btn-ghost.onb-btn:hover svg { transform: translateX(-4px); }
.v-onb .btn-primary.onb-btn {
  background: var(--nv-grad); background-size: 150% 150%; background-position: 28% 28%;
  color: #06131B; box-shadow: var(--nv-glow);
}
.v-onb .btn-primary.onb-btn:hover {
  transform: translateY(-2px) scale(1.015);
  background: var(--nv-grad); background-size: 150% 150%; background-position: 72% 72%;
  color: #06131B;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 22px 55px -12px rgba(127, 224, 255, .65);
}
.v-onb .btn-primary.onb-btn:active { transform: translateY(0); }
.v-onb .btn-primary.onb-btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.v-onb .btn-ghost.onb-btn { background: transparent; color: var(--nv-bone); border-color: var(--nv-hair2); }
.v-onb .btn-ghost.onb-btn:hover { transform: translateY(-2px); color: var(--nv-bone); border-color: var(--nv-bone); background: transparent; }
.onb-btn-lg { padding: 17px 34px !important; font-size: 14px !important; }
.onb-btn-sm { padding: 11px 20px !important; font-size: 12px !important; }
/* WCAG 2.2.2 — a CTA that pulses forever is non-essential motion with no
   stop control; it now settles after 5.4s. */
.onb-btn-pulse { animation: obBtnPulse 1.8s ease-in-out 3; }

/* ---- step 6: "ready to send" verification cards ---- */
.onb-verify { display: flex; flex-direction: column; gap: 16px; margin: 22px 0 4px; }
.onb-vskel {
  height: 150px; border-radius: var(--r-card); border: 1px solid var(--nv-hair);
  background: linear-gradient(100deg, rgba(215, 235, 250, .03) 30%, rgba(215, 235, 250, .07) 50%, rgba(215, 235, 250, .03) 70%);
  background-size: 220% 100%; animation: obShimmer 1.5s linear infinite;
}
@keyframes obShimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.onb-vcard {
  border: 1px solid var(--nv-hair); border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(127, 224, 255, .04), rgba(127, 224, 255, .01));
  padding: 18px 20px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--onb-ease), transform .45s var(--onb-ease), border-color .25s;
}
.onb-vcard.in { opacity: 1; transform: none; }
.onb-vcard-h { display: flex; align-items: flex-start; gap: 13px; }
.onb-vcard-ico {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(127, 224, 255, .1); color: var(--nv-cyan);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .18);
}
.onb-vcard-ico svg { width: 18px; height: 18px; }
.onb-vcard-hd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-vcard-t { font-weight: 680; font-size: 1rem; color: var(--nv-bone); letter-spacing: -.01em; }
.onb-vcard-s { font-size: .82rem; color: var(--nv-fog); line-height: 1.4; }
.onb-vstat {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--onb-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  color: var(--nv-fog); box-shadow: inset 0 0 0 1px var(--nv-hair2);
}
.onb-vstat svg { width: 12px; height: 12px; }
.onb-vstat.on { color: var(--nv-void); background: var(--nv-grad); box-shadow: 0 6px 18px -8px rgba(127, 224, 255, .5); }
.onb-vcard-b { margin-top: 14px; }
.onb-vfrom { font-size: .86rem; color: var(--nv-bone); line-height: 1.5; margin-bottom: 13px; display: flex; align-items: center; gap: 7px; }
.onb-vfrom b { color: var(--nv-cyan); font-weight: 640; word-break: break-word; }
.onb-vfrom svg { flex: none; width: 14px; height: 14px; color: var(--nv-cyan); }
.onb-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onb-vcard .onb-field { margin-bottom: 0; }
.onb-vcard .onb-field label { font-size: var(--fs-2xs); }
.onb-vrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.onb-vhint { font-size: .78rem; color: var(--nv-fog2); line-height: 1.5; margin: 12px 0 0; }
.onb-vhint b { color: var(--nv-fog); font-weight: 600; }
.onb-vdone {
  display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--nv-cyan);
  line-height: 1.5; padding: 11px 14px; border-radius: var(--r-ctl, 12px);
  background: rgba(127, 224, 255, .07); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .16);
}
.onb-vdone svg { flex: none; width: 15px; height: 15px; }
.onb-vconsent {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-size: .86rem; color: var(--nv-bone); line-height: 1.5;
  padding: 13px 15px; border-radius: var(--r-ctl, 12px);
  border: 1px solid var(--nv-hair); background: rgba(215, 235, 250, .02);
  transition: border-color .2s, background .2s;
}
.onb-vconsent:hover { border-color: rgba(127, 224, 255, .4); }
.onb-vconsent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--nv-cyan); cursor: pointer; }

/* ---- step 7: ready confirmation banner ---- */
.onb-nextstep-ok {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; margin: 0 0 14px;
  border-radius: var(--r-ctl, 12px);
  border: 1px solid rgba(127, 224, 255, .22); background: rgba(127, 224, 255, .06);
}
.onb-nextstep-ico { flex: none; display: inline-flex; margin-top: 1px; color: var(--nv-cyan); }
.onb-nextstep-ico svg { width: 16px; height: 16px; }
.onb-nextstep-txt { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.55; color: var(--nv-fog); }
.onb-nextstep-txt b { color: var(--nv-bone); font-weight: 640; }

@media (max-width: 560px) {
  .onb-vgrid { grid-template-columns: 1fr; }
}

/* small link line */
.onb-note { font-size: .85rem; color: var(--nv-fog); margin: 22px 0 0; }
.onb-note a { color: var(--nv-cyan); font-weight: 600; text-decoration: none; }
.onb-note a:hover { text-decoration: underline; }
.onb-note svg { vertical-align: -2px; color: var(--nv-cyan); margin-right: 4px; }

/* inline error */
.onb-err {
  display: none; font-size: .88rem; color: #FFC7C2; background: rgba(255, 138, 128, .09);
  border: 1px solid rgba(255, 138, 128, .4); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
}
.onb-err.show { display: block; }

/* live label */
.onb-live { display: inline-flex; align-items: center; gap: 10px; }
.onb-live-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--nv-cyan); box-shadow: 0 0 0 0 var(--nv-ring); animation: obDot 1.4s ease-out infinite; }

/* intake read-back — Nova speaks in the landing's serif quote voice */
.onb-readback {
  font-family: var(--onb-serif); font-size: 1.32rem; line-height: 1.56; letter-spacing: -.01em;
  color: #E2ECF2; min-height: 2.2em; margin-bottom: 10px; font-weight: 400;
  max-width: 56ch;
}
.onb-thinking { color: var(--nv-fog); }
.onb-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--nv-cyan); border-radius: 1px; box-shadow: 0 0 8px rgba(127, 224, 255, .8); margin-left: 2px; vertical-align: -2px; animation: obBlink 1s steps(1) 5; }
.onb-plan { margin-top: 20px; }
.onb-plan-grid { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--nv-hair); }
.onb-pcard {
  background: transparent; border: 0; border-bottom: 1px solid var(--nv-hair);
  padding: 16px 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--onb-ease), transform .4s var(--onb-ease);
}
.onb-pcard.in { opacity: 1; transform: none; }
.onb-pcard-h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--onb-mono);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nv-cyan); margin-bottom: 11px;
}
.onb-pcard-h svg { width: 14px; height: 14px; }
.onb-stage-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.onb-stage-pill { font-size: .82rem; font-weight: 560; padding: 5px 13px; border-radius: var(--r-pill); background: rgba(127, 224, 255, .09); color: #BDE9FF; box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .16); }
.onb-stage-arrow { color: rgba(127, 224, 255, .55); font-weight: 700; }
.onb-pcard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.onb-pcard-list li { display: flex; flex-direction: column; gap: 2px; }
.onb-pcard-list b { font-weight: 640; font-size: .9rem; color: var(--nv-bone); }
.onb-pcard-list span { font-size: .82rem; color: var(--nv-fog); line-height: 1.45; }
.onb-pcard-msg .onb-msg-bubble {
  background: var(--nv-grad); color: var(--nv-void); border-radius: 18px; border-bottom-left-radius: 6px;
  padding: 13px 17px; font-size: .9rem; font-weight: 550; line-height: 1.5;
  box-shadow: 0 12px 30px -8px rgba(127, 224, 255, .45);
  max-width: 46ch;
}
.onb-tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-tag { font-size: .8rem; font-weight: 560; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(127, 224, 255, .09); color: #BDE9FF; box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .16); }

/* building list — hairline rows */
.onb-build { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--nv-hair); }
.onb-build-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 15px 2px;
  border: 0; border-bottom: 1px solid var(--nv-hair); background: transparent;
  transition: background .3s var(--onb-ease);
}
.onb-build-item.active { background: linear-gradient(90deg, rgba(127, 224, 255, .06), transparent 70%); border-radius: 10px; }
.onb-build-item.done { background: transparent; }
.onb-build-item.err { background: linear-gradient(90deg, rgba(255, 138, 128, .07), transparent 70%); border-radius: 10px; }
.onb-build-ico { flex: none; width: 26px; height: 26px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--nv-fog2); margin-top: 1px; }
.onb-build-item.active .onb-build-ico { color: var(--nv-cyan); }
.onb-build-item.done .onb-build-ico { background: var(--nv-grad); color: var(--nv-void); box-shadow: 0 3px 14px rgba(127, 224, 255, .45); }
.onb-build-item.err .onb-build-ico { color: var(--err); }
.onb-build-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb-build-t { font-weight: 600; font-size: .94rem; color: #D4E2E9; }
.onb-build-item.wait .onb-build-t { color: var(--nv-fog2); }
.onb-build-d { font-size: .82rem; color: var(--nv-fog); line-height: 1.45; word-break: break-word; }
.onb-spin { width: 15px; height: 15px; border-radius: var(--r-pill); border: 2px solid rgba(127, 224, 255, .25); border-top-color: var(--nv-cyan); animation: obspin .7s linear infinite; }

/* completion */
.onb-done-badge {
  width: 60px; height: 60px; margin: 0 0 20px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--nv-grad); color: var(--nv-void);
  box-shadow: 0 0 0 1px rgba(207, 243, 255, .35) inset, 0 16px 46px -8px rgba(127, 224, 255, .6);
  animation: obPop .5s var(--onb-ease) both;
}
.onb-sum { list-style: none; margin: 8px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--nv-hair); }
.onb-sum-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--nv-hair);
}
.onb-sum-ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(127, 224, 255, .09); color: var(--nv-cyan); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .16); }
.onb-sum-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.onb-sum-t { font-weight: 640; font-size: .92rem; color: var(--nv-bone); }
.onb-sum-s { font-size: .8rem; color: var(--nv-fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-sum-dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--nv-cyan); box-shadow: 0 0 0 3px rgba(127, 224, 255, .16), 0 0 10px rgba(127, 224, 255, .6); }

/* founding plan box — the website's rounded card */
.onb-planbox {
  border: 1px solid rgba(127, 224, 255, .3); border-radius: var(--r-card); padding: 24px;
  background: linear-gradient(180deg, rgba(127, 224, 255, .07), rgba(127, 224, 255, .01));
  max-width: 520px;
}
.onb-planbox-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.onb-plan-badge {
  display: inline-block; font-family: var(--onb-mono);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nv-void); background: var(--nv-grad); border-radius: var(--r-pill); padding: 5px 12px; margin-bottom: 10px;
}
.onb-plan-price { display: flex; align-items: baseline; gap: 3px; }
.onb-plan-amt { font-family: var(--onb-serif); font-size: 2.9rem; font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--nv-bone); }
.onb-plan-per { font-size: 1rem; color: var(--nv-fog); }
.onb-plan-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.onb-plan-perks li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: #C6D6DE; }
.onb-plan-perks svg { color: var(--nv-cyan); flex: none; }
.onb-fineprint { font-size: .76rem; color: var(--nv-fog2); margin: 12px 0 0; }
.onb-fade-in { animation: obUp .4s var(--onb-ease) both; }
.v-onb .onb-planbox .btn-primary.onb-btn { width: 100%; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .onb-rail { width: clamp(240px, 26vw, 320px); }
}
@media (max-width: 900px) {
  .onb-rail { display: none; }
  .onb-page { padding: clamp(16px, 4vw, 28px) clamp(16px, 5vw, 32px); }
  .onb-panel-inner { margin: auto; width: min(620px, 100%); }
  .onb-row2 { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 420px) {
  .v-onb { padding: 8px; }
  .onb-page { border-radius: 22px; padding: 16px 16px 12px; }
  .onb-title { font-size: 1.65rem; }
  .onb-planbox { padding: 18px; }
  .onb-planbox-top { flex-direction: column; }
  .onb-actions { flex-wrap: wrap; }
  .v-onb .btn.onb-btn { flex: 1; justify-content: center; font-size: 12px; padding: 15px 18px; letter-spacing: .06em; }
  .onb-btn-lg { padding: 16px 20px !important; font-size: 12.5px !important; }
}

/* ---------- keyframes ---------- */
@keyframes obCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes obUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes obSeg { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
@keyframes obspin { to { transform: rotate(360deg); } }
@keyframes obBlink { 50% { opacity: 0; } }
@keyframes obDot { 0% { box-shadow: 0 0 0 0 var(--nv-ring); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes obPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes obBtnPulse { 0%, 100% { box-shadow: var(--nv-glow); } 50% { box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 16px 52px -8px rgba(127, 224, 255, .85); } }

@media (prefers-reduced-motion: reduce) {
  .v-onb *, .v-onb *::after, .v-onb *::before { animation: none !important; transition: none !important; }
  .onb-card [style*="--i"], .onb-pcard, .onb-vcard { opacity: 1 !important; transform: none !important; }
  .onb-vskel { animation: none !important; }
  .onb-frame-img { opacity: 0; } .onb-frame-img.on { opacity: 1; }
}