/* =============================================================
   ORI SYSTEMS — Design System
   The operating system for local businesses.
   Aesthetic: instrumentation panel, not neon signage — warm graphite
   and copper, with signal green reserved for active states and CTAs.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* surfaces — warm graphite, not green-black */
  --bg:          #0a0908;
  --bg-2:        #0e0c0a;
  --surface:     #15120f;
  --surface-2:   #1b1714;
  --surface-3:   #221d19;

  /* lines (instrument hairlines — warm, not tinted green) */
  --line:        rgba(233, 222, 206, 0.08);
  --line-2:      rgba(233, 222, 206, 0.15);
  --line-soft:   rgba(233, 222, 206, 0.05);

  /* text — warm ivory, not mint-white */
  --text:        #f2ebe0;
  --text-dim:    #a89a89;
  --text-faint:  #948877; /* brightened from #6f6355 — the old value measured ~2.9–3.4:1, below WCAG AA for normal text; this holds ~4.8–5.7:1 against every surface token while staying the dimmest tier */

  /* signal — scarce: active states, CTAs, pulses, key numbers only */
  --emerald:     #16c98d;
  --jade:        #57e0ac;
  --emerald-dp:  #0e9d6d;
  --emerald-glow: rgba(22, 201, 141, 0.14);

  /* copper — secondary accent: atmosphere, warmth, "building" state */
  --copper:      #d98a4f;
  --copper-dp:   #b06d3a;
  --copper-glow: rgba(217, 138, 79, 0.14);

  /* status */
  --st-active:   #57e0ac;
  --st-build:    #d98a4f;
  --st-plan:     #756a5c;

  --grad: linear-gradient(135deg, #57e0ac 0%, #16c98d 55%, #0e9d6d 100%);
  --grad-text: linear-gradient(115deg, #f2ebe0 0%, #bfe9d3 60%, #57e0ac 100%);
  --grad-warm: linear-gradient(135deg, #d98a4f 0%, #b06d3a 100%);

  /* type */
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* scale */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 9px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ambient page background: faint grid + emerald aurora */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1000px 560px at 78% -8%, var(--emerald-glow), transparent 60%),
    radial-gradient(760px 620px at 6% 104%, var(--copper-glow), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  pointer-events: none; z-index: 0; opacity: 0.4;
}
main, nav, footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(22,201,141,0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(72px, 11vw, 140px); }
.section--tight { padding-block: clamp(56px, 8vw, 96px); }
.section + .section { border-top: 1px solid var(--line); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; color: var(--text); }
.h-display { font-size: clamp(3.4rem, 9vw, 6.8rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; }
.h-display--sm { font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 0.98; }
.h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
.h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.01em; }
.lede { font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--text-dim); max-width: 60ch; line-height: 1.6; }
p { color: var(--text-dim); }
.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* eyebrow — schematic label */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--jade);
  display: inline-flex; align-items: center; gap: 0.7em;
  margin-bottom: 1.6rem;
  font-weight: 600;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px;
  background: var(--jade); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(22,201,141,0.16);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.92em 1.9em;
  font-size: 0.95rem; font-weight: 700;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn--sm { padding: 0.7em 1.4em; font-size: 0.9rem; font-weight: 600; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--grad); color: #04130d; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 12px 40px -8px rgba(22,201,141,0.45);
  letter-spacing: -0.01em;
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 20px 50px -10px rgba(22,201,141,0.55); }
.btn--primary:active { transform: translateY(-1px); }
/* Ghost stays neutral on purpose — green is reserved for the one primary action */
.btn--ghost { background: rgba(255,255,255,0.03); color: var(--text-dim); border-color: var(--line-2); }
.btn--ghost:hover { border-color: rgba(233,222,206,0.35); background: rgba(255,255,255,0.05); transform: translateY(-2px); color: var(--text); }
.btn--block { width: 100%; justify-content: center; }
/* Long CTA labels ("See the front-desk workflow") plus the nowrap above
   forced the button — and the page — wider than a 320px viewport. Below
   this width, let buttons wrap onto a second line instead of overflowing. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(10,9,8,0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.brand__mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--grad);
  display: grid; place-items: center;
  color: #04130d; font-family: var(--mono); font-weight: 800; font-size: 0.9rem;
  box-shadow: 0 6px 20px -4px rgba(22,201,141,0.5);
}
.brand small { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.25em; color: var(--text-faint); font-weight: 500; text-transform: uppercase; align-self: flex-end; padding-bottom: 2px; }

.nav__links { display: flex; align-items: center; gap: 0.2rem; list-style: none; }
.nav__links a {
  font-size: 0.9rem; color: var(--text-dim);
  padding: 0.6em 0.95em; border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: rgba(22,201,141,0.06); }
.nav__links a.active { color: var(--jade); font-weight: 600; }
.nav__right { display: flex; align-items: center; gap: 0.75rem; }

.nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__toggle span { width: 18px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: fixed; inset: 68px 0 auto 0;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(14,12,10,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: var(--gutter);
    gap: 0.3rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .25s;
  }
  .nav.open .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__menu { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0.2rem; width: 100%; }
  .nav__links a { padding: 0.9em 0.6em; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav__menu .btn { margin-top: 0.8rem; }
}
.nav__menu { display: flex; align-items: center; gap: 1.5rem; }

/* ---------- Hero ---------- */
/* Top padding capped at 130px (was 200px) — at common 1200-1440px-wide,
   900px-tall desktop viewports the old max pushed the primary CTA to
   y≈883-886px, below the first screen. Measured in real Chromium. */
.hero { position: relative; padding-block: clamp(100px, 13vw, 130px) clamp(84px, 15vw, 160px); overflow: hidden; }
.hero__media {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(22,201,141,0.10), transparent 58%),
    radial-gradient(900px 700px at -6% 92%, rgba(217,138,79,0.09), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 70%);
  /* real photography/video can replace or layer under this via background-image / a <video> — see comment above */
}
.hero__signal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.9; }
.signal__pulse { filter: drop-shadow(0 0 6px rgba(87,224,172,0.9)); }
.hero__inner { position: relative; z-index: 2; max-width: 680px; }
@media (max-width: 900px) { .hero__inner { max-width: none; } }
.hero h1 { margin: 0.7rem 0 2rem; }
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.45rem); max-width: 62ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; }

/* In-page navigator (product.html only) — a scan point for a long page,
   deliberately not sticky/fixed to avoid any new overlap-with-content class
   of bug on a page that's already had one sticky-positioning correction. */
.page-nav { border-block: 1px solid var(--line); background: var(--surface); }
.page-nav__inner { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; padding-block: 0.9rem; }
.page-nav__inner a { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--text-dim); }
.page-nav__inner a:hover { color: var(--jade); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.hero__meta .m { font-family: var(--mono); }
.hero__meta .m b { display: block; font-size: 1.5rem; color: var(--text); font-weight: 700; margin-bottom: 0.2rem; }
.hero__meta .m span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }

/* word reveal — clip wipe, not a plain fade. Visible by default so the
   headline reads with no JS / while JS is still loading; only hidden once
   html.js confirms the animation script is actually running. */
