/* ============================================================================
   ORVX — Marketing landing page
   Scoped to the English landing page only. Shares the token language of the
   product UI (public/app/os.css) so site and app feel like one product.
   Does NOT touch site.css (shared with /pricing and /ar).
   ==========================================================================*/

:root {
  /* ORVX — the marketing site shares the product's palette by design, so the
     site and the app read as one thing. Token names match public/app/os.css. */
  --orvx-bg:             #F7F7F5;
  --orvx-surface:        #FFFFFF;
  --orvx-text:           #111113;
  --orvx-text-secondary: #6F7278;
  --orvx-border:         #E6E7EA;
  --orvx-dark:           #17181C;
  --orvx-lime:           #C7FF3D;
  --orvx-lime-soft:      #F0FFD0;
  --orvx-lime-hover:     #D9FF73;

  --bg:            var(--orvx-bg);
  --bg-2:          #FFFFFF;
  --surface:       var(--orvx-surface);
  --surface-2:     #F7F7F5;
  --surface-3:     #F1F1EF;

  --line:          var(--orvx-border);
  --line-2:        #D8DADF;

  --text:          var(--orvx-text);
  --text-dim:      #3F4248;
  --text-muted:    #5F6268;
  --text-faint:    #6A6D73;

  --accent:        var(--orvx-dark);
  --accent-2:      #26282E;
  --accent-soft:   var(--orvx-lime-soft);
  --accent-line:   var(--orvx-lime);
  --accent-text:   var(--orvx-text);

  --lime:          var(--orvx-lime);
  --lime-soft:     var(--orvx-lime-soft);
  --lime-line:     #B4EF22;
  --lime-ink:      #3D4A00;

  --blue:          #2563EB;
  --good:          #16A34A;
  --good-soft:     #EAF7EE;
  --good-line:     #BFE5CB;
  --good-text:     #15803D;
  --warn:          #F59E0B;
  --warn-soft:     #FEF5E7;
  --warn-text:     #B45309;
  --danger:        #DC2626;
  --danger-soft:   #FDECEC;
  --danger-line:   #F5C2C2;
  --danger-text:   #B91C1C;

  --ai:            var(--orvx-lime);
  --ai-soft:       var(--orvx-lime-soft);
  --ai-line:       var(--orvx-lime);
  --ai-text:       var(--lime-ink);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;

  --r-sm: 6px; --r: 9px; --r-md: 11px; --r-lg: 13px; --r-xl: 16px; --r-full: 999px;
  --nav-h: 62px;
  --maxw: 1200px;

  --t-fast: 130ms cubic-bezier(.4,0,.2,1);
  --t:      220ms cubic-bezier(.4,0,.2,1);
  --t-slow: 420ms cubic-bezier(.22,.9,.28,1);

  color-scheme: light;
}

/* ORVX wordmark — near-black type with the X standing on a lime tile. Lime as
   ink on white is ~1.4:1; as a ground behind near-black it is ~16:1. */
.os-wordmark { font-weight: 700; letter-spacing: .10em; color: var(--orvx-text); white-space: nowrap;
  direction: ltr; unicode-bidi: isolate; }
.os-wordmark .x {
  display: inline-block; background: var(--orvx-lime); color: var(--orvx-text);
  border-radius: 3px; padding: 0 .17em; margin-left: .07em; letter-spacing: 0;
}


/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

::selection { background: var(--accent-soft); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.num { font-variant-numeric: tabular-nums; }

/* ---- section rhythm ----------------------------------------------------- */
.section { padding: 104px 0; position: relative; }
.section.tight { padding: 76px 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-text);
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  margin-bottom: 20px;
}
.eyebrow.ai { color: var(--ai-text); background: var(--ai-soft); border-color: var(--ai-line); }

.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h1,
.sec-head h2 {
  font-size: clamp(28px, 4vw, 44px); letter-spacing: -.035em; line-height: 1.1;
}
.sec-head p {
  font-size: 17px; color: var(--text-dim); margin-top: 18px; line-height: 1.65;
}
.lead { font-size: 17px; color: var(--text-dim); line-height: 1.65; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r);
  font-size: 15px; font-weight: 560; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 0 var(--line) inset, 0 8px 24px -8px rgba(199,255,61,.55);
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(199,255,61,.65); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--line-2); }
.btn-quiet { background: transparent; color: var(--text-dim); }
.btn-quiet:hover { color: var(--text); background: var(--surface-2); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16.5px; border-radius: var(--r-md); }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.cta-note span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-muted); }
.cta-note svg { width: 15px; height: 15px; color: var(--good-text); flex-shrink: 0; }

