/* =============================================================================
   Onboard page — standalone stylesheet.

   The Onboard product page keeps its own distinct visual identity (its own
   nav, colors, and section compositions) rather than the shared sitewide
   design-system tokens in css/style.css, matching the original scitools.com/
   onboard page as closely as possible while staying pure vanilla CSS with
   only system fonts (no Google Fonts / no extra libraries — per project
   rules, confirmed with the user).
   ============================================================================= */

:root {
  --ob-bg: #050b16;
  --ob-bg-soft: #070f1e;
  --ob-panel: #0c1526;
  --ob-panel-2: #101b30;
  --ob-border: rgba(160, 185, 255, 0.1);
  --ob-border-strong: rgba(160, 185, 255, 0.16);
  --ob-text: #f4f7ff;
  --ob-text-muted: #7f8ba8;
  --ob-text-dim: #566080;
  --ob-blue: #2679bc;
  --ob-blue-bright: #4da3e0;
  --ob-green: #82e3b1;
  --ob-green-dim: rgba(130, 227, 177, 0.14);
  --ob-radius-sm: 8px;
  --ob-radius-md: 14px;
  --ob-radius-lg: 20px;
  --ob-radius-full: 999px;
  --ob-container: 1300px;
  --ob-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ob-font-mono: "SF Mono", Menlo, Consolas, monospace;
  --ob-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   Light theme overrides — the Onboard page normally stays fixed-dark (see
   note above), but the sitewide light/dark toggle (js/main.js, shared navbar)
   sets [data-theme] on <html> for every page, so we follow it here too,
   reusing the same palette shape as css/style.css's light theme. Brand
   accents (--ob-blue*, --ob-green*) stay fixed in both themes, matching the
   sitewide convention. The hero video/poster and other screenshot assets
   show a fixed dark UI and are left as-is in both themes — recoloring
   baked-in screenshots/video isn't something CSS can do.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ob-bg: #EEF2F8;
    --ob-bg-soft: #F5F8FC;
    --ob-panel: #FFFFFF;
    --ob-panel-2: #F3F6FB;
    --ob-border: rgba(15, 23, 42, 0.10);
    --ob-border-strong: rgba(15, 23, 42, 0.18);
    --ob-text: #0F172A;
    --ob-text-muted: #55607A;
    --ob-text-dim: #8A93A6;
  }
}
:root[data-theme="light"] {
  --ob-bg: #EEF2F8;
  --ob-bg-soft: #F5F8FC;
  --ob-panel: #FFFFFF;
  --ob-panel-2: #F3F6FB;
  --ob-border: rgba(15, 23, 42, 0.10);
  --ob-border-strong: rgba(15, 23, 42, 0.18);
  --ob-text: #0F172A;
  --ob-text-muted: #55607A;
  --ob-text-dim: #8A93A6;
}
/* Component-level overrides for the handful of places that use a hardcoded
   dark-specific color instead of an --ob-* token (glass panels, dividers,
   shadows tuned for a dark backdrop, etc). */