.reveal-word { display: inline-block; }
html.js .reveal-word { opacity: 0; transform: translateY(0.4em); clip-path: inset(0 0 100% 0); }

/* ---------- Section header ---------- */
.shead { max-width: 70ch; margin-bottom: clamp(2.8rem, 6vw, 4.2rem); }
.shead .h2 { margin-bottom: 1.2rem; }
.shead.center { margin-inline: auto; text-align: center; }
.shead.center .lede { margin-inline: auto; }


/* ---------- Thesis / manifesto ---------- */
.thesis { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(3, 1fr); }
.thesis__cell { background: var(--surface); padding: clamp(1.6rem, 3vw, 2.4rem); }
.thesis__cell .n { font-family: var(--mono); font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.2em; }
.thesis__cell .pref { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; margin: 0.7rem 0 0.4rem; }
.thesis__cell .pref em { font-style: normal; color: var(--jade); }
.thesis__cell p { font-size: 0.92rem; }
@media (max-width: 760px) { .thesis { grid-template-columns: 1fr; } }

/* ---------- Bento / divisions ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
  overflow: hidden;
}
.card::after { content:""; position:absolute; inset:0; background: radial-gradient(360px 180px at var(--mx,80%) -20%, rgba(22,201,141,0.07), transparent 72%); opacity:0; transition: opacity .4s; pointer-events:none; }
.card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6); }
.card:hover::after { opacity: 1; }
.card .kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.card .h3 { margin: 0.6rem 0 0.7rem; }
.card p { font-size: 0.92rem; }
.card__link { font-family: var(--mono); font-size: 0.78rem; color: var(--jade); margin-top: 1.2rem; display: inline-flex; gap: 0.4em; transition: transform .25s var(--ease); }
.card:hover .card__link { transform: translateX(3px); }
.card--wide { grid-column: span 3; }
.card--third { grid-column: span 2; }
.card--half { grid-column: span 3; }
@media (max-width: 900px) { .card--wide, .card--third, .card--half { grid-column: span 3; } .bento { grid-template-columns: repeat(6,1fr);} }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .card--wide, .card--third, .card--half { grid-column: span 1; } }

/* status pill */
.status { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4em 0.85em; border-radius: 100px; border: 1px solid var(--line-2); font-weight: 600; }
.status::before { content:""; width: 7px; height: 7px; border-radius: 50%; }
.status--active { color: var(--st-active); border-color: rgba(22,201,141,0.3); background: rgba(22,201,141,0.08); } .status--active::before { background: var(--st-active); box-shadow: 0 0 10px var(--st-active); }
.status--build { color: var(--st-build); border-color: rgba(217,138,79,0.32); background: rgba(217,138,79,0.09); } .status--build::before { background: var(--st-build); box-shadow: 0 0 10px var(--st-build); }
.status--plan { color: var(--st-plan); border-color: rgba(117,106,92,0.35); background: rgba(117,106,92,0.08); } .status--plan::before { background: var(--st-plan); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

/* ---------- Ecosystem flow (signature) ---------- */
.flow { border: 1px solid var(--line); border-radius: var(--radius); background:
  linear-gradient(180deg, var(--surface), var(--bg-2));
  padding: clamp(1.8rem, 4vw, 3rem); }
.flow__chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.flow__node {
  flex: 1 1 130px; min-width: 130px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 1rem 1rem 1.1rem;
  position: relative;
}
.flow__node .i { font-family: var(--mono); font-size: 0.65rem; color: var(--jade); letter-spacing: 0.15em; }
.flow__node .t { font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin-top: 0.4rem; }
.flow__node .d { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.25rem; }
.flow__node::after {
  content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: var(--jade); font-size: 1rem; z-index: 2;
}
.flow__node:last-child::after { content: none; }
.flow__loop { margin-top: 1.6rem; display: flex; align-items: center; gap: 0.8em; font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); padding-top: 1.4rem; border-top: 1px dashed var(--line-2); }
.flow__loop b { color: var(--jade); font-weight: 500; }
@media (max-width: 720px) {
  .flow__chain { flex-direction: column; }
  .flow__node { min-width: 0; }
  .flow__node::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%); }
}

/* ---------- Roadmap ---------- */
.road { display: grid; gap: 0; }
.phase { display: grid; grid-template-columns: 180px 1fr; gap: clamp(1rem,3vw,3rem); padding-block: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line); }
.phase:first-child { border-top: none; }
.phase__when { font-family: var(--mono); }
.phase__when .ph { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text-faint); text-transform: uppercase; }
.phase__when .yr { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--text); margin-top: 0.3rem; }
.phase__body h3 { margin-bottom: 0.6rem; }
.phase__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); border: 1px solid var(--line-2); border-radius: 100px; padding: 0.3em 0.8em; }
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; gap: 0.8rem; } }

/* ---------- Feature rows ---------- */
.frow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.frow--2 { grid-template-columns: repeat(2, 1fr); }
.feat { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.2rem); background: linear-gradient(180deg, var(--surface-2), var(--surface)); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.feat:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: 0 20px 60px -28px rgba(0,0,0,0.55); }
.feat .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(22,201,141,0.1); border: 1px solid var(--line-2); color: var(--jade); font-family: var(--display); font-weight: 800; font-size: 0.9rem; margin-bottom: 1.3rem; }
.feat h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.feat p { font-size: 0.9rem; line-height: 1.65; }
@media (max-width: 820px){ .frow, .frow--2 { grid-template-columns: 1fr; } }

/* ---------- Pricing / service tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; }
.tier { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(1.6rem,2.6vw,2.1rem); display: flex; flex-direction: column; height: 100%; }
.tier--feature { border-color: var(--line-2); background: linear-gradient(180deg, rgba(22,201,141,0.07), var(--surface)); box-shadow: 0 30px 80px -40px rgba(22,201,141,0.4); }
.tier__badge { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jade); margin-bottom: 0.9rem; }
.tier h3 { font-size: 1.3rem; }
.tier__price { font-family: var(--display); font-size: 2rem; font-weight: 700; margin: 0.6rem 0 0.2rem; }
.tier__price small { font-family: var(--mono); font-size: 0.8rem; color: var(--text-faint); font-weight: 400; }
.tier__desc { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 1.3rem; }
.tier ul { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 1.6rem; }
.tier li { font-size: 0.88rem; color: var(--text-dim); display: flex; gap: 0.6em; }
.tier li::before { content: "✓"; color: var(--jade); font-weight: 700; }
.tier .btn { margin-top: auto; }
@media (max-width: 860px){ .tiers { grid-template-columns: 1fr; } }

/* ---------- Stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: clamp(1.4rem,2.6vw,2rem); }
.stat b { font-family: var(--display); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 700; display: block; }
.stat span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 700px){ .stats { grid-template-columns: repeat(2,1fr);} }

/* ---------- Split / value ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split--rev { direction: rtl; } .split--rev > * { direction: ltr; }
.checklist { list-style: none; display: grid; gap: 1.1rem; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 0.9rem; }
.checklist .ck { width: 26px; height: 26px; border-radius: 8px; background: rgba(22,201,141,0.1); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--jade); font-size: 0.85rem; }
.checklist h3 { font-family: var(--display); font-size: 1.02rem; margin-bottom: 0.2rem; }
.checklist p { font-size: 0.88rem; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg,var(--surface-2),var(--bg-2)); padding: clamp(1.6rem,3vw,2.4rem); }
.panel--code { font-family: var(--mono); font-size: 0.82rem; color: var(--text-dim); line-height: 1.9; }
.panel--code .cl { color: var(--jade); } .panel--code .cc { color: var(--text-faint); }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: clamp(16px, 3vw, 24px);
  background: linear-gradient(135deg, var(--surface-2), var(--bg-2) 60%);
  padding: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.cta::before { content:""; position:absolute; inset:0; background:
  radial-gradient(560px 260px at 15% 0%, var(--copper-glow), transparent 68%),
  radial-gradient(560px 260px at 85% 100%, var(--emerald-glow), transparent 68%);
  pointer-events:none; }
.cta > * { position: relative; }
.cta .h2 { margin-bottom: 1.2rem; }
.cta .lede { margin: 0 auto 2.4rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Page hero (interior) ---------- */
.phero { padding-block: clamp(64px, 10vw, 120px); border-bottom: 1px solid var(--line); }
.phero h1 { margin: 0.6rem 0 1.4rem; max-width: 20ch; }
.phero .lede { max-width: 62ch; }