/* ---- navbar ------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
}
.nav.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The tile is the favicon: a lime X on graphite. Beside it the wordmark stays
   plain near-black, so the page carries one brand moment and not two. */
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--orvx-dark);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: var(--orvx-lime); letter-spacing: 0;
  box-shadow: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.brand-sub { font-size: 9.5px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--text-dim); font-weight: 480;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); cursor: pointer; align-items: center; justify-content: center;
}
.nav-mobile {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px 24px;
  display: none; flex-direction: column; gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: 12px 10px; border-radius: var(--r-sm); color: var(--text-dim); font-size: 15.5px; }
.nav-mobile a:hover { background: var(--surface-2); color: var(--text); }
.nav-mobile .btn { margin-top: 10px; }

/* ---- hero --------------------------------------------------------------- */
.hero {
  position: relative; padding: calc(var(--nav-h) + 80px) 0 96px;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -20% 0 auto 0; height: 720px;
  background:
    radial-gradient(ellipse 60% 48% at 22% 0%, rgba(199,255,61,.17), transparent 62%),
    radial-gradient(ellipse 50% 42% at 82% 6%, rgba(199,255,61,.13), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr);
  gap: 60px; align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 5.1vw, 60px);
  letter-spacing: -.042em; line-height: 1.04;
}
.hero h1 .grad {
  color: var(--orvx-text);
  background-image: linear-gradient(var(--orvx-lime), var(--orvx-lime));
  background-repeat: no-repeat;
  background-size: 100% .26em;
  background-position: 0 88%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero p.lead { font-size: 18px; margin-top: 24px; max-width: 520px; }
.hero .cta-row { margin-top: 34px; }

/* ---- product mock (shared card chrome) ---------------------------------- */
.mock {
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  box-shadow: 0 24px 60px -28px rgba(17,17,19,.22);
  overflow: hidden;
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.mock-title { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.mock-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 620; letter-spacing: .07em;
  text-transform: uppercase; color: var(--good-text);
  background: var(--good-soft); border: 1px solid var(--good-line);
  padding: 3px 9px; border-radius: var(--r-full);
}
.mock-body { padding: 20px; }

.mock-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.mock-kpi {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 14px;
}
.mock-kpi .lbl { font-size: 11px; color: var(--text-muted); }
.mock-kpi .val { font-size: 21px; font-weight: 640; letter-spacing: -.03em; margin-top: 3px; }
.mock-kpi .dlt { font-size: 11.5px; font-weight: 600; margin-top: 4px; display: inline-flex; gap: 3px; }
.dlt.up { color: var(--good-text); } .dlt.down { color: var(--danger-text); }

.mock-chart { margin-top: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.mock-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mock-chart-head span { font-size: 11.5px; color: var(--text-muted); }
.mock-legend { display: flex; gap: 12px; }
.mock-legend i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; color: var(--text-muted); }
.mock-legend b { width: 8px; height: 8px; border-radius: 2px; display: block; }

.mock-ai {
  margin-top: 14px; display: flex; gap: 11px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(199,255,61,.11), rgba(199,255,61,.05));
  border: 1px solid var(--ai-line); border-radius: var(--r-md); padding: 13px 14px;
}
.mock-ai-orb {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--ai), #6d28d9);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 0 18px rgba(199,255,61,.4);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 14px rgba(199,255,61,.32); } 50% { box-shadow: 0 0 24px rgba(199,255,61,.55); } }
.mock-ai-orb svg { width: 14px; height: 14px; }
.mock-ai-t { font-size: 10px; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; color: var(--ai-text); }
.mock-ai-b { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-top: 3px; }
.mock-ai-b strong { color: var(--text); font-weight: 570; }

/* ---- profit equation (revenue trap) ------------------------------------- */
/* This was an inline grid-template-columns, which no media query can override —
   so at 320px the two columns held, squeezing the callout paragraphs to 72px
   wide and 281px tall and overlapping them with the equation's figures. */
.trap-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px; align-items: center;
}
@media (max-width: 900px) {
  .trap-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
}