[data-theme="light"] .ob-btn-outline { background: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .ob-nav { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 252, 0.88)); }
[data-theme="light"] .ob-nav-divider { background: rgba(15, 23, 42, 0.14); }
[data-theme="light"] .ob-nav-demo-split { background: linear-gradient(135deg, #ffffff, #f2f5fa); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10); }
[data-theme="light"] .ob-nav-demo-chevron { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .ob-hero-btn-dark { background: rgba(15, 23, 42, 0.04); color: var(--ob-text-muted); border-color: rgba(15, 23, 42, 0.35); }
[data-theme="light"] .ob-dropdown-panel { box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14); }
[data-theme="light"] .ob-demo-picker-pill { background: rgba(255, 255, 255, 0.65); }
[data-theme="light"] .ob-hero .ob-lead { color: var(--ob-text-muted); }
[data-theme="light"] .ob-trust-item { color: var(--ob-text-muted); }
[data-theme="light"] .ob-graph-panel-bar span { background: rgba(15, 23, 42, 0.15); }
[data-theme="light"] .ob-demo-video-panel,
[data-theme="light"] img.ob-report-shot { box-shadow: 0 30px 80px rgba(15, 23, 42, 0.16); }
[data-theme="light"] .ob-pricing-card.is-featured,
[data-theme="light"] .ob-cta-card.is-featured { background: rgba(232, 250, 241, 0.65); }

/* ---------------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------------- */
.onboard-page, .onboard-page *, .onboard-page *::before, .onboard-page *::after {
  box-sizing: border-box;
}
.onboard-page {
  background: var(--ob-bg);
  color: var(--ob-text);
  font-family: var(--ob-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.onboard-page img { max-width: 100%; display: block; }
/* :where() keeps this reset at element-level specificity, so it can't
   outrank style.css's component rules (.nav-links a, .nav-megamenu-footer…)
   and repaint the sitewide navbar in Onboard's colors. */
:where(.onboard-page) a { color: inherit; text-decoration: none; }
.onboard-page ul { list-style: none; margin: 0; padding: 0; }
.onboard-page h1, .onboard-page h2, .onboard-page h3, .onboard-page h4 {
  font-family: var(--ob-font);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ob-text);
  margin: 0;
}
.onboard-page p { margin: 0; color: var(--ob-text-muted); }

/* ---------------------------------------------------------------------------
   Ambient section glows — soft, blurred color blobs behind each section's
   content, matching the real site's atmosphere. Purely decorative; the
   real colors are always the same two (blue and green) at low opacity,
   heavily blurred and blended with "screen" so they never obscure text.
   --------------------------------------------------------------------------- */
/* The 12 .ob-glow-layer blocks below are full-bleed: left:50% + width:100vw
   + margin-left:-50vw. 100vw is the viewport INCLUDING the classic scrollbar
   gutter, while the content area (documentElement.clientWidth) excludes it, so
   on any browser with a non-overlay scrollbar -- Chrome and Firefox on Windows
   and Linux -- every layer ends up scrollbar-width too wide and hangs half of
   that past each edge. The right-hand half is what gives the page a horizontal
   scrollbar. Nothing clipped them: html and body were both overflow-x: visible.

   clip, not hidden: hidden would make the body a scroll container and can
   break position: sticky. clip only cuts the overflow.

   It has to be on BOTH html and body -- measured: with a layer forced 40px
   over the viewport, body alone still reported 20px of scrollable overflow,
   html alone likewise, and only the pair brought it to 0. This file is loaded
   by onboard.html and nothing else, so the bare element selectors here cannot
   reach another page.

   This did not show up in headless testing because headless Chromium uses
   overlay scrollbars, where 100vw == clientWidth and the arithmetic cancels. */
html,
.onboard-page { overflow-x: clip; }

.ob-glow-host { position: relative; }
.ob-glow-layer {
  position: absolute;
  top: -240px;
  bottom: -240px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}
/* Positioning reference for the glows: centered on the content column
   (not the full viewport) so their percentage-based positions track the
   content at wide viewports, but with no overflow restriction of its own
   — only .ob-glow-layer clips, and only at the true page edge, so nothing
   gets cut off inside the visible margins. */
.ob-glow-track {
  position: absolute;
  inset: 0;
  max-width: var(--ob-container);
  margin: 0 auto;
}
.ob-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(115px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.ob-glow-hero-1 { z-index: 0; background: rgba(126, 162, 255, 0.14); width: 640px; height: 420px; top: 29%; left: -2%; }
.ob-glow-hero-2b { z-index: 1; background: rgba(126, 224, 184, 0.1); width: 440px; height: 320px; top: 50%; right: -2%; }
.ob-glow-hero-top { z-index: 0; background: rgba(126, 162, 255, 0.14); width: 640px; height: 420px; top: -11%; left: 31%; }
.ob-glow-social-1 { background: rgba(126, 224, 184, 0.11); width: 500px; height: 330px; top: 6%; right: 3%; }
.ob-glow-social-2 { background: rgba(126, 162, 255, 0.09); width: 385px; height: 250px; top: 55%; left: 3%; }
.ob-glow-demo-1 { background: rgba(126, 162, 255, 0.12); width: 880px; height: 620px; top: 55%; left: 3%; }
.ob-glow-demo-2 { background: rgba(126, 224, 184, 0.1); width: 700px; height: 480px; top: 6%; right: 25%; }
.ob-glow-model-1 { background: rgba(126, 224, 184, 0.12); width: 665px; height: 385px; top: 55%; right: 3%; }
.ob-glow-model-2 { background: rgba(126, 162, 255, 0.1); width: 435px; height: 290px; top: 6%; left: 3%; }
.ob-glow-ai-1 { background: rgba(126, 162, 255, 0.13); width: 655px; height: 445px; top: 6%; right: 3%; }
.ob-glow-ai-2 { background: rgba(126, 224, 184, 0.09); width: 500px; height: 340px; top: 55%; left: 15%; }
.ob-glow-docs-1 { background: rgba(126, 224, 184, 0.13); width: 885px; height: 610px; top: 6%; left: 3%; }
.ob-glow-docs-2 { background: rgba(126, 162, 255, 0.1); width: 565px; height: 465px; top: 55%; right: 3%; }
.ob-glow-nav-1 { background: rgba(126, 162, 255, 0.12); width: 900px; height: 585px; top: 55%; left: 5%; }
.ob-glow-nav-2 { background: rgba(126, 224, 184, 0.1); width: 695px; height: 445px; top: 6%; right: 3%; }
.ob-glow-reports-1 { background: rgba(126, 224, 184, 0.13); width: 560px; height: 620px; top: 6%; right: 3%; }
.ob-glow-reports-2 { background: rgba(126, 162, 255, 0.1); width: 440px; height: 480px; top: 55%; left: 3%; }
.ob-glow-deploy-1 { background: rgba(126, 162, 255, 0.12); width: 590px; height: 365px; top: 6%; left: 20%; }
.ob-glow-deploy-2 { background: rgba(126, 224, 184, 0.1); width: 435px; height: 275px; top: 55%; right: 3%; }
.ob-glow-pricing-1 { background: rgba(126, 224, 184, 0.13); width: 825px; height: 495px; top: 55%; left: 3%; }
.ob-glow-pricing-2 { background: rgba(126, 162, 255, 0.1); width: 525px; height: 375px; top: 6%; right: 3%; }
.ob-glow-faq-1 { background: rgba(126, 162, 255, 0.12); width: 600px; height: 355px; top: 6%; right: 10%; }
.ob-glow-faq-2 { background: rgba(126, 224, 184, 0.1); width: 400px; height: 270px; top: 55%; left: 3%; }
.ob-glow-final-1 { background: rgba(126, 224, 184, 0.13); width: 790px; height: 455px; top: 55%; left: 12%; }
.ob-glow-final-2 { background: rgba(126, 162, 255, 0.11); width: 510px; height: 345px; top: 6%; right: 3%; }
@media (max-width: 900px) {
  .ob-glow { display: none; }
}

.ob-tablet-note { display: none; }
@media (max-width: 900px) {
  .ob-tablet-note { display: block; }
}

.ob-container {
  max-width: var(--ob-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.ob-section { padding-top: 6rem; padding-bottom: 6rem; position: relative; }
.ob-section-sm { padding: 3.5rem 0; }
.ob-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ob-green);
  background: var(--ob-green-dim);
  border: 1px solid rgba(130, 227, 177, 0.25);
  border-radius: var(--ob-radius-full);
  padding: 0.4rem 0.9rem;
  margin-bottom: 2rem;
}
p.ob-eyebrow { margin-bottom: 2rem; }
.ob-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ob-green);
  flex-shrink: 0;
}
.ob-h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; }
.ob-lead { font-size: 1.0625rem; max-width: 60ch; }
.ob-center { text-align: center; margin-left: auto; margin-right: auto; }
p.ob-center { margin-left: auto; margin-right: auto; }

/* Two-column section header: eyebrow+heading on the left, lead paragraph
   on the right, bottom-aligned — used by Navigation, Deployment, Pricing. */
.ob-header-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.ob-header-split .ob-eyebrow { margin-bottom: 1.25rem; }
.ob-header-split .ob-h2 { margin: 0; max-width: none; }
.ob-header-split .ob-lead { margin: 0; max-width: none; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ob-font);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--ob-radius-full);
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ob-ease), background 0.15s var(--ob-ease), border-color 0.15s var(--ob-ease);
  white-space: nowrap;
}
/* Primary CTA — the real site's hero/final-CTA buttons are a light pill with
   dark text, not a solid blue fill; blue is reserved for the small nav
   "Free Trial" utility button (see .ob-btn-accent). */
