/* ============================================================================
   MASTERMIND LANDING — onboarding sheet ("the front door")
   A large floating sheet that opens IN PLACE over www.mastermind-x.com when any
   Start free / trial / Log in CTA is clicked. Account → Preferences → Plan →
   Billing → Done, in the LANDING's design language (light Swiss, Outfit
   geometric display, --blue, hairlines) — NOT the Terminal's dark chart idiom.

   THE STAGE (left column, 2026-07-25 rebuild). The left column is no longer a
   fixed marketing card: it is a STAGE that plays the desk coming online, one
   step at a time. Its spine is a 3×3 lattice whose ROWS ARE THE TIERS
   (Free / Insider / Pro) — so the structure encodes the actual pricing truth,
   and choosing a plan literally lights up what you bought (a staggered cascade;
   locked rows keep their lock). Picking Dark in Preferences flips the whole
   stage to the product's dark skin — the stage is a live preview, not
   decoration. Billing slides a 7-day trial meter over it; Done lights the desk.
   Motion is CSS-only (transform/opacity), two ambient loops max, parked on
   tab-hide / idle / close and disabled under prefers-reduced-motion — the
   thermal law from the start.html hero guard applies here too.

   Paired asset: templates/onboard.css MUST byte-match site/onboard.css
   (scripts/check_template_site_sync). All rules are namespaced `.obm-` so this
   file can never collide with the landing's own inline CSS. Tokens (--bg, --ink,
   --blue, --hair, --sh-*, --r*) are inherited from index.html's :root.
   ========================================================================== */

/* ── the DISPLAY face ────────────────────────────────────────────────────────
   Outfit — a geometric sans — is the single display face for BOTH the landing and
   this sheet: every headline, every piece of chrome, and every figure. It replaced
   a two-face system that had drifted apart (operator, 2026-07-26: "we're a modern
   SaaS company"):
     · words were Archivo Expanded, a poster grotesque at font-stretch 125%. Wide
       AND heavy, so its counters close up and its numerals read short and blocky;
     · figures were Newsreader ExtraBold, an editorial serif — magazine numbers on
       a product page, in a voice nothing else on the page spoke.
   Outfit sets `96,412` at 26px in 77.0px against Archivo Expanded's 89.6px — 14%
   narrower at identical height — so the "squashed" complaint that put the serif
   here in the first place is answered by the display face itself, with no second
   voice required. Measurements + specimen: mockups/refs/landing-modern-sans/.

   FIGURES ARE TABULAR BY DEFAULT, baked into the subset rather than asked for in
   CSS. Outfit ships PROPORTIONAL figures (13.45px of digit spread at 48px/800);
   Archivo's were fixed-width, so the live gauge score and every price column on
   the landing silently depend on fixed advances. The build script remaps the digit
   codepoints onto Outfit's own `tnum` glyphs, which is why no rule in here carries
   `font-variant-numeric` — it cannot be forgotten on the one rule that matters.
   (`pnum` still maps back to proportional if it is ever wanted.)

   It lives HERE, not in index.html, because the sheet is lazy-injected onto macro
   pages that carry none of the landing's CSS (theme.js _mmOpenOnboard -> onboard.js
   ensureAssets): declaring it in the stylesheet makes the url() resolve relative to
   THIS file, which is correct at any page depth, and means neither file depends on
   the other's cascade.

   SELF-HOSTED, for the same reason theme.css self-hosts Inter: fonts.googleapis.com
   is blocked in mainland China, so the old CDN <link> silently delivered nothing
   there and every headline fell back to system sans with no error anywhere.

   The wght axis is load-bearing and must stay a RANGE — the sheet asks for the
   interpolated 650 four times (.obm-cmp-cell, .obm-step-lbl, .obm-mini-lbl span,
   .obm-sum-list li b) and the landing once (.stg); a static instance would
   silently flatten every one of them to the nearest shipped weight.
   Outfit has no wdth or opsz axis, so no rule may ask for one; the retired
   font-stretch:125% and font-variation-settings:'opsz' declarations are gone
   rather than left as dead code. Glyphs are subset to latin against EXACTLY the
   range Archivo carried, so every symbol that used to fall through to the system
   stack (→ ⓘ ⚡ ✓ ✗ and all CJK) still does — unicode-range mirrors the subset, so
   nothing outside it renders as tofu. 41KB, down from 112KB for the two faces it
   replaces. Regenerate: mockups/refs/landing-modern-sans/build_outfit_subset.py.
   Outfit is SIL Open Font License 1.1 (Smartsheet / Rodrigo Fuenzalida). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/Outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Landing and sheet both declare these, so neither depends on the other's cascade
   (the sheet is lazy-injected onto macro pages that have no landing CSS). --fig is
   kept as an alias rather than replaced: the eight figure rules using it are the
   ones most likely to be re-pointed at a dedicated numeral face again. */
:root{--display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;--fig:var(--display)}

/* Self-carried control reset. The sheet was authored against the LANDING, which
   resets `button{font:inherit;color:inherit;background:none;border:0;padding:0}`
   globally — macro pages (theme.css) do not, so every unstyled button in here
   picked up the UA's buttonface fill and outset border: a grey slab behind the
   period toggle, a black ring around it, and black `buttontext` inside the plan
   cards. Zero-specificity `:where()` so every .obm-* rule below still wins. */
:where(.obm-scrim) :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.obm-scrim) :where(input,select,textarea){font:inherit}
/* the step headings take focus for screen readers only — they are not controls,
   so the sheet's generic focus ring must not land on them */
.obm-scrim .obm-h1:focus,.obm-scrim .obm-h1:focus-visible,
.obm-scrim .obm-cmp-h:focus,.obm-scrim .obm-cmp-h:focus-visible{outline:none;box-shadow:none}

.obm-root{
  /* local tokens layered on the landing's palette */
  --obm-pad:40px;
  --obm-field-h:46px;
  --obm-radius:14px;
  --ob-free:#5d6b7e;      /* muted     */
  --ob-insider:#0f9d8f;   /* teal      */
  --ob-pro:#7862e0;       /* violet    */
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* ── scrim + shell ───────────────────────────────────────────────────────── */
.obm-scrim{
  /* Self-carried design tokens (the landing's :root values, copied verbatim) so the
     sheet renders identically on EVERY www page — macro pages (theme.css) name their
     variables differently, and without these the sheet painted transparent there.
     Custom properties inherit from this root to every .obm-* descendant. */
  --bg:#f7f8fa; --panel:#ffffff; --panel-2:#fbfcfd;
  --hair:#eaecf0; --hair-2:#dfe3e9;
  --ink:#1c2430; --ink-soft:#34404f; --muted:#5d6b7e; --faint:#8a95a4;
  --blue:#285fff; --blue-ink:#1c47cc; --blue-wash:#eef2ff;
  --q-green:#1f8b41; --q-gold:#b07d05; --q-red:#c12f2f;
  --green-wash:#e9f5ec; --red-wash:#faeceb; --gold-wash:#faf3e2;
  --sh-card:0 1px 3px rgba(20,30,50,.07),0 1px 2px rgba(20,30,50,.05);
  --sh-lift:0 14px 34px -14px rgba(20,30,50,.25),0 3px 8px rgba(20,30,50,.07);
  --sh-deep:0 30px 60px -22px rgba(18,26,45,.35),0 8px 18px -8px rgba(18,26,45,.12);
  --sh-plate:0 24px 60px -20px rgba(18,26,45,.34),0 6px 16px -6px rgba(18,26,45,.14);
  --r-sm:6px; --r:12px; --r-lg:16px;
  position:fixed;inset:0;z-index:100100;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2.6vh,36px);
  background:rgba(16,22,34,.46);
  -webkit-backdrop-filter:saturate(120%) blur(3px);backdrop-filter:saturate(120%) blur(3px);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s;
}
.obm-scrim.obm-open{opacity:1;visibility:visible;transition:opacity .2s ease}
/* z-index 100100 clears everything the HOST pages float: row popovers (12000),
   the account modal (100060) and the settings dashboard (100001) — the sheet is
   opened FROM those surfaces and must sit above them. The one thing that still
   outranks it is the Brain launcher (max-int by design), which used to sit on
   top of this sheet's primary button; park it while the sheet owns the screen. */