.equation { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.eq-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px 18px;
}
.eq-row .op {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px; font-weight: 650;
  background: var(--surface-3); color: var(--text-muted);
}
.eq-row .lbl { flex: 1; font-size: 15px; }
.eq-row .amt { font-size: 15.5px; font-weight: 570; }
.eq-row.minus .op { background: var(--danger-soft); color: var(--danger-text); }
.eq-row.minus .amt { color: var(--danger-text); }
.eq-row.start { background: var(--surface-2); }
.eq-row.total {
  background: linear-gradient(135deg, rgba(199,255,61,.10), rgba(16,185,129,.05));
  border-color: var(--accent-line); padding: 19px 18px;
}
.eq-row.total .lbl { font-weight: 620; font-size: 16px; }
.eq-row.total .amt { font-size: 24px; font-weight: 680; letter-spacing: -.03em; color: var(--good-text); }
.eq-row.total .op { background: var(--accent-soft); color: var(--accent-text); }
.eq-caption { margin-top: 22px; font-size: 14px; color: var(--text-muted); }

/* ---- flow (scattered -> one answer) ------------------------------------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: center; }
.flow-col h4 { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.flow-list { display: flex; flex-direction: column; gap: 8px; }
.flow-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 14px; font-size: 14px; color: var(--text-dim);
}
.flow-item.scattered { border-style: dashed; color: var(--text-muted); }
.flow-item.out { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); font-weight: 540; }
.flow-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* The hub of the data-flow diagram — graphite, so the white ORVX on it is the
   highest-contrast thing in the section, which is what a hub should be. */
.flow-core {
  width: 92px; height: 92px; border-radius: var(--r-lg);
  background: var(--orvx-dark);
  display: grid; place-items: center; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: .09em;
  color: #fff; line-height: 1.25;
  box-shadow: 0 0 0 4px var(--orvx-lime-soft);
}
.flow-arrow { color: var(--text-faint); }

/* ---- steps -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; position: relative;
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.step:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-2px); }
.step-n {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-text); margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; margin-bottom: 9px; }
.step p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.step-mini {
  margin-top: 16px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px; font-size: 11.5px;
  font-family: var(--mono); color: var(--text-muted); line-height: 1.7;
}
.step-mini b { color: var(--text-dim); font-weight: 500; }
.step-mini .g { color: var(--good-text); }

/* ---- wide tables -------------------------------------------------------- */
/* The box scrolls, not the document. The plan comparison table is 371px wide
   at its minimum and pushed the whole pricing page 88px sideways at 320px. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 8px; max-width: 100%;
}
.table-scroll > table { min-width: 460px; }

/* ---- dashboard callouts ------------------------------------------------- */
.callout-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 20px;
}
.callout h4 { font-size: 14.5px; margin-bottom: 7px; }
.callout p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ---- product profitability comparison ----------------------------------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.pcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.pcard.win  { border-color: var(--good-line); }
.pcard.lose { border-color: var(--danger-line); }
.pcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.pcard-head h3 { font-size: 17px; }
.pcard-head .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.decision {
  padding: 5px 11px; border-radius: var(--r-sm); font-size: 11px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; flex-shrink: 0;
}
.decision.scale { background: var(--good-soft); color: var(--good-text); border: 1px solid var(--good-line); }
.decision.stop  { background: var(--danger-soft); color: var(--danger-text); border: 1px solid var(--danger-line); }
.decision.optimize { background: var(--warn-soft); color: var(--warn-text); border: 1px solid rgba(245,158,11,.28); }
.pcard-rows { padding: 8px 22px 20px; }
.prow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.prow:last-child { border-bottom: none; }
.prow span { color: var(--text-muted); }
.prow b { font-weight: 570; }
.prow.net { padding-top: 15px; }
.prow.net span { color: var(--text-dim); font-weight: 540; }
.prow.net b { font-size: 20px; font-weight: 680; letter-spacing: -.02em; }
.pcard-note {
  padding: 14px 22px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-muted); background: var(--surface-2);
}

/* ---- ads intelligence table --------------------------------------------- */
.ads-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
}
.ads-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.ads-table th {
  text-align: left; padding: 13px 18px; font-size: 11px; font-weight: 640;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
.ads-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; }
.ads-table tr:last-child td { border-bottom: none; }
.ads-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ads-table td strong { color: var(--text); font-weight: 570; }

