/* ═══════════════════════════════════════════════════════════════════════════
   ORVX — the homepage.

   A SEPARATE stylesheet, loaded only by public_site/index.html.

   `landing.css` is shared by roughly forty committed pages: the eight SEO
   landings, Resources and every article, pricing, the legal pages and four
   localised copies of each. Reshaping the homepage through it would reshape all
   of them, and the homepage is the one page that has to argue a new category.
   So this file owns the homepage and nothing else, and the two never meet.

   ── what the page is trying to look like ──────────────────────────────────

   Not a dashboard, and not an AI product. Dashboards are dense and blue; AI
   landing pages are purple and gradient-heavy. This is neither: warm white,
   near-black, editorial spacing, and one vivid lime that is spent only where
   ORVX is doing something — a decision, an activation, an answer.

   The ORVX console itself is near-black. That is the whole visual argument in
   one move: everything else on the page is paper, and the thing the owner talks
   to is a different surface entirely.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand, matching the production tokens in landing.css rather than
     re-inventing them — a homepage whose lime is a shade off from the app's is
     worse than no brand colour at all. */
  --o-paper:      #F7F7F5;
  --o-white:      #FFFFFF;
  --o-ink:        #111113;
  --o-ink-2:      #3F4248;
  --o-ink-3:      #6B6E74;   /* was #6F7278: 4.49:1 on the paper background, under WCAG AA (RCS A11Y-8A5EDA) */
  --o-line:       #E6E7EA;
  --o-line-2:     #D8DADF;

  --o-dark:       #17181C;
  --o-dark-2:     #202126;
  --o-dark-line:  #2E3037;
  --o-dark-text:  #E8E9EC;
  --o-dark-dim:   #9B9FA8;

  --o-lime:       #C7FF3D;
  --o-lime-wash:  #F3FFD5;
  --o-lime-line:  #B4EF22;
  --o-lime-ink:   #2F3A00;

  --o-good:       #1B7F4B;
  --o-good-wash:  #E7F6ED;
  --o-bad:        #B4322B;
  --o-bad-wash:   #FBEDEC;

  --o-max:        1180px;
  --o-gutter:     24px;
  --o-radius:     18px;
  --o-radius-sm:  12px;

  --o-shadow:     0 1px 2px rgba(17,17,19,.04), 0 18px 48px -32px rgba(17,17,19,.22);
  --o-shadow-lg:  0 2px 4px rgba(17,17,19,.05), 0 44px 96px -52px rgba(17,17,19,.34);

  /* One curve for everything that moves, so the page has a single sense of
     physics rather than four. */
  --o-ease:       cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--o-paper);
  color: var(--o-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NOT a fix for anything. Overflow is corrected where it happens — this is a
     guard against a stray one-pixel rounding on a full-bleed band, and it is
     deliberately not relied upon: it also hides genuine clipping from
     scrollWidth, which is how a 109px headline overflow shipped looking fine. */
  overflow-x: clip;
}

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--o-lime); color: var(--o-lime-ink); }

/* ── the measure ─────────────────────────────────────────────────────────── */

.o-wrap {
  width: 100%;
  max-width: var(--o-max);
  margin-inline: auto;
  padding-inline: var(--o-gutter);
}

/* Bands, not cards. The rhythm of the page comes from alternating surfaces and
   from sections of genuinely different heights — §26 asks for rhythm, and a
   page of equal-height cards has none. */
.o-band { padding-block: clamp(72px, 10vw, 140px); position: relative; }

/* The nav is sticky and 70px tall, so an anchor jump lands with the heading
   underneath it — the visitor clicks "Agents" and arrives at a section whose
   title they cannot see. */
:where(section, main)[id] { scroll-margin-top: 88px; }
.o-band--tight { padding-block: clamp(56px, 7vw, 96px); }
.o-band--paper { background: var(--o-paper); }
.o-band--white { background: var(--o-white); }
.o-band--dark  { background: var(--o-dark); color: var(--o-dark-text); }
.o-band--wash  { background: var(--o-lime-wash); }

.o-band--dark h2, .o-band--dark h3 { color: #fff; }
.o-band--dark .o-lede { color: var(--o-dark-dim); }
.o-band--dark .o-eyebrow { color: var(--o-lime); }

/* ── type ────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Sized against the column it lives in, not the viewport. At 1440 the hero's
   left column is ~535px and "conversation." set at 104px is 644px wide — it
   overflowed by 109px and was clipped, invisibly, because the body hides
   horizontal overflow. A vw-based clamp cannot see the grid it sits in, so the
   ceiling is set to what the narrowest desktop column can actually hold. */
.o-h1 { font-size: clamp(40px, 5.6vw, 80px); letter-spacing: -.042em; line-height: .94; }
.o-h2 { font-size: clamp(32px, 4.6vw, 58px); letter-spacing: -.034em; line-height: 1.02; }
.o-h3 { font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -.022em; line-height: 1.16; }

.o-eyebrow {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--o-ink-3);
  margin: 0 0 18px;
}

.o-lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--o-ink-2);
  max-width: 58ch;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.o-note { font-size: 13.5px; color: var(--o-ink-3); line-height: 1.55; }

/* A phrase the page returns to. Not a highlighter pen — a thin lime rule under
   the words, so emphasis reads as underlining rather than as a second colour. */
.o-mark {
  background-image: linear-gradient(var(--o-lime), var(--o-lime));
  background-repeat: no-repeat;
  background-size: 100% .22em;
  background-position: 0 92%;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--o-ease), background .18s var(--o-ease),
              border-color .18s var(--o-ease), box-shadow .18s var(--o-ease);
}
.o-btn:active { transform: translateY(1px); }

/* Near-black is the primary action. Lime is NOT the button colour — it is
   reserved for ORVX acting, and a page where every button is lime spends the
   one colour that is supposed to mean something. */
.o-btn--primary { background: var(--o-dark); color: #fff; }
.o-btn--primary:hover { background: #000; box-shadow: var(--o-shadow); }

.o-btn--ghost { background: transparent; color: var(--o-ink); border-color: var(--o-line-2); }
.o-btn--ghost:hover { border-color: var(--o-ink); background: rgba(17,17,19,.035); }

.o-btn--lime { background: var(--o-lime); color: var(--o-lime-ink); }
.o-btn--lime:hover { background: #D6FF6B; }

.o-btn--onDark { background: #fff; color: var(--o-ink); }
.o-btn--onDark:hover { background: var(--o-lime); color: var(--o-lime-ink); }

.o-btn--ghostDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.o-btn--ghostDark:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.o-btn--sm { padding: 10px 18px; font-size: 14px; }

.o-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }

/* ── focus ───────────────────────────────────────────────────────────────── */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--o-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.o-band--dark :where(a, button):focus-visible { outline-color: var(--o-lime); }

.o-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--o-dark); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.o-skip:focus { left: 0; }

/* ═══ navigation ═════════════════════════════════════════════════════════ */

.o-nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247,247,245,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--o-ease), background .25s var(--o-ease);
}
.o-nav.is-stuck { border-bottom-color: var(--o-line); }