/* ---------- Contact form ---------- */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,4rem); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5rem; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 0.85em 1em; font-family: var(--body); font-size: 0.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(22,201,141,0.14); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.contact__aside .ci { display: flex; gap: 0.9rem; align-items: flex-start; padding-block: 1.2rem; border-bottom: 1px solid var(--line); }
.contact__aside .ci:first-of-type { border-top: 1px solid var(--line); }
.contact__aside .ci .ic { color: var(--jade); font-family: var(--mono); }
.contact__aside .ci b { display: block; font-family: var(--display); }
.contact__aside .ci span { font-size: 0.88rem; color: var(--text-dim); }
.form-note { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.8rem; }
.form-msg { font-family: var(--mono); font-size: 0.85rem; color: var(--jade); margin-top: 1rem; display: none; }
.form-msg.show { display: block; }
.form-msg.error { color: #f87171; }
@media (max-width: 820px){ .contact { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(4rem,8vw,5.5rem) 2.5rem; margin-top: clamp(4rem,8vw,6rem); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(2.4rem,5vw,3.6rem); }
.footer__brand .brand { margin-bottom: 1.4rem; }
.footer__brand p { font-size: 0.9rem; max-width: 36ch; line-height: 1.65; }
.footer__brand .mono-line { font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); margin-top: 1.6rem; letter-spacing: 0.08em; }
.fcol h2 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.4rem; font-weight: 600; }
.fcol a { display: block; font-size: 0.9rem; color: var(--text-dim); padding: 0.4em 0; transition: color .2s, transform .2s var(--ease); }
.fcol a:hover { color: var(--jade); transform: translateX(2px); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-top: clamp(2.8rem,5vw,4rem); padding-top: 2rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.74rem; color: var(--text-faint); }
@media (max-width: 760px){ .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- Reveal animation ----------
   Visible by default: with no JS, or if the script fails/hasn't run yet,
   .reveal content reads normally. app.js adds .js to <html> as its first
   action; only then does content go to a pre-animation hidden state, which
   the IntersectionObserver in app.js clears via .in as each section scrolls
   into view. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-word { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .card:hover, .feat:hover, .btn:hover, .tier:hover { transform: none !important; }
  .signal__pulse { display: none; }
}

/* utility */
.center { text-align: center; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3rem; }
.muted { color: var(--text-faint); }
.wrap-narrow { max-width: 760px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- ICP / "who this is for" strip ---------- */
.icp-strip { padding-block: 1.4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.icp-strip .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
.icp-strip .icp-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); flex-shrink: 0; }
.icp-strip .icp-line { font-size: 0.92rem; color: var(--text-dim); }
.icp-strip .icp-line b { color: var(--text); font-weight: 600; }

/* ---------- Before / After (problem framing) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare__col { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.compare__col--before { background: var(--surface); }
.compare__col--after { background: linear-gradient(180deg, rgba(22,201,141,0.06), var(--surface)); border-color: var(--line-2); }
.compare__head { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.2rem; display: block; }
.compare__col--before .compare__head { color: var(--st-build); }
.compare__col--after .compare__head { color: var(--jade); }
.compare__col ul { list-style: none; display: grid; gap: 0.85rem; }
.compare__col li { font-size: 0.92rem; color: var(--text-dim); display: flex; gap: 0.65em; line-height: 1.55; }
.compare__col--before li::before { content: "\2715"; color: var(--st-build); font-weight: 700; flex-shrink: 0; }
.compare__col--after li::before { content: "\2713"; color: var(--jade); font-weight: 700; flex-shrink: 0; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 0; max-width: 78ch; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.3rem 0.2rem; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--jade); font-family: var(--mono); font-size: 0.9rem; transition: transform .25s var(--ease), background .25s; }
.faq-item[open] summary .faq-ic { transform: rotate(45deg); background: rgba(22,201,141,0.1); }
.faq-item summary:hover { color: var(--jade); }
.faq-item .faq-a { padding: 0 0.2rem 1.4rem; font-size: 0.92rem; color: var(--text-dim); line-height: 1.7; max-width: 66ch; }

/* ---------- Inline mini-form (single-field capture) ---------- */
.form-inline { display: flex; gap: 0.6rem; max-width: 420px; }
.form-inline input { flex: 1; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 0.8em 1em; font-family: var(--body); font-size: 0.92rem; transition: border-color .2s, box-shadow .2s; }
.form-inline input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(22,201,141,0.14); }
.form-inline input::placeholder { color: var(--text-faint); }
.form-inline .btn { flex-shrink: 0; padding-inline: 1.4em; }
@media (max-width: 480px) { .form-inline { flex-direction: column; max-width: none; } }
.form-inline-msg { font-family: var(--mono); font-size: 0.8rem; color: var(--jade); margin-top: 0.7rem; display: none; }
.form-inline-msg.show { display: block; }
.form-inline-msg.error { color: #f87171; }

/* ---------- Sticky CTA Bar ---------- */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(10,9,8,0.95);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--line);
  padding: 0.9rem var(--gutter);
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sticky-cta__text { display: flex; align-items: center; gap: 0.8rem; }
.sticky-cta__text .label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.sticky-cta__text .msg { font-size: 0.95rem; font-weight: 600; color: var(--text); display: none; }
.sticky-cta__text .msg.show { display: block; }
@media (max-width: 680px) {
  .sticky-cta { display: none; }
}

/* =============================================================
   HOMEPAGE ART DIRECTION — editorial redesign
   ============================================================= */