html.obm-lock #mmb-launch{opacity:0;pointer-events:none;transition:opacity .15s ease}

/* ── DARK SKIN ──────────────────────────────────────────────────────────────
   The sheet is SITE-WIDE: it opens over the light landing AND over the dark
   macro pages (theme.css). A light sheet punched over a dark desk read as a
   different product — and as a flashbang at night — so the skin follows the
   HOST: onboard.js stamps data-obm-skin="dark" on the scrim when the page is
   theme-capable (a theme.css link) and html[data-theme] is dark, and keeps it
   in sync while the sheet is open. The landing carries no theme.css, so it
   stays light exactly as before. Only TOKENS change here; every component
   below already paints from them (component-level dark fixes — the few places
   a token can't reach — live in the DARK SKIN OVERRIDES block at the end). */
.obm-scrim[data-obm-skin="dark"]{
  --bg:#0b0f19; --panel:#141b2b; --panel-2:#111726;
  --hair:#232d43; --hair-2:#2f3b55;
  --ink:#e9eef8; --ink-soft:#c6cfe0; --muted:#93a1b8; --faint:#6f7e98;
  --blue:#5b8cff; --blue-ink:#8bb0ff; --blue-wash:rgba(91,140,255,.16);
  --q-green:#3ecf8e; --q-gold:#e3b950; --q-red:#ff7b7b;
  --green-wash:rgba(62,207,142,.13); --red-wash:rgba(255,123,123,.11); --gold-wash:rgba(227,185,80,.13);
  --sh-card:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.32);
  --sh-lift:0 14px 34px -14px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.4);
  --sh-deep:0 30px 60px -22px rgba(0,0,0,.8),0 8px 18px -8px rgba(0,0,0,.55);
  --sh-plate:0 24px 60px -20px rgba(0,0,0,.8),0 6px 16px -6px rgba(0,0,0,.5);
  background:rgba(4,7,14,.62);
}

.obm-sheet{
  position:relative;display:grid;grid-template-columns:minmax(340px,45%) 1fr;
  width:min(1180px,100%);height:min(792px,94vh);
  background:var(--panel);border:1px solid var(--hair-2);border-radius:20px;
  box-shadow:var(--sh-deep);overflow:hidden;
  transform:translateY(14px) scale(.99);opacity:0;
  transition:transform .22s cubic-bezier(.22,.8,.3,1),opacity .22s ease;
}
.obm-scrim.obm-open .obm-sheet{transform:none;opacity:1}
/* narrow desktop / tablet: the stage keeps its place but yields width */
@media (max-width:1080px){ .obm-sheet{grid-template-columns:minmax(300px,40%) 1fr} }

/* ── close ───────────────────────────────────────────────────────────────── */
.obm-close{
  position:absolute;top:14px;right:14px;z-index:20;width:34px;height:34px;
  display:grid;place-items:center;border-radius:9px;border:1px solid var(--hair-2);
  background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--muted);box-shadow:var(--sh-card);
  transition:color .15s,background .15s,transform .15s;
}
.obm-close:hover{color:var(--ink);background:var(--panel);transform:translateY(-1px)}
.obm-close svg{width:16px;height:16px}

/* ══════════════════════ LEFT — THE STAGE ════════════════════════════════════
   Tone tokens live here so ONE attribute (data-tone) flips the whole column to
   the product's dark skin when the visitor picks Dark in Preferences.        */