.ob-btn-primary { background: var(--ob-text); color: var(--ob-bg); }
.ob-btn-primary:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ob-btn-outline {
  background: rgba(5,11,22,0.42);
  color: var(--ob-text-muted);
  border-color: var(--ob-border-strong);
}
.ob-btn-outline:hover { border-color: var(--ob-blue-bright); color: var(--ob-text); }
.ob-btn-accent { background: var(--ob-blue); color: #fff; border-radius: var(--ob-radius-sm); }
.ob-btn-accent:hover { background: var(--ob-blue-bright); }
/* Gradient CTA — reserved for the single "recommended" pick in the final
   Get Started row, matching the real page's one gradient accent. */
.ob-btn-gradient { background: linear-gradient(135deg, var(--ob-green), #8ba7ff); color: #04101b; }
.ob-btn-gradient:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ob-btn-sm { padding: 0.6rem 1.1rem; font-size: 0.8125rem; }

/* ---------------------------------------------------------------------------
   Sitewide navbar override — on this page the sitewide SciTools navbar sits
   above the Onboard nav but does NOT pin; only .ob-nav stays sticky.
   position:relative (not static) + an explicit z-index re-establish a
   stacking context here so descendant dropdowns (.nav-megamenu, z-index:1002)
   paint above .ob-nav and the page content below, without making the
   navbar sticky/pinned — the same arrangement the Understand page uses.

   Otherwise the bar must look exactly as it does on every other page, so it
   is handed back the sitewide surface, text color and line-height that
   .onboard-page swaps out for Onboard's own. Its translucent glass then sits
   on the same color here as everywhere else.
   --------------------------------------------------------------------------- */
.onboard-page .navbar {
  position: relative;
  z-index: 1000;
  background: var(--surface);
  color: var(--text-primary);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Nav — Onboard's own distinct nav, separate from the sitewide navbar
   --------------------------------------------------------------------------- */
.ob-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(13, 24, 40, 0.92), rgba(9, 17, 30, 0.88));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(130, 227, 177, 0.14);
  transition: background-color 0.25s var(--ob-ease), box-shadow 0.25s var(--ob-ease);
}
.ob-nav-inner {
  max-width: var(--container-max, var(--ob-container));
  margin: 0 auto;
  padding: 7px 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.ob-nav-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
/* Brand, section links and the demo action read as one centred cluster,
   matching the Understand bar. Only above the width where the links
   collapse into the hamburger (900px here, not the 1023px Understand uses):
   below that the bar is a bare wordmark and a menu button, and centring
   those two would leave them huddled in the middle of an empty bar.
   The gap goes to 1.75rem so the demo button does not read as a fifth link
   -- at 1.5rem it matched .ob-nav-links' own gap exactly. */
@media (min-width: 901px) {
  .ob-nav-inner { justify-content: center; gap: 1.75rem; }
}
.ob-nav-brand { display: flex; align-items: center; gap: 16px; }
.ob-nav-logo { height: 32px; width: auto; }
/* Two logo variants — white wordmark for dark mode, black wordmark for
   light mode — swapped the same way the sitewide navbar logo is (see
   .nav-logo .logo-dark/.logo-light in css/style.css). */
.onboard-page .ob-nav-logo-light { display: none; }
[data-theme="light"] .onboard-page .ob-nav-logo-dark { display: none; }
[data-theme="light"] .onboard-page .ob-nav-logo-light { display: block; }
.ob-nav-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.14); flex-shrink: 0; }
.ob-nav-back {
  font-size: 12px;
  color: var(--ob-text-muted);
}
.ob-nav-back:hover { color: var(--ob-text); }
.ob-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.ob-nav-links a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ob-text-muted);
  text-transform: none;
  letter-spacing: normal;
  padding: 4px 0;
  border-radius: 0;
  position: relative;
  transition: color 0.15s var(--ob-ease);
}
.ob-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--ob-green);
  border-radius: var(--ob-radius-full);
  transition: width 0.2s var(--ob-ease);
}
.ob-nav-links a:hover { background: none; color: var(--ob-text); }
.ob-nav-links a:hover::after { width: 100%; }
.ob-nav-right { display: flex; align-items: center; gap: 1rem; }
.ob-nav-demo-split {
  border-radius: 14px;
  background: linear-gradient(135deg, #0b172b, #111f38);
  border: 1px solid rgba(130, 227, 177, 0.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}
.ob-nav-demo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 11px;
  padding: 6px 10px 6px 12px;
  cursor: pointer;
  color: var(--ob-text);
  width: 100%;
}
.ob-nav-demo-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ob-nav-demo-live {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ob-green);
  line-height: 1;
}
.ob-nav-demo-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ob-text);
  line-height: 1;
}
.ob-nav-demo-chevron {
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ob-nav-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-sm);
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--ob-text);
  cursor: pointer;
}
.ob-mobile-panel {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--ob-border);
  background: var(--ob-bg-soft);
}
.ob-mobile-panel a {
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ob-text-muted);
  border-bottom: 1px solid var(--ob-border);
}
.ob-mobile-panel.is-open { display: flex; }

/* Demo project dropdown (shared pattern: nav pill + hero + sections) */
.ob-demo-dropdown { position: relative; }
.ob-demo-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 360px;
  background: var(--ob-panel-2);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-md);
  padding: 0.85rem;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  display: none;
  z-index: 60;
}
.ob-demo-dropdown-panel.is-open { display: block; }

/* Small uppercase pill buttons used for the hero's Launch Demo / See Pricing
   pair — matches the real page's compact nav-scale button style, distinct
   from the larger .ob-btn used for card and final-CTA buttons. */