/* ---------- Nav: transparent-over-hero (homepage only) ---------- */
.nav--overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav--overlay.scrolled {
  background: rgba(10,9,8,0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}

/* ---------- Hero: atmospheric plate + edge labels (product.html's
   secondary-page hero — the homepage now uses the Revenue Core below;
   this stays for product.html, which keeps the simpler treatment) ---------- */
.hero__plate {
  position: absolute; z-index: 1; overflow: hidden;
  top: 9%; right: -3%; width: min(48vw, 660px); height: 80%;
  transition: transform .2s ease-out;
}
.plate__field {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(87,224,172,0.32), transparent 55%),
    radial-gradient(90% 75% at 88% 92%, rgba(217,138,79,0.26), transparent 60%),
    linear-gradient(155deg, #1b1714 0%, #0a0908 68%);
}
.plate__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(233,222,206,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(233,222,206,0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: overlay; opacity: 0.55;
}
.plate__orb {
  position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%;
  left: 10%; bottom: -14%;
  background: radial-gradient(circle at 35% 30%, rgba(242,235,224,0.92), rgba(242,235,224,0.06) 45%, transparent 72%);
  box-shadow: 0 0 140px 44px rgba(87,224,172,0.16);
}
.plate__tag {
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  color: rgba(242,235,224,0.6); text-transform: uppercase;
}
@media (max-width: 900px) { .hero__plate { display: none; } }

/* ---------- ORIO Revenue Core — signature hero object (v3) ----------
   A four-station signal pipeline (Lead → Qualify → Route → Booked) housed
   in a bounded panel that is a normal item in .hero__grid, beside the hero
   copy — never absolutely positioned over it, so it cannot geometrically
   intersect the headline/lede at any width (see .hero__grid below). CSS +
   SVG + SMIL only, no Canvas/WebGL. The pointer-tilt handler in app.js
   still rotates .core-v3__stage a few degrees on desktop; the traveling
   signal and station flashes are native SMIL, so nothing here drives a
   per-frame JS loop. */
.hero__grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(2.2rem, 6vw, 4rem); }
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
}

.core-v3 { position: relative; z-index: 2; }
.core-v3__panel {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-2), var(--bg-2));
  overflow: hidden;
}
.core-v3__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233,222,206,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,222,206,0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.core-v3__stage {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  perspective: 1000px;
}
.core-v3__svg { width: 100%; height: auto; display: block; }
.core-v3__caption {
  display: none; margin-top: 0.9rem; text-align: center;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-dim);
}
.core-v3__tag {
  display: block; margin-top: 0.7rem; text-align: right;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em;
  color: rgba(242,235,224,0.5); text-transform: uppercase;
}

/* RAIL — one straight, fixed track. The signal's own motion along it is
   the point of interest, not ambient spin — there is nothing here to
   rotate. */
.cv3__rail { fill: none; stroke: var(--line-2); stroke-width: 2; }

/* STATIONS — plain rounded cells, not circles/orbs. Each station's
   unanimated fill/stroke already reads as a left-to-right gradient from
   "unprocessed" (dim, neutral) to "accountable" (solid jade), so the
   static picture alone tells the story with zero motion. */
.cv3__cell { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.6; }
.cv3__icon { stroke: var(--text-faint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cv3__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-faint); text-anchor: middle; }

.cv3__station--2 .cv3__cell { stroke: rgba(87,224,172,0.35); }
.cv3__station--2 .cv3__icon { stroke: var(--jade); opacity: 0.75; }
.cv3__station--2 .cv3__label { fill: var(--text-dim); }

.cv3__station--3 .cv3__cell { stroke: rgba(87,224,172,0.5); }
.cv3__station--3 .cv3__icon { stroke: var(--jade); opacity: 0.9; }
.cv3__station--3 .cv3__label { fill: var(--text-dim); }

.cv3__cell--out { fill: rgba(22,201,141,0.14); stroke: var(--jade); }
.cv3__icon--out { stroke: var(--jade); }
.cv3__flag { fill: var(--jade); stroke: none; }
.cv3__station--4 .cv3__label { fill: var(--jade); }

.cv3__booked-glow {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: cv3-glow 4s ease-in-out infinite;
}
@keyframes cv3-glow { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.25); } }

.cv3__pulse { fill: #8ff0c9; filter: drop-shadow(0 0 5px rgba(143,240,201,0.75)); }
.cv3__flash { filter: drop-shadow(0 0 8px rgba(87,224,172,0.5)); }

@media (prefers-reduced-motion: reduce) {
  .cv3__booked-glow { animation: none !important; }
  .core-v3__stage { transition: none !important; }
}

/* The IntersectionObserver in app.js adds this class once the hero scrolls
   out of view. It already calls svg.pauseAnimations() for the SMIL
   traveling signal and station flashes; this covers the one continuous CSS
   keyframe animation that pauseAnimations() doesn't reach — the booked-
   station ambient glow. animation-play-state preserves the current frame
   exactly, so resuming doesn't reset or jump. */
.core-v3.is-paused .cv3__booked-glow { animation-play-state: paused; }
.core-v3.is-paused .core-v3__stage { will-change: auto; }

@media (max-width: 480px) {
  /* Mobile is an intentional variant, not a shrunk clone: per-station
     labels get too cramped to read at this scale, so they're replaced by
     one plain-text caption below the whole strip — narrative clarity
     stays independent of icon legibility at very small sizes. */
  .cv3__label { display: none; }
  .core-v3__caption { display: block; }
  .core-v3__panel { padding: 1.1rem 1rem; border-radius: 16px; }
}

.edge-label {
  display: none; position: absolute; top: 50%; z-index: 2;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em;
  color: var(--text-faint); text-transform: uppercase;
}
.edge-label--left { left: 20px; }
.edge-label--right { right: 20px; }
@media (min-width: 1100px) { .edge-label { display: block; } }

/* ---------- Intro statement + marquee ---------- */
.intro-stat { padding-block: clamp(56px, 8vw, 100px) 0; }
.intro-stat__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 4rem); align-items: end; }
.intro-stat__num {
  font-family: var(--display); font-weight: 800; line-height: 0.8; letter-spacing: -0.04em;
  font-size: clamp(4.5rem, 13vw, 10rem);
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
}
.intro-stat__line { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.35; color: var(--text); max-width: 44ch; }
.intro-stat__line b { color: var(--jade); font-weight: 700; }
@media (max-width: 700px) { .intro-stat__grid { grid-template-columns: 1fr; gap: 0.8rem; } .intro-stat__num { font-size: 4.2rem; } }

.marquee { overflow: hidden; border-top: 1px solid var(--line); margin-top: clamp(2.4rem, 5vw, 4rem); }
.marquee__track { display: flex; width: max-content; gap: 2.4rem; padding-block: 0.9rem; animation: marquee 24s linear infinite; }
.marquee__track span { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.22em; color: var(--text-faint); white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Editorial index list (replaces card grid on homepage) ---------- */
.index { border-top: 1px solid var(--line); margin-top: clamp(1rem, 2vw, 1.6rem); }
.index__row {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  transition: background .3s;
}
.index__row:hover { background: linear-gradient(90deg, rgba(22,201,141,0.06), transparent 65%); }
.index__n {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(2rem, 3.6vw, 3rem); color: var(--text-faint);
  transition: color .3s, transform .3s var(--ease);
}
.index__row:hover .index__n { color: var(--jade); transform: translateX(4px); }
.index__t { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: 0.45rem; }
.index__d { font-size: 0.92rem; color: var(--text-dim); max-width: 54ch; }
.index__tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jade); }
@media (max-width: 700px) {
  .index__row { grid-template-columns: 52px 1fr; }
  .index__tag { display: none; }
  .index__n { font-size: 1.7rem; }
}