.obm-pane{
  --st-bg:linear-gradient(157deg,#eff3fd 0%,#e8eefb 46%,#f2ecfb 100%);
  --st-card:#ffffff; --st-card-2:#fbfcff;
  --st-hair:#e2e8f4; --st-hair-2:#d5dcec;
  --st-ink:#141c29; --st-soft:#54627a; --st-faint:#93a0b4;
  --st-grid:rgba(28,36,48,.05);
  --st-tint:rgba(40,95,255,.07);
  --st-shadow:0 12px 30px -16px rgba(20,30,50,.30),0 2px 6px rgba(20,30,50,.05);
  --st-beam:rgba(40,95,255,.16);
  position:relative;overflow:hidden;min-height:0;min-width:0;
  padding:34px 0 0 34px;
  background:var(--st-bg);border-right:1px solid var(--hair);
  display:flex;flex-direction:column;
  transition:background .55s ease,border-color .55s ease;
}
.obm-pane[data-tone="dark"]{
  --st-bg:linear-gradient(157deg,#0e1424 0%,#0a0f1a 48%,#160f28 100%);
  --st-card:#151c2c; --st-card-2:#111827;
  --st-hair:#26304a; --st-hair-2:#313c58;
  --st-ink:#eaf0fb; --st-soft:#a3b1c8; --st-faint:#8493ad;
  --st-grid:rgba(255,255,255,.05);
  --st-tint:rgba(90,140,255,.13);
  --st-shadow:0 14px 34px -18px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.3);
  --st-beam:rgba(120,170,255,.20);
  border-right-color:#20283c;
}
.obm-pane::before{                       /* graph-paper wash — the desk's surface */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 42% at 24% 10%,var(--st-tint),transparent 72%),
    radial-gradient(50% 40% at 94% 88%,var(--st-tint),transparent 74%),
    linear-gradient(var(--st-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--st-grid) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(128% 104% at 36% 16%,#000 58%,transparent 100%);
  mask-image:radial-gradient(128% 104% at 36% 16%,#000 58%,transparent 100%);
}
.obm-pane>*{position:relative;z-index:1}

/* the one ambient loop: a slow light bar crossing the desk */
.obm-beam{
  position:absolute;top:-20%;left:-40%;width:34%;height:150%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,var(--st-beam),transparent);
  filter:blur(18px);transform:translateX(0) rotate(8deg);
  animation:obmBeam 17s linear infinite;
}
@keyframes obmBeam{from{transform:translateX(-10%) rotate(8deg)}to{transform:translateX(430%) rotate(8deg)}}

.obm-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.02em;color:var(--st-ink);padding-right:34px;transition:color .55s ease}
.obm-brand svg{width:29px;height:29px;flex:none;border-radius:9px;box-shadow:0 4px 12px -4px rgba(40,95,255,.5)}

.obm-pane-copy{margin-top:24px;max-width:27ch;padding-right:28px}
.obm-pane-h{
  font-family:var(--display);font-weight:800;letter-spacing:-.022em;
  line-height:1.08;font-size:clamp(1.4rem,2.05vw,1.8rem);color:var(--st-ink);margin:0;
  transition:color .55s ease;
}
.obm-pane-sub{color:var(--st-soft);font-size:13.5px;line-height:1.55;margin:11px 0 0;transition:color .55s ease}
/* the copy re-sets itself on every step change */
.obm-pane-copy.obm-swap .obm-pane-h,.obm-pane-copy.obm-swap .obm-pane-sub{animation:obmCopyIn .42s cubic-bezier(.22,.8,.3,1) both}
.obm-pane-copy.obm-swap .obm-pane-sub{animation-delay:.06s}
@keyframes obmCopyIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ── THE DESK ──────────────────────────────────────────────────────────────
   Bleeds 30px past the pane's right edge: what you see is a fragment of a
   bigger desk, cropped by the sheet — depth without perspective tricks.   */
.obm-stage{position:relative;flex:1;min-height:0;margin-top:22px;display:flex;flex-direction:column}
.obm-desk{
  position:relative;width:calc(100% + 30px);flex:1;min-height:0;
  border:1px solid var(--st-hair);border-radius:16px 0 0 16px;border-right:0;
  background:color-mix(in srgb,var(--st-card) 62%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--st-shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .55s ease,border-color .55s ease;
}

/* nameplate — right padding keeps the state chip inside the desk's cropped edge */
.obm-plate{display:flex;align-items:center;gap:9px;flex:none;padding:10px 44px 10px 14px;border-bottom:1px solid var(--st-hair);background:color-mix(in srgb,var(--st-card-2) 82%,transparent);min-width:0}
.obm-plate-ava{flex:none;width:23px;height:23px;border-radius:7px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:11px;color:#fff;background:linear-gradient(135deg,#3f82f6,#7862e0);box-shadow:0 3px 8px -3px rgba(40,95,255,.55);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.obm-plate-ava.obm-pop{transform:scale(1.14)}
.obm-plate-nm{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.15em;color:var(--st-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .55s ease}
.obm-plate-st{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--display);font-weight:800;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;border-radius:99px;padding:3px 9px;white-space:nowrap;
  color:var(--st-faint);background:color-mix(in srgb,var(--st-hair) 60%,transparent);
  transition:color .3s,background .3s;
}
.obm-plate-st i{width:5px;height:5px;border-radius:50%;background:currentColor;display:none}
.obm-plate-st[data-st="live"]{color:#17a34a;background:rgba(23,163,74,.13)}
.obm-plate-st[data-st="live"] i{display:block;animation:obmBlink 2.4s ease-in-out infinite}
.obm-plate-st[data-st="trial"]{color:#b07d05;background:rgba(176,125,5,.13)}
.obm-plate-st[data-st="insider"]{color:var(--ob-insider);background:rgba(15,157,143,.14)}
.obm-plate-st[data-st="pro"]{color:#8b76ea;background:rgba(120,98,224,.16)}
@keyframes obmBlink{0%,100%{opacity:1}50%{opacity:.28}}

/* hero — the annotated signal chart (an illustration, and labelled as one) */
.obm-hero{position:relative;height:118px;flex:none;margin:12px 14px 0;border:1px solid var(--st-hair);border-radius:11px;background:var(--st-card);overflow:hidden;transition:background .55s ease,border-color .55s ease}
.obm-hero svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.obm-hero-hd{position:absolute;top:8px;left:11px;right:11px;z-index:2;display:flex;align-items:center;gap:7px}
.obm-hero-hd b{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.02em;color:var(--st-ink);transition:color .55s ease}
.obm-hero-tf{font-family:var(--display);font-weight:700;font-size:8px;letter-spacing:.12em;color:var(--st-faint);border:1px solid var(--st-hair-2);border-radius:5px;padding:1px 5px}
.obm-hero-sig{margin-left:auto;font-family:var(--display);font-weight:800;font-size:7.5px;letter-spacing:.12em;color:#fff;background:var(--blue);border-radius:5px;padding:2.5px 7px;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s}
.obm-desk.obm-armed .obm-hero-sig{opacity:1;transform:none}
.obm-hero-zone{position:absolute;right:11px;bottom:14px;z-index:2;font-family:var(--display);font-weight:800;font-size:7.5px;letter-spacing:.14em;color:var(--blue);opacity:.8}
.obm-hero-note{position:absolute;left:11px;bottom:6px;z-index:2;font-family:var(--display);font-weight:700;font-size:7px;letter-spacing:.11em;color:var(--st-faint)}
/* the line draws itself in (pathLength=1 → one normalized dashoffset sweep) */
.obm-hero-line{stroke-dasharray:1;stroke-dashoffset:0}
.obm-draw .obm-hero-line{animation:obmDraw 1s cubic-bezier(.3,.6,.2,1) both}
.obm-draw .obm-hero-area{animation:obmFadeIn .5s ease .6s both}
@keyframes obmDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes obmFadeIn{from{opacity:0}to{opacity:1}}
.obm-hero-ring{opacity:.5;transform-origin:292px 27px;animation:obmPulse 2.6s ease-out infinite}
@keyframes obmPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(3.1);opacity:0}100%{transform:scale(3.1);opacity:0}}

/* ── the tier lattice — 3 rows (Free / Insider / Pro) × 3 tiles ─────────── */
.obm-lat{padding:12px 0 10px 14px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden}
.obm-row{
  position:relative;display:grid;grid-template-columns:56px repeat(3,minmax(0,1fr));
  align-items:stretch;gap:7px;padding-left:9px;
}
.obm-row::before{                    /* the tier's spine — fills when the row lights */
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;
  background:var(--st-hair-2);transform:scaleY(.42);transform-origin:top;
  transition:transform .45s cubic-bezier(.22,.8,.3,1),background .35s;
}
.obm-row.obm-on::before{background:var(--row-hue);transform:scaleY(1)}
.obm-row-lbl{
  display:flex;align-items:center;font-family:var(--display);font-weight:800;
  font-size:8px;letter-spacing:.14em;color:var(--st-faint);white-space:nowrap;
  transition:color .35s;
}
.obm-row.obm-on .obm-row-lbl{color:var(--row-hue)}
.obm-row[data-tier="free"]{--row-hue:var(--blue)}
.obm-row[data-tier="insider"]{--row-hue:var(--ob-insider)}
.obm-row[data-tier="pro"]{--row-hue:#8b76ea}

.obm-tile{
  position:relative;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:9px 9px 9px 10px;border:1px solid var(--st-hair);border-radius:10px;
  background:color-mix(in srgb,var(--st-card) 78%,transparent);
  transition:background .34s ease,border-color .34s ease,opacity .34s ease,box-shadow .34s ease;
  opacity:.62;
}
.obm-tile-i{width:15px;height:15px;color:var(--st-faint);flex:none;transition:color .34s}
.obm-tile-i svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.obm-tile-l{font-size:9.5px;line-height:1.25;font-weight:600;color:var(--st-soft);transition:color .34s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.obm-tile-lk{position:absolute;top:8px;right:8px;width:11px;height:11px;color:var(--st-faint);opacity:.85;transition:opacity .3s}
.obm-tile-lk svg{width:11px;height:11px;display:block;fill:none;stroke:currentColor;stroke-width:2}
/* lit */
.obm-tile.obm-on{
  opacity:1;border-color:color-mix(in srgb,var(--row-hue) 42%,var(--st-hair));
  background:color-mix(in srgb,var(--row-hue) 9%,var(--st-card));
}
.obm-tile.obm-on .obm-tile-i{color:var(--row-hue)}
.obm-tile.obm-on .obm-tile-l{color:var(--st-ink)}
.obm-tile.obm-on .obm-tile-lk{opacity:0}
/* the pinned ring — what you told us you trade */
.obm-tile.obm-pin{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--blue) 55%,transparent)}
/* signature: the light sweep that runs across a tile the moment it unlocks */
.obm-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--row-hue) 26%,transparent) 50%,transparent 70%);
  transform:translateX(-110%);
}
.obm-tile.obm-flare::after{animation:obmFlare .78s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i,0) * 62ms)}
.obm-tile.obm-flare{animation:obmLift .5s cubic-bezier(.3,.9,.3,1) both;animation-delay:calc(var(--i,0) * 62ms)}
@keyframes obmFlare{0%{opacity:0;transform:translateX(-110%)}18%{opacity:1}100%{opacity:0;transform:translateX(115%)}}
@keyframes obmLift{0%{transform:translateY(0)}42%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* ── the tape (the second, slower ambient loop) ─────────────────────────── */
.obm-tape{margin-top:auto;flex:none;overflow:hidden;border-top:1px solid var(--st-hair);padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent)}
.obm-tape-in{display:flex;gap:0;width:max-content;animation:obmTape 30s linear infinite}
.obm-tape-in span{display:inline-flex;align-items:center;gap:6px;padding:0 14px;font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.11em;color:var(--st-soft);white-space:nowrap}
.obm-tape-in span::before{content:"";width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--blue) 70%,transparent)}
@keyframes obmTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── billing overlay: the 7-day trial meter ────────────────────────────── */
.obm-meter{
  position:absolute;left:0;right:30px;bottom:0;z-index:3;
  border:1px solid var(--st-hair);border-radius:14px 14px 0 0;border-bottom:0;
  background:color-mix(in srgb,var(--st-card) 94%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 -14px 34px -20px rgba(18,26,45,.4);
  padding:14px 16px 18px;
  transform:translateY(112%);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,.9,.3,1),opacity .3s ease;
}
.obm-pane[data-step="4"] .obm-meter{transform:none;opacity:1;pointer-events:auto}
.obm-meter-hd{font-family:var(--display);font-weight:800;font-size:9px;letter-spacing:.13em;color:var(--st-ink);margin:0 0 11px;transition:color .55s ease}
.obm-meter-track{display:flex;align-items:flex-end;gap:5px;height:30px}
.obm-meter-track i{
  flex:1;border-radius:3px;background:color-mix(in srgb,var(--st-hair-2) 90%,transparent);
  height:9px;transition:height .45s cubic-bezier(.22,.8,.3,1),background .45s;
  transition-delay:calc(var(--i,0) * 55ms);
}
.obm-pane[data-step="4"] .obm-meter-track i{height:calc(10px + var(--h,0) * 1px);background:color-mix(in srgb,var(--blue) calc(20% + var(--h,0) * 3%),var(--st-hair-2))}
.obm-pane[data-step="4"] .obm-meter-track i:last-child{background:var(--q-gold)}
.obm-meter-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px}
.obm-meter-day{font-family:var(--display);font-weight:800;font-size:8px;letter-spacing:.11em;color:var(--blue)}
.obm-meter-chg{font-family:var(--display);font-weight:800;font-size:8px;letter-spacing:.11em;color:var(--q-gold);text-align:right}
.obm-meter-note{margin:9px 0 0;font-size:11px;line-height:1.45;color:var(--st-soft);transition:color .55s ease}

