/* styles/views/onboarding.css: onboarding (.ob-*) (owner E1, UX spec §13.1). Tokens only, no hex values.
   Animate transform and opacity only (stroke-dashoffset on a handful of SVG strokes for draw-ons). */

/* ---------- Shared page frame ---------- */
.ob-page {
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: var(--safe-top) var(--gutter) var(--safe-bottom); isolation: isolate; overflow-x: clip;
}
.ob-page::before { /* faint lab grid, fading out downward */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 55%); mask-image: linear-gradient(to bottom, black, transparent 55%);
}
.ob-flex { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ob-head {
  display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; gap: var(--s-2);
  min-height: 56px; width: 100%; max-width: 520px; margin: 0 auto;
}
.ob-back { margin-left: -8px; }
.ob-head-spacer { width: var(--tap); }
.ob-head-mark { justify-self: center; display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-family: var(--font-num); font-weight: 800; font-size: 19px; letter-spacing: .04em; }
.ob-head-mark > span { color: var(--ink); transform: skewX(var(--skew)); }
.ob-progress { display: flex; gap: 5px; align-items: center; height: 100%; padding: 0 var(--s-2); }
.ob-progress-seg { flex: 1 1 0; height: 4px; border-radius: var(--r-pill); background: var(--line); position: relative; overflow: hidden; }
.ob-progress-seg.is-done { background: var(--brand-line); }
.ob-progress-seg.is-now { background: var(--brand); }
.ob-progress-seg.is-now::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-hi), transparent);
  transform: translateX(-100%); animation: ob-seg-shine 2.4s var(--ease-inout) infinite;
}
@keyframes ob-seg-shine { 60%, 100% { transform: translateX(100%); } }