/* ---------- Philosophy ---------- */
.section.philosophy { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }

/* ---------- Showcase / plates ---------- */
.showcase { padding-block: clamp(64px, 9vw, 110px) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.showcase__head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.showcase__strip { display: flex; gap: 2px; }
.plate-card { position: relative; flex: 1 1 0; min-width: 220px; aspect-ratio: 3 / 4; overflow: hidden; }
.plate-card__field { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.plate-card:hover .plate-card__field { transform: scale(1.06); }
.plate-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  background: linear-gradient(0deg, rgba(10,9,8,0.8), transparent 70%);
}
.plate-card figcaption .n { font-family: var(--mono); font-size: 0.7rem; color: rgba(242,235,224,0.65); }
.plate-card figcaption .t { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: #f2ebe0; }
.plate-card--a .plate-card__field { background: radial-gradient(120% 100% at 20% 0%, rgba(87,224,172,0.4), transparent 60%), linear-gradient(160deg, #1b1714, #0a0908); }
.plate-card--b .plate-card__field { background: radial-gradient(100% 100% at 80% 100%, rgba(217,138,79,0.38), transparent 60%), linear-gradient(200deg, #171310, #0a0908); }
.plate-card--c .plate-card__field { background: conic-gradient(from 200deg at 60% 40%, rgba(87,224,172,0.25), rgba(217,138,79,0.2), transparent 60%), #0e0c0a; }
.plate-card--d .plate-card__field { background: radial-gradient(90% 90% at 50% 0%, rgba(242,235,224,0.14), transparent 55%), linear-gradient(180deg, #181410, #0a0908); }
.reveal.plate-card { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); }
.reveal.plate-card.in { clip-path: inset(0 0 0 0); }
@media (max-width: 760px) {
  .showcase__strip { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
  .plate-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- Animated divider + mega CTA ---------- */
.divider-animated { position: relative; height: 1px; overflow: hidden; background: var(--line); }
.divider-animated::after {
  content: ""; position: absolute; inset: 0; width: 36%;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
  animation: sweep 5s ease-in-out infinite;
}
@keyframes sweep { 0% { transform: translateX(-140%); } 100% { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) { .divider-animated::after { animation: none; display: none; } }

.cta-mega { padding-block: clamp(90px, 13vw, 160px); text-align: center; background: var(--bg); }
.cta-mega .h-display--sm { margin-bottom: 1.2rem; }
.cta-mega .lede { margin-inline: auto; }

/* ---------- Footer wordmark ---------- */
.footer { position: relative; overflow: hidden; }
.footer__wordmark {
  position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%);
  font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  font-size: clamp(6rem, 22vw, 17rem);
  color: transparent; -webkit-text-stroke: 1px var(--line-2);
  pointer-events: none; z-index: 0; white-space: nowrap; user-select: none;
}
.footer .container { position: relative; z-index: 1; }

/* =============================================================
   ORI MARKETING — Growth Operating System visual system
   ============================================================= */

/* ---------- scene scaffolding ---------- */
.scene { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.scene--dark { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.scene--atmos {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(22,201,141,0.14), transparent 60%),
    radial-gradient(700px 600px at 100% 110%, rgba(217,138,79,0.12), transparent 60%),
    var(--bg-2);
}
.scene__head { max-width: 62ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.scene__num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--jade); text-transform: uppercase; }
.scene__head h2 { margin-top: 0.6rem; }
.scene--split .container { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .scene--split .container { grid-template-columns: 1fr; } }
.scene--center { text-align: center; }
.scene--center .scene__head { margin-inline: auto; }

/* ---------- AI voice call card ---------- */
.call-card {
  max-width: 560px; margin-inline: auto; position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2); border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: 0 50px 120px -50px rgba(0,0,0,0.75), 0 0 0 1px rgba(22,201,141,0.06);
}
.call-card__top { display: flex; align-items: center; gap: 1rem; }
.call-card__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; color: #04130d; font-size: 1.05rem;
}
.call-card__who b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.call-card__who span { font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); }
.call-card__status { margin-left: auto; display: flex; align-items: center; gap: 0.5em; font-family: var(--mono); font-size: 0.7rem; color: var(--jade); text-transform: uppercase; letter-spacing: 0.08em; }
.call-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 8px var(--jade); animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.waveform { display: flex; align-items: center; gap: 3px; height: 52px; margin-block: 1.6rem; }
.waveform span { flex: 1; background: linear-gradient(180deg, var(--jade), var(--emerald)); border-radius: 2px; opacity: 0.9; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.07s); transform-origin: center; }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .waveform span { animation: none; transform: scaleY(0.6); } }

.call-card__transcript { display: grid; gap: 0.7rem; font-size: 0.88rem; color: var(--text-dim); margin-bottom: 1.6rem; line-height: 1.5; }
.call-card__transcript .who { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-right: 0.5em; }
.call-card__transcript .ai .who { color: var(--jade); }
.call-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.call-card__dur { font-family: var(--mono); font-size: 0.8rem; color: var(--text-faint); }
.tag-pill { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #04130d; background: var(--grad); padding: 0.42em 0.9em; border-radius: 100px; font-weight: 700; }

/* ---------- Calendar / appointment card ---------- */
.cal-card { max-width: 460px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(1.6rem, 3vw, 2.2rem); }
.cal-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.3rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.cal-card__head span { font-family: var(--mono); font-size: 0.7rem; color: var(--text-faint); font-weight: 400; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 1.4rem; }
.cal-grid .dow { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--text-faint); text-align: center; padding-bottom: 4px; }
.cal-grid .d { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); border-radius: 8px; }
.cal-grid .d.sel { background: var(--grad); color: #04130d; font-weight: 700; box-shadow: 0 6px 20px -6px rgba(22,201,141,0.6); }
.cal-slot { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, rgba(22,201,141,0.08), transparent); }
.cal-slot b { display: block; font-family: var(--display); font-size: 0.98rem; }
.cal-slot span { font-family: var(--mono); font-size: 0.74rem; color: var(--text-faint); }
.cal-slot .ok { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--mono); font-size: 0.72rem; color: var(--jade); }

/* ---------- CRM pipeline board ---------- */
.pipeline-wrap { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; }
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 14px; padding-bottom: 0.6rem; }
.pipeline__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1rem; padding-inline: 0.2rem; }
.lead-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.7rem; }
.lead-card b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.92rem; margin-bottom: 0.3rem; }
.lead-card span { color: var(--text-faint); font-family: var(--mono); font-size: 0.66rem; }
.lead-card--active { position: relative; border-color: var(--jade); background: linear-gradient(180deg, rgba(22,201,141,0.13), var(--surface-2)); box-shadow: 0 0 0 1px rgba(22,201,141,0.35), 0 24px 50px -24px rgba(22,201,141,0.45); }
.lead-card--active::before { content: "● Marcus Webb"; position: absolute; top: -9px; left: 12px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--jade); background: var(--bg-2); padding: 0 6px; }
.lead-card--ghost { opacity: 0.4; border-style: dashed; }