.ob-dropdown { position: relative; }
.ob-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ob-font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.167em;
  padding: 10px 14px;
  border-radius: var(--ob-radius-full);
  cursor: pointer;
  white-space: nowrap;
}
.ob-hero-btn-chevron { flex-shrink: 0; }
.ob-hero-btn-light { background: var(--ob-text); color: var(--ob-bg); border: none; }
.ob-hero-btn-light:hover { filter: brightness(1.15); }
.ob-hero-btn-dark { background: #0b1426; color: #aab6d3; border: 1px solid #aab6d3; }
.ob-hero-btn-dark:hover { color: var(--ob-text); border-color: var(--ob-text); }
.ob-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  width: 360px;
  background: var(--ob-panel-2);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-md);
  padding: 0.85rem;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  display: none;
  z-index: 60;
  text-transform: none;
  letter-spacing: normal;
}
.ob-dropdown-panel.is-open { display: block; }
.ob-cta-demo-dropdown { width: 100%; }
.ob-cta-demo-dropdown .ob-hero-btn { width: 100%; justify-content: center; }
.ob-cta-demo-panel { left: 0; right: 0; width: auto; }

/* Project picker (current selection + separate Launch button, opens the
   same rich dropdown panel) used by the interactive-demo section */
.ob-demo-picker-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: rgba(5,11,22,0.42);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-full);
  overflow: hidden;
}
.ob-demo-picker-current {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--ob-text);
  font-family: var(--ob-font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.85rem 1rem;
  cursor: pointer;
}
.ob-demo-picker-chevron { flex-shrink: 0; opacity: 0.7; }
.ob-demo-picker-launch {
  background: var(--ob-text);
  color: var(--ob-bg);
  border: none;
  font-family: var(--ob-font);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.85rem 1.35rem;
  cursor: pointer;
  white-space: nowrap;
}
.ob-demo-picker-launch:hover { filter: brightness(1.15); }
button.ob-demo-menu-item {
  width: 100%;
  background: transparent;
  font-family: var(--ob-font);
  color: inherit;
  cursor: pointer;
}

/* Shared project-menu list styling — used inside both the nav pill's
   .ob-demo-dropdown-panel and the hero's .ob-dropdown-panel so every
   "Launch Demo" trigger on the page renders the same project list. */
.ob-demo-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ob-text-dim);
  padding: 0.3rem 0.5rem 0.65rem;
}
.ob-demo-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  border-radius: var(--ob-radius-sm);
  border: 1px solid transparent;
  text-align: left;
}
.ob-demo-menu-item:hover { background: rgba(255,255,255,0.06); }
.ob-demo-menu-item.is-active {
  background: var(--ob-green-dim);
  border-color: rgba(130, 227, 177, 0.35);
}
.ob-demo-menu-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ob-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ob-text);
  background: var(--ob-panel);
  border: 1px solid var(--ob-border-strong);
}
.ob-demo-menu-item.is-active .ob-demo-menu-badge {
  background: rgba(130, 227, 177, 0.18);
  border-color: var(--ob-green);
  color: var(--ob-green);
}
.ob-demo-menu-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ob-demo-menu-title { font-size: 0.875rem; font-weight: 700; color: var(--ob-text); }
.ob-demo-menu-sub { font-size: 0.75rem; color: var(--ob-text-dim); }
.ob-demo-menu-browse {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--ob-radius-sm);
  border: 1px solid rgba(130, 227, 177, 0.3);
  background: rgba(130, 227, 177, 0.07);
}
.ob-demo-menu-browse:hover { background: rgba(130, 227, 177, 0.12); }
.ob-demo-menu-browse-title { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ob-green); }
.ob-demo-menu-browse-sub { display: block; font-size: 0.75rem; color: var(--ob-text-dim); margin-top: 0.2rem; }

/* Inline select+launch control used in several sections (native <select>,
   no JS library — same guarded data-demo-launch pattern as the rest of the
   site's js/main.js) */
.ob-select-launch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(5,11,22,0.42);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-full);
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.ob-select-launch select {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ob-text);
  font-family: var(--ob-font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.85rem 1rem;
  cursor: pointer;
}
.ob-select-launch button {
  background: var(--ob-text);
  color: var(--ob-bg);
  border: none;
  font-family: var(--ob-font);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.85rem 1.35rem;
  cursor: pointer;
  white-space: nowrap;
}
.ob-select-launch button:hover { filter: brightness(1.15); }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.ob-hero { padding-top: 4.5rem; padding-bottom: 5rem; position: relative; }
.ob-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "top video" "bottom video";
  gap: 1.75rem;
  align-items: center;
}
/* Split into a top/bottom pair (instead of one ob-hero-copy column) so the
   video panel can slot in between them on mobile, right after the
   title/lead and above the Launch Demo button — see the mobile grid-area
   override below. */
.ob-hero-copy-top { grid-area: top; }
.ob-hero-panel { grid-area: video; }
.ob-hero-copy-bottom { grid-area: bottom; }
.ob-hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ob-hero-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 2.5rem;
}
.ob-hero-lockup { height: 48px; width: auto; position: relative; top: 23px; }
.ob-hero-wordmark span { font-size: 1.75rem; font-weight: 600; color: var(--ob-text-muted); }
.ob-hero h1 {
  font-size: clamp(2.4rem, 4.2vw, 4.0625rem);
  line-height: 1.23;
  font-weight: 800;
  margin: 0 0 1.25rem;
}
.ob-hero .ob-lead { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.58; color: #aab6d3; }
.ob-hero .ob-lead em { color: var(--ob-text); font-style: italic; }
.ob-hero-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 21px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.ob-trust-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.ob-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: #dfffef;
}
.ob-trust-item::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ob-green);
  box-shadow: 0 2px 14px rgba(126, 224, 176, 0.72);
}
/* Hero panel — a bordered frame around the product-vignette clip; the clip
   itself (recorded straight off the live site) already contains the
   "Sample Project / Apache 2.4.39 / Model ready" bar and everything else,
   so this wrapper adds nothing but the frame, background and padding. */