/* ── step-conditional stage states ─────────────────────────────────────── */
/* Account + Preferences: the desk is still asleep — no locks, a slow breath. */
.obm-pane[data-step="1"] .obm-tile-lk,.obm-pane[data-step="2"] .obm-tile-lk{opacity:0}
.obm-pane[data-step="1"] .obm-lat,.obm-pane[data-step="2"] .obm-lat{animation:obmBreathe 7s ease-in-out infinite}
@keyframes obmBreathe{0%,100%{opacity:.84}50%{opacity:1}}
/* Done: the desk is lit */
.obm-pane[data-step="5"] .obm-desk{border-color:color-mix(in srgb,var(--blue) 34%,var(--st-hair))}

/* park every ambient loop: tab hidden, sheet closed, or 30s idle */
.obm-pane.obm-park .obm-beam,.obm-pane.obm-park .obm-tape-in,.obm-pane.obm-park .obm-lat,
.obm-pane.obm-park .obm-hero-ring,.obm-pane.obm-park .obm-plate-st i{animation-play-state:paused}

/* ══════════════════════ RIGHT — form pane ══════════════════════════════════ */
/* min-height:0 is load-bearing: without it this grid item sizes to its content,
   pushes .obm-foot past the sheet's clipped bottom edge and the primary button
   becomes unreachable (the Plan step could not be completed at all). */
.obm-form-pane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel)}

/* ── stepper: a progress rail, not five loose chips ─────────────────────── */
/* the right padding is the close button's landing zone — the rail may never run under it */
.obm-steps{display:flex;align-items:center;gap:0;padding:25px 58px 0 var(--obm-pad);min-width:0}
.obm-step{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
.obm-step-n{
  position:relative;display:grid;place-items:center;flex:none;
  width:27px;height:27px;border-radius:50%;
  border:1.5px solid var(--hair-2);background:var(--panel);
  font-family:var(--display);font-weight:800;font-size:11px;line-height:1;
  color:var(--faint);
  transition:background .28s,color .28s,border-color .28s,box-shadow .28s;
}
.obm-step-num{transition:opacity .18s}
.obm-step-ck{position:absolute;width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none;opacity:0;transform:scale(.6);transition:opacity .22s,transform .22s}
.obm-step-lbl{font-size:11px;font-weight:600;letter-spacing:.004em;color:var(--faint);white-space:nowrap;transition:color .28s}
.obm-step.obm-cur .obm-step-n{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 4px var(--blue-wash)}
.obm-step.obm-cur .obm-step-lbl{color:var(--ink);font-weight:650}
.obm-step.obm-past .obm-step-n{background:var(--blue-wash);border-color:var(--blue);color:var(--blue)}
.obm-step.obm-past .obm-step-num{opacity:0}
.obm-step.obm-past .obm-step-ck{opacity:1;transform:none}
.obm-step.obm-past .obm-step-lbl{color:var(--muted)}
.obm-step-sep{flex:1 1 auto;min-width:10px;height:2px;margin:0 9px;border-radius:2px;background:var(--hair-2);overflow:hidden}
.obm-step-sep i{display:block;height:100%;width:100%;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.obm-step-sep.obm-on i{transform:scaleX(1)}
/* tighter sheets: only the step you are on keeps its name */
@media (max-width:1120px){
  .obm-step:not(.obm-cur) .obm-step-lbl{display:none}
}
/* compact rail — phones: one bar + "3 of 5 · Plan" */
.obm-steps-mini{display:none;padding:18px 20px 0}
.obm-mini-bar{height:3px;border-radius:3px;background:var(--hair-2);overflow:hidden}
.obm-mini-bar i{display:block;height:100%;background:var(--blue);border-radius:3px;transition:width .45s cubic-bezier(.22,.8,.3,1)}
.obm-mini-lbl{display:flex;align-items:baseline;gap:7px;margin-top:9px;font-size:12px;color:var(--muted)}
.obm-mini-lbl b{font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:.12em;color:var(--blue)}
.obm-mini-lbl span{font-weight:650;color:var(--ink)}

/* ── the scrolling content region ──────────────────────────────────────── */
.obm-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px var(--obm-pad) 14px;-webkit-overflow-scrolling:touch}
.obm-body::-webkit-scrollbar{width:10px}
.obm-body::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:6px;border:3px solid var(--panel)}
.obm-body::-webkit-scrollbar-thumb:hover{background:#c9d2e0}

/* one motion moment: step crossfade + 6px rise */
.obm-fade{animation:obm-fade .2s cubic-bezier(.22,.8,.3,1)}
@keyframes obm-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.obm-h1{font-family:var(--display);font-weight:800;letter-spacing:-.022em;line-height:1.08;font-size:1.55rem;color:var(--ink);margin:0}
.obm-h1:focus{outline:none}
.obm-sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin:8px 0 20px}

/* ── forms ───────────────────────────────────────────────────────────────── */
.obm-form{display:flex;flex-direction:column}
.obm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.obm-field-wrap{display:flex;flex-direction:column;min-width:0}
.obm-form label{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:14px 0 6px}
.obm-row2 label{margin-top:0}
.obm-field{
  height:var(--obm-field-h);border:1px solid var(--hair-2);border-radius:10px;background:var(--panel);
  padding:0 13px;font:inherit;font-size:14px;color:var(--ink);width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.obm-field::placeholder{color:var(--faint)}
.obm-field:hover{border-color:var(--faint)}
.obm-field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.obm-hint{margin:7px 0 0;font-size:11.5px;color:var(--muted)}
.obm-hint.obm-ok{color:var(--q-green)}
.obm-err{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--q-red);background:var(--red-wash);border:1px solid rgba(193,47,47,.25);border-radius:9px;padding:9px 12px}