/* ---------- SMS / follow-up thread ---------- */
.sms-thread { max-width: 380px; display: flex; flex-direction: column; gap: 0.7rem; }
.sms-bubble { border-radius: 16px 16px 4px 16px; padding: 0.85rem 1.1rem; font-size: 0.9rem; line-height: 1.45; align-self: flex-end; max-width: 90%; background: var(--grad); color: #04130d; font-weight: 500; }
.sms-bubble--in { align-self: flex-start; border-radius: 16px 16px 16px 4px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line-2); }
.sms-meta { display: flex; gap: 0.7rem; justify-content: flex-end; font-family: var(--mono); font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.04em; }
.sms-meta .ok { color: var(--jade); }

/* ---------- System architecture map ---------- */
.sysmap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.8rem, 3vw, 2rem); }
.sysmap__end { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 1.3rem 1.1rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); white-space: nowrap; }
.sysmap__mid { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sysmap__core { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.5rem); text-align: center; padding: 1.5rem 1.8rem; border: 1px solid var(--jade); border-radius: 18px; background: linear-gradient(180deg, rgba(22,201,141,0.14), var(--surface)); box-shadow: 0 30px 80px -40px rgba(22,201,141,0.5); white-space: nowrap; }
.sysmap__branches { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; max-width: 520px; }
.sysmap__branches span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.5em 0.9em; border-radius: 100px; }
.sysmap__line { position: relative; height: 2px; background: var(--line-2); min-width: 30px; }
.sysmap__line::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 10px var(--jade); animation: travel 3s linear infinite; }
@keyframes travel { 0% { left: 0%; transform: translateX(0); } 100% { left: 100%; transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .sysmap__line::after { animation: none; left: 50%; transform: translateX(-50%); } }
@media (max-width: 860px) { .sysmap { grid-template-columns: 1fr; } .sysmap__line { width: 2px; height: 30px; margin-inline: auto; } .sysmap__line::after { animation: none; top:0; left:-3px; } }

/* ---------- One-system editorial typography ---------- */
.onesys__line { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(1.7rem, 5vw, 3.4rem); color: var(--text-faint); }
.onesys__line b { color: var(--text); }
.onesys__line.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- Capability grid ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cap-cat { background: var(--surface); padding: clamp(1.4rem, 2.4vw, 1.8rem); }
.cap-cat h4 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade); margin-bottom: 1rem; }
.cap-cat .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cap-cat .pills span { font-size: 0.79rem; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.4em 0.8em; border-radius: 100px; }

/* ---------- handoff chip ---------- */
.handoff { display: inline-flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line-2); border-radius: 100px; padding: 0.6rem 1.1rem 0.6rem 0.6rem; background: var(--surface); }
.handoff__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--copper), var(--copper-dp)); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 0.8rem; color: #1b1108; }
.handoff b { font-family: var(--display); font-size: 0.9rem; }
.handoff span { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--text-faint); }

.continue-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.continue-chips span { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-dim); border: 1px solid var(--line-2); background: var(--surface); padding: 0.6em 1.1em; border-radius: 100px; }
.continue-chips span b { color: var(--jade); font-weight: 600; }

/* =============================================================
   V2 — CONVERSION FOUNDATION
   ============================================================= */

/* ---------- demo / synthetic-data label (required on every fabricated example) ---------- */
.demo-badge {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper); border: 1px solid rgba(217,138,79,0.35); background: rgba(217,138,79,0.09);
  padding: 0.4em 0.85em; border-radius: 100px; font-weight: 600;
}
.demo-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); flex-shrink: 0; }

/* ---------- Hero mechanism chain (replaces fabricated stat row) ---------- */
.hero__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.4rem; margin-top: 3.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.hero__chain span { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.5em 0.95em; border-radius: 100px; white-space: nowrap; }
.hero__chain .arw { border: none; padding: 0; color: var(--jade); background: none; }
.hero__trust { font-family: var(--mono); font-size: 0.78rem; color: var(--text-faint); margin-top: 1.4rem; }

/* ---------- Revenue-leak timelines ---------- */
.leak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .leak-grid { grid-template-columns: 1fr; } }
.leak-case { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 1.8rem); background: var(--surface); display: flex; flex-direction: column; gap: 1.2rem; }
.leak-case__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
.leak-case h3 { font-size: 1.05rem; margin-top: 0.4rem; }
.leak-timeline__head { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.7rem; }
.leak-timeline--manual .leak-timeline__head { color: var(--st-build); }
.leak-timeline--ori .leak-timeline__head { color: var(--jade); }
.leak-timeline ol { list-style: none; display: grid; gap: 0.55rem; }
.leak-timeline li { font-size: 0.84rem; color: var(--text-dim); line-height: 1.5; display: flex; gap: 0.5em; }
.leak-timeline li b { font-family: var(--mono); color: var(--text); flex-shrink: 0; font-weight: 600; }
.leak-timeline + .leak-timeline { padding-top: 1.1rem; border-top: 1px dashed var(--line-2); }

/* ---------- Ori Console (static preview — progressively enhanced in a later phase) ---------- */
.console { border: 1px solid var(--line-2); border-radius: clamp(16px, 2vw, 22px); background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); padding: clamp(1.6rem, 3vw, 2.4rem); }
.console__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.console__scenario { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); }
.console__scenario b { color: var(--text); }
.console__grid { display: grid; grid-template-columns: 220px 1fr 220px; gap: 16px; }
@media (max-width: 980px) {
  .console__grid { grid-template-columns: 1fr; }
  /* Vertical event stream. The lead card previously stayed position:sticky
     here, but the timeline/panels share the same collapsed single-column
     track, so later rows scrolled into the pinned card's coordinates —
     visible as text ghosting behind it, confirmed in real Chromium. Below
     981px the lead card now returns to normal document flow: still first
     (order:-1) for narrative order, but it scrolls away like everything
     else instead of pinning over sibling content. */
  .console__lead { order: -1; position: static; top: auto; z-index: auto; }
  .console__timeline { order: 2; }
  .console__panels { order: 3; }
}
.console__timeline, .console__panels { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.2rem; }
.console__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1rem; }
.console__timeline ol { list-style: none; display: grid; gap: 0.9rem; }
.console__timeline li { font-size: 0.8rem; color: var(--text-dim); line-height: 1.45; }
.console__timeline li b { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--jade); margin-bottom: 0.15rem; }
.console__lead { border: 1px solid var(--jade); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(22,201,141,0.09), var(--surface)); padding: 1.4rem; box-shadow: 0 30px 70px -40px rgba(22,201,141,0.4); }
.console__lead-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.console__lead-head span:first-child { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.console__lead dl { display: grid; gap: 0.85rem; }
.console__lead dl div { display: grid; grid-template-columns: 108px 1fr; gap: 0.8rem; align-items: baseline; }
.console__lead dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.console__lead dd { font-size: 0.9rem; color: var(--text); }
.console__panels { display: flex; flex-direction: column; gap: 0.8rem; }
.console__panel { border: 1px solid var(--line-2); border-radius: 10px; padding: 0.8rem 0.9rem; background: var(--surface-2); }
.console__panel span { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade); margin-bottom: 0.35rem; }
.console__panel b { font-size: 0.82rem; color: var(--text); font-weight: 600; }
.console__status { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.console__status span { font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); }
.console__status span b { color: var(--text-dim); font-weight: 500; }
.console__note { font-size: 0.82rem; color: var(--text-faint); margin-top: 1.4rem; max-width: 62ch; }