.ob-hero-panel {
  width: 100%;
  aspect-ratio: 641.33 / 621.33;
  background: #0b1426;
  border: 1px solid #3a496c;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}
.ob-hero-panel video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Why-trust unified panel
   --------------------------------------------------------------------------- */
.ob-proof-panel {
  background: var(--ob-panel);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-lg);
  padding: 3rem;
}
.ob-proof-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
p.ob-proof-eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.9375rem; font-weight: 600; color: var(--ob-blue-bright);
  margin: 0 0 1rem;
}
.ob-proof-eyebrow svg { flex-shrink: 0; }
.ob-proof-eyebrow-divider { width: 1px; align-self: stretch; background: var(--ob-border-strong); }
.ob-stat-list {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.ob-stat-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  flex: 1; padding: 0 1.5rem;
  border-left: 1px solid var(--ob-border);
}
.ob-stat-item:first-child { padding-left: 0; border-left: none; }
.ob-stat-icon { color: var(--ob-blue-bright); flex-shrink: 0; }
.ob-stat-num { font-size: 1.25rem; font-weight: 800; color: var(--ob-text); display: block; }
.ob-stat-num em { font-style: italic; }
.ob-stat-label { font-size: 0.875rem; color: var(--ob-text-muted); }
.ob-proof-divider { height: 1px; background: var(--ob-border); margin: 3.5rem 0 2.5rem; }
.ob-proof-logos-caption {
  text-align: center; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ob-text-dim);
  margin-bottom: 1.75rem;
}
p.ob-proof-logos-caption { margin-bottom: 1.75rem; }

/* ---------------------------------------------------------------------------
   Cards (generic dark bordered panel used across sections)
   --------------------------------------------------------------------------- */
.ob-card {
  background: var(--ob-panel);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-md);
  padding: 1.75rem;
}
.ob-card-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ob-text-dim); margin-bottom: 0.6rem; display: block;
}
.ob-deploy-item .ob-card-label { color: var(--ob-blue-bright); font-weight: 800; }
.ob-card h3, .ob-card h4 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.ob-card p { font-size: 0.875rem; }
.ob-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.ob-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ob-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* ---------------------------------------------------------------------------
   Interactive demo section
   --------------------------------------------------------------------------- */
.ob-demo-checklist {
  display: flex; align-items: center; justify-content: center;
  gap: 1.75rem; flex-wrap: wrap; margin: 1.125rem 0 3rem;
  font-size: 0.8125rem; color: var(--ob-text-muted);
}
ul.ob-demo-checklist { margin: 1.125rem 0 3rem; }
.ob-demo-checklist li { display: flex; align-items: center; gap: 0.5rem; }
.ob-demo-checklist li::before { content: "✓"; color: var(--ob-green); font-weight: 700; }
.ob-demo-video-panel {
  display: block;
  position: relative;
  width: 100%;
  background: var(--ob-panel);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-lg);
  overflow: hidden;
  aspect-ratio: 927 / 522;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.ob-demo-video-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------------
   How Onboard Works — stacked full-width numbered cards
   --------------------------------------------------------------------------- */
.ob-steps-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.ob-quote-callout {
  border-left: 3px solid var(--ob-blue);
  padding: 1rem 0 1rem 1.25rem;
  margin-top: 1.5rem;
  color: var(--ob-text-muted);
  font-size: 0.9375rem;
}
.ob-quote-callout strong { color: var(--ob-text); }
.ob-step-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--ob-panel);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-md);
  padding: 1.5rem;
}
.ob-step-row + .ob-step-row { margin-top: 1rem; }
.ob-step-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(77,163,224,0.1);
  border: 1px solid rgba(77,163,224,0.28);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ob-font-mono); font-weight: 800; font-size: 0.9375rem;
  color: var(--ob-blue-bright);
}
.ob-step-body { flex: 1; }
.ob-step-body h4 { font-size: 1rem; margin-bottom: 0.3rem; }
.ob-step-body p { font-size: 0.875rem; }
.ob-step-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--ob-radius-md);
  background: rgba(77,163,224,0.08);
  border: 1px solid rgba(77,163,224,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ob-blue-bright);
}
.ob-step-icon svg { width: 30px; height: 30px; }

/* ---------------------------------------------------------------------------
   AI section
   --------------------------------------------------------------------------- */