.o-nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 70px;
}

.o-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.o-brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--o-dark); color: var(--o-lime);
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px; letter-spacing: -.04em;
}
.o-brand-logo { display: block; width: auto; height: 26px; }
.o-brand-logo--foot { height: 56px; }
.o-brand-name { font-weight: 700; font-size: 18.5px; letter-spacing: -.035em; }
.o-brand-sub {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--o-ink-3); margin-top: 1px;
}

.o-nav-links { display: flex; gap: 26px; margin-inline-start: auto; }
.o-nav-links a {
  color: var(--o-ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color .16s var(--o-ease);
}
.o-nav-links a:hover { color: var(--o-ink); }

.o-nav-right { display: flex; align-items: center; gap: 10px; }

.o-nav-toggle {
  display: none;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--o-line-2); border-radius: 10px;
  color: var(--o-ink); cursor: pointer;
}

.o-nav-mobile {
  display: none;
  border-bottom: 1px solid var(--o-line);
  background: var(--o-paper);
  padding: 8px var(--o-gutter) 20px;
}
.o-nav-mobile.is-open { display: block; }
.o-nav-mobile a {
  display: block; padding: 13px 2px; color: var(--o-ink); text-decoration: none;
  font-size: 16px; font-weight: 550; border-bottom: 1px solid var(--o-line);
}
.o-nav-mobile .o-btn { width: 100%; margin-top: 14px; }
/* The phone menu (orvx-os.js): a sheet fixed under the header, so it opens
   where the reader is rather than at the top of the page, with a scrim over
   the page that closes it on a tap. The page behind does not scroll while it
   is open (html.o-menu-open; the body is pinned and put back on close). The
   header stays above the scrim, so its menu button closes the sheet too. */
.o-nav-mobile.is-open {
  position: fixed; inset-inline: 0; top: var(--o-nav-bottom, 62px); z-index: 89;
  max-height: calc(100vh - var(--o-nav-bottom, 62px));
  max-height: calc(100dvh - var(--o-nav-bottom, 62px));
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 18px 40px rgba(17, 17, 19, .12);
}
.o-nav-scrim {
  position: fixed; inset: 0; z-index: 88; cursor: pointer;
  background: rgba(17, 17, 19, .32); -webkit-tap-highlight-color: transparent;
}
.o-nav-scrim[hidden] { display: none; }
html.o-menu-open { overflow: hidden; overscroll-behavior: none; }
html.o-menu-open body { position: fixed; inset-inline: 0; width: 100%; }

/* ═══ hero ═══════════════════════════════════════════════════════════════ */

.o-hero { padding-block: clamp(40px, 4.6vw, 72px) clamp(64px, 8vw, 112px); position: relative; overflow: hidden; }

/* A single hairline grid behind the hero — structure, not decoration, and far
   from the gradient blobs every AI landing page reaches for. */
.o-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(17,17,19,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,19,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 78% at 18% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 78% at 18% 22%, #000 0%, transparent 72%);
  pointer-events: none;
}

.o-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}

.o-hero h1 { margin-bottom: 4px; }
.o-hero-sub { font-size: clamp(17px, 1.65vw, 20.5px); color: var(--o-ink-2); max-width: 46ch; margin-top: 26px; line-height: 1.55; }
.o-hero-foot { margin-top: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.o-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--o-line-2); border-radius: 999px;
  background: var(--o-white);
  font-size: 12.5px; font-weight: 560; color: var(--o-ink-2);
}
.o-pill b { font-weight: 650; color: var(--o-ink); }
.o-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--o-lime); border: 1px solid var(--o-lime-line); }

/* ═══ the console — the signature object on the page ═════════════════════ */

.o-console {
  background: var(--o-dark);
  border-radius: 22px;
  box-shadow: var(--o-shadow-lg);
  overflow: hidden;
  color: var(--o-dark-text);
  /* Every line inside is measured from here, so the console scales as one
     object instead of as a dozen independently-sized parts. */
  font-size: 15px;
}

.o-console-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--o-dark-line);
  background: #131418;
}
/* The new tile, under the X the markup still carries for screen readers. */
.o-console-mark {
  font-size: 0 !important; color: transparent !important;
  background: url(/brand/orvx-mark-v1.svg) center / cover no-repeat !important;
}
.o-console-mark {
  width: 22px; height: 22px; border-radius: 6px; background: var(--o-lime); color: var(--o-dark);
  display: grid; place-items: center; font-weight: 700; font-size: 11.5px; letter-spacing: -.04em;
}
.o-console-title { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.o-console-demo {
  margin-inline-start: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--o-lime); border: 1px solid rgba(199,255,61,.4); border-radius: 999px;
  padding: 4px 10px;
}

/* No min-height. The turns animate opacity and stay in flow, so the box never
   changes height — the reserve was doing nothing except pushing the end of the
   sequence below the fold on a 780px laptop, which is where the payoff is. */
.o-console-body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 13px; }

/* Each exchange fades up in place. Nothing types itself out character by
   character: a fake typing effect is the single clearest signal that a product
   demo is a video pretending to be software. */
.o-turn { opacity: 0; transform: translateY(10px); }
.o-turn.is-in { opacity: 1; transform: none; transition: opacity .5s var(--o-ease), transform .5s var(--o-ease); }