/* buttons */
.obm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:var(--obm-field-h);border-radius:10px;padding:0 20px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
  background:var(--blue);border:1px solid var(--blue);color:#fff;box-shadow:var(--sh-card);
  transition:background .16s,box-shadow .16s,transform .16s;
}
.obm-btn:hover:not(:disabled){background:var(--blue-ink);border-color:var(--blue-ink);box-shadow:var(--sh-lift)}
.obm-btn:disabled{opacity:.6;cursor:default}
.obm-btn-out{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:var(--obm-field-h);border-radius:10px;padding:0 20px;
  font-weight:600;font-size:14px;background:var(--panel);border:1px solid var(--hair-2);color:var(--ink);
  box-shadow:var(--sh-card);transition:border-color .16s,box-shadow .16s,transform .16s,background .16s;
}
.obm-btn-out:hover:not(:disabled){border-color:var(--faint);box-shadow:var(--sh-lift);transform:translateY(-1px)}
.obm-btn-out:disabled{opacity:.55;cursor:default}
.obm-btn-out svg{flex:none}
/* quiet secondary — transparent, muted, hover blue-wash */
.obm-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
  min-height:42px;border-radius:10px;padding:0 16px;background:transparent;border:0;
  font-weight:600;font-size:13.5px;color:var(--muted);transition:background .15s,color .15s;
}
.obm-quiet:hover:not(:disabled){background:var(--blue-wash);color:var(--blue-ink)}
.obm-quiet:disabled{opacity:.5;cursor:default}
.obm-link{background:none;border:0;font:inherit;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;padding:2px 0;transition:color .15s}
.obm-link:hover{color:var(--ink)}
.obm-link.obm-brand-link{color:var(--blue)}
.obm-link.obm-brand-link:hover{color:var(--blue-ink)}

/* OR divider */
.obm-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--faint);font-size:11.5px;font-weight:600;letter-spacing:.04em}
.obm-or::before,.obm-or::after{content:"";flex:1;height:1px;background:var(--hair)}

.obm-terms{margin:16px 0 4px;font-size:11.5px;line-height:1.5;color:var(--faint);text-align:center}
.obm-terms a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.obm-terms a:hover{color:var(--ink)}