.ob-badge-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 3rem; }
.ob-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.75rem; font-weight: 600; color: var(--ob-text-muted);
  border: 1px solid var(--ob-border-strong); border-radius: var(--ob-radius-full);
  padding: 0.45rem 0.9rem;
}
.ob-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-green); }
.ob-ai-grid {
  display: grid;
  grid-template-columns: 1fr min(500px, 52%) 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  min-height: 696px;
}
.ob-ai-grid::before {
  content: "";
  position: absolute;
  inset: 30%;
  background: radial-gradient(circle, rgba(38,121,188,0.35), transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.ob-ai-grid .ob-card { position: relative; z-index: 1; align-self: start; }
.ob-ai-grid-video {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  border-radius: var(--ob-radius-md);
  overflow: hidden;
  border: 1px solid var(--ob-border-strong);
  background: var(--ob-panel);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ob-ai-grid-video video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------------------------------------------------------------------
   Documentation section — real product screenshot
   --------------------------------------------------------------------------- */
.ob-docs-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.ob-doc-cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.ob-docs-intro-card {
  background: var(--ob-panel);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.ob-docs-intro-card h4 { font-size: 1rem; margin-bottom: 0.35rem; }
.ob-docs-intro-card p { font-size: 0.8125rem; }
.ob-docs-shot {
  border-radius: var(--ob-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ob-border-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.ob-docs-shot img { display: block; width: 100%; }

/* ---------------------------------------------------------------------------
   Navigation section
   --------------------------------------------------------------------------- */
.ob-nav-section-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.ob-graph-panel {
  background: var(--ob-panel);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-lg);
  overflow: hidden;
}
.ob-graph-panel-bar { display: flex; gap: 0.4rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--ob-border); }
.ob-graph-panel-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.ob-graph-panel img { width: 100%; }
.ob-graph-caption { text-align: center; font-size: 0.8125rem; color: var(--ob-blue-bright); padding: 0.75rem; border-top: 1px solid var(--ob-border); }
.ob-mini-graph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------------------------------------------------------------------------
   Reports section — tab switcher (native buttons + vanilla JS, no library)
   --------------------------------------------------------------------------- */
.ob-report-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
/* Tabs and their screenshots are interleaved in the DOM (tab, shot, tab,
   shot, …) so that on mobile they can fall back to natural document order
   — an accordion where each shot appears directly under its own tab. At
   desktop/tablet widths, explicit grid placement pulls all five shots into
   one shared cell below the tab row instead (only .is-active is visible),
   matching the original tab-strip-plus-single-image layout. */
.ob-report-tabs > .ob-report-tab:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.ob-report-tabs > .ob-report-tab:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ob-report-tabs > .ob-report-tab:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.ob-report-tabs > .ob-report-tab:nth-of-type(4) { grid-column: 4; grid-row: 1; }
.ob-report-tabs > .ob-report-tab:nth-of-type(5) { grid-column: 5; grid-row: 1; }
.ob-report-tabs > img.ob-report-shot { grid-column: 1 / -1; grid-row: 2; }
.ob-report-tab {
  text-align: left;
  background: var(--ob-panel);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-md);
  padding: 1.25rem;
  cursor: pointer;
  font-family: var(--ob-font);
  color: inherit;
  transition: transform 0.15s var(--ob-ease), border-color 0.15s var(--ob-ease),
              background 0.15s var(--ob-ease), box-shadow 0.15s var(--ob-ease);
}
.ob-report-tab:hover {
  border-color: var(--ob-blue-bright);
  background: rgba(38,121,188,0.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
[data-theme="light"] .ob-report-tab:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); }
.ob-report-tab:focus-visible { outline: 2px solid var(--ob-blue-bright); outline-offset: 2px; }
.ob-report-tab.is-active { border-color: var(--ob-blue); background: rgba(38,121,188,0.08); }
.ob-report-tab.is-active:hover { border-color: var(--ob-blue-bright); background: rgba(38,121,188,0.12); }
.ob-report-tab .ob-card-label { color: var(--ob-blue-bright); }
.ob-report-tab h4 { font-size: 0.9375rem; margin-bottom: 0.35rem; }
.ob-report-tab p { font-size: 0.8125rem; }
img.ob-report-shot {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--ob-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ob-border-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  display: none;
}
img.ob-report-shot.is-active { display: block; }

/* ---------------------------------------------------------------------------
   Deployment section
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------------- */
.ob-pricing-card {
  display: flex; flex-direction: column; position: relative;
  background: var(--ob-panel); border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-lg); padding: 1.75rem;
}
.ob-pricing-card.is-featured { border-color: rgba(130,227,177,0.36); background: rgba(7,22,26,0.52); box-shadow: 0 20px 60px rgba(130,227,177,0.1); }
.ob-pricing-name { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ob-text-dim); }
.ob-pricing-projects { display: block; font-size: 1.0625rem; font-weight: 600; margin: 0.35rem 0 1.25rem; color: var(--ob-text); }
.ob-pricing-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ob-text); }
.ob-pricing-price span { font-size: 0.875rem; font-weight: 600; color: var(--ob-text-muted); margin-left: 0.25rem; }
.ob-pricing-features { display: flex; flex-direction: column; gap: 0.65rem; margin: 1.5rem 0; flex: 1; }
.ob-pricing-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--ob-text-muted); }
.ob-pricing-features li::before { content: "✓"; color: var(--ob-green); font-weight: 700; flex-shrink: 0; }
/* ---------------------------------------------------------------------------
   FAQ — native details/summary accordion
   --------------------------------------------------------------------------- */
.ob-faq-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; }
.ob-faq-checklist { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; font-size: 0.875rem; color: var(--ob-text-muted); }
ul.ob-faq-checklist { margin-top: 1.75rem; }
.ob-faq-checklist li { display: flex; align-items: flex-start; gap: 0.5rem; }
.ob-faq-checklist li::before { content: "✓"; color: var(--ob-green); font-weight: 700; }
.ob-faq-item { border-bottom: 1px solid var(--ob-border); }
.ob-faq-item summary {
  cursor: pointer; padding: 1.15rem 0; font-size: 0.9375rem; font-weight: 600;
  color: var(--ob-text); list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.ob-faq-item summary::-webkit-details-marker { display: none; }
.ob-faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 1.25rem; color: var(--ob-text-dim); transition: transform 0.2s var(--ob-ease); }
.ob-faq-item[open] summary::after { transform: rotate(45deg); }
.ob-faq-item p { padding: 0 0 1.15rem; margin: 0; max-width: 60ch; font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   Final CTA
   --------------------------------------------------------------------------- */
.ob-cta-card h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ob-text-dim); margin-bottom: 0.75rem; }
.ob-cta-card h3 { font-size: 1.1875rem; margin-bottom: 1.25rem; }
.ob-cta-card.is-featured { border-color: rgba(130,227,177,0.34); background: rgba(7,22,26,0.46); box-shadow: 0 20px 60px rgba(130,227,177,0.1); }
.ob-cta-card.is-featured h4 { color: var(--ob-green); }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.ob-footer {
  border-top: 1px solid var(--ob-border); padding-top: 4rem; padding-bottom: 2rem;
  position: relative; z-index: 1; background: var(--ob-bg);
}
.ob-footer-top { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 3rem; margin-bottom: 3rem; }
.ob-footer-col h5, .ob-footer-form h5 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ob-text-dim); margin-bottom: 1rem; }
.ob-footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.ob-footer-col a { font-size: 0.875rem; color: var(--ob-text-muted); }
.ob-footer-col a:hover { color: var(--ob-text); }

/* ---------------------------------------------------------------------------
   Inline email-capture forms (pricing open-source note + footer subscribe) —
   presentational only: no backend once Webflow forms go away, so submit just
   shows the same confirmation copy the real site's form displays.
   --------------------------------------------------------------------------- */
/* Same shape as the sitewide .inline-form-row: the field takes the room and
   the button keeps its label, dropping under the field on screens too
   narrow for both (under ~370px the row used to push the page sideways). */