/* ---------- Console controls (Phase 2 — interactive, JS-enhanced) ----------
   Hidden by default in HTML; stack-demo.js reveals this block once it has
   successfully wired up the state machine, so a no-JS visitor never sees
   controls that don't do anything. */
.console__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
/* The [hidden] attribute has the same specificity as a single class selector,
   so without this it can lose to .console__controls's own display:flex
   depending on cascade order — leaving inert controls visible with no JS. */
.console__controls[hidden] { display: none; }
.console__sources { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.console__source-btn {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  padding: 0.55em 1.1em; border-radius: 100px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-dim);
  transition: border-color .2s, background .2s, color .2s;
}
.console__source-btn:hover { border-color: rgba(233,222,206,0.35); color: var(--text); }
.console__source-btn[aria-pressed="true"] { border-color: var(--jade); background: rgba(22,201,141,0.12); color: var(--text); }

.console__playback { display: inline-flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.console__play-btn, .console__replay-btn {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 700;
  padding: 0.55em 1.2em; border-radius: 100px; border: 1px solid transparent;
  transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s;
}
.console__play-btn { background: var(--grad); color: #04130d; }
.console__play-btn:hover { transform: translateY(-1px); }
.console__replay-btn { background: rgba(255,255,255,0.03); color: var(--text-dim); border-color: var(--line-2); }
.console__replay-btn:hover { border-color: rgba(233,222,206,0.35); color: var(--text); }

.console__stages { display: inline-flex; align-items: center; gap: 0.4rem; }
.console__stage-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-faint);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  display: grid; place-items: center;
  transition: border-color .2s, background .2s, color .2s;
}
.console__stage-btn:hover { border-color: rgba(233,222,206,0.35); color: var(--text); }
.console__stage-btn[aria-current="step"] { border-color: var(--jade); background: var(--jade); color: #04130d; }
.console__stage-btn.is-done { border-color: rgba(22,201,141,0.45); color: var(--jade); }

/* ---------- Console live-state transitions ----------
   Motion represents a state change only: a timeline entry arriving, a lead
   field being written, or a pane updating — never ambient/looping motion. */
html.js .console__timeline li,
html.js .console__lead dl > div {
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
html.js .console__timeline li.is-new,
html.js .console__lead dl > div.is-new { opacity: 0; transform: translateY(6px); }
html.js .console__timeline li.is-in,
html.js .console__lead dl > div.is-in { opacity: 1; transform: none; }
.console__panel { transition: border-color .4s var(--ease), background .4s var(--ease); }
.console__panel.is-active { border-color: var(--jade); background: linear-gradient(180deg, rgba(22,201,141,0.16), var(--surface-2)); }
.console__lead { transition: box-shadow .4s var(--ease); }
.console__lead.is-active { box-shadow: 0 30px 70px -40px rgba(22,201,141,0.4), 0 0 0 2px rgba(22,201,141,0.4); }

@media (prefers-reduced-motion: reduce) {
  html.js .console__timeline li,
  html.js .console__lead dl > div,
  .console__panel,
  .console__lead { transition: none !important; }
  html.js .console__timeline li.is-new,
  html.js .console__lead dl > div.is-new { opacity: 1 !important; transform: none !important; }
}

/* ---------- Solution cards (productized systems) ---------- */
.solution-card p { font-size: 0.88rem; margin-bottom: 1.2rem; }
.solution-card__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 1.2rem; }
.solution-card__steps span { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); }
.solution-card__steps span.arw { color: var(--jade); }
.solution-card__steps b { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.35em 0.7em; border-radius: 100px; font-weight: 500; }
.solution-card__scope { font-family: var(--mono); font-size: 0.76rem; color: var(--text-faint); margin-bottom: 1.3rem; }
.solution-card__price { color: var(--jade); font-weight: 700; }

/* ---------- Pricing anchors — editorial divider rows, not SaaS pricing
   cards. No "Best Value" badges, no crossed-out prices, no urgency —
   just what it starts at, what it solves, and what changes the number. ---------- */
.price-row {
  display: grid; grid-template-columns: 1.5fr 1fr auto;
  gap: 1rem 2.2rem; align-items: center;
  padding-block: clamp(1.7rem, 3vw, 2.3rem); border-top: 1px solid var(--line);
}
.price-row:first-child { border-top: none; padding-top: 0; }
.price-row .kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 0.5rem; }
.price-row__main h3 { margin-bottom: 0.5rem; }
.price-row__main p { color: var(--text-dim); font-size: 0.9rem; max-width: 48ch; }
.price-row__figures { display: flex; flex-direction: column; gap: 0.35rem; }
.price-row__amount { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--text); }
.price-row__ongoing { font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); line-height: 1.5; }
@media (max-width: 780px) {
  .price-row { grid-template-columns: 1fr; }
}

/* Homepage hierarchy: Sprint/AI Front Desk/Lead Recovery are the primary
   systems; Website and Custom Software are standalone entry points into
   the same architecture, not equal-weight products. The secondary block
   gets a label, tighter spacing, and a visibly smaller treatment so a
   buyer reads Orio as a systems company first. */
.price-list__subhead {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-faint);
  margin: 2.2rem 0 0.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.price-list--secondary .price-row { padding-block: clamp(1.2rem, 2vw, 1.6rem); }
.price-list--secondary .price-row__main h3 { font-size: 1rem; }
.price-list--secondary .price-row__amount { font-size: 1rem; }
.price-list--secondary .price-row__main p { font-size: 0.86rem; }