.o-turn-who {
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--o-dark-dim); margin-bottom: 7px;
}
.o-turn--owner .o-turn-who { color: #7E838D; }
.o-turn--orvx .o-turn-who { color: var(--o-lime); }

.o-ask {
  display: flex; align-items: center; gap: 11px;
  background: var(--o-dark-2); border: 1px solid var(--o-dark-line);
  border-radius: 13px; padding: 12px 14px;
  font-size: 15.5px; color: #fff; font-weight: 500;
}
.o-mic {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: rgba(199,255,61,.14); border: 1px solid rgba(199,255,61,.34);
  display: grid; place-items: center; color: var(--o-lime);
}
/* The waveform reacts only while the owner is "speaking" — motion that means
   something, rather than an idle animation that means the page is busy. */
.o-wave { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 15px; margin-inline-start: auto; }
.o-wave i { width: 2.5px; border-radius: 2px; background: var(--o-lime); height: 4px; opacity: .45; }
.o-ask.is-live .o-wave i { animation: o-wave 1s var(--o-ease) infinite; opacity: 1; }
.o-ask.is-live .o-wave i:nth-child(2) { animation-delay: .1s; }
.o-ask.is-live .o-wave i:nth-child(3) { animation-delay: .2s; }
.o-ask.is-live .o-wave i:nth-child(4) { animation-delay: .3s; }
.o-ask.is-live .o-wave i:nth-child(5) { animation-delay: .4s; }
@keyframes o-wave { 0%,100% { height: 4px; } 50% { height: 15px; } }

.o-answer { font-size: 16.5px; line-height: 1.5; color: #fff; letter-spacing: -.012em; }
.o-answer strong { color: var(--o-lime); font-weight: 650; }

/* Evidence sits under the answer as chips, connected by a hairline: the claim
   above, what it rests on below, visibly attached to it. */
.o-evidence { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--o-dark-line); }
.o-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 11px; border-radius: 8px;
  background: rgba(255,255,255,.055); border: 1px solid var(--o-dark-line);
  font-size: 12.5px; color: var(--o-dark-dim);
  opacity: 0; transform: translateY(6px);
}
.o-chip.is-in { opacity: 1; transform: none; transition: opacity .42s var(--o-ease), transform .42s var(--o-ease); }
.o-chip b { font-weight: 650; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.o-chip--up b { color: #FF8B82; }
.o-chip--down b { color: #8BE3AE; }

/* The decision card is the one lime-edged object in the console. */
.o-decision {
  border: 1px solid var(--o-dark-line);
  border-inline-start: 3px solid var(--o-lime);
  border-radius: 12px;
  background: #1C1D22;
  padding: 13px 15px;
}
.o-decision-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--o-lime); margin-bottom: 8px;
}
.o-decision-h { font-size: 15.5px; font-weight: 620; color: #fff; letter-spacing: -.014em; line-height: 1.32; }
.o-decision-opts { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.o-decision-opts li { font-size: 13px; line-height: 1.4; color: var(--o-dark-dim); padding-inline-start: 16px; position: relative; }
.o-decision-opts li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; border: 1px solid #575B64;
}
.o-decision-act { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.o-mini {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: default;
  border: 1px solid var(--o-dark-line); background: transparent; color: var(--o-dark-text);
}
.o-mini--go { background: var(--o-lime); border-color: var(--o-lime); color: var(--o-lime-ink); }

/* The task is the resolution of the sequence: insight became an assignment. */
.o-task {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--o-dark-line); border-radius: 12px;
  background: rgba(199,255,61,.07);
  padding: 11px 14px;
}
.o-task-tick {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--o-lime); color: var(--o-lime-ink);
  display: grid; place-items: center;
}
.o-task-h { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -.012em; }
.o-task-m { font-size: 12px; color: var(--o-dark-dim); margin-top: 2px; }

.o-console-foot {
  border-top: 1px solid var(--o-dark-line);
  padding: 9px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: #6E727B;
}
.o-replay {
  margin-inline-start: auto;
  background: transparent; border: 1px solid var(--o-dark-line); color: var(--o-dark-dim);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: border-color .16s var(--o-ease), color .16s var(--o-ease);
}
.o-replay:hover { border-color: var(--o-lime); color: var(--o-lime); }

/* ═══ generic layout pieces ══════════════════════════════════════════════ */

/* A section head that is deliberately NOT centred — the page reads as an
   editorial column, and centred headings over centred paragraphs is the exact
   look of the SaaS template this is trying not to be. */
.o-head { max-width: 46ch; }
.o-head--wide { max-width: 62ch; }
.o-head--center { max-width: 42ch; margin-inline: auto; text-align: center; }

.o-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 78px);
  align-items: center;
}
.o-split--top { align-items: start; }

.o-cards { display: grid; gap: 18px; }
.o-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.o-card {
  background: var(--o-white);
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius);
  padding: 26px;
}
.o-card h3 { margin-bottom: 9px; }
.o-card p { margin: 0; font-size: 15px; color: var(--o-ink-2); line-height: 1.55; }
.o-band--dark .o-card { background: var(--o-dark-2); border-color: var(--o-dark-line); }
.o-band--dark .o-card p { color: var(--o-dark-dim); }

/* ═══ the two-column category contrast ═══════════════════════════════════ */

.o-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }

.o-vs {
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius);
  padding: 28px;
  background: var(--o-white);
  display: flex; flex-direction: column;
}
.o-vs--orvx { background: var(--o-dark); border-color: var(--o-dark); color: var(--o-dark-text); }

.o-vs-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--o-ink-3); margin-bottom: 20px;
}
.o-vs--orvx .o-vs-tag { color: var(--o-lime); }

/* The old category, rendered as what it actually gives you: a wall of labels. */
.o-metrics { display: flex; flex-wrap: wrap; gap: 7px; }
.o-metrics span {
  font-size: 13px; padding: 7px 12px; border-radius: 7px;
  background: var(--o-paper); border: 1px solid var(--o-line); color: var(--o-ink-3);
}

.o-vs-said { font-size: clamp(19px, 2vw, 23px); font-weight: 620; letter-spacing: -.024em; line-height: 1.34; color: #fff; }
.o-vs-said em { font-style: normal; color: var(--o-lime); }

.o-vs-foot {
  margin-top: auto; padding-top: 24px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.o-vs .o-vs-foot { color: var(--o-ink-3); }
.o-vs--orvx .o-vs-foot { color: var(--o-lime); }

/* ═══ the owner loop ═════════════════════════════════════════════════════ */

/* Four steps that read as one circuit: each step carries a connector into the
   next, and the last one closes back to the first. Four unconnected feature
   cards would say the opposite of what this section is claiming. */
.o-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 54px; }

.o-step {
  position: relative;
  padding: 30px 26px 30px 0;
  border-top: 2px solid var(--o-line-2);
}
.o-step + .o-step { padding-inline-start: 26px; }
.o-step::before {
  content: ""; position: absolute; top: -2px; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--o-lime);
  transition: width .7s var(--o-ease);
}
.o-step.is-in::before { width: 100%; }

.o-step-n {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--o-ink-3);
  margin-bottom: 14px;
}
.o-step h3 { font-size: 20px; margin-bottom: 10px; }
.o-step-say {
  font-size: 15px; color: var(--o-ink); line-height: 1.45;
  padding: 12px 14px; border-radius: 10px;
  background: var(--o-white); border: 1px solid var(--o-line);
  margin-bottom: 11px;
}
.o-step p { margin: 0; font-size: 14px; color: var(--o-ink-3); line-height: 1.5; }

/* ═══ Owner Mode simulation ══════════════════════════════════════════════ */

.o-today {
  background: var(--o-white);
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius);
  box-shadow: var(--o-shadow);
  overflow: hidden;
}
.o-today-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--o-line);
}
.o-today-bar strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; }
.o-badge {
  margin-inline-start: auto;
  font-size: 11px; font-weight: 650; padding: 5px 11px; border-radius: 999px;
}
.o-badge--warn { background: #FFF4E3; color: #8A5200; border: 1px solid #F3DBB4; }
.o-badge--good { background: var(--o-good-wash); color: var(--o-good); border: 1px solid #BFE3CE; }

.o-today-body { padding: 22px 20px; display: grid; gap: 18px; }
.o-row { display: grid; gap: 5px; }
.o-row-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--o-ink-3);
}
.o-row-v { font-size: 16px; line-height: 1.45; color: var(--o-ink); letter-spacing: -.012em; }
.o-row-v b { font-weight: 650; }
.o-fall { color: var(--o-bad); font-weight: 650; font-variant-numeric: tabular-nums; }
.o-rise { color: var(--o-good); font-weight: 650; font-variant-numeric: tabular-nums; }