.ob-inline-form-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ob-inline-form-row input {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ob-text);
  background: var(--ob-panel-2);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-sm);
  padding: 0.65rem 0.9rem;
}
.ob-inline-form-row input::placeholder { color: var(--ob-text-dim); }
.ob-inline-form-row input:focus { outline: 2px solid var(--ob-blue-bright); outline-offset: 1px; }
.ob-inline-form-row button {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--ob-blue);
  border: none;
  border-radius: var(--ob-radius-sm);
  padding: 0.65rem 1.1rem;
  cursor: pointer;
}
.ob-inline-form-row button:hover { background: var(--ob-blue-bright); }
.ob-inline-form-status { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ob-green); }
.ob-pricing-form {
  max-width: 640px; margin: 2.5rem auto 0; text-align: center;
  background: var(--ob-panel); border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-lg); padding: 2rem;
}
.ob-pricing-form h4 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.ob-pricing-form p { margin-bottom: 1.25rem; }
.ob-pricing-form .ob-inline-form-row { max-width: 420px; margin: 0 auto; }
.ob-footer-form .ob-inline-form-row input { background: var(--ob-bg-soft); }
.ob-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 2rem; border-top: 1px solid var(--ob-border);
  font-size: 0.8125rem; color: var(--ob-text-dim); flex-wrap: wrap; gap: 1rem;
}
.ob-footer-social { display: flex; gap: 0.9rem; }
.ob-footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ob-panel-2); border: 1px solid var(--ob-border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--ob-text-muted);
}
.ob-footer-social a:hover { color: var(--ob-text); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ob-nav-links, .ob-nav-back, .ob-nav-divider { display: none; }
  .ob-nav-menu-btn { display: flex; }
  .ob-nav-demo-split { display: none; }
  .ob-proof-top, .ob-steps-wrap, .ob-docs-wrap, .ob-nav-section-wrap, .ob-faq-wrap, .ob-header-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ob-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "video" "bottom"; gap: 2rem; }
  .ob-stat-list { flex-wrap: wrap; gap: 1.5rem; }
  .ob-stat-item { flex: 1 1 40%; border-left: none; padding-left: 0; }
  .ob-header-split { align-items: start !important; }
  .ob-hero-copy { align-items: center; text-align: center; }
  .ob-hero-wordmark, .ob-hero-cta, .ob-trust-row { justify-content: center; }
  .ob-ai-grid { grid-template-columns: 1fr; min-height: 0; }
  .ob-ai-grid .ob-card { grid-column: 1 !important; grid-row: auto !important; }
  .ob-grid-2, .ob-grid-3, .ob-grid-4 { grid-template-columns: 1fr; }
  .ob-report-tabs { grid-template-columns: repeat(2, 1fr); }
  .ob-report-tabs > .ob-report-tab:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .ob-report-tabs > .ob-report-tab:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .ob-report-tabs > .ob-report-tab:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  .ob-report-tabs > .ob-report-tab:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  .ob-report-tabs > .ob-report-tab:nth-of-type(5) { grid-column: 1; grid-row: 3; }
  .ob-report-tabs > img.ob-report-shot { grid-column: 1 / -1; grid-row: 4; }
  .ob-ai-grid-video { display: none; }
  .ob-footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .ob-section { padding-top: 4rem; padding-bottom: 4rem; }
  .ob-step-row { flex-wrap: wrap; }
}
/* ---------------------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------------------- */
.ob-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ob-ease), transform 0.6s var(--ob-ease); }
.ob-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ob-reveal { opacity: 1; transform: none; transition: none; }
  .ob-report-tab { transition: none; }
  .ob-report-tab:hover { transform: none; }
}

@media (max-width: 640px) {
  /* Accordion mode: each report's screenshot falls back to natural
     document order right after its own tab, instead of one shared image
     sitting far below all five stacked tabs. The explicit nth-of-type
     resets (matching the specificity of the tablet placement rules above)
     are needed because a plain grouped selector here would lose to those
     more specific rules despite coming later in the file. */
  .ob-report-tabs { grid-template-columns: 1fr; }
  .ob-report-tabs > .ob-report-tab:nth-of-type(1),
  .ob-report-tabs > .ob-report-tab:nth-of-type(2),
  .ob-report-tabs > .ob-report-tab:nth-of-type(3),
  .ob-report-tabs > .ob-report-tab:nth-of-type(4),
  .ob-report-tabs > .ob-report-tab:nth-of-type(5) { grid-column: 1; grid-row: auto; }
  .ob-report-tabs > img.ob-report-shot { grid-column: 1; grid-row: auto; margin-bottom: 0.5rem; }
  .ob-hero-cta { flex-direction: column; align-items: stretch; align-self: stretch; width: 100%; }
  .ob-hero-demo-dropdown, .ob-hero-btn { width: 100%; }
  .ob-hero-btn { justify-content: center; }
  .ob-dropdown-panel { left: 0; right: 0; width: auto; }
  .ob-demo-dropdown-panel { right: -0.75rem; width: min(360px, calc(100vw - 1.5rem)); }
  .ob-select-launch { width: 100%; justify-content: space-between; }
  .ob-select-launch select { flex: 1; }
}

@media (max-width: 560px) {
  .ob-nav-right .ob-btn-outline { display: none; }
  .ob-nav-demo-copy { display: none; }
  .ob-nav-demo { padding: 0.5rem; grid-template-columns: auto; }
  /* Once the trigger shrinks to an icon-only button it's too small/narrow
     to anchor a ~360px panel against, so hand containment to .ob-nav
     (full-width, sticky) instead of the tiny .ob-demo-dropdown wrapper. */
  .ob-demo-dropdown { position: static; }
  .ob-demo-dropdown-panel { right: 1.75rem; left: 1.75rem; width: auto; }
}