/* ---------- Field validation states ---------- */
.field__error { display: none; font-size: 0.8rem; color: #f87171; margin-top: 0.45rem; font-family: var(--mono); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.14); }
.field.has-error .field__error { display: block; }
.field__hint { font-size: 0.76rem; color: var(--text-faint); margin-top: 0.4rem; }
.field-legend { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin: 1.8rem 0 0.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.field-legend:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- Confirmation panel ---------- */
.confirm-panel { border: 1px solid var(--line-2); border-radius: var(--radius); background: linear-gradient(180deg, rgba(22,201,141,0.08), var(--surface)); padding: clamp(1.8rem, 4vw, 2.6rem); }
.confirm-panel__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #04130d; font-weight: 800; margin-bottom: 1.2rem; }
.confirm-panel h2 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.confirm-panel p { font-size: 0.92rem; margin-bottom: 1rem; }
.confirm-panel ol { list-style: none; display: grid; gap: 0.7rem; margin: 1.3rem 0; }
.confirm-panel ol li { display: grid; grid-template-columns: 22px 1fr; gap: 0.7rem; font-size: 0.88rem; color: var(--text-dim); }
.confirm-panel ol li span { font-family: var(--mono); font-size: 0.75rem; color: var(--jade); }
.confirm-panel__email { font-family: var(--mono); color: var(--jade); }
.confirm-panel__reset { font-family: var(--mono); font-size: 0.8rem; color: var(--text-faint); margin-top: 1.4rem; display: inline-block; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; }
.confirm-panel__reset:hover { color: var(--jade); }

/* ---------- Legal pages ---------- */
.legal { max-width: 74ch; }
.legal .updated { font-family: var(--mono); font-size: 0.78rem; color: var(--text-faint); margin-bottom: 2.4rem; }
.legal h2 { font-size: 1.3rem; margin: 2.4rem 0 0.9rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 0.6rem; color: var(--text); font-family: var(--display); }
.legal p { font-size: 0.94rem; line-height: 1.75; margin-bottom: 0.9rem; }
.legal ul { color: var(--text-dim); font-size: 0.94rem; line-height: 1.75; padding-left: 1.3rem; margin-bottom: 0.9rem; display: grid; gap: 0.4rem; }
.legal a { color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   PHASE 3 — Solution depth, industry selector, proof, custom software
   ============================================================= */

/* ---------- Solution card mini-visuals (each configuration gets a
   distinct fragment instead of an identical icon/title/paragraph) ---------- */
.solution-mini { margin-bottom: 1.2rem; border: 1px solid var(--line-2); border-radius: 12px; padding: 0.9rem 1rem; background: var(--surface-2); }
.solution-mini__call { display: flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: 0.8rem; color: var(--text); margin-bottom: 0.7rem; }
.solution-mini__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 8px var(--jade); flex-shrink: 0; animation: pulse-dot 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .solution-mini__dot { animation: none; } }
.solution-mini__timeline { display: flex; align-items: center; gap: 0.5em; font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); flex-wrap: wrap; margin-bottom: 0.7rem; }
.solution-mini__timeline b { color: var(--text); font-weight: 600; }
.solution-mini__timeline .arw { color: var(--jade); }
.solution-mini__row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.solution-mini__row .tag { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.3em 0.7em; border-radius: 100px; }

/* ---------- Scope-factor chips (pricing-preparation language) ---------- */
.scope-factors { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.scope-factors span { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.4em 0.85em; border-radius: 100px; }

/* ---------- Industry workflow selector ---------- */
.industry-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.8rem; }
.industry-tabs[hidden] { display: none; }
.industry-tab { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; padding: 0.7em 1.3em; border-radius: 100px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-dim); transition: border-color .2s, background .2s, color .2s; }
.industry-tab:hover { border-color: rgba(233,222,206,0.35); color: var(--text); }
.industry-tab[aria-pressed="true"] { border-color: var(--jade); background: rgba(22,201,141,0.12); color: var(--text); }
.industry-panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); padding: clamp(1.6rem, 3vw, 2.4rem); }
.industry-panel__trigger { font-family: var(--mono); font-size: 0.8rem; color: var(--text-faint); margin-bottom: 1.4rem; }
.industry-panel__trigger b { color: var(--jade); font-weight: 600; }
.industry-panel__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.8rem; }
.industry-panel__steps span { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); border: 1px solid var(--line-2); padding: 0.5em 0.9em; border-radius: 100px; }
.industry-panel__steps span.arw { border: none; padding: 0; color: var(--jade); background: none; }
.industry-panel__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.industry-panel__fields div { background: var(--surface); padding: 1rem 1.1rem; }
.industry-panel__fields dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; }
.industry-panel__fields dd { font-size: 0.88rem; color: var(--text); }

/* ---------- Case-study-ready template (structure only, no fabricated data) ---------- */
.case-template { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--surface); }
.case-template__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.case-template__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 1.6rem; }
.case-template__grid span { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.case-template__grid b { display: block; font-size: 0.86rem; color: var(--text-dim); font-weight: 500; margin-top: 0.3rem; }

/* ---------- Custom-software / operations dashboard mockup ---------- */
.ops-dash { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ops-dash__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ops-dash__bar span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.ops-dash__body { display: grid; grid-template-columns: 150px 1fr; }
.ops-dash__nav { border-right: 1px solid var(--line); padding: 1rem; display: grid; gap: 0.3rem; align-content: start; }
.ops-dash__nav span { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); padding: 0.5em 0.6em; border-radius: 8px; }
.ops-dash__nav span.is-active { background: rgba(22,201,141,0.1); color: var(--jade); }
.ops-dash__main { padding: 1.2rem; display: grid; gap: 0.7rem; }
.ops-dash__row { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); font-size: 0.84rem; gap: 1rem; }
.ops-dash__row span:first-child { color: var(--text); }
.ops-dash__row span:last-child { font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); flex-shrink: 0; }
@media (max-width: 360px) {
  /* A long value ("CRM · Calendar · Billing") next to a shrinkable label
     was wrapping the label to three lines while the value sat mid-wrap,
     confirmed at 320px in real Chromium. Stack label/value instead of
     forcing them onto one row at this width. */
  .ops-dash__row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .ops-dash__row span:last-child { flex-shrink: 1; white-space: normal; }
}
@media (max-width: 640px) {
  .ops-dash__body { grid-template-columns: 1fr; }
  .ops-dash__nav { border-right: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; }
}

/* ---------- Capability layer groups (product page architecture) ---------- */
.layer-group { margin-bottom: 2.4rem; }
.layer-group:last-child { margin-bottom: 0; }
.layer-group__head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.1rem; }
.layer-group__num { font-family: var(--mono); font-size: 0.74rem; color: var(--jade); flex-shrink: 0; }
.layer-group__head h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.layer-group__desc { font-size: 0.86rem; color: var(--text-faint); margin: -0.6rem 0 1.1rem; max-width: 62ch; }

/* ---------- Expansion path cards (Managed Revenue System / Custom Software) ---------- */
.expansion-card__list { list-style: none; display: grid; gap: 0.5rem; margin: 1rem 0 1.3rem; }
.expansion-card__list li { font-size: 0.86rem; color: var(--text-dim); display: flex; gap: 0.6em; }
.expansion-card__list li::before { content: "→"; color: var(--jade); flex-shrink: 0; }

/* =============================================================
   PHASE 4 — consolidation: editorial dividers instead of bordered
   panels, where a container was only decorating text rather than
   grouping something interactive.
   ============================================================= */
.config-row { padding-block: clamp(1.8rem, 3vw, 2.6rem); border-top: 1px solid var(--line); }
.config-row:first-child { border-top: none; padding-top: 0; }
.config-row--last { padding-bottom: 0; }

.expand-chapter { padding-block: clamp(1.6rem, 2.8vw, 2.2rem); border-top: 1px solid var(--line); }
.expand-chapter:first-child { border-top: none; padding-top: 0; }
.expand-chapter__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1rem; margin-bottom: 0.9rem; }
.expand-chapter__head h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--text); }