.ob-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s-4); width: 100%; max-width: 520px; margin: 0 auto; padding-top: var(--s-4); }
.ob-body--center { align-items: center; justify-content: center; text-align: center; }
.ob-foot { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 520px; margin: 0 auto; padding: var(--s-4) 0 var(--s-3); }
.ob-foot .ui-note { text-align: center; }
.ob-title { font-size: var(--fs-h1); line-height: 1.22; font-weight: 750; letter-spacing: -.015em; color: var(--ink); }
.ob-title--center { text-align: center; max-width: 18ch; }
.ob-h2 { font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.ob-lede { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.ob-muted { color: var(--muted); }
.ob-center { text-align: center; }
.ob-help, .ob-micro--lock { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.ob-help .ui-icon, .ob-micro--lock .ui-icon { flex: none; margin-top: 2px; }
.ob-micro { font-size: var(--fs-micro); line-height: 1.45; color: var(--muted); font-weight: 500; }
.ob-micro--lock { font-size: var(--fs-micro); }
.ob-error { font-size: var(--fs-small); font-weight: 600; color: var(--bad); }
.ob-hint {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-small); font-weight: 550;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.ob-hint .ui-icon { flex: none; margin-top: 1px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: ob-dot 1.2s var(--ease-inout) infinite alternate; }
@keyframes ob-dot { from { transform: scale(.6); opacity: .45; } to { transform: scale(1); opacity: 1; } }
.ob-sheet { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
.ob-sheet-body { color: var(--ink-2); }

/* ---------- O1 Welcome ---------- */
.ob-welcome {
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: var(--s-3);
  padding: calc(var(--safe-top) + var(--s-2)) var(--gutter) calc(var(--safe-bottom) + var(--s-2)); overflow: hidden; isolation: isolate;
}
.ob-welcome-hero { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ob-welcome-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s-4); width: 100%; max-width: 480px; margin: 0 auto; }
.ob-welcome-copy { display: flex; flex-direction: column; gap: var(--s-2); }
.ob-h1 { font-family: var(--font-num); font-weight: 800; font-size: 40px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.ob-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.ob-welcome-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); }
.ob-signin { align-self: center; }
.ob-welcome-actions .ui-note { text-align: center; }

/* Launch title (bw-launch-title) */
bw-launch-title { display: block; width: 100%; max-width: 480px; }
.ob-lt { display: flex; flex-direction: column; align-items: center; }
.ob-lt-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(130% 75% at 50% 22%, black 35%, transparent 78%); mask-image: radial-gradient(130% 75% at 50% 22%, black 35%, transparent 78%);
}
.ob-lt-grid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 72% 18%, var(--brand-soft), transparent 70%); }
.ob-lt-svg { width: 100%; height: auto; max-height: 30vh; overflow: visible; position: relative; }
.ob-lt-zero { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 2 5; }
.ob-lt-bw { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 4; }
.ob-lt-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; fill: var(--faint); }
.ob-lt-seg { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ob-lt-quiet { stroke: var(--ph-quiet); }
.ob-lt-unweight { stroke: var(--ph-unweight); }
.ob-lt-brake { stroke: var(--ph-brake); }
.ob-lt-propel { stroke: var(--ph-propel); stroke-width: 3.8; }
.ob-lt-fill { stroke: none; }
.ob-lt-fill--unweight { fill: var(--ph-unweight); fill-opacity: .12; }
.ob-lt-fill--brake { fill: var(--ph-brake); fill-opacity: .12; }
.ob-lt-fill--propel { fill: var(--ph-propel); fill-opacity: .14; }
.ob-lt-trail { fill: none; stroke: url(#ob-lt-trail-g); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ob-lt-head { fill: var(--brand-hi); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ob-lt-glow { opacity: .55; transform-box: fill-box; transform-origin: center; animation: ob-lt-breathe 4.2s var(--ease-inout) infinite alternate; }
@keyframes ob-lt-breathe { from { opacity: .38; } to { opacity: .7; } }
.ob-lt-tick { stroke: var(--brand-line); stroke-width: 1.3; stroke-linecap: round; }
.ob-lt-tick.is-major { stroke: var(--brand); stroke-width: 1.8; }
.ob-lt-ray { stroke: var(--brand); stroke-dasharray: 1; stroke-dashoffset: 0; }
.ob-lt-core { fill: var(--brand); transform-box: fill-box; transform-origin: center; }
.ob-lt-word { display: flex; flex-direction: column; align-items: center; margin-top: -2px; line-height: 1; }
.ob-lt-burst {
  display: inline-flex; font-family: var(--font-num); font-weight: 800; font-size: 84px; line-height: .84; letter-spacing: .02em;
  transform: skewX(var(--skew)); color: var(--ink);
}
.ob-lt-letter { display: inline-block; transform-origin: 50% 65%; }
.ob-lt-by { font-size: 12px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
/* initial frames while the sequence plays (WAAPI takes over per element) */
bw-launch-title.is-playing .ob-lt-grid, bw-launch-title.is-playing .ob-lt-axis, bw-launch-title.is-playing .ob-lt-fill,
bw-launch-title.is-playing .ob-lt-letter, bw-launch-title.is-playing .ob-lt-by, bw-launch-title.is-playing .ob-lt-glow { opacity: 0; animation: none; }
bw-launch-title.is-playing .ob-lt-seg, bw-launch-title.is-playing .ob-lt-trail, bw-launch-title.is-playing .ob-lt-ray { stroke-dashoffset: 1; }
bw-launch-title.is-playing .ob-lt-core { transform: scale(0); }
bw-launch-title.is-playing .ob-lt-tick { opacity: .12; }

[data-short] .ob-lt-burst { font-size: 64px; }
[data-short] .ob-lt-svg { max-height: 24vh; }
[data-short] .ob-h1 { font-size: 34px; }
[data-short] .ob-welcome-body { gap: var(--s-3); }
[data-short] .ob-sub { font-size: var(--fs-small); }

@media (min-width: 960px) {
  .ob-welcome {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--s-8);
    max-width: var(--content-max); margin: 0 auto; padding: var(--s-7) var(--s-7);
  }
  .ob-welcome-hero { align-self: stretch; }
  bw-launch-title { max-width: 620px; }
  .ob-lt-svg { max-height: 46vh; }
  .ob-lt-burst { font-size: 120px; }
  .ob-h1 { font-size: 56px; }
  .ob-welcome-body { max-width: 440px; margin: 0; }
  .ob-lt-grid { -webkit-mask-image: radial-gradient(80% 80% at 30% 45%, black 30%, transparent 80%); mask-image: radial-gradient(80% 80% at 30% 45%, black 30%, transparent 80%); }
}

/* ---------- O2 Age + blocked ---------- */
.ob-page--age .ui-monthyear { margin-top: var(--s-2); }
.ob-blocked-mark { color: var(--faint); display: inline-flex; margin-bottom: var(--s-2); }
.ob-empty-art { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: var(--s-2); }

/* ---------- O3 Insoles ---------- */
.ob-body--ins { gap: var(--s-3); }
.ob-ins-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-xl); background: var(--stage); border: 1px solid var(--line);
  overflow: hidden; isolation: isolate; margin-top: var(--s-2);
}
.ob-ins-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center;
}
.ob-ins-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(70% 60% at 50% 45%, var(--brand-soft), transparent 70%); transition: opacity var(--dur-5) var(--ease-out);
}
.ob-ins-stage.is-live { border-color: var(--brand-line); }
.ob-ins-stage.is-live::after { opacity: 1; }
.ob-ins-feet { display: flex; justify-content: center; }
.ob-ins-chips { display: flex; gap: var(--s-3); justify-content: center; }
.ob-ins-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 64px; justify-content: center; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--font-num); font-weight: 700; font-size: 18px; letter-spacing: .06em;
  transition: background-color var(--dur-3), color var(--dur-3), border-color var(--dur-3);
}
.ob-ins-chip.is-on { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand-line); }
.ob-ins-wait { letter-spacing: .1em; }
.ob-ins-statusrow { min-height: 28px; display: flex; align-items: center; }
.ob-ins-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-weight: 700; font-size: 18px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.ob-ins-status.is-blocked { color: var(--warn-ink); }
.ob-sim-note { text-align: center; margin-top: calc(var(--s-1) * -1); }
.ob-ins-status.is-waiting { color: var(--muted); }
.ob-ins-status.is-live { color: var(--brand-strong); }
.ob-ins-connect { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ob-ins-connect .ui-btn { min-height: 64px; padding: 0 var(--s-3); font-size: 16px; white-space: nowrap; }

/* ---------- O6 Rank ---------- */
.ob-body--rank { gap: var(--s-5); }
.ob-firstjump {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-4); margin-top: calc(var(--s-2) * -1);
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight);
}
[data-theme="light"] .ob-firstjump { box-shadow: var(--shadow-1); border-color: transparent; }
.ob-firstjump-k { font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.ob-firstjump-v { font-family: var(--font-num); font-weight: 700; font-size: 36px; line-height: 1; color: var(--ink); }
.ob-firstjump-v small { font-size: .42em; color: var(--muted); margin-left: .12em; letter-spacing: .06em; font-weight: 600; }
.ob-block { display: grid; gap: var(--s-3); }
.ob-compete { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.ob-compete-opt {
  min-height: 64px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid var(--line-strong); color: var(--ink-2);
  font-family: var(--font-num); font-weight: 700; font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-1) var(--ease-standard);
}
.ob-compete-opt:active { transform: scale(.96); }
.ob-compete-opt.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.ob-area-row { display: grid; gap: var(--s-3); }
.ob-country {
  position: relative; display: flex; align-items: center; min-height: var(--tap-md); padding: 0 var(--s-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-strong); cursor: pointer;
}
.ob-country:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ob-country-face { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.ob-country-face .ui-icon { color: var(--muted); }
.ob-country-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ob-postal-input { height: 64px; font-family: var(--font-num); font-size: 28px; font-weight: 700; letter-spacing: .14em; }
.ob-postal-input::placeholder { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; }
.ob-area-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); min-height: 34px; }
.ob-area-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink); font-size: var(--fs-small); font-weight: 650;
}
.ob-area-chip .ui-icon { color: var(--brand-strong); }
.ob-skip { align-self: center; }
/* Short frames: country and postal code share a row so "Rank me" stays in view. */
[data-short] .ob-body--rank { gap: var(--s-4); }
[data-short] .ob-area-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
[data-short] .ob-country { min-height: 64px; }
[data-short] .ob-country-face .ob-muted { display: none; }
[data-short] .ob-firstjump-v { font-size: 30px; }