/* ---------------------------------------------------------------------------
   Touch target sizes (added 2026-10-09)

   On a 320px screen the audit found 503 non-inline links and buttons under
   40px tall. These are the shared ones. 44px is the usual floor; where an
   element's painted size is deliberate (the logo, the social circles) the
   rule grows the hit area rather than the artwork, except where the artwork
   IS the hit area and growing it is harmless.

   Inline text links are left alone on purpose — the target-size guidance
   exempts a link inside a run of text, and padding them out would break the
   line spacing of the paragraphs they sit in.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ob-nav-menu-btn { min-height: 44px; min-width: 44px; }
  .ob-hero-btn { min-height: 44px; }
  .ob-nav-brand a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* -----------------------------------------------------------------------
   Pricing quote form
   The tier cards answer "what does it cost"; this answers "what would it
   cost us", and it is the same form the pricing and Understand pages use,
   posting the same payload to sendemail.php. It needs far more room than the
   one-field capture it replaced, so it gets its own two-column row beneath
   the cards rather than sitting under them full width: copy and the
   call/email alternatives on the left, the form panel on the right.

   The controls are styled from the --ob-* tokens rather than reusing the
   sitewide .input, so the form reads as part of this page. Field names and
   markup still mirror the Understand form, so the two stay easy to diff.
   ----------------------------------------------------------------------- */
.ob-quote-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.5rem 3.5rem;
  align-items: start;
  margin-top: 3rem;
}
.ob-quote-title { margin: 0 0 0.9rem; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
/* Capped for line length: when the row stacks, this column is the full
   section width and the lead ran to ~105 characters. */
.ob-quote-lead { margin: 0 0 1.4rem; max-width: 60ch; color: var(--ob-text-muted); line-height: 1.7; }
.ob-quote-points { margin: 0 0 1.6rem; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.ob-quote-points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ob-text-muted);
}
.ob-quote-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--ob-green);
  border-bottom: 2px solid var(--ob-green);
  transform: rotate(-45deg);
}
/* "Rather talk it through first?" is a different offer from the bullet list
   above it -- skip the form, talk to a person -- so it is boxed rather than
   left as loose paragraphs, which read as three more list items. The fill is
   --ob-bg-soft, which sits *below* --ob-panel in both themes: the aside reads
   as recessed and secondary, where the form panel on the right reads as
   raised and primary. */
.ob-quote-aside {
  margin-top: 2rem;
  padding: 1.3rem 1.4rem;
  background: var(--ob-bg-soft);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-md);
}
.ob-quote-aside-title {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ob-text);
}
.ob-quote-aside .ob-quote-alt { margin-bottom: 0; }
.ob-quote-aside-contact {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ob-text-muted);
}
.ob-quote-aside-contact a { color: var(--ob-blue-bright); }
.ob-quote-alt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
  padding: 0.6rem 1.1rem;
  /* 44px is the tap-target floor the rest of the site uses below 860px; the
     padding alone left this at 43. Set unconditionally -- the 1px is
     invisible on desktop and it saves a breakpoint. */
  min-height: 44px;
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-full);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ob-text);
  transition: border-color 0.15s var(--ob-ease), background-color 0.15s var(--ob-ease);
}
.ob-quote-alt { background: var(--ob-panel); }
.ob-quote-alt:hover { border-color: var(--ob-blue-bright); background: rgba(77, 163, 224, 0.14); }
/* An inline SVG in a flex row stretches to fill the line unless it is sized;
   the same trap the pricing page's "Request a meeting" button hit. */
.ob-quote-alt svg { width: 15px; height: 15px; flex-shrink: 0; }

.ob-quote-panel {
  background: var(--ob-panel);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  min-width: 0;
}
.ob-quote-group { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.ob-quote-group:last-of-type { margin-bottom: 1.25rem; }
.ob-quote-legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-text-dim);
}
.ob-quote-grid {
  display: grid;
  /* minmax(0,1fr), not 1fr: the country select's min-content comes from its
     longest option ("South Georgia and the South Sandwich Islands", ~274px),
     and a bare 1fr cannot shrink below it, so the row would overflow a narrow
     screen even though it looks fine at 390. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.ob-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ob-field label { font-size: 0.8125rem; font-weight: 600; color: var(--ob-text-muted); }
.ob-field input,
.ob-field select,
.ob-field textarea {
  font: inherit;
  font-size: 0.9375rem;
  width: 100%;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  color: var(--ob-text);
  background: var(--ob-bg-soft);
  border: 1px solid var(--ob-border-strong);
  border-radius: var(--ob-radius-sm);
  transition: border-color 0.15s var(--ob-ease);
}
.ob-field textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.ob-field input::placeholder, .ob-field textarea::placeholder { color: var(--ob-text-dim); }
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus {
  outline: 2px solid var(--ob-blue-bright);
  outline-offset: 1px;
  border-color: var(--ob-blue-bright);
}
.ob-quote-actions { margin-top: 1.25rem; }
.ob-quote-submit {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  width: 100%;
  padding: 0.8rem 1.4rem;
  color: #fff;
  background: var(--ob-blue);
  border: 0;
  border-radius: var(--ob-radius-sm);
  cursor: pointer;
  transition: background-color 0.15s var(--ob-ease);
}
.ob-quote-submit:hover:not(:disabled) { background: var(--ob-blue-bright); }
.ob-quote-submit:disabled { opacity: 0.65; cursor: default; }
.ob-quote-consent { margin: 0.9rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--ob-text-dim); }
.ob-quote-consent a { color: var(--ob-blue-bright); }
.ob-quote-status { margin: 0.9rem 0 0; font-size: 0.875rem; line-height: 1.6; }
.ob-quote-status[data-state="wait"]    { color: var(--ob-text-muted); }
.ob-quote-status[data-state="success"] { color: var(--ob-green); }
.ob-quote-status[data-state="error"]   { color: #ff9b9b; }
/* On success the handler adds .is-sent; drop the fields and keep the note. */
.ob-quote-form.is-sent .ob-quote-group,
.ob-quote-form.is-sent .ob-quote-actions,
.ob-quote-form.is-sent .ob-quote-consent { display: none; }

@media (max-width: 1024px) {
  /* Stacked, the row would otherwise run the full section width and give the
     form 976px-wide fields. Centred and capped, the way the one-field capture
     this replaced was centred under the tier cards. */
  .ob-quote-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 560px) {
  .ob-quote-grid { grid-template-columns: minmax(0, 1fr); }
}
/* #ff9b9b is picked for a dark panel; on the white light-theme panel it is
   too pale to read, so the light theme gets a darker red. */
[data-theme="light"] .ob-quote-status[data-state="error"] { color: #c0352b; }