/* ---- AI panel ----------------------------------------------------------- */
.ai-panel {
  background: linear-gradient(150deg, rgba(199,255,61,.09), rgba(199,255,61,.035) 55%, transparent);
  border: 1px solid var(--ai-line); border-radius: var(--r-xl); padding: 26px;
}
.ai-rec {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 11px;
  position: relative; overflow: hidden;
}
.ai-rec:last-child { margin-bottom: 0; }
.ai-rec::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.ai-rec.warn::before   { background: var(--warn); }
.ai-rec.danger::before { background: var(--danger); }
.ai-rec.good::before   { background: var(--good); }
.ai-rec-ico { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; }
.ai-rec h4 { font-size: 14.5px; margin-bottom: 5px; }
.ai-rec p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.ai-rec .act { display: block; margin-top: 7px; font-size: 13px; color: var(--ai-text); }

/* ---- health score ------------------------------------------------------- */
.health { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 44px; align-items: center; }
.health-dial { text-align: center; }
.health-ring { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.health-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.health-ring .track { fill: none; stroke: var(--surface-3); stroke-width: 12; }
.health-ring .prog  { fill: none; stroke: var(--good); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.22,.9,.28,1); }
.health-val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.health-val .n { font-size: 52px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.health-val .d { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.health-factors { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.hfact {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 15px; font-size: 13.5px;
  display: flex; align-items: center; gap: 10px;
}
.hfact i { font-style: normal; color: var(--accent-text); font-weight: 650; font-size: 12px; }

/* ---- who it's for ------------------------------------------------------- */
.who { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.who-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  transition: border-color var(--t), background var(--t);
}
.who-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.who-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.who-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ---- before / after ----------------------------------------------------- */
.ba { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.ba-col { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; }
.ba-col.before { background: var(--surface); }
.ba-col.after  { background: linear-gradient(160deg, rgba(199,255,61,.07), transparent 60%); border-color: var(--accent-line); }
.ba-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.ba-head h3 { font-size: 15.5px; }
.ba-head .tag { font-size: 10.5px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-full); }
.ba-col.before .tag { background: var(--surface-3); color: var(--text-muted); }
.ba-col.after  .tag { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); }
.ba-list { padding: 8px 22px 20px; }
.ba-list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--text-dim);
}
.ba-list li:last-child { border-bottom: none; }
.ba-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.ba-col.before svg { color: var(--text-faint); }
.ba-col.after  svg { color: var(--good-text); }

/* ---- pricing ------------------------------------------------------------ */
.bill-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
}
.bill-toggle button {
  padding: 8px 20px; border-radius: var(--r-full); border: none;
  background: transparent; color: var(--text-muted);
  font-size: 14px; font-weight: 540; cursor: pointer; transition: all var(--t-fast);
}
.bill-toggle button.active { background: var(--accent); color: #fff; }
.bill-toggle .save { font-size: 11px; color: var(--good-text); margin-left: 6px; }
.bill-toggle button.active .save { color: rgba(17,17,19,.72); }

/* Three plans, three columns.

   This grid was written for TWO — the comment it replaces explained why two
   fixed 371px columns were centred as a group rather than left in a
   three-column grid with an empty third. The pricing migration then added
   Enterprise and nobody changed the grid, so Core and Intelligence sat on one
   row and Enterprise wrapped underneath on its own, which is what the owner
   reported.

   Fractional rather than fixed now: at the 1152px content width each column is
   (1152 − 40) ÷ 3 ≈ 371px, exactly the width the old comment computed, and
   narrower viewports shrink the cards instead of dropping one to a second row. */
.plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center; gap: 20px; align-items: start;
}
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 28px; position: relative;
  transition: border-color var(--t), transform var(--t);
}
.plan:hover { border-color: var(--line-2); }
.plan.featured {
  border-color: var(--accent-line);
  background: linear-gradient(170deg, rgba(199,255,61,.09), var(--surface) 55%);
  box-shadow: 0 20px 60px -24px rgba(199,255,61,.5);
}
.plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 13px; border-radius: var(--r-full); white-space: nowrap;
}
.plan h3 { font-size: 17px; margin-bottom: 5px; }
.plan .plan-desc { font-size: 13.5px; color: var(--text-muted); min-height: 40px; }
.plan-price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 7px; }
.plan-price .cur { font-size: 16px; color: var(--text-dim); font-weight: 500; }
.plan-price .amt { font-size: 40px; font-weight: 680; letter-spacing: -.04em; line-height: 1; }
.plan-price .per { font-size: 14px; color: var(--text-muted); }
.plan-sub { font-size: 12.5px; color: var(--text-faint); min-height: 18px; }
.plan .btn { margin: 22px 0 20px; }
.plan-feats li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 14px; color: var(--text-dim);
}
.plan-feats svg { width: 16px; height: 16px; color: var(--good-text); flex-shrink: 0; margin-top: 2px; }
.plan-feats li.off { color: var(--text-faint); }
.plan-feats li.off svg { color: var(--text-faint); }
.price-note {
  margin-top: 30px; text-align: center; font-size: 13.5px; color: var(--text-muted);
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 22px 0; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 16.5px; font-weight: 550; text-align: left;
  transition: color var(--t-fast);
}
.faq-q:hover { color: var(--accent-text); }
.faq-ico {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  transition: transform var(--t), background var(--t), border-color var(--t);
  color: var(--text-muted);
}
.faq-item.open .faq-ico { transform: rotate(45deg); background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow); }
.faq-a p { padding: 0 0 22px; font-size: 15px; color: var(--text-muted); line-height: 1.7; max-width: 660px; }