/* Placement reveal */
.ob-reveal {
  position: relative; display: flex; flex-direction: column; flex: 1 1 auto; isolation: isolate;
}
.ob-reveal::before {
  content: ""; position: absolute; inset: -40px calc(var(--gutter) * -1) 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 46% at 50% 24%, color-mix(in srgb, var(--tc) 18%, transparent), transparent 72%);
}
.ob-reveal-top { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-top: var(--s-3); text-align: center; }
.ob-reveal-kicker .ui-chyron-txt { font-size: 14px; }
.ob-reveal-emblem { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: var(--s-2) 0 var(--s-1); }
.ob-reveal-emblem > span { grid-area: 1 / 1; display: grid; place-items: center; }
.ob-reveal-sil { opacity: 0; }
.ob-reveal-rays {
  position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; max-width: none; margin: -130% 0 0 -130%; fill: var(--tc); pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, black 28%, transparent 68%); mask-image: radial-gradient(circle, black 28%, transparent 68%);
}
.ob-reveal-rays path { opacity: .1; }
[data-theme="light"] .ob-reveal-rays path { opacity: .12; }
.ob-reveal.is-pending .ob-reveal-rays, .ob-reveal.is-playing .ob-reveal-rays { opacity: 0; }
.ob-reveal-name {
  display: inline-flex; font-family: var(--font-num); font-weight: 800; font-size: 64px; line-height: .9; letter-spacing: .05em;
  color: var(--tc); transform: skewX(var(--skew));
}
.ob-reveal-letter { display: inline-block; }
.ob-reveal-caption .ui-chyron-txt { font-size: 17px; }
.ob-reveal-text { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-5); width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.ob-goal { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); }
.ob-goal-end { display: inline-flex; flex: none; }
.ob-goal-track { position: relative; flex: 1 1 auto; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ob-goal-fill {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, transparent), var(--tc));
}
.ob-reveal-next { font-family: var(--font-num); font-weight: 700; font-size: 26px; letter-spacing: .02em; color: var(--ink); text-transform: uppercase; }
.ob-reveal-value { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.ob-reveal-value b { font-family: var(--font-num); font-weight: 700; font-size: 20px; color: var(--ink); }
.ob-ghost {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); max-width: 420px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4;
}
.ob-ghost .ui-icon { flex: none; color: var(--violet); margin-top: 1px; }
.ob-reveal .ob-foot { margin-top: auto; }
.ob-reveal.is-pending .ob-reveal-kicker, .ob-reveal.is-pending .ob-reveal-color, .ob-reveal.is-pending .ob-reveal-letter,
.ob-reveal.is-pending .ob-reveal-caption, .ob-reveal.is-pending .ob-goal, .ob-reveal.is-pending .ob-reveal-late,
.ob-reveal.is-playing .ob-reveal-kicker, .ob-reveal.is-playing .ob-reveal-color, .ob-reveal.is-playing .ob-reveal-letter,
.ob-reveal.is-playing .ob-reveal-caption .ui-chyron, .ob-reveal.is-playing .ob-goal, .ob-reveal.is-playing .ob-reveal-late { opacity: 0; }
[data-short] .ob-reveal-emblem { width: 96px; height: 96px; }
[data-short] .ob-reveal-emblem .ui-emblem { --sz: 96px !important; }
[data-short] .ob-reveal-name { font-size: 52px; }
[data-short] .ob-reveal-text { margin-top: var(--s-3); }