/* ── preferences: chips + theme thumbnails ───────────────────────────────── */
.obm-section-lbl{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.obm-section-lbl:first-child{margin-top:2px}
.obm-chips{display:flex;flex-wrap:wrap;gap:8px}
/* The check slot is ALWAYS in the layout (an empty ring when off) — selecting a
   chip may never change its box, or every click reflows the step ("the stutter"). */
.obm-chip{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair-2);border-radius:11px;
  background:var(--panel);padding:10px 15px;font-size:13px;font-weight:600;color:var(--ink-soft);
  min-height:42px;box-shadow:var(--sh-card);
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s,transform .12s;
}
.obm-chip:hover{border-color:var(--faint)}
.obm-chip:active{transform:scale(.985)}
.obm-chip.obm-on{border-color:var(--blue);background:var(--blue-wash);color:var(--blue-ink)}
.obm-chip-box{
  position:relative;flex:none;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--hair-2);background:var(--panel);display:grid;place-items:center;
  transition:border-color .18s,background .18s;
}
.obm-chip.obm-on .obm-chip-box{border-color:var(--blue);background:var(--blue)}
.obm-chip-box svg{width:9px;height:9px;stroke:#fff;stroke-width:3.6;fill:none;opacity:0;transform:scale(.5);transition:opacity .16s,transform .18s cubic-bezier(.3,1.4,.5,1)}
.obm-chip.obm-on .obm-chip-box svg{opacity:1;transform:none}

.obm-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.obm-thumb{
  position:relative;display:flex;flex-direction:column;gap:9px;text-align:left;
  border:1px solid var(--hair-2);border-radius:12px;background:var(--panel);padding:10px;color:var(--ink);
  box-shadow:var(--sh-card);transition:border-color .16s,box-shadow .16s,transform .12s;
}
.obm-thumb:hover{border-color:var(--faint)}
.obm-thumb:active{transform:scale(.99)}
.obm-thumb.obm-on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-card)}
.obm-thumb-prev{height:54px;border-radius:8px;overflow:hidden;border:1px solid var(--hair)}
.obm-thumb-prev.obm-light{background:#f7f8fa}
.obm-thumb-prev.obm-dark{background:#0b0e14}
.obm-thumb-prev.obm-auto{background:linear-gradient(90deg,#f7f8fa 0 50%,#0b0e14 50% 100%)}
.obm-thumb-prev i{display:block;height:5px;border-radius:2px;margin:8px 8px 0}
.obm-thumb-prev.obm-light i{background:#dfe3e9}.obm-thumb-prev.obm-light i:nth-child(2){width:60%;background:#cdd6e4}
.obm-thumb-prev.obm-dark i{background:#212a3a}.obm-thumb-prev.obm-dark i:nth-child(2){width:60%;background:#2c3750}
.obm-thumb-prev.obm-auto i{background:linear-gradient(90deg,#dfe3e9 0 50%,#2c3750 50% 100%)}
.obm-thumb-prev.obm-auto i:nth-child(2){width:60%;background:linear-gradient(90deg,#cdd6e4 0 83%,#2c3750 83% 100%)}
.obm-thumb-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.obm-thumb-nm{font-size:12.5px;font-weight:600;color:var(--ink)}
.obm-radio{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--hair-2);background:var(--panel);display:grid;place-items:center;transition:border-color .16s,background .16s}
.obm-thumb.obm-on .obm-radio,.obm-plan.obm-on .obm-radio{border-color:var(--blue);background:var(--blue)}
.obm-radio svg{width:10px;height:10px;stroke:#fff;stroke-width:3.4;fill:none;opacity:0;transform:scale(.5);transition:opacity .14s,transform .18s cubic-bezier(.3,1.4,.5,1)}
.obm-thumb.obm-on .obm-radio svg,.obm-plan.obm-on .obm-radio svg{opacity:1;transform:none}
.obm-caption{margin:10px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5}

/* ── plan step ───────────────────────────────────────────────────────────── */
.obm-toggle{display:inline-flex;margin:2px 0 16px;border:1px solid var(--hair-2);border-radius:99px;padding:4px;font-weight:600;font-size:13px;background:var(--panel);box-shadow:var(--sh-card)}
.obm-toggle button{padding:8px 16px;border-radius:99px;background:transparent;color:var(--muted);transition:background .18s,color .18s}
.obm-toggle button[aria-pressed="true"]{background:var(--blue);color:#fff}
.obm-toggle .obm-save{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.05em;margin-left:5px;color:#bff2cf}
.obm-toggle button[aria-pressed="false"] .obm-save{color:var(--q-green)}

.obm-plans{display:flex;flex-direction:column;gap:10px}
.obm-plan{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  border:1px solid var(--hair-2);border-radius:12px;background:var(--panel);padding:15px 16px;text-align:left;color:var(--ink);
  box-shadow:var(--sh-card);transition:border-color .16s,box-shadow .16s,transform .12s;
}
.obm-plan:hover{border-color:var(--faint)}
.obm-plan:active{transform:scale(.995)}
.obm-plan.obm-on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-card)}
.obm-plan.obm-hot.obm-on{background:linear-gradient(150deg,rgba(15,157,143,.05),rgba(40,95,255,.055) 55%,rgba(120,98,224,.045)),var(--panel)}
.obm-plan-l{min-width:0}
.obm-plan-nm{display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)}
.obm-plan-who{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.4}
.obm-plan-r{display:flex;align-items:center;gap:13px;flex:none}
/* figures in --fig (see the @font-face note at the top of this file) */
.obm-plan-price{text-align:right;font-family:var(--fig);font-weight:800;font-size:24px;letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.obm-plan-price .obm-per{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:10.5px;color:var(--muted);letter-spacing:0;margin-top:1px}
.obm-plan-price .obm-was{font-family:var(--fig);font-weight:600;font-size:13px;letter-spacing:normal;color:var(--faint);text-decoration:line-through;margin-right:5px}
.obm-ribbon{
  position:absolute;top:-10px;left:16px;font-family:var(--display);font-weight:700;
  font-size:9px;letter-spacing:.14em;color:#fff;background:var(--blue);padding:3px 10px;border-radius:99px;
}
html[data-lang="zh"] .obm-ribbon{letter-spacing:.08em}

/* plan readout — what the stage just lit up. Three lines, never a wall: the
   full feature story is the lattice on the left, not a list on the right. */
.obm-summary{margin-top:14px;border:1px solid var(--hair);border-radius:12px;background:var(--panel-2);padding:14px 16px}
.obm-sum-hd{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.obm-sum-hd::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;flex:none}
.obm-sum-list{list-style:none;margin:0;padding:0}
.obm-sum-list li{position:relative;padding:5px 0 5px 22px;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.obm-sum-list li::before{content:"";position:absolute;left:2px;top:11px;width:9px;height:2px;border-radius:2px;background:var(--blue)}
.obm-sum-list li b{color:var(--ink);font-weight:650}
.obm-sum-miss{margin-top:11px;border-top:1px dashed var(--hair-2);padding-top:10px}
.obm-sum-miss .obm-sum-mhd{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.obm-sum-mrow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;color:var(--muted)}
.obm-mchip{font-family:var(--display);font-weight:800;font-size:8px;letter-spacing:.1em;border-radius:6px;border:1px solid transparent;padding:2px 7px;flex:none;white-space:nowrap}
.obm-mchip.obm-ins{background:linear-gradient(90deg,#e7f3f1,#e9eefc) padding-box,linear-gradient(90deg,rgba(15,157,143,.6),rgba(40,95,255,.55)) border-box;color:#0d7f74}
.obm-mchip.obm-pro{background:linear-gradient(90deg,#f0eafb,#f6efdf) padding-box,linear-gradient(90deg,rgba(120,98,224,.65),rgba(176,125,5,.55)) border-box;color:#6a48d7}
.obm-mchip.obm-soon{background:var(--gold-wash);color:var(--q-gold);border-color:transparent}
.obm-wedge{display:flex;align-items:center;gap:10px;margin-top:11px;border-top:1px dashed var(--hair-2);padding-top:10px;font-size:12.5px;color:var(--ink-soft)}
.obm-wedge b{color:var(--ink);font-weight:700}
.obm-wedge .obm-wedge-cta{margin-left:auto;flex:none}
.obm-fineprint{margin:10px 0 0;font-size:11px;color:var(--faint);line-height:1.5}
.obm-compare{margin:14px 0 2px;display:inline-flex;align-items:center;gap:5px}

/* ── billing (order card + stripe host) ──────────────────────────────────── */
.obm-order{margin:2px 0 16px;border:1px solid var(--hair);border-radius:12px;background:var(--panel);box-shadow:var(--sh-card);padding:15px 16px;--obm-accent:var(--blue)}
.obm-order-hd{display:flex;align-items:center;gap:9px}
.obm-order-dot{width:9px;height:9px;border-radius:3px;background:var(--obm-accent);flex:none}
.obm-order-nm{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)}
.obm-order-price{margin-left:auto;font-family:var(--fig);font-weight:800;font-size:21px;letter-spacing:-.005em;color:var(--ink)}
.obm-order-per{font-family:'Inter',sans-serif;font-weight:500;font-size:11px;color:var(--muted);margin-left:2px}
.obm-order-billed{margin-top:6px;font-size:12.5px;color:var(--muted)}
.obm-order-truth{margin-top:11px;border-top:1px solid var(--hair);padding-top:11px}
.obm-order-trial{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.obm-order-trial b{color:var(--ink);font-weight:600}
.obm-order-cancel{margin:6px 0 0;font-size:12px;color:var(--muted)}
.obm-bill-el{margin-top:4px;border:1px solid var(--hair-2);border-radius:10px;background:var(--panel);padding:13px}
.obm-bill-state{margin:6px 0 0;border:1px solid var(--hair);border-radius:12px;background:var(--panel-2);padding:18px 16px;text-align:center}
.obm-bill-state-hd{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);margin-bottom:6px}
.obm-bill-state-msg{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--muted)}
.obm-bill-state-msg:last-child{margin-bottom:0}
.obm-bill-skel{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0}
.obm-bill-skel-lbl{font-size:12px;color:var(--muted)}
.obm-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--hair-2);border-top-color:var(--blue);animation:obm-spin .7s linear infinite}
@keyframes obm-spin{to{transform:rotate(360deg)}}

/* ── upgrade mode: lane cards (reuse .obm-plan base) + inline confirm ── */
.obm-up-lanes{margin-top:16px}
.obm-up-lane{cursor:pointer;text-align:left}
.obm-up-lane:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-card)}
.obm-up-lane.obm-confirming{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-card);background:linear-gradient(150deg,rgba(40,95,255,.045),rgba(120,98,224,.03)),var(--panel)}
/* computed savings badge — small blue-wash chip (never a hardcoded claim) */
.obm-up-save{font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.05em;color:var(--blue-ink);background:var(--blue-wash);border-radius:5px;padding:2px 7px;margin-left:2px}
.obm-up-pitch{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft)}
.obm-up-chev{flex:none;color:var(--faint);display:inline-flex;transition:transform .15s,color .15s}
.obm-up-chev svg{width:16px;height:16px}
.obm-up-lane:hover .obm-up-chev,.obm-up-lane.obm-confirming .obm-up-chev{color:var(--blue)}
.obm-up-lane.obm-confirming .obm-up-chev{transform:rotate(90deg)}
/* progressive inline confirm — hidden until the lane is armed */
.obm-up-confirm{display:none;grid-column:1/-1;margin-top:12px;border-top:1px dashed var(--hair-2);padding-top:12px}
.obm-up-lane.obm-confirming .obm-up-confirm{display:block;animation:obm-fade .16s ease}
.obm-up-note{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.obm-up-msg{margin-top:10px}
/* best-plan panel — calm, no CTA beyond "Open the dashboard" */
.obm-up-best{padding-top:8px}
.obm-up-best-mark{background:var(--blue-wash);color:var(--blue)}

/* ── done ────────────────────────────────────────────────────────────────── */
.obm-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 0 8px}
.obm-done-mark{width:60px;height:60px;border-radius:50%;background:var(--green-wash);border:1px solid rgba(31,139,65,.3);display:grid;place-items:center;margin-bottom:18px}
.obm-done-mark svg{width:28px;height:28px;stroke:var(--q-green);stroke-width:2.6;fill:none}
.obm-done-body{margin-top:12px;max-width:38ch}
.obm-done-line{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--muted)}
.obm-done-line b{color:var(--ink);font-weight:600}

/* ── pinned footer action bar ────────────────────────────────────────────── */
.obm-foot{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:14px var(--obm-pad);border-top:1px solid var(--hair);background:var(--panel);
  transition:box-shadow .2s ease;
}
/* raised while the body still has content below the fold */
.obm-foot.obm-lift{box-shadow:0 -12px 26px -20px rgba(18,26,45,.55)}
.obm-foot-spacer{flex:1}
.obm-back{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;transition:color .15s}
.obm-back:hover{color:var(--ink)}
.obm-foot .obm-btn,.obm-foot .obm-btn-out{width:auto;min-width:168px}
.obm-dots{display:flex;gap:6px}
.obm-dots i{width:6px;height:6px;border-radius:50%;background:var(--hair-2);transition:background .18s,width .18s}
.obm-dots i.obm-on{background:var(--blue);width:16px;border-radius:3px}

/* ══════════════════════ mobile: full-screen sheet ══════════════════════════
   The stage does not disappear on a phone — it becomes a band above the form
   that keeps the nameplate and, on the Plan and Billing steps, the tier
   lattice, so "what am I buying" stays a visual answer there too.          */
@media (max-width:860px){
  .obm-scrim{padding:0}
  .obm-sheet{
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    width:100%;height:100%;max-height:100%;border-radius:0;border:0;
  }
  .obm-close{top:calc(10px + env(safe-area-inset-top));right:12px;width:32px;height:32px}
  /* on a phone the close button sits ON the stage — follow the stage's skin */
  .obm-sheet:has(.obm-pane[data-tone="dark"]) .obm-close{background:rgba(21,28,44,.88);border-color:#313c58;color:#a3b1c8}
  .obm-sheet:has(.obm-pane[data-tone="dark"]) .obm-close:hover{background:#151c2c;color:#eaf0fb}

  .obm-pane{
    padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
    border-right:0;border-bottom:1px solid var(--hair);
    max-height:42vh;
  }
  .obm-pane::before{-webkit-mask-image:none;mask-image:none;opacity:.85}
  .obm-beam{display:none}                    /* one less loop on battery */
  .obm-brand{font-size:12px;padding-right:44px}
  .obm-brand svg{width:24px;height:24px}
  .obm-pane-copy{margin-top:12px;max-width:none;padding-right:38px}
  .obm-pane-h{font-size:1.16rem;line-height:1.14}
  .obm-pane-sub{display:none}
  .obm-stage{margin-top:11px}
  .obm-desk{width:calc(100% + 16px);border-radius:12px 0 0 12px}
  .obm-hero{height:74px;margin:9px 10px 0}
  .obm-hero-note,.obm-hero-zone{display:none}
  .obm-lat{padding:9px 0 8px 10px;gap:5px}
  .obm-row{grid-template-columns:42px repeat(3,minmax(0,1fr));gap:5px;padding-left:7px}
  .obm-row-lbl{font-size:7px;letter-spacing:.09em}
  .obm-tile{padding:7px;border-radius:8px;gap:4px}
  .obm-tile-l{font-size:8px}
  .obm-tile-i,.obm-tile-i svg{width:13px;height:13px}
  .obm-tile-lk,.obm-tile-lk svg{width:9px;height:9px;top:6px;right:6px}
  .obm-tape{padding:6px 0}
  .obm-tape-in span{font-size:8px;padding:0 10px}
  .obm-meter{right:16px;padding:11px 13px 14px}
  .obm-meter-track{height:22px}
  .obm-meter-note{font-size:10.5px}
  /* on the steps where the lattice isn't the point, the desk collapses to the
     nameplate + chart and the form gets the height back */
  .obm-pane:not([data-step="3"]):not([data-step="4"]) .obm-lat,
  .obm-pane:not([data-step="3"]):not([data-step="4"]) .obm-tape{display:none}
  .obm-pane[data-step="3"],.obm-pane[data-step="4"]{max-height:50vh}
  .obm-pane[data-step="3"] .obm-hero,.obm-pane[data-step="4"] .obm-hero{display:none}

  .obm-steps{display:none}
  .obm-steps-mini{display:block}
  .obm-body{padding:16px 20px 12px}
  .obm-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom));gap:8px}
  .obm-foot .obm-btn,.obm-foot .obm-btn-out{min-width:0;flex:1 1 auto;padding:0 14px}
  .obm-foot .obm-quiet{width:auto;flex:none;padding:0 12px}
  .obm-dots{display:none}
  .obm-h1{font-size:1.3rem}
  .obm-row2{grid-template-columns:1fr}
  .obm-chip{flex:1 1 auto;justify-content:flex-start;min-width:44%}
  .obm-plan{padding:14px}
  .obm-plan-nm{font-size:15px}
  .obm-plan-price{font-size:21px}
  .obm-toggle{width:100%;justify-content:center}
}
/* very short viewports (landscape phones): the form wins every pixel, and the
   only stage worth its height is the Plan step's lattice */
@media (max-width:860px) and (max-height:540px){
  .obm-pane{max-height:32vh;padding-top:10px}
  .obm-pane-copy{display:none}
  .obm-pane:not([data-step="3"]) .obm-stage{display:none}
  .obm-pane[data-step="3"]{max-height:58vh}
  .obm-pane[data-step="3"] .obm-tape,.obm-pane[data-step="4"] .obm-tape{display:none}
  .obm-lat{padding:7px 0 6px 10px;gap:4px}
  .obm-tile{padding:5px 7px;gap:3px}
  .obm-tile-l{font-size:7.5px;-webkit-line-clamp:1}
  .obm-plate{padding-top:7px;padding-bottom:7px}
}
@media (max-width:420px){
  .obm-body{padding:14px 16px 10px}
  .obm-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .obm-steps-mini{padding:14px 16px 0}
  .obm-thumbs{gap:7px}
  .obm-thumb{padding:8px;gap:7px}
  .obm-thumb-prev{height:44px}
  .obm-thumb-nm{font-size:11.5px}
  .obm-plan-price{font-size:19px}
}

/* ══════════════════════ COMPARE PANEL ══════════════════════════════════════
   "Compare every feature" used to CLOSE the sheet and drop the visitor at the
   landing's #pricing anchor — mid-signup, with everything they had typed left
   behind a scroll jump. The full matrix now opens as a layer OVER the form
   column: the stage, the stepper and the wizard state all stay exactly where
   they were, and the tier headers double as the picker, so comparing is a way
   to CHOOSE a plan rather than a way to leave. Back returns to the same step. */
.obm-cmp{
  position:absolute;inset:0;z-index:14;display:flex;flex-direction:column;
  background:var(--panel);animation:obmCmpIn .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes obmCmpIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.obm-cmp-hd{flex:none;display:flex;align-items:center;gap:12px;padding:22px var(--obm-pad) 12px}
.obm-cmp-h{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.15rem;color:var(--ink);margin:0}
.obm-cmp-h:focus{outline:none}
/* the tier header IS the picker — three columns, the live one ringed */
.obm-cmp-tiers{
  flex:none;display:grid;grid-template-columns:1fr repeat(3,minmax(0,74px));gap:6px;
  align-items:end;padding:0 var(--obm-pad) 10px;border-bottom:1px solid var(--hair);
}
.obm-cmp-tiers-lbl{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);padding-bottom:6px}
.obm-cmp-tier{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;
  border:1px solid var(--hair-2);border-radius:10px;background:var(--panel);
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.obm-cmp-tier:hover{border-color:var(--faint)}
.obm-cmp-tier.obm-on{border-color:var(--blue);background:var(--blue-wash);box-shadow:0 0 0 1px var(--blue)}
.obm-cmp-tier b{font-family:var(--display);font-weight:800;font-size:11.5px;color:var(--ink);letter-spacing:-.01em}
.obm-cmp-tier span{font-size:9.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.obm-cmp-tier.obm-on b,.obm-cmp-tier.obm-on span{color:var(--blue-ink)}

.obm-cmp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--obm-pad) 12px}
.obm-cmp-grp{
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);margin:16px 0 4px;padding-top:8px;
  border-top:1px solid var(--hair);
}
.obm-cmp-grp:first-child{border-top:0;margin-top:8px;padding-top:0}
.obm-cmp-row{
  display:grid;grid-template-columns:1fr repeat(3,minmax(0,74px));gap:6px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--hair);
}
.obm-cmp-row:last-child{border-bottom:0}
.obm-cmp-ft{font-size:12.5px;line-height:1.35;color:var(--ink-soft);min-width:0}
.obm-cmp-cell{display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:650;color:var(--ink);line-height:1.25}
.obm-cmp-cell svg{width:14px;height:14px;stroke:var(--blue);stroke-width:2.6;fill:none}
.obm-cmp-cell.obm-cmp-no{color:var(--faint)}
.obm-cmp-cell.obm-cmp-no::before{content:"–";font-weight:600}
.obm-cmp-soon{font-family:var(--display);font-weight:800;font-size:7.5px;letter-spacing:.08em;color:var(--q-gold);background:var(--gold-wash);border-radius:5px;padding:2px 5px}
/* the live column gets a soft rail so the eye never loses which plan it is reading */
.obm-cmp-row .obm-cmp-cell.obm-cmp-live,.obm-cmp-tier.obm-on{position:relative}
.obm-cmp-cell.obm-cmp-live{background:color-mix(in srgb,var(--blue) 6%,transparent);border-radius:6px;padding:4px 0}

/* phone tab strip (hidden on desktop, where all three columns are visible) */
.obm-cmp-tabs{display:none;gap:6px;padding:0 var(--obm-pad) 10px}
.obm-cmp-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 6px;border:1px solid var(--hair-2);border-radius:9px;background:var(--panel);
  font-size:12.5px;font-weight:700;color:var(--muted);transition:border-color .16s,background .16s,color .16s;
}
.obm-cmp-tab i{font-style:normal;font-size:10px;font-weight:600;opacity:.8}
.obm-cmp-tab.obm-on{border-color:var(--blue);background:var(--blue-wash);color:var(--blue-ink);box-shadow:0 0 0 1px var(--blue)}

@media (max-width:560px){
  /* three tier columns never fit a phone: a tab strip picks the plan you are
     reading, and the table narrows to that one column. */
  .obm-cmp-hd{flex-wrap:wrap;padding:16px 20px 6px;gap:6px 10px}
  .obm-cmp-h{flex:1 0 100%;order:2;font-size:1.06rem}
  .obm-cmp-hd .obm-back{order:1;white-space:nowrap}
  .obm-cmp-tabs{display:flex;padding:10px 20px 12px;border-bottom:1px solid var(--hair)}
  .obm-cmp-tiers{display:none}
  .obm-cmp-body{padding:4px 20px 12px}
  .obm-cmp-row{grid-template-columns:1fr minmax(0,92px)}
  .obm-cmp[data-only] .obm-cmp-tier{display:none}
  .obm-cmp[data-only="free"] .obm-cmp-tier[data-tier="free"],
  .obm-cmp[data-only="insider"] .obm-cmp-tier[data-tier="insider"],
  .obm-cmp[data-only="pro"] .obm-cmp-tier[data-tier="pro"]{display:flex}
  .obm-cmp[data-only] .obm-cmp-cell{display:none}
  .obm-cmp[data-only="free"] .obm-cmp-cell[data-col="free"],
  .obm-cmp[data-only="insider"] .obm-cmp-cell[data-col="insider"],
  .obm-cmp[data-only="pro"] .obm-cmp-cell[data-col="pro"]{display:flex}
  .obm-cmp .obm-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
}

/* ══════════════════════ UPGRADE — free-tier plan step ══════════════════════
   A signed-in free user pressing "Choose a plan" used to be dropped back into
   the SIGNUP wizard (Account · Preferences · Plan · Billing · Done) — an
   account they already have and preferences they already set, with a Back
   button into them. Upgrade mode now owns its own two-step lane (plan →
   billing), so nothing on screen is a step they have already completed. */
.obm-up-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.obm-up-cur{
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent);
  border-radius:6px;padding:3px 8px;
}
/* the upgrade lane's own two-dot rail (Plan · Billing) — never the 5-step one */
.obm-up-rail{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.obm-up-rail i{width:22px;height:3px;border-radius:2px;background:var(--hair-2);transition:background .3s}
.obm-up-rail i.obm-on{background:var(--blue)}
.obm-up-rail span{font-size:11px;font-weight:600;color:var(--muted)}

/* ══════════════════════ DARK SKIN OVERRIDES ════════════════════════════════
   The handful of places a token cannot reach: white-on-blue affordances need a
   deeper blue at night (a #5b8cff fill under white text fails contrast), and
   three chips/washes were authored as light-only gradients.               */
.obm-scrim[data-obm-skin="dark"] .obm-btn{background:#2f6cf5;border-color:#2f6cf5}
.obm-scrim[data-obm-skin="dark"] .obm-btn:hover:not(:disabled){background:#4a80ff;border-color:#4a80ff}
.obm-scrim[data-obm-skin="dark"] .obm-step.obm-cur .obm-step-n,
.obm-scrim[data-obm-skin="dark"] .obm-toggle button[aria-pressed="true"],
.obm-scrim[data-obm-skin="dark"] .obm-ribbon{background:#2f6cf5;border-color:#2f6cf5}
.obm-scrim[data-obm-skin="dark"] .obm-hero-sig{background:#2f6cf5}
.obm-scrim[data-obm-skin="dark"] .obm-chip.obm-on .obm-chip-box,
.obm-scrim[data-obm-skin="dark"] .obm-thumb.obm-on .obm-radio,
.obm-scrim[data-obm-skin="dark"] .obm-plan.obm-on .obm-radio{background:#2f6cf5;border-color:#2f6cf5}
.obm-scrim[data-obm-skin="dark"] .obm-body::-webkit-scrollbar-thumb:hover{background:#42506d}
.obm-scrim[data-obm-skin="dark"] .obm-err{border-color:rgba(255,123,123,.3)}
.obm-scrim[data-obm-skin="dark"] .obm-done-mark{border-color:rgba(62,207,142,.32)}
.obm-scrim[data-obm-skin="dark"] .obm-mchip.obm-ins{
  background:linear-gradient(90deg,rgba(15,157,143,.18),rgba(40,95,255,.16)) padding-box,
             linear-gradient(90deg,rgba(24,197,180,.6),rgba(91,140,255,.55)) border-box;color:#4fd6c6;
}
.obm-scrim[data-obm-skin="dark"] .obm-mchip.obm-pro{
  background:linear-gradient(90deg,rgba(120,98,224,.2),rgba(176,125,5,.14)) padding-box,
             linear-gradient(90deg,rgba(155,133,255,.6),rgba(227,185,80,.5)) border-box;color:#b6a3ff;
}
.obm-scrim[data-obm-skin="dark"] .obm-plan.obm-hot.obm-on{
  background:linear-gradient(150deg,rgba(24,197,180,.09),rgba(91,140,255,.09) 55%,rgba(155,133,255,.08)),var(--panel);
}
.obm-scrim[data-obm-skin="dark"] .obm-foot.obm-lift{box-shadow:0 -12px 26px -18px rgba(0,0,0,.9)}
.obm-scrim[data-obm-skin="dark"] .obm-meter{box-shadow:0 -14px 34px -20px rgba(0,0,0,.8)}

/* ══════════════════════ accessibility / reduced motion ═════════════════════ */
.obm-root :focus-visible,
.obm-scrim :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 4px var(--blue-wash)}
.obm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .obm-scrim,.obm-sheet,.obm-fade,.obm-close,.obm-btn,.obm-btn-out,.obm-chip,.obm-plan,.obm-thumb,.obm-quiet,.obm-dots i,
  .obm-pane-copy.obm-swap .obm-pane-h,.obm-pane-copy.obm-swap .obm-pane-sub{
    transition:opacity .12s ease !important;animation:none !important;transform:none !important;
  }
  .obm-cmp{animation:none !important}
  .obm-beam,.obm-tape-in,.obm-lat,.obm-hero-ring,.obm-plate-st i,
  .obm-draw .obm-hero-line,.obm-draw .obm-hero-area,.obm-tile.obm-flare,.obm-tile.obm-flare::after{animation:none !important}
  .obm-beam{display:none}
  .obm-tile,.obm-row::before,.obm-meter,.obm-meter-track i{transition:opacity .12s ease,background .12s ease,border-color .12s ease !important}
  .obm-meter{transform:none}
  .obm-scrim.obm-open .obm-sheet{transform:none}
  .obm-spin{animation:obm-spin .7s linear infinite !important}
}