.o-row--found {
  background: var(--o-lime-wash); border: 1px solid #DCF2A8;
  border-radius: var(--o-radius-sm); padding: 15px 16px;
}
.o-row--found .o-row-k { color: var(--o-lime-ink); }

.o-askbar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--o-line-2); border-radius: 999px;
  padding: 12px 18px; color: var(--o-ink-3); font-size: 14.5px;
}

/* ═══ decision states ════════════════════════════════════════════════════ */

.o-states { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.o-state {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--o-line-2); background: var(--o-white);
  font-size: 13.5px; font-weight: 560; color: var(--o-ink-2);
}
.o-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--o-line-2); }
.o-state--now { border-color: var(--o-lime-line); background: var(--o-lime-wash); color: var(--o-lime-ink); font-weight: 650; }
.o-state--now i { background: var(--o-lime-line); }

/* ═══ delegation timeline ════════════════════════════════════════════════ */

.o-flow { display: grid; gap: 0; margin-top: 46px; }
.o-flow-item {
  display: grid; grid-template-columns: 116px 1fr; gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--o-line);
  align-items: start;
}
.o-flow-item:last-child { border-bottom: 1px solid var(--o-line); }
.o-flow-when {
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--o-ink-3); padding-top: 3px;
}
.o-flow-what { font-size: 16.5px; letter-spacing: -.014em; line-height: 1.45; }
.o-flow-note { font-size: 13.5px; color: var(--o-ink-3); margin-top: 5px; }
.o-flow-item--last .o-flow-when { color: var(--o-lime-ink); }

.o-beforeafter { display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.o-ba { font-size: 13px; color: var(--o-ink-3); }
.o-ba b { display: block; font-size: 24px; letter-spacing: -.03em; color: var(--o-ink); font-weight: 700; }
.o-ba--after b { color: var(--o-good); }
.o-ba-arrow { color: var(--o-line-2); }

/* ═══ the agent system ═══════════════════════════════════════════════════ */

/* Three groups, not four. The fourth was ORVX's own growth tooling — the SEO,
   LinkedIn and outreach agents are every one of them behind requireAdmin, and
   they exist so ORVX can find merchants, not so a merchant can use them. Listing
   internal tooling on a page that is selling a subscription is selling something
   nobody receives. */
.o-brain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }

.o-group {
  border: 1px solid var(--o-dark-line); border-radius: var(--o-radius);
  padding: 22px 20px; background: var(--o-dark-2);
}
.o-group-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--o-lime); margin-bottom: 16px;
}
.o-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.o-group li { font-size: 14px; color: var(--o-dark-text); display: flex; align-items: baseline; gap: 8px; line-height: 1.4; }

/* Status is stated on the agent itself. §32 is explicit that shipped and
   not-yet-shipped must not look the same, and the only way to keep that true
   over time is for the label to live next to the name. */
.o-status {
  flex: none; margin-inline-start: auto;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.o-status--live { background: rgba(199,255,61,.16); color: var(--o-lime); }
.o-status--soon { background: rgba(255,255,255,.08); color: #8A8F98; }

/* ═══ data health ════════════════════════════════════════════════════════ */

.o-health {
  background: var(--o-white); border: 1px solid var(--o-line);
  border-radius: var(--o-radius); padding: 26px; box-shadow: var(--o-shadow);
}
.o-health-top { display: flex; align-items: baseline; gap: 12px; }
.o-health-n { font-size: 52px; font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.o-health-k { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--o-ink-3); }

.o-meter { height: 7px; border-radius: 99px; background: var(--o-paper); border: 1px solid var(--o-line); margin: 18px 0 22px; overflow: hidden; }
.o-meter i { display: block; height: 100%; width: 0; background: var(--o-lime); transition: width 1.1s var(--o-ease); }
.o-meter.is-in i { width: var(--o-fill, 82%); }

.o-known { display: grid; gap: 1px; background: var(--o-line); border: 1px solid var(--o-line); border-radius: var(--o-radius-sm); overflow: hidden; }
.o-known div { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--o-white); font-size: 14.5px; }
.o-known span { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 9px; border-radius: 6px; }
.o-known .k-known   { background: var(--o-good-wash); color: var(--o-good); }
.o-known .k-partial { background: #FFF4E3; color: #8A5200; }
.o-known .k-none    { background: var(--o-paper); color: var(--o-ink-3); border: 1px solid var(--o-line); }

/* ═══ owner vs team ══════════════════════════════════════════════════════ */

.o-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.o-layer { border: 1px solid var(--o-line); border-radius: var(--o-radius); padding: 26px; background: var(--o-white); }
.o-layer--owner { background: var(--o-dark); border-color: var(--o-dark); color: var(--o-dark-text); }
.o-layer h3 { font-size: 20px; margin-bottom: 6px; }
.o-layer--owner h3 { color: #fff; }
.o-layer-sub { font-size: 14px; color: var(--o-ink-3); margin: 0 0 20px; }
.o-layer--owner .o-layer-sub { color: var(--o-dark-dim); }
.o-layer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.o-layer li {
  font-size: 13.5px; padding: 7px 13px; border-radius: 8px;
  background: var(--o-paper); border: 1px solid var(--o-line); color: var(--o-ink-2);
}
.o-layer--owner li { background: rgba(255,255,255,.06); border-color: var(--o-dark-line); color: var(--o-dark-text); }

/* ═══ steps (Shopify) ════════════════════════════════════════════════════ */

.o-numbered { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 46px; counter-reset: s; }
.o-numbered > div { counter-increment: s; padding-top: 22px; border-top: 2px solid var(--o-line-2); }
.o-numbered > div::before {
  content: "0" counter(s);
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--o-ink-3); margin-bottom: 12px;
}
.o-numbered h3 { font-size: 17px; margin-bottom: 7px; }
.o-numbered p { margin: 0; font-size: 14px; color: var(--o-ink-3); line-height: 1.5; }

/* ═══ trust ══════════════════════════════════════════════════════════════ */

.o-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--o-line); border: 1px solid var(--o-line); border-radius: var(--o-radius); overflow: hidden; margin-top: 46px; }
.o-trust > div { background: var(--o-white); padding: 24px 22px; }
.o-trust h3 { font-size: 16px; margin-bottom: 7px; }
.o-trust p { margin: 0; font-size: 14px; color: var(--o-ink-3); line-height: 1.5; }

/* ═══ pricing ════════════════════════════════════════════════════════════ */

/* Business health's six weighted dimensions. A strip rather than cards: the
   weights are one fact each, and six cards would out-shout the section above. */
.o-weights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 34px;
             background: var(--o-line); border: 1px solid var(--o-line); border-radius: var(--o-radius); overflow: hidden; }