/* ---- proof placeholder -------------------------------------------------- */
/* ---- final CTA ---------------------------------------------------------- */
.final {
  position: relative; text-align: center; padding: 110px 0; overflow: hidden;
  border-top: 1px solid var(--line);
}
.final::before {
  content: ""; position: absolute; inset: auto 0 -55% 0; height: 620px;
  background: radial-gradient(ellipse 52% 62% at 50% 100%, rgba(199,255,61,.24), transparent 68%);
  pointer-events: none;
}
.final-inner { position: relative; }
.final h2 { font-size: clamp(30px, 4.6vw, 50px); letter-spacing: -.038em; line-height: 1.08; }
.final p { font-size: 18px; color: var(--text-dim); margin: 22px auto 0; max-width: 560px; line-height: 1.6; }
.final .cta-row { justify-content: center; margin-top: 34px; }

/* ---- footer ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 36px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { font-size: 14px; color: var(--text-muted); margin-top: 14px; max-width: 280px; line-height: 1.65; }
.footer h4 { font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 14px; color: var(--text-muted); transition: color var(--t-fast); }
.footer li a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint);
}

/* ---- scroll reveal ------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.28,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .hero p.lead { max-width: none; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .who { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Still three across here: a plan card reads perfectly well at ~307px, and
     stacking three of them at 1040px is a page nobody scrolls to the end of.
     The single column starts at 860, where the cards would genuinely be too
     narrow to compare. */
  .plans { gap: 14px; }
  .health { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .health-ring { width: 190px; height: 190px; }
  .flow { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .flow-mid { flex-direction: row; }
  .flow-arrow { transform: rotate(90deg); }
  .callout-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0,1fr); max-width: 460px; margin: 0 auto; justify-content: stretch; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-right .btn-quiet { display: none; }
  .section { padding: 76px 0; }
  .compare, .ba { grid-template-columns: minmax(0,1fr); }
  .mock-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .trap-grid { gap: 30px; }
  .hero { padding: calc(var(--nav-h) + 48px) 0 64px; }
  .section { padding: 64px 0; }
  .sec-head { margin-bottom: 36px; }
  .steps, .who, .callout-grid, .health-factors { grid-template-columns: minmax(0,1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .cta-row .btn { width: 100%; }
  .mock-kpis { grid-template-columns: minmax(0,1fr); }
  .mock-body { padding: 14px; }
  .eq-row { padding: 13px 15px; }
  .eq-row .lbl { font-size: 14px; }
  .plan { padding: 24px; }
  .final { padding: 76px 0; }
}

/* Below ~400px the brand, the CTA and the menu button no longer fit on one
   row: .nav-right ran to 376px inside a 320px viewport. The descriptor under
   the wordmark is the least load-bearing part, so it goes first — the logo,
   the primary CTA and the menu all stay reachable. */
@media (max-width: 400px) {
  .brand-sub { display: none; }
  .nav-inner { gap: 8px; }
  .nav-right { gap: 6px; }
  .nav-right .btn-sm { padding: 0 11px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- plan comparison ----------------------------------------------------
   The previous markup closed its <section> before the .wrap that contained
   it, so the parser closed .wrap early and the table escaped the site's
   max-width container — a bare browser table adrift in the section. The
   markup is balanced now and the table is a real component.

   Two presentations of one table: a grid on desktop, and stacked cards on
   phones, where a four-column table is unreadable no matter how it scrolls. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cmp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
}
.cmp-table { width: 100%; border-collapse: collapse; }

.cmp-table thead th {
  font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); text-align: center;
  padding: 16px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.cmp-table thead th:first-child { text-align: left; padding-left: 22px; }
.cmp-table thead th.cmp-ai { color: var(--text); background: var(--orvx-lime-soft); }

.cmp-table tbody th {
  text-align: left; font-size: 14.5px; font-weight: 500; color: var(--text);
  padding: 15px 12px 15px 22px;
}
.cmp-table tbody td {
  text-align: center; padding: 15px 12px; vertical-align: middle;
}
.cmp-table tbody tr + tr th,
.cmp-table tbody tr + tr td { border-top: 1px solid var(--line); }
.cmp-table tbody td.cmp-ai { background: color-mix(in srgb, var(--orvx-lime-soft) 45%, transparent); }

.cmp-yes {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--orvx-dark); color: var(--orvx-lime);
}
.cmp-yes svg { width: 13px; height: 13px; }
.cmp-no { color: var(--text-faint); font-size: 16px; }
.cmp-txt { font-size: 13.5px; font-weight: 550; color: var(--text-dim); }

.cmp-foot {
  text-align: center; margin-top: 20px;
  font-size: 13.5px; color: var(--text-muted);
}

/* Phones: one card per capability. A 4-column table at 360px either clips or
   needs a scroller the reader has to discover; these rows are short enough
   that stacking is simply better. */
@media (max-width: 640px) {
  .cmp { border: 0; background: none; border-radius: 0; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; }
  .cmp-table thead { display: none; }

  .cmp-table tbody tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg, 14px); padding: 14px 16px; margin-bottom: 12px;
  }
  .cmp-table tbody tr + tr th,
  .cmp-table tbody tr + tr td { border-top: 0; }

  .cmp-table tbody th {
    padding: 0 0 12px; font-size: 14.5px; font-weight: 600;
    border-bottom: 1px solid var(--line); margin-bottom: 10px;
  }
  .cmp-table tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 7px 0; text-align: right; background: none;
  }
  /* The column header travels with the cell, so a value is never orphaned. */
  .cmp-table tbody td::before {
    content: attr(data-col);
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    letter-spacing: .04em; text-align: left;
  }
  .cmp-table tbody td.cmp-ai::before { color: var(--text); }

  /* The AI emphasis is a chip inside the card, not a band running to its
     edges — inset and rounded so it reads as one row, not a bleed. */
  .cmp-table tbody td.cmp-ai {
    background: var(--orvx-lime-soft);
    padding: 7px 10px; border-radius: 8px; margin-top: 2px;
  }
}

/* ---- five-metric dashboard mockup ---------------------------------------
   This one carried style="grid-template-columns:repeat(5,minmax(0,1fr))"
   inline. An inline declaration outranks every rule in this file, media
   queries included, so the generic .mock-kpis breakpoints below never
   applied and five cards stayed side by side down to 320px — about 55px of
   usable width each, which is where "$105,610" became "$105,...".

   It is a class now, with its own ladder. Two columns on phones rather than
   one: these values are short enough to pair, and a single column would turn
   one dashboard into five screens of scrolling. */
.mock-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mock-kpis-5 > * { min-width: 0; }

@media (max-width: 899px) {
  .mock-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* Wins over the generic .mock-kpis single-column rule by source order. */
  .mock-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Five cards over two columns leaves one alone on the last row; let it have
     the width rather than sit half-empty beside nothing. */
  .mock-kpis-5 > :last-child { grid-column: 1 / -1; }
  .mock-kpis-5 .val { font-size: clamp(16px, 4.6vw, 21px); }
  .mock-kpis-5 .mock-kpi { padding: 11px 12px; }
}