/* ---------- O7 Save / sign-in / code / name ---------- */
.ob-yours {
  display: flex; align-items: center; gap: 14px; padding: 14px var(--s-4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight);
}
[data-theme="light"] .ob-yours { box-shadow: var(--shadow-1); border-color: transparent; }
.ob-yours-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-yours-k { font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.ob-yours-v { font-family: var(--font-num); font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); }
.ob-yours-c { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-auth { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.ob-benefits { display: grid; gap: var(--s-2); }
.ob-benefits li { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.ob-benefit-ic { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.ob-auth-form { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ob-google { display: flex; justify-content: center; min-height: var(--tap); }
.ob-code-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.ob-code { margin-top: var(--s-2); }
.ob-code.is-busy { opacity: .6; }
.ob-code-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ob-resend { font-size: var(--fs-small); min-height: var(--tap); display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.ob-body--name { align-items: stretch; }
.ob-name-avatar { align-self: center; border-radius: 50%; padding: 6px; margin-top: var(--s-2); box-shadow: 0 0 0 1px var(--line); transition: transform var(--dur-1); }
.ob-name-avatar:active { transform: scale(.96); }
.ob-name-avatar { position: relative; }
.ob-name-avatar-icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--av-ink); opacity: .7; pointer-events: none; }

/* ---------- Demo entry ---------- */
.ob-demo { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); color: var(--brand); }
.ob-demo-mark { display: inline-flex; animation: ob-demo-pulse 900ms var(--ease-inout) infinite alternate; }
.ob-demo-text { font-family: var(--font-num); font-weight: 700; letter-spacing: var(--track-chyron); text-transform: uppercase; color: var(--muted); font-size: 15px; text-align: center; padding: 0 var(--gutter); }
@keyframes ob-demo-pulse { from { transform: scale(.92); opacity: .7; } to { transform: scale(1); opacity: 1; } }

/* ---------- Desktop ---------- */
@media (min-width: 960px) {
  /* Desktop: the step sits as one centred column; the header stays at the top. */
  .ob-page { justify-content: center; padding-top: calc(56px + var(--s-6)); padding-bottom: var(--s-6); }
  .ob-page .ob-body, .ob-page .ob-foot, .ob-page .ob-head { max-width: 480px; }
  .ob-page .ob-head { position: absolute; top: var(--s-5); left: 50%; transform: translateX(-50%); width: calc(100% - 2 * var(--gutter)); }
  .ob-page .ob-body, .ob-page .ob-flex, .ob-page .ob-reveal { flex: 0 0 auto; }
  .ob-page .ob-foot { padding-top: var(--s-5); }
}