.o-weights > div { background: var(--o-white); padding: 20px 16px; display: grid; gap: 4px; }
.o-weights b { font-size: 26px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.o-weights span { font-size: 12.5px; color: var(--o-ink-3); line-height: 1.35; }

/* Billing period. Two buttons, not a switch: a switch does not say which side
   it is currently on without a label, and this one carries a price. */
.o-cycle { display: inline-flex; gap: 4px; padding: 4px; margin-top: 34px;
           border: 1px solid var(--o-line-2); border-radius: 999px; background: var(--o-white); }
.o-cycle-btn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
               padding: 9px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--o-ink-3); }
.o-cycle-btn span { font-weight: 500; opacity: .8; }
.o-cycle-btn.is-on { background: var(--o-dark); color: #fff; }

/* Two plans, Core and Intelligence (a third, custom-priced card was withdrawn
   on 2026-10-15). Capped so two cards do not stretch to the full measure. */
.o-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; margin: 46px auto 0; align-items: stretch; }
.o-plan { border: 1px solid var(--o-line); border-radius: var(--o-radius); padding: 28px 26px; background: var(--o-white); }
.o-plan--hero { background: var(--o-dark); border-color: var(--o-dark); color: var(--o-dark-text); }
.o-plan-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-lime); margin-bottom: 12px; }
.o-plan h3 { font-size: 19px; margin-bottom: 5px; }
.o-plan--hero h3 { color: #fff; }
.o-plan-desc { font-size: 14px; color: var(--o-ink-3); margin: 0 0 20px; }
.o-plan--hero .o-plan-desc { color: var(--o-dark-dim); }
.o-plan-price { font-size: 44px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.o-plan-price small { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--o-ink-3); }
.o-plan--hero .o-plan-price small { color: var(--o-dark-dim); }
.o-plan-cycle { font-size: 12.5px; color: var(--o-ink-3); margin: 8px 0 20px; }
.o-plan--hero .o-plan-cycle { color: var(--o-dark-dim); }
.o-plan .o-btn { width: 100%; }
.o-plan ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.o-plan li { font-size: 14px; color: var(--o-ink-2); padding-inline-start: 20px; position: relative; line-height: 1.45; }
.o-plan--hero li { color: var(--o-dark-text); }
.o-plan li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px;
  width: 9px; height: 5px; border-inline-start: 1.8px solid var(--o-ink-3); border-bottom: 1.8px solid var(--o-ink-3);
  transform: rotate(-45deg);
}
.o-plan--hero li::before { border-color: var(--o-lime); }

/* ═══ FAQ ════════════════════════════════════════════════════════════════ */

/* `.faq-item` / `.faq-q` / `.faq-a` are the schema builder's selectors, matched
   by scripts/build-site-schema.js as exact attribute values. They are styled
   under those names here rather than renamed, because renaming them empties the
   FAQPage structured data without breaking anything visible. */
.o-faq { margin-top: 44px; border-top: 1px solid var(--o-line); }
.faq-item { border-bottom: 1px solid var(--o-line); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px;
  background: transparent; border: 0; padding: 21px 2px;
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.018em;
  color: var(--o-ink); text-align: start; cursor: pointer;
}
.o-faq-ico { margin-inline-start: auto; flex: none; color: var(--o-ink-3); transition: transform .28s var(--o-ease); }
.faq-q[aria-expanded="true"] .o-faq-ico { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 2px 22px; }
.faq-q[aria-expanded="true"] + .faq-a { display: block; }
.faq-a p { margin: 0; font-size: 15.5px; color: var(--o-ink-2); line-height: 1.6; max-width: 72ch; }
/* 8px between one question's tap area and the next, so a thumb at the edge of
   one never lands on its neighbour; the rhythm on screen is the same as before
   (4px of the item's own padding on each side of the line, 4px less inside). */
.faq-item { padding-block: 4px; }
.faq-q { padding-block: 17px; }
.faq-a { padding-bottom: 18px; }

/* ═══ closing ════════════════════════════════════════════════════════════ */

.o-close { text-align: center; }
.o-close h2 { font-size: clamp(38px, 6.6vw, 82px); letter-spacing: -.042em; line-height: .98; }
.o-close .o-lede { margin-inline: auto; text-align: center; }
.o-close .o-cta-row { justify-content: center; }

/* ═══ footer ═════════════════════════════════════════════════════════════ */

.o-foot { background: var(--o-dark); color: var(--o-dark-dim); padding-block: 62px 40px; }
/* Four columns, not three: the footer carries Solutions, Product, Company and
   Account on every other page, and the homepage was merging Company and Account
   into one. The mobile breakpoint below already collapses to two, so this only
   affects the wide layout. */
.o-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px; }
.o-foot h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.o-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.o-foot a { color: var(--o-dark-dim); text-decoration: none; font-size: 14px; }
.o-foot a:hover { color: var(--o-lime); }
.o-foot-brand { max-width: 34ch; font-size: 14px; line-height: 1.6; }
.o-foot-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--o-dark-line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px;
}
.o-foot-bottom nav { margin-inline-start: auto; display: flex; gap: 20px; flex-wrap: wrap; }

/* ═══ reveal ═════════════════════════════════════════════════════════════ */

.o-reveal { opacity: 0; transform: translateY(16px); }
.o-reveal.is-in { opacity: 1; transform: none; transition: opacity .68s var(--o-ease), transform .68s var(--o-ease); }

/* Without JavaScript nothing may stay invisible. */
html:not(.js) .o-reveal,
html:not(.js) .o-turn,
html:not(.js) .o-chip { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   Recomposed rather than stacked (§28). The console keeps its full sequence on
   a phone because it IS the argument; what changes is the order of the columns
   and the density of the grids.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .o-loop, .o-numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-weights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-loop .o-step { padding-inline-start: 0 !important; padding-inline-end: 22px; }
  .o-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 900px) {
  .o-brain { grid-template-columns: minmax(0, 1fr); }
  .o-nav-links { display: none; }
  .o-nav-right .o-btn--ghost { display: none; }
  .o-nav-toggle { display: inline-flex; }
  .o-nav-links { margin-inline-start: auto; }
  .o-nav-right { margin-inline-start: auto; }

  .o-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  /* One column again, so the headline may use the whole measure. */
  .o-h1 { font-size: clamp(40px, 9vw, 92px); }
  .o-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .o-versus, .o-layers, .o-plans, .o-cards--2, .o-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .o-trust { grid-template-columns: minmax(0, 1fr); }
  .o-plan--hero { order: -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --o-gutter: 18px; }

  .o-brain, .o-loop, .o-numbered, .o-cards--4 { grid-template-columns: minmax(0, 1fr); }
  .o-weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-loop .o-step { padding-inline-end: 0; }

  /* The console is the argument, so it has to start on the first screen rather
     than a scroll later. Compressing the hero's vertical rhythm by about 120px
     brings its top edge up without shrinking the headline, which is the other
     thing that has to land immediately. */
  .o-hero { padding-block: 26px 52px; }
  .o-hero-sub { margin-top: 18px; }
  .o-hero .o-cta-row { margin-top: 22px; gap: 10px; }
  .o-hero-foot { margin-top: 18px; }
  .o-console-body { padding: 16px 15px; gap: 12px; }
  .o-console { border-radius: 18px; }
  .o-ask { font-size: 14.5px; padding: 12px 13px; }
  .o-answer { font-size: 15.5px; }

  .o-flow-item { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .o-brand-sub { display: none; }
  .o-health-n { font-size: 42px; }
  .o-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .o-foot-bottom nav { margin-inline-start: 0; }
}

@media (max-width: 480px) {
  /* The nav CTA goes. At 320 the brand, "Start with ORVX" and the menu button
     together overflowed by 22px — a sideways scroll of the whole page that no
     screenshot shows and the eye does not catch. The call to action is not
     lost: it is the first thing in the hero, directly below, and it is the
     last item in the menu this button opens. */
  .o-nav-right .o-btn--primary { display: none; }
  .o-nav-inner { height: 62px; gap: 12px; }
}

@media (max-width: 380px) {
  .o-chip { font-size: 11.5px; padding: 5px 9px; }
  .o-btn { padding: 13px 20px; font-size: 14.5px; }
  .o-cta-row .o-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOVA — the operator the page is now about

   She is the product's face, so she appears where the product does: beside the
   conversation in the hero, and once more where the page says who she is. Never
   decorative alone — every place she stands, there is a real exchange next to
   her, and she is labelled AI wherever she appears.
   ═══════════════════════════════════════════════════════════════════════════ */

.o-ai-tag {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 6px;
  border: 1px solid currentColor; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  opacity: .75; line-height: 1.5;
}

/* The hero stage: NOVA, head to toe, beside the conversation she is having.
   The figure is sized by the stage's height, so the whole of her is always
   in frame; the card overlaps her outstretched hand, not her. */
.o-stage { position: relative; }
.o-nova-figure {
  position: absolute; z-index: 0; pointer-events: none;
  /* Inside the edge, never past it: the hero clips overflow, but a figure
     painted beyond the viewport is still a layout that does not hold
     (responsive-tests, 1024px). */
  inset-inline-end: calc(-1 * clamp(0px, (100vw - var(--o-max)) / 2 - 8px, 110px));
  top: -44px; bottom: -40px; max-height: 780px;
  aspect-ratio: 660 / 1600;
}
.o-nova-figure img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; display: block; }
.o-stage .o-console { position: relative; z-index: 1; margin-top: 96px; margin-inline-end: 27%; }

.o-console-face { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }

/* Findings inside NOVA's answer — each one a separate claim, arriving after
   the sentence that introduces it. */
.o-findings { list-style: none; margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid var(--o-dark-line); display: grid; gap: 8px; }
.o-findings li {
  display: flex; align-items: baseline; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--o-dark-text);
  opacity: 0; transform: translateY(6px);
}
.o-findings li.is-in { opacity: 1; transform: none; transition: opacity .42s var(--o-ease), transform .42s var(--o-ease); }
.o-findings li i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #FF8B82; transform: translateY(-1px); }
.o-findings li i.warn { background: #F5C451; }
.o-findings b { color: #fff; font-weight: 650; }
html:not(.js) .o-findings li { opacity: 1; transform: none; }

.o-prov { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--o-dark-dim); line-height: 1.45; }
.o-prov .o-task-tick { flex: none; }

/* ── a flow, drawn as boxes and arrows ───────────────────────────────────── */
.o-flowline { display: flex; align-items: stretch; gap: 0; margin-top: 46px; flex-wrap: nowrap; }
.o-flowline > div {
  flex: 1 1 0; min-width: 0; padding: 18px 16px; border-radius: 16px;
  background: var(--o-white); border: 1px solid var(--o-line);
}
.o-flowline > div b { display: block; font-size: 15px; letter-spacing: -.01em; }
.o-flowline > div span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--o-ink-3); }
.o-flowline > div.is-nova { background: var(--o-dark); border-color: var(--o-dark); color: #fff; }
.o-flowline > div.is-nova span { color: var(--o-dark-dim); }
.o-flowline > div.is-nova b { color: var(--o-lime); }
.o-flowline > em {
  flex: none; align-self: center; width: 28px; text-align: center; font-style: normal;
  color: var(--o-ink-3); font-size: 18px;
}
[dir="rtl"] .o-flowline > em { transform: scaleX(-1); }

/* ── ask anything ───────────────────────────────────────────────────────── */
.o-prompts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.o-prompt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: 16px 16px 14px; border-radius: 16px; background: var(--o-paper); border: 1px solid var(--o-line);
}
.o-prompt q { quotes: "“" "”"; font-size: 15.5px; line-height: 1.4; font-weight: 560; letter-spacing: -.01em; color: var(--o-ink); }
.o-prompt small { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--o-ink-3); }
.o-prompt small::before { content: "Runs → "; font-weight: 500; }

.o-answer-demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; margin-top: 46px; align-items: start; }
.o-answer-card { background: var(--o-white); border: 1px solid var(--o-line); border-radius: 18px; padding: 20px; box-shadow: var(--o-shadow); }
.o-answer-card .o-ac-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--o-ink-3); }
.o-answer-card .o-ac-h { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 4px; }
.o-ac-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.o-ac-tiles div { padding: 11px 12px; border-radius: 12px; background: var(--o-paper); }
.o-ac-tiles span { display: block; font-size: 11.5px; color: var(--o-ink-3); }
.o-ac-tiles b { display: block; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.o-ac-rank { list-style: none; margin: 14px 0 0; padding: 0; }
.o-ac-rank li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--o-line); font-size: 14px; }
.o-ac-rank li span { color: var(--o-ink-3); font-variant-numeric: tabular-nums; }
.o-ac-foot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--o-ink-3); }
.o-ac-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--o-paper); color: var(--o-ink-2); font-weight: 600; }
.o-ac-src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--o-ink); }

/* ── calculated, not guessed ─────────────────────────────────────────────── */
.o-truth { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 46px; }
.o-truth-col { padding: 22px; border-radius: 18px; border: 1px solid var(--o-dark-line); background: rgba(255,255,255,.03); }
.o-truth-col p.o-vs-tag { margin-bottom: 14px; }
.o-truth-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.o-truth-steps span {
  padding: 8px 13px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.07); color: #fff;
}
.o-truth-steps span.is-nova { background: var(--o-lime); color: var(--o-lime-ink); }
.o-truth-steps em { font-style: normal; color: var(--o-dark-dim); }
.o-truth-col--not span { background: transparent; border: 1px dashed rgba(255,255,255,.22); color: var(--o-dark-dim); }
.o-truth-col--not span.is-guess { text-decoration: line-through; text-decoration-color: #FF8B82; }
.o-truth-col p.o-note { margin-top: 14px; color: var(--o-dark-dim); }

/* ── the honest action vocabulary ───────────────────────────────────────── */
.o-life { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 40px; counter-reset: life; }
.o-life > div { padding: 16px 14px; border-radius: 16px; background: var(--o-white); border: 1px solid var(--o-line); counter-increment: life; }
.o-life > div::before { content: counter(life, decimal-leading-zero); display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--o-ink-3); }
.o-life b { display: block; margin-top: 8px; font-size: 15px; letter-spacing: -.01em; }
.o-life span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--o-ink-3); }
.o-life .o-who { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--o-ink-2); }
.o-life .is-you { background: var(--o-lime-wash); border-color: var(--o-lime-line); }

.o-exchange { max-width: 680px; margin-top: 42px; display: grid; gap: 14px; }
.o-exchange .o-console-body { padding: 0; }
.o-exchange .o-turn { opacity: 1; transform: none; }

/* ── connect ───────────────────────────────────────────────────────────── */
.o-connect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.o-src {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--o-line); background: var(--o-white);
}
.o-src-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.o-src b { font-size: 15.5px; letter-spacing: -.01em; }
.o-src p { font-size: 13px; line-height: 1.45; color: var(--o-ink-3); margin: 0; }
.o-src-st { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.o-src-st--live { background: var(--o-lime-wash); color: var(--o-lime-ink); border: 1px solid var(--o-lime-line); }
.o-src-st--rolling { background: var(--o-paper); color: var(--o-ink-2); border: 1px solid var(--o-line-2); }
.o-src-st--planned { background: transparent; color: var(--o-ink-3); border: 1px dashed var(--o-line-2); }
.o-src--planned { background: transparent; border-style: dashed; }
.o-connect-h { margin-top: 34px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--o-ink-3); }
.o-connect-h + .o-connect { margin-top: 12px; }

/* ── meet NOVA ─────────────────────────────────────────────────────────── */
.o-meet { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.o-meet-portrait {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5;
  background: radial-gradient(120% 80% at 50% 0%, rgba(199,255,61,.22) 0%, rgba(199,255,61,0) 62%), linear-gradient(180deg, #24262C 0%, #17181C 100%);
}
.o-meet-portrait img { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.o-meet-portrait .o-ai-tag { position: absolute; top: 14px; inset-inline-start: 14px; color: var(--o-lime); background: rgba(23,24,28,.6); opacity: 1; }
.o-traits { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.o-traits b { display: block; color: #fff; font-size: 16px; letter-spacing: -.01em; }
.o-traits span { display: block; margin-top: 4px; color: var(--o-dark-dim); font-size: 14px; line-height: 1.5; }

@media (max-width: 1080px) {
  .o-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-life { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .o-stage .o-console { margin-top: 0; margin-inline-end: 0; }
  .o-nova-figure { display: none; }
  .o-flowline { flex-direction: column; }
  .o-flowline > em { transform: rotate(90deg); width: auto; height: 26px; line-height: 26px; }
  [dir="rtl"] .o-flowline > em { transform: rotate(90deg); }
  .o-answer-demo, .o-truth, .o-meet { grid-template-columns: minmax(0, 1fr); }
  .o-connect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-meet-portrait { max-width: 360px; }
}
@media (max-width: 640px) {
  .o-prompts, .o-connect, .o-traits { grid-template-columns: minmax(0, 1fr); }
  .o-life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION

   Not "slightly less animation" — none. Every element that animates into place
   is placed, and the console shows its finished conversation rather than
   playing it. The demo must be readable as a static object, because for these
   visitors it always will be.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .o-reveal, .o-turn, .o-chip { opacity: 1 !important; transform: none !important; }
  .o-findings li { opacity: 1 !important; transform: none !important; }
  .o-step::before { width: 100% !important; }
  .o-meter i { width: var(--o-fill, 82%) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ORVX-FIRST SITE (October 2026)

   One template, five languages (src/content/site): the homepage, How ORVX
   works and Inside ORVX. What follows is what those pages add to the system
   above: the language menu, the three-step "how", the source list, the page
   heads of the two inner pages, the reading sizes and tap sizes a phone needs,
   and right-to-left Arabic.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Anchors that published articles link to. They mark a place inside a
   section, so they carry the same clearance from the sticky nav. */
.o-anchor { display: block; position: relative; height: 0; }
[id] { scroll-margin-top: 88px; }

/* The hero without a figure: the conversation is the whole stage. */
.o-stage--solo .o-console { margin: 0; }
.o-stage--solo { align-self: center; }

/* ── language menu ─────────────────────────────────────────────────────── */
.o-lang { position: relative; }
.o-lang > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 10px; justify-content: center;
  border-radius: 10px; color: var(--o-ink-2); font-size: 14px; font-weight: 600;
}
.o-lang > summary::-webkit-details-marker { display: none; }
.o-lang > summary:hover, .o-lang[open] > summary { color: var(--o-ink); background: rgba(10,11,13,.05); }
.o-lang-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 70;
  min-width: 170px; padding: 6px; border-radius: 12px;
  background: var(--o-white); border: 1px solid var(--o-line); box-shadow: var(--o-shadow);
}
.o-lang-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--o-ink); text-decoration: none; font-size: 15px; font-weight: 500;
}
.o-lang-menu a:hover { background: var(--o-paper); }
.o-lang-menu a[aria-current="true"] { font-weight: 700; }
.o-lang-menu a[aria-current="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--o-ink-3); }
.o-nav-langs { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 12px 0 4px; border-bottom: 1px solid var(--o-line); }
.o-nav-mobile .o-nav-langs a { border: 0; padding: 10px 8px; min-height: 44px; font-size: 15px; font-weight: 500; }
.o-nav-mobile .o-nav-langs a[aria-current="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ── three steps ───────────────────────────────────────────────────────── */
.o-steps3 {
  list-style: none; margin: 46px 0 0; padding: 0; counter-reset: s;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.o-steps3 li { counter-increment: s; padding-top: 22px; border-top: 2px solid var(--o-line-2); min-width: 0; }
.o-steps3 li::before {
  content: "0" counter(s); display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--o-ink-3); margin-bottom: 12px;
}
.o-steps3 h3 { font-size: 21px; margin-bottom: 8px; }
.o-steps3 p { margin: 0; font-size: 16px; color: var(--o-ink-2); line-height: 1.55; }

/* ── the sources, named ────────────────────────────────────────────────── */
.o-logos { margin-top: 40px; }
.o-logos-h { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--o-ink-3); margin: 0 0 12px; }
.o-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.o-logos li {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
  background: var(--o-white); border: 1px solid var(--o-line); border-radius: 12px;
}
.o-logos li b { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* ── the way on ────────────────────────────────────────────────────────── */
.o-more { margin: 30px 0 0; }
.o-more a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600;
  color: var(--o-ink); text-underline-offset: 4px;
}
.o-more--dark a, .o-band--dark .o-more a { color: var(--o-lime); }
.o-team { margin: 26px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--o-dark-dim); }
.o-price-note { margin-top: 26px; max-width: 66ch; }
.o-price-note a { color: var(--o-ink); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.o-list { margin: 30px 0 0; padding-inline-start: 22px; max-width: 70ch; font-size: 17px; line-height: 1.6; color: var(--o-ink-2); }
.o-list li + li { margin-top: 8px; }

/* ── the inner pages' head ─────────────────────────────────────────────── */
.o-pagehead { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.o-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--o-ink-3); margin-bottom: 26px; }
.o-crumbs a { color: var(--o-ink-2); }
.o-h1--page { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; max-width: 18ch; }
.o-pagehead .o-lede { max-width: 58ch; margin-top: 20px; }
.o-pagehead .o-cta-row { margin-top: 28px; }
.o-band--brain .o-group { background: var(--o-white); }

/* ── a phone: reading size and tap size ────────────────────────────────── */
@media (max-width: 760px) {
  .o-card p, .o-note, .o-numbered p, .o-trust p, .o-plan li, .o-plan-desc, .faq-a p, .faq-a,
  .o-src p, .o-traits span, .o-layer-sub, .o-life span, .o-weights span, .o-vs-foot,
  .o-ac-foot, .o-flowline span, .o-steps3 p, .o-console-foot, .o-hero-foot .o-note { font-size: 16px; }
  .o-foot li a, .o-foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .o-foot li + li { margin-top: 0; }
  .faq-q { min-height: 56px; }
  .o-btn--sm { min-height: 44px; }
  .o-replay { min-height: 44px; padding-inline: 16px; font-size: 14px; }
  .o-cycle-btn { min-height: 44px; }
  .o-nav-toggle { width: 44px; height: 44px; }
  .o-steps3 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ── right to left ─────────────────────────────────────────────────────── */
[dir="rtl"] body, [dir="rtl"] .o-btn, [dir="rtl"] button {
  font-family: "IBM Plex Sans Arabic", Inter, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
/* Arabic letters join; tracking pulls them apart. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .o-h1, [dir="rtl"] .o-h2,
[dir="rtl"] .o-h3, [dir="rtl"] .o-eyebrow, [dir="rtl"] .o-lede, [dir="rtl"] p, [dir="rtl"] li,
[dir="rtl"] .o-btn, [dir="rtl"] .o-vs-said, [dir="rtl"] .o-answer { letter-spacing: 0; }
[dir="rtl"] .o-h1 { line-height: 1.18; }
[dir="rtl"] .o-h2 { line-height: 1.22; }
[dir="rtl"] .o-h3, [dir="rtl"] h3 { line-height: 1.35; }
[dir="rtl"] .o-eyebrow, [dir="rtl"] .o-logos-h, [dir="rtl"] .o-group-h { text-transform: none; }
[dir="rtl"] .o-flowline > em, [dir="rtl"] .o-truth-steps em { transform: scaleX(-1); }
@media (max-width: 900px) { [dir="rtl"] .o-flowline > em { transform: rotate(90deg); } }

/* Touch widths: every control a finger can reach is at least 44px. */
@media (max-width: 1024px) {
  .o-brand { min-height: 44px; }
  .o-nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .o-foot ul { gap: 0; }
  .o-foot li a, .o-foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .o-foot-bottom nav { gap: 8px 20px; }
  .o-cycle { gap: 8px; }
  .o-replay { min-height: 44px; padding-inline: 16px; }
  .o-cycle-btn { min-height: 44px; }
  .o-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .o-crumbs { align-items: center; margin-bottom: 14px; }
}
@media (max-width: 760px) {
  .o-group li, .o-prompt q, .o-crumbs { font-size: 16px; }
}

/* "Runs →" before the calculation an example question lands on, per language. */
:lang(ar) .o-prompt small::before { content: "يُشغّل ← "; }
:lang(es) .o-prompt small::before { content: "Calcula → "; }
:lang(fr) .o-prompt small::before { content: "Calcule → "; }
:lang(pt-BR) .o-prompt small::before { content: "Calcula → "; }
@media (max-width: 1024px) {
  .o-nav-toggle { width: 44px; height: 44px; }
  .o-crumbs a { min-width: 44px; }
}
@media (max-width: 760px) {
  .o-plan-cycle, .o-foot-brand, .o-foot-bottom span, .o-layer li { font-size: 16px; }
}
/* Parked off-screen on the side a page cannot scroll to: in right-to-left that
   is the right. At left:-9999px an Arabic page scrolled 9,999px sideways. */
[dir="rtl"] .o-skip { left: auto; right: -9999px; border-radius: 0 0 0 10px; }
[dir="rtl"] .o-skip:focus { right: 0; }
@media (max-width: 1024px) {
  .o-nav-links a { min-width: 44px; justify-content: center; }
}
/* Cards straight after a section's heading block need the same breathing room
   the other components get (.o-versus, .o-steps3: 46px). */
.o-head + .o-cards, .o-head + .o-anchor + .o-cards { margin-top: 44px; }
/* The ORVX-first headline is a full sentence, not a slogan: on a desktop it
   sets smaller so it reads in four or five lines beside the conversation. */
@media (min-width: 901px) {
  .o-hero .o-h1 { font-size: clamp(44px, 4.4vw, 64px); line-height: 1.0; }
  [dir="rtl"] .o-hero .o-h1 { line-height: 1.2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Calmer pages (founder, October 2026, "Part 2"): less text on screen, titles
   that never break inside a word, and nothing under the floating chat button.
   ═══════════════════════════════════════════════════════════════════════════ */

/* "Learn more": a long explainer folded under its one short visible line. */
.o-learn { margin-top: 6px; max-width: 68ch; }
.o-learn > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--o-ink-2);
}
.o-learn > summary::-webkit-details-marker { display: none; }
.o-learn > summary::after {
  content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--o-ease);
}
.o-learn[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.o-learn > p { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: var(--o-ink-3); }
@media (max-width: 760px) { .o-learn > summary, .o-learn > p { font-size: 16px; } }

/* A heading wraps between words only: never inside one, never with a hyphen.
   Body text may still break a very long token (an email, a URL) rather than
   push the page sideways. */
h1, h2, h3, h4, .o-h1, .o-h2, .o-h3 { overflow-wrap: normal; word-break: normal; hyphens: none; }
p, li, dd, td, th { overflow-wrap: break-word; hyphens: none; }

/* The floating support button sits 16px (phone) or 20px (desktop) from the
   bottom and is 52px tall. The footer's last row ends well above it, so the
   page's final links and legal line are never underneath it. The safe-area
   inset adds the iPhone home-indicator strip when the page runs edge to edge. */
.o-foot { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

/* Right to left, a line starts at the right edge, so a button parked on the
   right sits on the first words of every heading and short line. The site's
   Arabic pages park it on the left instead; the panel it opens follows it on
   a desktop (on a phone the panel is full screen). */
[dir="rtl"] .orvx-sup-btn { right: auto; left: 20px; }
@media (max-width: 640px) { [dir="rtl"] .orvx-sup-btn { left: 16px; } }
@media (min-width: 641px) { [dir="rtl"] .orvx-sup-panel { right: auto; left: 20px; } }

/* Touch screens: the header's primary button is 44px tall like every other
   target (mobile audit 2026-10-16). */
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
  .o-nav-right .o-btn { min-height: 44px; }
}