/* ─── RESET & BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Exact Figma tokens */
  --bg:              #E4EBF3;
  --surface:         #ffffff;
  --border:          #d0dfe7;
  --border-muted:    rgba(80, 105, 121, 0.5);
  --row-label-bg:    #e4ebf3;

  --text:            #0a0a0a;
  --text-muted:      #506979;
  --text-faint:      #849dac;
  --text-mid:        #425562;

  --mobiah-blue:     #2e61ad;

  /* Card backgrounds */
  --card-bg:         #EBF0F6;
  --card-bg-hover:   #F1F5F9;
  --btn-bg:          #F1F5F9;
  --btn-bg-hover:    #F8FAFC;
  --nav-bg:          #E4EBF3CC;

  /* Accent palette */
  --orange:          #ff7f32;
  --orange-bg:       rgba(255, 127, 50, 0.12);
  --orange-text:     #ed6a17;
  --blue-border:     #2e61ad;
  --blue-active:     #3b60a7;
  --pink-border:     #ed207a;

  /* Typography — Lexend */
  --font: 'Lexend', system-ui, sans-serif;
  --container-w: 1280px;
  --container-pad: 80px;

  /* ── Design tokens ──────────────────────────────────────────────────────
     html is 16px, so 1rem = 16px throughout. Every font-size, line-height,
     letter-spacing, padding, margin, gap and border-radius in this file
     resolves to one of the steps below. If a value you need isn't here, add a
     step deliberately — don't inline a one-off. Sub-4px values (hairlines,
     gradient-border thickness) and blur/inset offsets are intentionally NOT
     tokenized; they're construction, not spacing.                          */

  /* Type scale */
  --fs-2xs:  0.625rem;   /* 10 */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.375rem;   /* 22 — the dominant original value (7 uses vs one at 24) */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2rem;       /* 32 */
  --fs-4xl:  2.25rem;    /* 36 */
  --fs-5xl:  2.75rem;    /* 44 */
  --fs-6xl:  3.25rem;    /* 52 */
  --fs-7xl:  4rem;       /* 64 */
  --fs-8xl:  4.75rem;    /* 76 */

  /* Line height — unitless, so it scales with font-size */
  --lh-none:     1;
  --lh-display:  1.05;   /* h1 / h2 / hero */
  --lh-heading:  1.15;   /* card titles */
  --lh-snug:     1.25;   /* Lexend's ink descends to ~lh/2+46 at 76px, so a clipped
                            box needs >=1.211 to clear a "g". 1.2 cut it off. Any
                            overflow:hidden text box must use this or looser. */
  --lh-tight:    1.3;
  --lh-body:     1.5;    /* default running text */
  --lh-relaxed:  1.65;   /* small caps, long-form */

  /* Letter spacing — em, so tracking scales with type */
  --ls-tighter: -0.03em; /* display headings */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.06em; /* uppercase labels */

  /* Spacing — 4px grid */
  --sp-0-5: 0.125rem;    /*  2 */
  --sp-1:   0.25rem;     /*  4 */
  --sp-1-5: 0.375rem;    /*  6 */
  --sp-2:   0.5rem;      /*  8 */
  --sp-3:   0.75rem;     /* 12 */
  --sp-4:   1rem;        /* 16 */
  --sp-5:   1.25rem;     /* 20 */
  --sp-6:   1.5rem;      /* 24 */
  --sp-7:   1.75rem;     /* 28 */
  --sp-8:   2rem;        /* 32 */
  --sp-9:   2.25rem;     /* 36 */
  --sp-10:  2.5rem;      /* 40 */
  --sp-12:  3rem;        /* 48 */
  --sp-14:  3.5rem;      /* 56 */
  --sp-15:  3.75rem;     /* 60 */
  --sp-18:  4.5rem;      /* 72 */
  --sp-20:  5rem;        /* 80 */
  --sp-25:  6.25rem;     /* 100 */

  /* Radius */
  --r-xs:   0.25rem;     /*  4 */
  --r-sm:   0.5rem;      /*  8 */
  --r-md:   0.75rem;     /* 12 */
  --r-lg:   1rem;        /* 16 */
  --r-xl:   1.25rem;     /* 20 */
  --r-2xl:  1.5rem;      /* 24 */
  --r-3xl:  2rem;        /* 32 */
  --r-pill: 999px;       /* sentinel, not a measurement */
}

html {
  /* The page background lives on html too, and color-scheme follows the theme:
     Safari on iOS 26 ignores theme-color and tints the status bar from the page
     itself, so in dark mode it had been showing the light default. */
  background: var(--bg);
  color-scheme: light;
  /* Glows and decorative frames reach past the viewport by design. clip (not
     hidden) stops the sideways scroll without breaking the sticky nav; iOS
     ignores overflow on body alone. */
  overflow-x: clip;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

#partners, #bridge, #compare, #pricing, #products, #about, #faqs, #contact {
  scroll-margin-top: 88px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0a0a0a;
  --surface:       #161b22;
  --border:        rgba(101, 129, 146, 0.2);
  --border-muted:  rgba(130, 160, 180, 0.4);
  --text:          #e8edf0;
  --text-muted:    #7a9ab0;
  --text-faint:    #4a6070;
  --text-mid:      #6a8090;
  --row-label-bg:  #1e2b35;

  --card-bg:       #0a0a0a;
  --card-bg-hover: #0d1117;
  --btn-bg:        #0a0a0a;
  --btn-bg-hover:  #0d1117;
  --nav-bg:        #0a0a0a;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
  /* No overflow here: html clips sideways overflow. Setting it on body as well
     made body its own scroll container, which unstuck the sticky nav. */
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
img { display: block; max-width: 100%; }

/* Safari on iOS 26 ignores theme-color and tints the status bar from a fixed
   element at the top edge. Same recipe as Entropy: the strip starts 8px above
   the viewport and sits above everything, in the page colour, so only 8px is
   on screen and it matches the nav beneath it. app.js nudges its height after
   load and on every theme change, because Safari only re-samples on layout. */
.safari-tint {
  position: fixed;
  top: -8px;
  left: 0;
  width: 100%;
  height: 16px;
  background: var(--bg);
  z-index: 3000;
  pointer-events: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ─── LAYOUT ──────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.site-header { display: contents; }

/* ─── NAV ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav__flame {
  display: block;
  width: 27px;
  height: 30px;
  flex-shrink: 0;
}

.nav__wordmark {
  display: block;
  width: 64px;
  height: 22px;
  flex-shrink: 0;
}

/* Dark mode: invert the wordmark (black PNG → white) */
[data-theme="dark"] .nav__wordmark,
[data-theme="dark"] .footer__wordmark {
  filter: invert(1);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-9);
  margin-left: auto;
}

.nav__links a {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--text); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav__theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s;
}
.nav__theme-toggle:hover { background: rgba(80,105,121,0.1); }
.nav__theme-toggle svg { width: 16px; height: 16px; }

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: background 0.15s;
}
.nav__hamburger:hover { background: rgba(80,105,121,0.1); }
.nav__hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__drawer {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px var(--container-pad) 16px;
}
.nav__drawer[hidden] { display: none; }
.nav__drawer-links { display: flex; flex-direction: column; }
.nav__drawer-links a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.nav__drawer-links li:last-child a { border-bottom: none; }
.nav__drawer-links a:hover { color: var(--text); }

/* Omniview product nav: the product links sit in the bar, and the hamburger
   (always shown) holds the main Mobiah site. On desktop the drawer is a small
   dropdown under the hamburger rather than a full-width sheet. */
.nav--product .nav__hamburger { display: flex; }
/* The product nav carries more links; tighten the gaps before they overflow. */
@media (max-width: 1160px) {
  .nav--product .nav__inner { gap: var(--sp-6); }
  .nav--product .nav__links { gap: var(--sp-6); }
}
.nav__drawer-label {
  padding: var(--sp-3) 0 var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (min-width: 861px) {
  .nav--product .nav__drawer {
    position: absolute;
    top: calc(100% - var(--sp-2));
    right: max(var(--container-pad), calc((100vw - var(--container-w)) / 2 + var(--container-pad)));
    width: 220px;
    padding: var(--sp-1) var(--sp-4) var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 16px 40px rgba(20, 45, 90, 0.14);
  }
  .nav--product .nav__drawer-product { display: none; }
  .nav--product .nav__drawer-links a { padding: var(--sp-2) 0; font-size: var(--fs-sm); }
}

.nav__cta {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  transition: background 0.15s;
}
.nav__cta:hover { background: rgba(80,105,121,0.07); }

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  padding-top: var(--sp-20);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

/* Orange pill (hero only) */
.pill--orange {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--orange-bg);
  border-radius: var(--r-pill);
  padding: var(--sp-1-5) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--orange-text);
  letter-spacing: var(--ls-wide);
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 127, 50, 0.2);
  flex-shrink: 0;
}

/* Certification status pill — sits under a section header, so it needs the
   top margin the hero eyebrow gets from its own wrapper. */
.security__badge { margin-top: var(--sp-1-5); }

.hero__eyebrow-suffix {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hero__heading {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-8xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  text-align: center;
  margin-bottom: var(--sp-6);
}

.hero__rotator {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  height: calc(var(--lh-snug) * 1em);   /* must equal the item's line box */
  color: var(--text-muted);
}
.hero__rotator-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.hero__rotator-item {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--lh-snug);
  white-space: nowrap;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__rotator-track {
    transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  }
}

.hero__body {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-xl);
  line-height: var(--lh-body);
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--sp-10);
}
.hero__body strong {
  font-weight: 400;
  color: var(--text);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-15);
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* "Build with us" — gradient border wrapper + animated blob fill */
.btn--build-wrap {
  display: inline-flex;
  position: relative;
  border-radius: var(--r-pill);
  padding: 1px;
  background: linear-gradient(to right, #2E61AD, #E84C91, #F65D22);
}

.btn--build {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-7);
  position: relative;
  z-index: 1;
  transition: background 0.2s ease;
}
.btn--build:hover { background: var(--btn-bg-hover); }

/* Blob glow — behind the button, always on, subtle */
.btn-glow {
  position: absolute;
  inset: -10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: blur(14px);
  opacity: 0.35;
  z-index: 0;
}
.btn-glow__a,
.btn-glow__b {
  position: absolute;
  /* At least as wide as the glow box, or a long button's ends go unlit. */
  width: max(200px, 100%);
  height: 200px;
  flex-shrink: 0;
}
.btn-glow__a {
  background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(46,97,173,0.9) 0%, transparent 65%);
  animation: fw-spin 6s linear infinite;
}
.btn-glow__b {
  background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(232,76,145,0.7) 0%, transparent 60%);
  animation: fw-spin 12s linear infinite reverse;
}

[data-theme="dark"] .btn-glow {opacity: 0.75;}

/* "Buy ours" — ghost */
.btn--buy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-7);
  transition: opacity 0.15s;
}
.btn--buy:hover { opacity: 0.75; }

.btn__arrow { width: 16px; height: 16px; flex-shrink: 0; }

.hero__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-faint);
}

/* ─── FOUR-LAYER FRAMEWORK ───────────────────────────────────────────────── */
.framework {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: 0;
}

/* Wrapper is the grid item — glow lives here, card sits on top */
.framework__wrap {
  position: relative;
  border-radius: var(--r-xl);
}

.framework__card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  position: relative;
  z-index: 1;
  height: 100%;          /* grid stretches the wrap; the card must fill it */
  transition: background 0.4s ease;
}
.framework__wrap:is(:hover, .is-pressed) .framework__card { background: var(--card-bg-hover); }

/* ── Conic glow — behind the card, bleeds around edges ── */
.framework__glow {
  position: absolute;
  inset: -8px;
  overflow: hidden;
  border-radius: var(--r-2xl);
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.framework__wrap:is(:hover, .is-pressed) .framework__glow { opacity: 0.6; }

.framework__glow-spin,
.framework__glow-mask {
  position: absolute;
  width: 500px;
  height: 500px;
  flex-shrink: 0;
}

/* Two blobs orbiting at different speeds — primary CW, secondary CCW */
.framework__glow-spin { animation: fw-spin 6s linear infinite; }
.framework__glow-mask { animation: fw-spin 12s linear infinite reverse; }

@keyframes fw-spin { to { transform: rotate(360deg); } }

/* Primary blob — off-center radial, upper area */
[data-fw="0"] .framework__glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(59,96,167,0.9) 0%, transparent 65%); }
[data-fw="1"] .framework__glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(217,57,120,0.9) 0%, transparent 65%); }
[data-fw="2"] .framework__glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-fw="3"] .framework__glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(69,196,206,0.9) 0%, transparent 65%); }

/* Secondary blob — off-center radial, lower area, complementary color */
[data-fw="0"] .framework__glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(69,196,206,0.7) 0%, transparent 60%); }
[data-fw="1"] .framework__glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(82,93,164,0.7) 0%, transparent 60%); }
[data-fw="2"] .framework__glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(220,60,26,0.7) 0%, transparent 60%); }
[data-fw="3"] .framework__glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(0,156,143,0.7) 0%, transparent 60%); }

.framework__icon-wrap {
  width: 36px;
  height: 36px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-1);
  flex-shrink: 0;
  color: var(--text-faint);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.framework__icon-wrap svg { display: block; flex-shrink: 0; }

/* Per-card hover icon colors */
.framework__wrap:is(:hover, .is-pressed)[data-fw="0"] .framework__icon-wrap { color: #2e61ad; border-color: #4a7bc6; }
.framework__wrap:is(:hover, .is-pressed)[data-fw="1"] .framework__icon-wrap { color: #d93978; border-color: #f175b0; }
.framework__wrap:is(:hover, .is-pressed)[data-fw="2"] .framework__icon-wrap { color: #eeab42; border-color: #eec26a; }
.framework__wrap:is(:hover, .is-pressed)[data-fw="3"] .framework__icon-wrap { color: #45c4ce; border-color: #81d0df; }

/* ─── Generic card blob wrapper ──────────────────────────────────────────── */
.card-wrap {
  position: relative;
  border-radius: var(--r-lg);
}

.card-glow {
  position: absolute;
  inset: -8px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 0;
  pointer-events: none;
}

.card-wrap:is(:hover, .is-pressed) .card-glow { opacity: 0.6; }

.card-glow-spin,
.card-glow-mask {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
}

.card-glow-spin { animation: fw-spin 6s linear infinite; }
.card-glow-mask { animation: fw-spin 12s linear infinite reverse; }

/* Bridge card blob integration */
.bridge__cols .card-wrap {
  grid-row: 1 / 9;
  display: grid;
  grid-template-rows: subgrid;
  position: relative;
}

.bridge__cols .bridge__card {
  grid-row: 1 / 9;
  display: grid;
  grid-template-rows: subgrid;
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background 0.4s ease;
}

.bridge__cols .card-wrap:is(:hover, .is-pressed) .bridge__card { background: var(--card-bg-hover); }

/* HWW card blob integration */
.hww__cards .hww__card {
  background: var(--card-bg);
  z-index: 1;
  transition: background 0.4s ease;
}
.hww__cards .card-wrap:is(:hover, .is-pressed) .hww__card { background: var(--card-bg-hover); }

/* CTA card blob integration */
.contact .card-wrap {
  border-radius: var(--r-2xl);
  padding: 1px;
  background: linear-gradient(135deg, #eeab42, #d93978);
}
.contact .card-glow {
  border-radius: var(--r-3xl);
  opacity: 0.35;
}
.contact .card-wrap:is(:hover, .is-pressed) .card-glow { opacity: 0.55; }
.contact .cta__inner {
  background: var(--card-bg);
  border: none;
  position: relative;
  z-index: 1;
  transition: background 0.4s ease;
}
.contact .card-wrap:is(:hover, .is-pressed) .cta__inner { background: var(--card-bg-hover); }

/* Card blob color variants */
[data-card="marketing"] .card-glow-spin  { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-card="marketing"] .card-glow-mask  { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(220,60,26,0.7) 0%, transparent 60%); }

[data-card="sales"] .card-glow-spin      { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(0,156,143,0.9) 0%, transparent 65%); animation-delay: -3.7s; }
[data-card="sales"] .card-glow-mask      { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(82,93,164,0.7) 0%, transparent 60%); animation-delay: -5.1s; }

[data-card="architect"] .card-glow-spin  { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(82,93,164,0.9) 0%, transparent 65%); }
[data-card="architect"] .card-glow-mask  { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(69,196,206,0.7) 0%, transparent 60%); }

[data-card="operate"] .card-glow-spin    { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-card="operate"] .card-glow-mask    { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(220,60,26,0.7) 0%, transparent 60%); }

[data-card="augment"] .card-glow-spin    { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(0,156,143,0.9) 0%, transparent 65%); }
[data-card="augment"] .card-glow-mask    { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(82,93,164,0.7) 0%, transparent 60%); }

[data-card="letstalk"] .card-glow-spin   { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-card="letstalk"] .card-glow-mask   { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }

[data-card="sdrplus"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
[data-card="sdrplus"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }

[data-card="access"] .card-glow-spin     { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(217,57,120,0.9) 0%, transparent 65%); }
[data-card="access"] .card-glow-mask     { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(241,90,41,0.7) 0%, transparent 60%); }

[data-card="analytics"] .card-glow-spin  { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(15,110,86,0.9) 0%, transparent 65%); }
[data-card="analytics"] .card-glow-mask  { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(69,196,206,0.7) 0%, transparent 60%); }

[data-card="omniview"] .card-glow-spin   { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(24,95,165,0.9) 0%, transparent 65%); }
[data-card="omniview"] .card-glow-mask   { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(55,138,221,0.7) 0%, transparent 60%); }
[data-card="omniview hero"] .card-glow-spin   { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-card="omniview hero"] .card-glow-mask   { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }

[data-card="luke"] .card-glow-spin    { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-card="luke"] .card-glow-mask    { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(0,156,80,0.7) 0%, transparent 60%); }

[data-card="chris"] .card-glow-spin   { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
[data-card="chris"] .card-glow-mask   { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }

[data-card="michael"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
[data-card="michael"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(59,96,167,0.7) 0%, transparent 60%); }

.framework__name {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  padding-top: var(--sp-1-5);
}

.framework__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.framework__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  padding-top: var(--sp-1-5);
}
.framework__bullets li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.framework__bullets li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

/* ─── TRUST BAR ──────────────────────────────────────────────────────────── */
#partners { padding: var(--sp-12) 0; }

.trust-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: 0;
  margin: 0;
}

.trust-bar__label {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Marquee scroll container — bleeds full viewport width */
.trust-bar__logos {
  width: 100vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5vw, black calc(100% - 5vw), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5vw, black calc(100% - 5vw), transparent 100%);
}
.trust-bar__track {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  width: max-content;
  margin: 0 auto;
  will-change: transform;
}

/* Fixed height + width:auto — browser uses viewBox aspect ratio to scale width */
.trust-logo {
    position:relative;
  display: block;
  height: 2rem;
  width: auto;
  flex-shrink: 0;
  opacity: 0.7;
  filter: brightness(0);
  transition: opacity 0.15s;
}
.trust-logo:hover { opacity: 1; }
[data-theme="dark"] .trust-logo { filter: brightness(0) invert(1); }

/* Per-logo height overrides — adjust individually as needed */
.trust-logo--linkedin         { height: 2rem; }
.trust-logo--salesforce       { height: 5rem; }
.trust-logo--google-analytics { height: 3rem; }
.trust-logo--gsc              { height: 1.5rem; }
.trust-logo--slack            { height: 2.5rem; }
.trust-logo--hubspot          { height: 2rem; }
.trust-logo--zoominfo         { height: 3rem; }
.trust-logo--apollo           { height: 2rem; }
.trust-logo--6sense           { top:-5px}
.trust-logo--demandbase       { height: 1.4rem; }
.trust-logo--bombora          { height: 2rem; }
.trust-logo--instantly        { height: 2rem; }
.trust-logo--leadfeeder       { height: 3rem; }
.trust-logo--factors          { height: 2.5rem; }
.trust-logo--snitcher         { height: 2rem; }
.trust-logo--valley           { height: 2rem; }

/* ─── SECTION HELPERS ─────────────────────────────────────────────────────── */
.section { padding: var(--sp-25) 0; }

/* Section eyebrow — bordered pill */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: var(--sp-1-5) var(--sp-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

.section-hdr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-14);
  text-align: center;
}

.h2 {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-6xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  text-align: center;
  padding-top: var(--sp-1-5);
}
.faqs__h2 {
  text-align: left;
  font-size: var(--fs-5xl);
  line-height: var(--lh-display);
  padding-top: var(--sp-3);
}
.cta__h2 {
  text-align: left;
}

/* Product color variants */
.product__bar-fill { width: var(--w, 0%); }
.product__chart-bar { height: var(--h, 0%); }

.product__item--orange .product__bar-fill { background: #F15A29; }
.product__item--orange .product__dot { background: #F15A29; }
.product__item--orange .product__chart-bar { background: #F15A29; }
.product__item--orange .product__chart-bar:nth-child(1) { opacity: 0.4; }
.product__item--orange .product__chart-bar:nth-child(2) { opacity: 0.5; }
.product__item--orange .product__chart-bar:nth-child(3) { opacity: 0.6; }
.product__item--orange .product__chart-bar:nth-child(4) { opacity: 0.7; }
.product__item--orange .product__chart-bar:nth-child(5) { opacity: 0.8; }
.product__item--orange .product__chart-bar:nth-child(6) { opacity: 0.9; }
.product__item--orange .product__chart-bar:nth-child(7) { opacity: 1; }

.product__item--green .product__bar-fill { background: #1D9E75; }
.product__item--green .product__dot { background: #0F6E56; }

.product__item--blue .product__bar-fill { background: #378ADD; }
.product__item--blue .product__dot { background: #185FA5; }

.products__hdr { margin-bottom: var(--sp-10); }

.eyebrow-pill--spaced { margin-bottom: var(--sp-5); }

.t2 {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-muted);
  text-align: center;
}

/* Left-aligned section hdr (FAQs, Bridge) */
.section-hdr--left {
  align-items: flex-start;
  text-align: left;
}
.section-hdr--left .h2 { text-align: left; }
.section-hdr--left .eyebrow-pill { align-self: flex-start; }

/* ─── BRIDGE ─────────────────────────────────────────────────────────────── */
.bridge {min-height:1000px;}

/* Left-aligned header per Figma */
.bridge__hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-14);
}
.bridge__h2 { text-align: left; }
.bridge__h2--muted { color: var(--text-muted); }
.bridge__t2 { text-align: left; }

/* Three-column subgrid layout */
.bridge__cols {
  display: grid;
  grid-template-columns: 38fr 24fr 38fr;
  grid-template-rows: repeat(8, auto);
  column-gap: var(--sp-4);
  row-gap: 0;
}

.bridge__card {
  grid-row: 1 / 9;
  display: grid;
  grid-template-rows: subgrid;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.bridge__card-hdr {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
}

.bridge__card-hdr--centered {
  align-items: center;
}

.bridge__card-sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-faint);
}

.bridge__icon-box {
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-faint);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.bridge__icon-box svg { display: block; flex-shrink: 0; }

[data-card="marketing"]:is(:hover, .is-pressed) .bridge__icon-box { color: #3b60a7; border-color: #6a8bbf; }
[data-card="sales"]:is(:hover, .is-pressed)     .bridge__icon-box { color: #2da9b5; border-color: #6cc8d0; }

.bridge__card-title {
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
  color: var(--text-muted);
}

.bridge__item {
  display: flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.bridge__card > .bridge__item:last-child {
  padding-bottom: var(--sp-5);
}

.bridge__item--signal {
  justify-content: center;
}

/* Blue bridge pillar — 120px wide, full height of card area */
.bridge__pillar {
  width: 120px;
  flex-shrink: 0;
  background: var(--text-muted);
  border: 0;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bridge__pillar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
}
.bridge__pillar-flame {
  display: block;
  width: 50px;
  height: 62px;
  flex-shrink: 0;
}
.bridge__pillar-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--sp-4);
  opacity: 0.75;
  color: #fff;
  text-align: center;
}
.bridge__pillar-aisdr {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-wider);
}
.bridge__pillar-bridge {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-relaxed);
}

.bridge__card--signals {
  background: var(--text-muted) !important;
  border-color: transparent;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.bridge__card--signals .bridge__card-title,
.bridge__card--signals .bridge__card-sub {
  color: rgba(255, 255, 255, 0.75);
}

.bridge__card--signals .bridge__item {
  border-top-color: rgba(255, 255, 255, 0.15);
  justify-content: center;
}

.bridge__signal-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--btn-bg);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.bridge__signal-tag .bridge__signal-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
}

.bridge__signal-tag .bridge__signal-icon svg {
  width: 14px;
  height: 14px;
}

/* ─── BRIDGE MOBILE LAYOUT ───────────────────────────────────────────────── */

.bridge__mobile {
  display: none;
}

@media (max-width: 768px) {
  .bridge__cols,
  .bridge__icon-drop {
    display: none;
  }

  .bridge__mobile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .bridge__mobile-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .bridge__mobile-card .bridge__card-hdr {
    border-bottom: 1px solid var(--border);
  }

  .bridge__mobile-row {
    padding: var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1-5);
  }

  .bridge__mobile-row:last-child {
    border-bottom: none;
  }

  .bridge__mobile-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-muted);
  }
}

/* ─── BRIDGE DROP ANIMATION ──────────────────────────────────────────────── */

.bridge__container { position: relative; }

/* Icon drop bubble — white pill that falls into the Torchlight card */
.bridge__icon-drop {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

@keyframes bridge-row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bridge__item--new {
  animation: bridge-row-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Glow revolution animation */


/* ─── COMPARISON ─────────────────────────────────────────────────────────── */
.compare { background: var(--bg); }

.comparison__table-wrap {
  position: relative;
}

/* Blob container — absolutely covers the AISDR column */
.cmp__blobs {
  position: absolute;
  top: 0;
  right: 0;
  width: calc((100% - 334px) / 2);
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.blob {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(55px);
  mix-blend-mode: multiply;
}

/* Clockwise perimeter orbit — corner stops only, linear keeps it on the edges */
@keyframes orbitCW {
  0%   { top: -160px;             left: calc(100% - 160px); }
  25%  { top: calc(100% - 160px); left: calc(100% - 160px); }
  50%  { top: calc(100% - 160px); left: -160px;             }
  75%  { top: -160px;             left: -160px;             }
  100% { top: -160px;             left: calc(100% - 160px); }
}

/* Counter-clockwise, offset start */
@keyframes orbitCCW {
  0%   { top: -160px;             left: -160px;             }
  25%  { top: calc(100% - 160px); left: -160px;             }
  50%  { top: calc(100% - 160px); left: calc(100% - 160px); }
  75%  { top: -160px;             left: calc(100% - 160px); }
  100% { top: -160px;             left: -160px;             }
}

@keyframes blobGlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

.blob--yellow {
  background: radial-gradient(circle, rgba(255,220,60,0.7) 0%, rgba(255,180,30,0.25) 60%, transparent 80%);
  animation: orbitCW 22s linear infinite, blobGlow 9s ease-in-out infinite;
}
.blob--pink {
  background: radial-gradient(circle, rgba(230,40,110,0.6) 0%, rgba(200,40,100,0.2) 60%, transparent 80%);
  animation: orbitCW 32s linear infinite -12s, blobGlow 13s ease-in-out infinite -5s;
}
.blob--blue {
  background: radial-gradient(circle, rgba(80,190,220,0.6) 0%, rgba(60,160,200,0.2) 60%, transparent 80%);
  animation: orbitCCW 27s linear infinite -18s, blobGlow 11s ease-in-out infinite -3s;
}

[data-theme="dark"] .blob { mix-blend-mode: screen; }

/* Flat row-based comparison table */
.cmp__table {
  position: relative;
  z-index: 1;
}

.cmp__row {
  display: flex;
  column-gap: var(--sp-2);
}

.cmp__label,
.cmp__trad,
.cmp__aisdr {
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Label column */
.cmp__label {
  width: 314px;
  flex-shrink: 0;
  padding: var(--sp-5) var(--sp-5);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border-bottom: 1px solid var(--border);
}

/* Traditional SDR column */
.cmp__trad {
  flex: 1;
  padding: var(--sp-5) var(--sp-5);
  font-weight: 400;
  color: var(--text-muted);
  /* rule fades to nothing at 85% of the column */
  background-image: linear-gradient(to right, var(--border) 0%, transparent 85%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* AISDR System column */
.cmp__aisdr {
  flex: 1;
  min-width: 0;
  padding: var(--sp-5) var(--sp-7);
  color: var(--text);
  background: var(--card-bg);
  border-left: 1px solid var(--pink-border);
  border-right: 1px solid var(--pink-border);
  /* short inset rule — doesn't touch the side borders */
  background-image: linear-gradient(to right, transparent 20px, var(--border) 20px, var(--border) calc(100% - 20px), transparent calc(100% - 20px));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* Header row */
.cmp__row--hdr .cmp__label {
  background: transparent;
  border-radius: var(--r-xl) 0 0 0;
  border-bottom: none;
  height: 52px;
}
.cmp__row--hdr .cmp__trad {
  align-items: flex-end;
  padding-bottom: var(--sp-4);
  border-radius: 0 var(--r-xl) 0 0;
  border-bottom: none;
  background-image: none;
  height: 52px;
}
.cmp__row--hdr .cmp__trad span {
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  color: var(--text-mid);
}
.cmp__row--hdr .cmp__aisdr {
  align-items: center;
  border-top: 1px solid var(--pink-border);
  border-bottom: none;
  background-image: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  height: 52px;
}
.cmp__row--hdr .cmp__aisdr span {
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

/* Last data row — remove bottom borders, round corners */
.cmp__row:last-child .cmp__label {
  border-bottom: none;
  border-radius: 0 0 0 var(--r-xl);
}
.cmp__row:last-child .cmp__trad {
  background-image: none;
  border-radius: 0 0 var(--r-xl) 0;
}
.cmp__row:last-child .cmp__aisdr {
  background-image: none;
  border-bottom: 1px solid var(--pink-border);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* ─── PRODUCTS ───────────────────────────────────────────────────────────── */
/* Card-wrap integration for product items */
.products .card-wrap {
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-4);
}
.products .product__item {
  background: var(--card-bg-hover);
  border-radius: var(--r-xl);
  padding: var(--sp-9);
  position: relative;
  z-index: 1;
  transition: background 0.4s ease;
}
.products .card-wrap:is(:hover, .is-pressed) .product__item { background: var(--card-bg-hover); }

.product__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* Eyebrow pills — product variants */
.product__pill {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.product__pill--orange { background: #FEF0E9; color: #C44A1A; }
.product__pill--green  { background: #E1F5EE; color: #0F6E56; }
.product__pill--blue   { background: #E6F1FB; color: #185FA5; }
[data-theme="dark"] .product__pill--orange { background: rgba(196,74,26,0.2);  color: #f5906a; }
[data-theme="dark"] .product__pill--green  { background: rgba(15,110,86,0.2);  color: #4fd4a8; }
[data-theme="dark"] .product__pill--blue   { background: rgba(24,95,165,0.2);  color: #7ab4f0; }

.product__name {
  font-family: var(--font);
  font-size: var(--fs-3xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin-bottom: var(--sp-1-5);
}

/* Omniview wordmark (cropped from #omniview-lockup) set in place of the word,
   sized so its cap height matches the tier name beside it. */
.product__name--logo { white-space: nowrap; }
.product__logo { display: inline-block; height: 0.91em; width: auto; vertical-align: -0.02em; }

.product__subtitle {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.product__desc {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.product__features {
  list-style: none;
  padding: 0;
  margin: var(--sp-7) 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.product__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) 0 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.product__feature + .product__feature { border-left: 1px solid var(--border); padding-left: var(--sp-4); }
.product__cta { margin-top: var(--sp-7); }
/* Solutions CTA: a ghost pill at rest. On hover it turns white and its own
   glow, in the card's colours, fades in behind it. */
.product__btn-wrap { display: inline-flex; position: relative; border-radius: var(--r-pill); }
.product__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  transition: background 0.25s ease;
}
.product__btn:is(:hover, :focus-visible) { background: #fff; }
.product__btn-wrap .btn-glow { opacity: 0; transition: opacity 0.3s ease; }
/* Same glow recipe as the site's other glow buttons (.btn-glow: two soft
   spinning blobs at 0.35), in the card's colours, shown only on hover. */
.product__btn-wrap:has(.product__btn:is(:hover, :focus-visible)) .btn-glow { opacity: 0.35; }
[data-theme="dark"] .product__btn-wrap:has(.product__btn:is(:hover, :focus-visible)) .btn-glow { opacity: 0.75; }
[data-card="omniview"]  .product__btn-wrap .btn-glow__a { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(24,95,165,0.9) 0%, transparent 65%); }
[data-card="omniview"]  .product__btn-wrap .btn-glow__b { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(55,138,221,0.7) 0%, transparent 60%); }
[data-card="sdrplus"]   .product__btn-wrap .btn-glow__a { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
[data-card="sdrplus"]   .product__btn-wrap .btn-glow__b { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }
[data-card="analytics"] .product__btn-wrap .btn-glow__a { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(15,110,86,0.9) 0%, transparent 65%); }
[data-card="analytics"] .product__btn-wrap .btn-glow__b { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(69,196,206,0.7) 0%, transparent 60%); }
[data-theme="dark"] .product__btn:is(:hover, :focus-visible) { background: var(--btn-bg); }
/* No line-clamp here on purpose. This column collapses to ~144px at 1024 and
   ~120px at 900, where the longer bullets need three and four lines. Any clamp
   silently deletes copy at those widths and never fires at wide ones, so it was
   pure downside. Bullets wrap; the card grows. */

.product__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: var(--sp-1-5);
}

/* Radar pulse ring — expands and fades on feature hover */
.product__dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes radar-pulse {
    0%   { opacity: 0.8; transform: scale(0.4); }
    100% { opacity: 0;   transform: scale(2.6); }
  }
  .product__feature:hover .product__dot::after {
    animation: radar-pulse 0.65s ease-out forwards;
  }
}

.confetti-piece {
  position: fixed;
  width: 8px;
  height: 14px;
  pointer-events: none;
  z-index: 1000;
  will-change: transform, opacity;
  border-radius: 1px;
}
/* Match ring colour to each card's dot colour */
[data-card="sdrplus"] .product__dot::after { border-color: #F15A29; }
[data-card="analytics"]  .product__dot::after { border-color: #0F6E56; }
[data-card="omniview"]   .product__dot::after { border-color: #185FA5; }

/* Right-side stats card */
.product__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.product__card-label {
  font-family: var(--font);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Pipeline flow row */
.product__pipeline {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
}
.product__pipeline-step {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--lh-body);
}
.product__pipeline-arrow {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

/* Stat blocks */
.product__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.product__stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product__stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
}
.product__card > .product__stat { background: var(--surface); }
.product__stat-title {
  font-family: var(--font);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}
.product__stat-value {
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
  line-height: var(--lh-heading);
}
.product__stat-sub {
  font-family: var(--font);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 2px;
}

/* Progress bars */
.product__bar {
  height: 4px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--sp-2);
}
.product__bar--slim { height: 6px; flex: 1; margin-top: 0; }
.product__bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
}

/* Horizontal bar rows */
.product__hbars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.product__hbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.product__hbar-label {
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 76px;
}
.product__hbar-val {
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}
.product__hbar-val--bold { font-weight: 500; color: var(--text); }

/* Bar chart */
.product__chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-1);
  height: 36px;
  margin-top: var(--sp-2);
}
.product__chart-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
}

/* Responsive */
@media (max-width: 768px) {
  .product__top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .product__features { grid-template-columns: 1fr; margin-top: var(--sp-5); }
  .product__feature { padding: var(--sp-3) 0; }
  .product__feature + .product__feature { border-left: none; padding-left: 0; border-top: 1px solid var(--border); }
  .product__feature-text { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .products .product__item { padding: var(--sp-6); }
  .product__btn-wrap, .product__btn { width: 100%; justify-content: center; white-space: nowrap; }
  /* Logo + "Professional" is ~11.6em wide; shrink to fit the card's inner width
     (viewport less 24px gutters and 24px card padding, each side). */
  .product__name--logo { font-size: min(var(--fs-3xl), calc((100vw - 96px) / 11.9)); }
  /* The three-step pipeline row set the column's minimum width and pushed the
     panel past the card. Tighter steps fit at 375; below that, words hyphenate
     rather than overflow. */
  .product__top > * { min-width: 0; }
  .product__pipeline { gap: var(--sp-1); }
  .product__pipeline-step { min-width: 0; padding: var(--sp-2) var(--sp-1); hyphens: auto; }
  /* Three stats side by side don't fit a phone card; stack them, label left, value right. */
  .product__stat-grid--3 { grid-template-columns: 1fr; }
  .product__stat-grid--3 .product__stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
}

/* ─── ABOUT / TEAM ───────────────────────────────────────────────────────── */
.team__grid {
  display: grid;
  /* Two founders, each at the width a three-column row would give them. */
  grid-template-columns: repeat(2, calc((100% - 2 * var(--sp-5)) / 3));
  justify-content: center;
  gap: var(--sp-5);
  align-items: stretch;
}

.about .card-wrap { border-radius: var(--r-xl); display: flex; flex-direction: column; }

.team__card {
  background: var(--card-bg);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  flex: 1;
  border: 1px solid var(--border);
  transition: background 0.4s ease;
}
.about .card-wrap:is(:hover, .is-pressed) .team__card { background: var(--card-bg-hover); }

.team__photo-wrap {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--sp-5);
  flex-shrink: 0;
}
.team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team__name {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.team__title {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--blue-border);
  margin-bottom: var(--sp-4);
}

.team__bio {
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .team__grid { grid-template-columns: 1fr; }
  [data-card="luke"] { order: -1; }
  .team__card { padding: var(--sp-7) var(--sp-10); }
  .team__bio { font-size: var(--fs-base); }
}

/* ─── HOW WE WORK ────────────────────────────────────────────────────────── */

.hww__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  column-gap: var(--sp-5);
  row-gap: var(--sp-4);
}

.hww__cards .card-wrap {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
}

.hww__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  position: relative;
}

/* Operate card — orange border */
.hww__card--operate {
  border-color: var(--orange);
}

.hww__popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: white;
  font-family: var(--font);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.hww__icon {
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--sp-2);
  color: var(--text-faint);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.hww__icon svg { display: block; flex-shrink: 0; }

[data-card="architect"]:is(:hover, .is-pressed) .hww__icon { color: #525da4; border-color: #8088c0; }
[data-card="operate"]:is(:hover, .is-pressed)   .hww__icon { color: #d99220; border-color: #eeab42; }
[data-card="augment"]:is(:hover, .is-pressed)   .hww__icon { color: #009c8f; border-color: #4dbcb1; }

.hww__titles { padding-top: var(--sp-2); }
.hww__subtitle {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  display: block;
}
.hww__name {
  font-family: var(--font);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

.hww__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Bullet header pill */
.hww__bullets-hdr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-3xl);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.hww__bullet-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
}
.hww__bullet-list li {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
}

.hww__link {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-1);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  transition: gap 0.15s;
  margin-top: auto;
}
.hww__link:hover { gap: var(--sp-2); }
.hww__link-arrow { font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ─── FAQs ───────────────────────────────────────────────────────────────── */
.faqs { background: var(--bg); }

.faqs__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--sp-20);
  align-items: start;
}

.faqs__hdr .eyebrow-pill { margin-bottom: var(--sp-5); }
.faqs__hdr .h2 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-display);
  text-align: left;
}

.faqs__list { border-top: 1px solid var(--border); }

.faq { border-bottom: 1px solid var(--border); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-1);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--text);
  text-align: left;
}

.faq__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.faq__icon svg { width: 14px; height: 14px; }
.faq__vert-line { display: block; }
.faq--open .faq__vert-line { display: none; }

.faq__a {
  padding: 0 var(--sp-1) var(--sp-6);
}
.faq__a[hidden] { display: none; }
.faq__a p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.faq__a p + p { margin-top: var(--sp-3); }
/* "Made readable" follows the report grid closely: one small gap, not two section paddings. */
#reports:has(+ #readable) { padding-bottom: var(--sp-14); }
#readable { padding-top: 0; }
/* The FAQ layout with every item open and no toggles (Omniview Analytics). */
.ova-point { border-bottom: 1px solid var(--border); padding: var(--sp-6) var(--sp-1); }
.ova-point__title { font-size: var(--fs-base); font-weight: 400; color: var(--text); margin-bottom: var(--sp-3); }
.ova-point__text { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text-muted); }

/* ─── ATTRIBUTION SECTION ────────────────────────────────────────────────── */
.attribution__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "head ." "body media";
  column-gap: var(--sp-14);
  align-items: start;
}
.attribution__head { grid-area: head; }
.attribution__body { grid-area: body; }
.attribution__media { grid-area: media; display: flex; justify-content: center; }
.attribution__h2 { margin: var(--sp-4) 0 var(--sp-6); text-align: left; }
.attribution__p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.attribution__p + .attribution__p { margin-top: var(--sp-4); }
.attribution__diagram-wrap { position: relative; width: 100%; max-width: 560px; container-type: inline-size; }
.attribution__diagram { display: block; width: 100%; height: auto; }
.attribution__link { stroke-dasharray: 1.5 11; stroke-linecap: round; animation: attr-flow 2.2s linear infinite; }
@keyframes attr-flow { to { stroke-dashoffset: -12.5; } }
/* Omniview hub: real card-glow, positioned onto the SVG coordinate space */
.attribution__hub {
  position: absolute;
  left: 44.643%;
  top: 37.5%;
  width: 27.143%;
  height: 25%;
  border-radius: 3.2cqw;
}
.attribution__hub-card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 3.2cqw;
  transition: background 0.2s ease;
}
.attribution__hub:is(:hover, .is-pressed) .attribution__hub-card { background: var(--card-bg-hover); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.attribution__hub-logo { display: block; width: 19cqw; height: auto; color: var(--text); }
.attribution__hub-name { font-size: 3cqw; font-weight: 600; color: var(--text); line-height: var(--lh-display); }
.attribution__hub-sub { font-size: 2.15cqw; color: var(--text-muted); line-height: var(--lh-display); }
/* Contrasting glow (blue + orange) for the Omniview hub */
.attribution__hub .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(46,97,173,0.9) 0%, transparent 65%); }
.attribution__hub .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(246,93,34,0.75) 0%, transparent 60%); }
[data-theme="dark"] .attribution__hub-card { background: var(--card-bg); }
[data-theme="dark"] .attribution__hub:is(:hover, .is-pressed) .attribution__hub-card { background: var(--card-bg-hover) }
[data-theme="dark"] .attribution__diagram rect[width="116"] { fill: var(--card-bg-hover); }

/* Mobile stacked (vertical) version of the diagram */
.attribution__mobile { display: none; }
.am__sources { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.am__src { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.am__dot { width: 30px; height: 30px; border-radius: var(--r-sm); }
.am__lbl { font-size: var(--fs-xs); line-height: var(--lh-heading); text-align: center; color: var(--text-mid); }
.am__note { text-align: center; font-size: var(--fs-xs); color: var(--text-faint); margin: var(--sp-3) 0 0; }
.am__funnel { display: block; width: 100%; height: 40px; margin: var(--sp-1) auto; }
.am__funnel path { fill: none; stroke: var(--border-muted); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.am__hub { position: relative; width: 210px; max-width: 72%; margin: 0 auto; border-radius: var(--r-lg); }
.am__hub-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--sp-5) var(--sp-4); background: #F1F5F9; border: 1px solid var(--border); border-radius: var(--r-lg); transition: background 0.2s ease; }
.am__hub-logo { display: block; width: 150px; max-width: 76%; height: auto; color: var(--text); }
.am__hub .attribution__hub-name { font-size: var(--fs-lg); font-weight: 600; color: var(--text); line-height: var(--lh-display); }
.am__hub .attribution__hub-sub { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-display); }
.am__hub .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(46,97,173,0.9) 0%, transparent 65%); }
.am__hub .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(246,93,34,0.75) 0%, transparent 60%); }
.am__hub:is(:hover, .is-pressed) .am__hub-card { background: #F8FAFC; }
.am__outputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1-5); }
.am__out { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-3) var(--sp-1); background: #F1F5F9; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; color: var(--text); line-height: var(--lh-heading); }
[data-theme="dark"] .am__hub-card, [data-theme="dark"] .am__out { background: #1a2530; }
[data-theme="dark"] .am__hub:is(:hover, .is-pressed) .am__hub-card { background: #223040; }
@media (max-width: 600px) {
  .attribution__diagram-wrap { display: none; }
  .attribution__mobile { display: block; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .attribution__link { animation: none; opacity: 0; } }
@media (max-width: 900px) {
  .attribution__inner { grid-template-columns: 1fr; grid-template-areas: "head" "body" "media"; }
  .attribution__media { margin-top: var(--sp-8); }
}

/* ─── CTA SECTION ────────────────────────────────────────────────────────── */
.contact { padding: var(--sp-20) 0; }

.cta__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--sp-15) var(--sp-15) 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-15);
  align-items: start;
}

.cta__left {padding-bottom: var(--sp-15);}

.cta__left .eyebrow-pill { margin-bottom: var(--sp-4); }
.cta__left .h2 {
  font-size: var(--fs-6xl);
  line-height: var(--lh-display);
  text-align: left;
  margin-bottom: var(--sp-7);
}

.cta__body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 460px;
}

.cta__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
}


.btn--cta-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--bg);
  background: var(--text);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-7);
  white-space: nowrap;
  transition: opacity 0.15s;
}
.btn--cta-dark:hover { opacity: 0.85; }

.btn--cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-7);
  white-space: nowrap;
  transition: opacity 0.15s;
}
.btn--cta-ghost:hover { opacity: 0.75; }

#hubspot-contact-form {position:relative; right:24px;}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--border);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
}
.footer__logo .nav__flame { width: 20px; height: 22px; }
.footer__logo .nav__wordmark { width: 52px; height: 18px; }

.footer__links {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.footer__links a { transition: color 0.15s; }
.footer__links a:hover { color: var(--text); }

/* ─── TK PLACEHOLDER SECTIONS ───────────────────────────────────────────── */
.tk-section { border-top: 1px solid var(--border); opacity: 0.4; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --container-pad: 40px; }
  .hero__heading { font-size: var(--fs-7xl); line-height: var(--lh-display); }
  .framework { grid-template-columns: repeat(2, 1fr); }
  .hww__cards { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--sp-5); }
  .hww__cards .card-wrap { display: block; }
  .hww__cards .hww__card { display: flex; flex-direction: column; gap: var(--sp-4); grid-row: auto; }
  .cmp__blobs { display: none; }
  .cmp__row { flex-wrap: nowrap; column-gap: 0; border-bottom: 1px solid var(--border); }
  .cmp__row:last-child { border-bottom: none; }

  /* Rotated vertical label */
  .cmp__label {
    width: 28px;
    flex-shrink: 0;
    background: transparent;
    border-bottom: none;
    padding: var(--sp-2) 0;
    font-size: var(--fs-2xs);
    line-height: var(--lh-none);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0 !important;
  }

  /* Data columns */
  .cmp__trad,
  .cmp__aisdr {
    flex: 1;
    width: auto;
    padding: var(--sp-5) var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    border-bottom: none;
    border-radius: 0 !important;
    background-image: none;
  }

  /* Omniview column */
  .cmp__aisdr {
    background: var(--surface);
    border-left: 1px solid var(--pink-border);
    border-right: 1px solid var(--pink-border);
    border-top: none;
    font-weight: 500;
    color: var(--text);
  }
  .cmp__row:last-child .cmp__aisdr {
    border-bottom: 1px solid var(--pink-border);
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  }

  /* Header row */
  .cmp__row--hdr { border-bottom: 1px solid var(--border); }
  .cmp__row--hdr .cmp__label { display: flex; border: none; background: transparent; border-radius: 0 !important; }
  .cmp__row--hdr .cmp__trad,
  .cmp__row--hdr .cmp__aisdr {
    flex: 1;
    height: auto;
    padding: var(--sp-3) var(--sp-3);
    align-items: center;
    justify-content: center;
    border-bottom: none;
  }
  .cmp__row--hdr .cmp__trad span,
  .cmp__row--hdr .cmp__aisdr span { font-size: var(--fs-sm); font-weight: 500; }
  .cmp__row--hdr .cmp__aisdr {
    background: var(--surface);
    border-top: 1px solid var(--pink-border);
    border-left: 1px solid var(--pink-border);
    border-right: 1px solid var(--pink-border);
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }
}

@media (max-width: 860px) {
  :root { --container-pad: 24px; }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__inner { gap: var(--sp-4); }
  .nav__actions { margin-left: auto; }
  .nav__cta { padding: var(--sp-1-5) var(--sp-3); font-size: var(--fs-sm); }
  .hero__heading { font-size: var(--fs-5xl); line-height: var(--lh-display); }
  .hero__rotator { max-width: 100%; }
  .hero__rotator-item { white-space: normal; }
  .h2 { font-size: var(--fs-4xl); line-height: var(--lh-heading); }
  .cta__left .h2 { font-size: var(--fs-4xl); line-height: var(--lh-heading); }
  .framework { grid-template-columns: 1fr; }
  .bridge__cols { grid-template-columns: 1fr; grid-template-rows: none; }
  .bridge__cols .card-wrap,
  .bridge__cols .bridge__card { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
  .bridge__pillar { width: 100%; height: 100px; }
  .bridge__pillar-inner { flex-direction: row; gap: var(--sp-4); }
  .bridge__pillar-flame { width: 32px; height: 40px; }
  .faqs__inner { grid-template-columns: 1fr; gap: var(--sp-9); }
  .cta__inner { grid-template-columns: 1fr; padding: var(--sp-9) var(--sp-7); gap: var(--sp-8); }
  .cta__right { align-items: flex-start; }
  #hubspot-contact-form {width:calc(100% + 24px);}
}

@media (max-width: 600px) {
  .hero__heading { font-size: var(--fs-4xl); line-height: var(--lh-heading); letter-spacing: var(--ls-tighter); }
  .hero__body { font-size: var(--fs-md); line-height: var(--lh-body); }
  .hero__cta-row { flex-direction: column; align-items: stretch; text-align: center; }
  .trust-logo { height: 22px; }
  .trust-logo--salesforce { height: 27px; }
  .trust-logo--gsc { height: 16px; }
  .footer__inner { flex-direction: column; gap: var(--sp-4); }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); }
}

/* Phones: logo, theme toggle, menu, and the CTA all have to share ~320px. */
@media (max-width: 480px) {
  .nav__inner { gap: var(--sp-3); }
  .nav mobiah-logo { font-size: 21px; } /* app.js sets the same inline; this covers first paint */
  .nav__actions { gap: var(--sp-1); margin-left: auto; }
  .nav__theme-toggle, .nav__hamburger { width: 32px; height: 32px; }
  .nav__cta { padding: var(--sp-2); font-size: var(--fs-xs); white-space: nowrap; }
}

@media (max-width: 768px) {
  .hide-mobile { display: none; }
}

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 30, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
}
.modal__close {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.modal__close:hover { background: rgba(80,105,121,0.1); color: var(--text); }
.modal__close svg { width: 18px; height: 18px; }
.modal__body h2 {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-4);
  color: var(--text);
}
.modal__body h3 {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--text);
  margin: var(--sp-7) 0 var(--sp-2);
}
.modal__body h4 {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text);
  margin: var(--sp-4) 0 var(--sp-1-5);
}
.modal__body p {
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-relaxed);
}
.modal__body ul {
  list-style: disc;
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
}
.modal__body li { line-height: var(--lh-relaxed); margin-bottom: var(--sp-1); }
.modal__body strong { color: var(--text); font-weight: 600; }
.modal__body section { margin-bottom: var(--sp-2); }
.modal__body a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
.modal__body a:hover { color: var(--orange); }
body.modal-open { overflow: hidden; }

/* ─── OMNIVIEW LANDING ─────────────────────────────────────────────────────── */
.lp-hero { padding: var(--sp-18) 0 var(--sp-6); }
.lp-hero .container {padding:0 var(--sp-6); width:100%; max-width:1440px;}

/* Card-contained hero with an always-on color blob */
.lp-hero__card { border-radius: var(--r-2xl); }
.lp-hero .card-glow { opacity: 0.5; border-radius: var(--r-3xl); }
.lp-hero .card-wrap:is(:hover, .is-pressed) .card-glow { opacity: 0.62; }

.lp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: var(--sp-14);
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--sp-14) var(--sp-15);
}

/* Tier heroes: no card around them. The hero sits on the page grid, so its text
   lines up with the logo and its right edge with the nav button. */
.lp-hero--bare .container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.lp-hero--bare .lp-hero__card > .card-glow { display: none; }
.lp-hero--bare .lp-hero__inner {
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--sp-10) 0;
}
/* Both hero visuals ran wider than the column to sit under the card's padding. */
.lp-hero--bare .lp-screens,
.lp-hero--bare .pv-stage { width: 100%; }

.lp-hero__eyebrow { justify-content: flex-start; margin-bottom: var(--sp-6); }

.lp-hero__heading {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-7xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  margin-bottom: var(--sp-5);
}
/* Between the two-column breakpoint and ~1160px the hero copy column is too
   narrow for --fs-7xl, and "Ask your stack" breaks to a third line. Must sit
   after the base rule above — equal specificity, so source order decides. */
@media (max-width: 1160px) and (min-width: 1001px) {
  .lp-hero__heading { font-size: var(--fs-6xl); }
}

.lp-hero__body {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}
.lp-hero__body strong { font-weight: 400; color: var(--text); }

.lp-hero__cta { margin-bottom: var(--sp-3); }
.lp-hero__micro { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-faint); }

.lp-hero__cta .btn-glow__a, .lp-hero__cta .btn-glow__b {width:100%;}

/* Product screenshot — focused window with two fanned frames behind it */
.lp-hero__right { position: relative; }
.lp-screens { position: relative; width: calc(100% + 36px); }

/* Shared browser-window frame */
.lp-frame {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 26px 50px -22px rgba(20, 45, 90, 0.4);
  overflow: hidden;
}
.lp-frame::before {
  content: "";
  display: block;
  height: 30px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  background-image:
    radial-gradient(circle 3px at 16px 16px, var(--text-faint) 99%, transparent 100%),
    radial-gradient(circle 3px at 30px 16px, var(--text-faint) 99%, transparent 100%),
    radial-gradient(circle 3px at 44px 16px, var(--text-faint) 99%, transparent 100%);
}

.lp-screens__main { position: relative; z-index: 3; margin: 0; width: 100%; }
.lp-screens__main img { display: block; width: 100%; height: auto; }
[data-theme="dark"] .lp-screens__main img {filter:hue-rotate(180deg) invert(0.925);}

/* Omniview Analytics hero: a lighter frame shadow, and an always-on orange and
   pink card glow around the front screenshot, built like the Patient Prism hero. */
.lp-screens--ova .lp-frame { box-shadow: 0 26px 50px -22px rgba(20, 45, 90, 0.1); }
.lp-screens__main-wrap { position: relative; z-index: 3; width: 100%; border-radius: var(--r-md); }
.lp-hero .lp-screens__main-wrap .card-glow { opacity: 0.5; border-radius: var(--r-2xl); }
.lp-hero .lp-screens__main-wrap:is(:hover, .is-pressed) .card-glow { opacity: 0.5; }
[data-card="ova-hero"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
[data-card="ova-hero"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }

/* Hero demo video — sized like the screenshot it replaced. Deliberately not
   inverted in dark mode; it's a recording, not a UI mock. */
.lp-screens__video { display: block; width: 100%; height: auto; }
/* No .lp-frame here: the recording carries its own window chrome, so the frame's
   title bar would stack a second set of traffic lights on top of it. The fanned
   cards behind keep their frames — that's what makes the stack read. */
.lp-screens__main--bare {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 26px 50px -22px rgba(20, 45, 90, 0.4);
}
.lp-screens__fs {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.lp-screens__main:hover .lp-screens__fs,
.lp-screens__fs:focus-visible { opacity: 1; }
.lp-screens__fs:hover { background: rgba(0,0,0,0.8); }
@media (hover: none) {
  .lp-screens__fs { opacity: 1; }
}
.cs-hero-screens img,
[data-theme="dark"] .cs-hero-screens img { filter: none; }

.lp-screens__card { position: absolute; inset: 0; background: var(--card-bg); }
.lp-screens__card--b1 { z-index: 2; transform-origin: 86% 100%; transform: rotate(-2.5deg) translateY(-14px); }
.lp-screens__card--b2 { z-index: 1; transform-origin: 86% 100%; transform: rotate(-5deg) translateY(-27px); opacity: 0.9; }

/* Omniview hero only. The fan there sits behind a light-mode Claude recording,
   so it matches that chrome (#faf8f4) instead of the site's cool card token —
   the two are opposite-cast and clash side by side. Fixed rather than themed
   because the capture stays light in dark mode. Scoped to .lp-hero: the Patient
   Prism case-study hero reuses .lp-screens__card and must keep the site colour,
   as do screenshot heroes (framed, not --bare) like /omniview-analytics. */
.lp-hero .lp-screens:has(.lp-screens__main--bare) .lp-screens__card { background: #faf8f4; }
.lp-hero .lp-screens:has(.lp-screens__main--bare) .lp-screens__card::before { background: #efece5; }

/* Feature cards — 6-col grid so 5 cards lay out 3 + centered 2 */
.lp-features {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-5);
}
.lp-features .card-wrap { grid-column: span 2; border-radius: var(--r-lg); }
.lp-features .card-wrap:nth-child(4) { grid-column: 2 / span 2; }
.lp-features .card-wrap:nth-child(5) { grid-column: 4 / span 2; }

.lp-feature {
  position: relative;
  z-index: 1;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background 0.4s ease;
}
.lp-features .card-wrap:is(:hover, .is-pressed) .lp-feature { background: var(--card-bg-hover); }

/* Omniview Analytics "What You Get": a spec wall laid out from Chris's sketch.
   Six columns by six rows of equal cells; the Omniview logo holds the center,
   Digital Overview, Real Time and Search take 2x2, every report a single cell. */
.ova-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(120px, 1fr));
  grid-template-areas:
    "do do ch cp rf ad"
    "do do lg lg rt rt"
    "dm ln lg lg rt rt"
    "ge te lg lg lp ev"
    "co dn lg lg gs gs"
    "in sz ke ss gs gs";
  gap: var(--sp-3);
  margin-top: var(--sp-12);
}
.ova-tile { display: flex; min-width: 0; border-radius: var(--r-lg); }
.ova-tile__in {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: background 0.4s ease;
}
.ova-tile:is(:hover, .is-pressed) .ova-tile__in,
.ova-tile--logo .ova-tile__in { background: var(--card-bg-hover); }
/* The logo tile stays in its hover state: glow always on. */
.ova-tile--logo .card-glow { opacity: 0.6; }
.ova-tile__label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ova-tile__name { font-size: var(--fs-base); font-weight: 500; line-height: 1.2; color: var(--text); }
.ova-tile--lg .ova-tile__name { font-size: var(--fs-2xl); }
.ova-tile__desc { margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-muted); }
.ova-tile--lg .ova-tile__desc { font-size: var(--fs-sm); max-width: 32ch; }
.ova-tile__in { padding: var(--sp-4) var(--sp-3); }
.ova-tile__logo { width: 70%; height: auto; color: var(--text); }
@media (max-width: 1100px) {
  .ova-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(120px, auto);
    grid-template-areas:
      "do do lg lg"
      "ch cp rt rt"
      "rf ad dm ln"
      "ge te gs gs"
      "lp ev ke ss"
      "co dn in sz";
  }
}
@media (max-width: 640px) {
  .ova-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "lg lg" "do do" "ch cp" "rf ad" "rt rt" "dm ln"
      "ge te" "gs gs" "lp ev" "ke ss" "co dn" "in sz";
  }
  .ova-tile__logo { width: 60%; }
}
.ova-note { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-faint); }
/* Custom Dimensions example data: three cards under the two columns. */
.ova-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-12); }
.ova-examples .product__bar-fill { background: #2563eb; }
.ova-ex { display: flex; border-radius: var(--r-md); }
.ova-ex .product__card { flex: 1; position: relative; z-index: 1; background: var(--card-bg); }
/* Rows spread to fill the card, so all three cards read as the same height. */
.ova-ex .product__hbars, .ova-ex .ova-pie { flex: 1; }
/* One grid for all rows: the label column is as wide as the longest label, so
   every bar starts at the same edge, whatever the label lengths. */
.ova-ex .product__hbars {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  align-content: space-between;
  align-items: center;
}
.ova-ex .product__hbar { display: contents; }
.ova-ex .product__hbar-label { min-width: 0; }
.ova-pie { display: flex; align-items: center; gap: var(--sp-5); }
.ova-pie__chart { flex-shrink: 0; width: 120px; height: 120px; border-radius: 50%; }
.ova-pie__legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--text); }
.ova-pie__legend li { display: flex; align-items: center; gap: var(--sp-2); }
.ova-pie__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ova-pie__val { margin-left: auto; padding-left: var(--sp-3); color: var(--text-muted); }
@media (max-width: 1100px) { .ova-examples { grid-template-columns: 1fr; } }
.lp-feature__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.lp-feature__name {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.lp-feature__desc { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text-muted); }

[data-card="sdrplus"]:is(:hover, .is-pressed) .lp-feature__icon { color: #f15a29; border-color: #f4855e; }
[data-card="omniview"]:is(:hover, .is-pressed)   .lp-feature__icon { color: #2e7fd6; border-color: #5aa0e6; }
[data-card="analytics"]:is(:hover, .is-pressed)  .lp-feature__icon { color: #1d9e75; border-color: #5cc4a3; }
[data-card="marketing"]:is(:hover, .is-pressed)  .lp-feature__icon { color: #d98a1f; border-color: #eeab42; }
[data-card="sales"]:is(:hover, .is-pressed)      .lp-feature__icon { color: #2da9b5; border-color: #6cc8d0; }
[data-card="access"]:is(:hover, .is-pressed)     .lp-feature__icon { color: #d93978; border-color: #f175b0; }

/* Closing CTA — placeholder form (reuses .contact card styling) */
.lp-cta__right { align-items: stretch; padding-bottom: var(--sp-15); }
.lp-cta__secondary { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }
.lp-cta__secondary:hover { color: var(--text); }

/* Trial signup status message — plain text, aligned with the form fields */
.trial-status {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
  padding:var(--sp-4) 0 0;
  position:relative;
  right:24px;
}
.trial-status[data-state="ok"]    { color: #0F6E56; }
.trial-status[data-state="error"] { color: #d93978; }
[data-theme="dark"] .trial-status[data-state="ok"]    { color: #4fd4a8; }
[data-theme="dark"] .trial-status[data-state="error"] { color: #f48bb6; }

.lp-form { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.lp-form__row { display: flex; gap: var(--sp-3); }
.lp-form__row .lp-form__field { flex: 1; min-width: 0; }
.lp-form__field { display: flex; flex-direction: column; gap: var(--sp-1-5); }
.lp-form__field label { font-size: var(--fs-sm); color: var(--text-muted); }
.lp-form__field input {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-form__field input::placeholder { color: var(--text-faint); }
.lp-form__field input:focus {
  outline: none;
  border-color: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(80, 105, 121, 0.15);
}
.lp-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  padding: var(--sp-4) var(--sp-7);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    linear-gradient(to right, #2E61AD, #E84C91, #F65D22) border-box;
  box-shadow: 0 6px 24px rgba(46, 97, 173, 0.15), 0 6px 24px rgba(232, 76, 145, 0.1);
  transition: background 0.2s ease;
}
.lp-form__submit:hover {
  background:
    linear-gradient(var(--btn-bg-hover), var(--btn-bg-hover)) padding-box,
    linear-gradient(to right, #2E61AD, #E84C91, #F65D22) border-box;
}
.lp-form__note { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-faint); }

/* Testimonial quote inside the closer-look cards — open, italic, stylized mark */
.product__quote {
  position: relative;
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
.product__quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-8xl);
  line-height: var(--lh-none);
  height: 40px;
  color: var(--text-faint);
}
.product__quote blockquote {
  font-family: var(--font);
  font-size: var(--fs-xl);
  line-height: var(--lh-body);
  font-weight: 300;
  font-style: italic;
  letter-spacing: var(--ls-snug);
  color: var(--text-muted);
}
.product__quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.product__quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  flex-shrink: 0;
}
.product__quote-meta { display: flex; flex-direction: column; line-height: var(--lh-body); }
.product__quote-meta strong { font-weight: 600; font-size: var(--fs-base); color: var(--text); font-style: normal; }
.product__quote-meta span { font-size: var(--fs-sm); color: var(--text-muted); }

.product__item--orange .product__quote::before { color: #f15a29; }
.product__item--blue   .product__quote::before { color: #2e7fd6; }
.product__item--green  .product__quote::before { color: #0f6e56; }
.product__item--orange .product__quote-avatar { background: rgba(241, 90, 41, 0.14); color: #c2451b; }
.product__item--blue   .product__quote-avatar { background: rgba(46, 127, 214, 0.14); color: #1f5fa8; }
.product__item--green  .product__quote-avatar { background: rgba(15, 110, 86, 0.16); color: #0f6e56; }

/* Uptime status strip (performance card) */
.lp-status {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin-top: var(--sp-3);
}
.lp-status__bar { flex: 1; height: 100%; border-radius: 2px; background: #1D9E75; opacity: 0.85; }
.lp-status__bar--dip { height: 72%; opacity: 0.5; }

/* Onboarding steps (onboarding card) */
.lp-steps { margin-top: var(--sp-1-5); display: flex; flex-direction: column; }
.lp-steps__item { position: relative; display: flex; gap: var(--sp-3); padding-bottom: var(--sp-5); }
.lp-steps__item:last-child { padding-bottom: 0; }
.lp-steps__item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.lp-steps__item:last-child::before { display: none; }
.lp-steps__marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 127, 214, 0.16);
  color: #1f5fa8;
}
.lp-steps__marker svg { width: 15px; height: 15px; }
.lp-steps__marker--live { background: #185FA5; }
.lp-steps__marker--live::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.35);
}
.lp-steps__body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.lp-steps__body strong { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.lp-steps__body span { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }

/* Revenue Intelligence Suite — premium panel.
   Uses the page's regular card styling, but inverted: the panel carries the
   opposite theme's tokens, so in light mode it renders dark and vice versa.
   Everything inside reads the standard vars, so nothing else needs a variant. */
.lp-suite {
  /* dark tokens while the page is light */
  --bg:            #0a0a0a;
  --surface:       #161b22;
  --border:        rgba(101, 129, 146, 0.2);
  --border-muted:  rgba(130, 160, 180, 0.4);
  --text:          #e8edf0;
  --text-muted:    #7a9ab0;
  --text-faint:    #4a6070;
  --text-mid:      #6a8090;
  --card-bg:       #0a0a0a;
  --card-bg-hover: #0d1117;
  --btn-bg:        #0a0a0a;
  --btn-bg-hover:  #0d1117;

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--sp-14);
  align-items: center;
  padding: var(--sp-15);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: background 0.4s ease;
}
[data-theme="dark"] .lp-suite {
  /* light tokens while the page is dark */
  --bg:            #E4EBF3;
  --surface:       #ffffff;
  --border:        #d0dfe7;
  --border-muted:  rgba(80, 105, 121, 0.5);
  --text:          #0a0a0a;
  --text-muted:    #506979;
  --text-faint:    #849dac;
  --text-mid:      #425562;
  --card-bg:       #EBF0F6;
  --card-bg-hover: #F1F5F9;
  --btn-bg:        #F1F5F9;
  --btn-bg-hover:  #F8FAFC;
}
.lp-suite-wrap:is(:hover, .is-pressed) .lp-suite { background: var(--card-bg-hover); }
/* Button glow follows the panel's inverted theme, not the page's */
.lp-suite .btn-glow { opacity: 0.75; }
[data-theme="dark"] .lp-suite .btn-glow { opacity: 0.35; }

/* Glow behind the panel — same machinery and palette as the page's other cards */
.lp-suite-wrap { position: relative; border-radius: var(--r-lg); }
.lp-suite-wrap .card-glow { inset: -14px; border-radius: var(--r-2xl); filter: blur(30px); }
.lp-suite-wrap:is(:hover, .is-pressed) .card-glow { opacity: 0.72; }
[data-card="suite"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(24,95,165,0.9) 0%, transparent 65%); }
[data-card="suite"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(55,138,221,0.7) 0%, transparent 60%); }

/* Eyebrow — same treatment as .eyebrow-pill elsewhere on the page */
.lp-suite__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1-5) var(--sp-5);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.lp-suite__star { font-size: var(--fs-2xs); line-height: var(--lh-none); }
.lp-suite__title {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-4xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.lp-suite__lead {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
  text-wrap: balance;
  max-width: 44ch;
}
.lp-suite__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

.lp-suite__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6) var(--sp-10);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-suite__item { display: flex; gap: var(--sp-3); }
.lp-suite__num {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  color: var(--text-faint);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.lp-suite__view {
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: var(--ls-snug);
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.lp-suite__q {
  font-size: 13px;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ── Omniview landing — responsive ── */
@media (max-width: 1000px) {
  .lp-hero { padding: var(--sp-14) 0 var(--sp-4); }
  .lp-hero .container { width: auto; max-width: none; padding: 0 var(--sp-6); }
  .lp-hero__inner { grid-template-columns: 1fr; gap: var(--sp-10); padding: var(--sp-10) var(--sp-8); }
  .lp-hero__body { max-width: none; }
  .lp-screens { width: 100%; max-width: 560px; margin: 0 auto; }
  .lp-features { grid-template-columns: repeat(2, 1fr); }
  .lp-features .card-wrap,
  .lp-features .card-wrap:nth-child(4),
  .lp-features .card-wrap:nth-child(5) { grid-column: auto; }
  .lp-suite { grid-template-columns: 1fr; gap: var(--sp-9); padding: var(--sp-10) var(--sp-9); }
}

@media (max-width: 640px) {
  .lp-hero__heading { font-size: var(--fs-4xl); line-height: var(--lh-heading); letter-spacing: var(--ls-tighter); }
  .lp-hero__inner { padding: var(--sp-8) var(--sp-5); }
  .lp-features { grid-template-columns: 1fr; }
  .lp-suite { padding: var(--sp-8) var(--sp-6); }
  .lp-suite__list { grid-template-columns: 1fr; gap: var(--sp-5); }
  .lp-suite__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); }
  .lp-form__row { flex-direction: column; gap: var(--sp-4); }
}

/* ─── CASE STUDY ──────────────────────────────────────────────────────────── */

/* ─── CASE STUDY HERO v2 (open, no card) ─────────────────────────────────── */
.cs-hero-v2 {
  padding: var(--sp-20) 0 0;
}
.cs-hero-v2__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
  margin-bottom: var(--sp-12);
}
.cs-hero-v2__heading {
  font-size: var(--fs-7xl);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  margin: 0;
  max-width: 800px;
}

/* Full-width visual: glow + fan */
.cs-hero-v2__visual {
  position: relative;
  width: 100%;
  padding: 40px var(--container-pad) 0;
  max-width: calc(var(--container-w) + var(--container-pad) * 2);
  margin: 0 auto;
  box-sizing: border-box;
}

/* The hero fan holds a light-mode screenshot, so the whole stack stays in
   light mode when the page is dark — local tokens, nothing else to override. */
[data-theme="dark"] .cs-hero-v2__screens {
  --bg:            #E4EBF3;
  --surface:       #ffffff;
  --border:        #d0dfe7;
  --card-bg:       #EBF0F6;
  --card-bg-hover: #F1F5F9;
  --text:          #0a0a0a;
  --text-muted:    #506979;
  --text-faint:    #849dac;
  --text-mid:      #425562;
}

/* lp-screens at full container width */
.cs-hero-v2__screens {
  position: relative;
  width: calc(100% + 36px);
}

/* Fan-in animation on load */
@keyframes cs-fan-b1 {
  from { transform: rotate(0deg) translateY(0); }
  to   { transform: rotate(-2.5deg) translateY(-14px); }
}
@keyframes cs-fan-b2 {
  from { transform: rotate(0deg) translateY(0); }
  to   { transform: rotate(-5deg) translateY(-27px); }
}
@media (prefers-reduced-motion: no-preference) {
  .cs-hero-v2__screens .lp-screens__card--b2 {
    animation: cs-fan-b2 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s both;
  }
  .cs-hero-v2__screens .lp-screens__card--b1 {
    animation: cs-fan-b1 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.45s both;
  }
}

/* card-wrap around only the main screenshot — glow halos this one card */
.cs-hero-v2__main-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  border-radius: var(--r-md);
}
.cs-hero-v2__main-wrap .card-glow { opacity: 0.5; }

/* Below-the-fold text */
.cs-hero-v2__subhead {
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 680px;
  margin: var(--sp-15) auto var(--sp-10);
  text-align: center;
}
.cs-hero-v2__meta {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
.cs-hero-v2__meta-card {
  flex: 1;
  border-radius: var(--r-md);
}
.cs-hero-v2__meta-card .card-glow { border-radius: var(--r-xl); }
.cs-hero-v2__meta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-7);
  transition: background 0.4s ease;
}
.cs-hero-v2__meta-card:is(:hover, .is-pressed) .cs-hero-v2__meta-inner { background: var(--card-bg-hover); }
.cs-hero-v2__context {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto var(--sp-20);
  text-align: center;
}

@media (max-width: 900px) {
  .cs-hero-v2__heading { font-size: var(--fs-5xl); letter-spacing: var(--ls-tighter); }
  .cs-hero-v2__subhead { font-size: var(--fs-base); }
  .cs-hero-v2__visual { overflow: hidden; }
}
@media (max-width: 640px) {
  .cs-hero-v2 { padding-top: var(--sp-12); }
  .cs-hero-v2__heading { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
  .cs-hero-v2__top { margin-bottom: var(--sp-7); }
  .cs-hero-v2__subhead { font-size: var(--fs-base); margin-top: var(--sp-8); }
  /* Subgrid: label row and value row are shared across each pair of cards,
     so heights equalize naturally — no min-height hacks. */
  .cs-hero-v2__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto auto);
    gap: var(--sp-4);
  }
  .cs-hero-v2__meta-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  .cs-hero-v2__meta-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .cs-hero-v2__meta-card:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .cs-hero-v2__meta-card:nth-child(3) { grid-column: 1; grid-row: 3 / span 2; }
  .cs-hero-v2__meta-card:nth-child(4) { grid-column: 2; grid-row: 3 / span 2; }
  .cs-hero-v2__meta-inner {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    padding: var(--sp-3) var(--sp-4);
  }
  .cs-hero-v2__visual { padding: var(--sp-6) var(--sp-4) 0; overflow: hidden; }
  .cs-hero-v2__screens { width: 100%; }
  .lp-screens__card--b1 { transform: rotate(-2.5deg) translateY(-10px); }
  .lp-screens__card--b2 { transform: rotate(-5deg) translateY(-20px); }
}

/* Patient Prism brand glow variants */
[data-card="pp-hero"] .card-glow-spin    { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(20,124,255,0.85) 0%, transparent 65%); }
[data-card="pp-hero"] .card-glow-mask    { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(48,169,192,0.65) 0%, transparent 60%); }
[data-card="pp-hero"] .card-glow-accent  { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse 35% 35% at 50% 50%, rgba(254,57,53,0.95) 0%, transparent 60%); animation: fw-spin 9s linear infinite; animation-delay: -4s; }
[data-card="pp-brand"] .card-glow-spin   { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(20,124,255,0.75) 0%, transparent 65%); }
[data-card="pp-brand"] .card-glow-mask   { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(130,85,255,0.55) 0%, transparent 60%); }
[data-card="pp-analytics"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(48,169,192,0.8) 0%, transparent 65%); }
[data-card="pp-analytics"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(20,124,255,0.6) 0%, transparent 60%); }
[data-card="pp-metrics"] .card-glow-spin   { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
[data-card="pp-metrics"] .card-glow-mask   { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(229,32,32,0.7) 0%, transparent 60%); }
[data-card="pp-insights"] .card-glow-spin  { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(251,195,78,0.75) 0%, transparent 65%); }
[data-card="pp-insights"] .card-glow-mask  { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(254,57,53,0.5) 0%, transparent 60%); }
[data-card="pp-pullquote"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(20,124,255,0.85) 0%, transparent 65%); }
[data-card="pp-pullquote"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(15,110,86,0.65) 0%, transparent 60%); }
[data-card="pp-meta-client"] .card-glow-spin       { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(20,124,255,0.85) 0%, transparent 65%); }
[data-card="pp-meta-client"] .card-glow-mask       { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(48,169,192,0.65) 0%, transparent 60%); }
[data-card="pp-meta-industry"] .card-glow-spin     { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(130,85,255,0.8) 0%, transparent 65%); }
[data-card="pp-meta-industry"] .card-glow-mask     { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(15,110,86,0.65) 0%, transparent 60%); }
[data-card="pp-meta-deliverables"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
[data-card="pp-meta-deliverables"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.65) 0%, transparent 60%); }
[data-card="pp-meta-tech"] .card-glow-spin         { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.85) 0%, transparent 65%); animation-delay: -2s; }
[data-card="pp-meta-tech"] .card-glow-mask         { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(24,95,165,0.7) 0%, transparent 60%); animation-delay: -4s; }

/* Hero meta strip */
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-10);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
.cs-meta__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
}
.cs-meta__value {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

/* Context strip — tight below hero */
.cs-context { padding-top: 0; padding-bottom: var(--sp-15); }
.cs-context__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
}
.cs-context__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  font-weight: 300;
  margin: 0;
}
.cs-context__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.cs-context__pill {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
}

/* Alternating work rows */
.cs-work { padding-top: 0; }
.cs-work .container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-18);
  align-items: center;
  padding: var(--sp-18) 0;
  border-bottom: 1px solid var(--border);
}
.cs-row:last-child { border-bottom: none; }
.cs-row--flip .cs-row__visual { order: 2; }
.cs-row--flip .cs-row__text   { order: 1; }

/* Flush variant — for a row that sits directly under a section header rather
   than in the case-study's stacked sequence. Drops the leading padding and the
   metric grid's decorative offset so it reads as one block with the header. */
.cs-row--flush { padding-top: 0; }
.cs-row--flush .cs-row__visual { display: flex; flex-direction: column; gap: var(--sp-6); }
.cs-row--flush .cs-metric-wrap { top: 0; margin-bottom: 0; }
/* Scoped to this variant so the case-study page's own quotes stay borderless. */
.cs-row--flush .cs-inline-quote { border: 1px solid var(--border); margin-top: 0; }

/* Screenshot card — no overflow:hidden here so glow bleeds outward */
.cs-screenshot-wrap {
  border-radius: var(--r-lg);
}
/* Content sits above the glow */
.cs-screenshot {
  position: relative;
  z-index: 1;
  margin: 0;
  display: block;
  line-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cs-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

/* Row text */
.cs-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cs-row__text .eyebrow-pill { align-self: flex-start; }
/* Gradient-border button — keep it at content width in the flex column, and give
   it room to breathe away from the paragraph above it. */
.cs-row__text .btn--build-wrap { align-self: flex-start; margin-top: var(--sp-5); }
.cs-row__heading {
  font-size: var(--fs-3xl);
  line-height: var(--lh-heading);
  font-weight: 300;
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  margin: 0;
}
.cs-row__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin: 0;
}

/* ─── Brand redesign — business-card fan + influence-ad reveal ────────────── */
.cs-brand-stage {
  position: relative;
  width: 100%;
  min-height: 500px;
}

/* Card fan group — centered; the front card defines the group's height */
.cs-brand-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  max-width: 380px;
  transform: translate(-50%, -50%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.cs-bcard {
  margin: 0;
  border-radius: var(--r-xs);
  overflow: hidden;
  box-shadow: 0 22px 44px -20px rgba(20, 45, 90, 0.45), 0 0 2px 2px rgba(255,255,255,0.5)
}
.cs-bcard img { display: block; width: 100%; height: auto; }

/* Front card — fades in and slides up first */
.cs-bcard--front {
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fan cards — stacked on the front card until they slide out up-and-left,
   same as the hero screens (pivot near the bottom-right, peek out the top-left). */
.cs-bcard--back {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotate(0deg) translate(0, 0);
  transform-origin: 88% 95%;
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cs-bcard--back-l { z-index: 2; }
.cs-bcard--back-r { z-index: 1; }

.cs-brand-stage.is-revealed .cs-bcard--front {
  opacity: 1;
  transform: translateY(0);
}
.cs-brand-stage.is-revealed .cs-bcard--back-l {
  opacity: 1;
  transform: rotate(-10deg) translate(-16%, -24%);
  transition-delay: 0.18s;
}
.cs-brand-stage.is-revealed .cs-bcard--back-r {
  opacity: 0.97;
  transform: rotate(-19deg) translate(-29%, -48%);
  transition-delay: 0.3s;
}

/* Influence ad — sits below/behind the cards, hidden until the next section */
.cs-brand-ad {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 95%;
  max-height: 340px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  opacity: 0;
  transform: translate(-50%, 40px);
  box-shadow: 0 26px 50px -24px rgba(20, 45, 90, 0.4);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  transition: opacity 0.75s ease 0.1s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  z-index: 1;
  pointer-events: none;
}
.cs-brand-ad img { display: block; width: 100%; height: auto; }

/* Advanced: cards lift well clear of the ad's top edge, ad slides up and fades in */
.cs-brand-stage.is-advanced .cs-brand-cards {
  transform: translate(-50%, calc(-50% - 168px)) scale(0.72);
}
.cs-brand-stage.is-advanced .cs-brand-ad {
  opacity: 1;
  transform: translate(-50%, 1rem);
}

@media (prefers-reduced-motion: reduce) {
  .cs-brand-cards,
  .cs-bcard--front,
  .cs-bcard--back,
  .cs-brand-ad { transition: none !important; }
}

/* ─── Built for the modern web — phone inside a glowing card ──────────────── */
/* Card matches the height of the text column */
#modern-web { align-items: stretch; }
#modern-web .cs-row__visual { height: 100%; }

.cs-modern-card { width: 100%; height: 100%; border-radius: var(--r-2xl); }
.cs-modern-card .card-glow { opacity: 0; border-radius: var(--r-3xl); }
.cs-modern-card:is(:hover, .is-pressed) .card-glow { opacity: 0.72; }

.cs-modern-card__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--card-bg);
}

/* Phone: equal padding on top/left/right (so it's horizontally centered),
   no bottom padding — the phone runs to the bottom and is clipped by the
   inner's overflow:hidden at the card's bottom border. */
.cs-mobile-device {
  position: absolute;
  top: 36px;
  left: 36px;
  right: 36px;
  margin: 0;
}

/* Titanium body */
.cs-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 430 / 932;
  padding: var(--sp-3);
  border-radius: var(--r-3xl);
  background: linear-gradient(145deg, #41464e 0%, #16181c 30%, #1e2126 62%, #474c54 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1.5px rgba(0, 0, 0, 0.5),
    0 34px 60px -26px rgba(20, 45, 90, 0.55);
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Screen — lit but contentless until the screenshot boots in (so the
   dark island still reads against it during its pop) */
.cs-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: radial-gradient(120% 75% at 50% 0%, #161b22 0%, #07080c 58%);
}

/* Carousel viewport — pops in during boot, then swipes through screenshots */
.cs-phone__shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cs-phone__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.cs-phone__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.cs-phone__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Dynamic island */
.cs-phone__island {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 84px;
  height: 25px;
  border-radius: var(--r-md);
  background: #05060a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.8);
  z-index: 4;
  opacity: 0;
  transform: translateX(-50%) scale(0.4);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* iOS-style status bar */
.cs-phone__statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5) 0 var(--sp-5);
  color: #fff;
  pointer-events: none;
  transition: color 0.45s ease;
}
/* Light screenshots need dark status-bar glyphs */
.cs-phone__statusbar.is-dark { color: #0b0c10; }
.cs-phone__sb-carrier {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}
.cs-phone__sb-right {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.cs-phone__sb-ico { display: inline-flex; }
.cs-phone__sb-ico svg { display: block; }
.cs-phone__sb-ico--cell svg { width: 17px; height: 11px; }
.cs-phone__sb-ico--wifi svg { width: 16px; height: 12px; }
.cs-phone__sb-ico--batt svg { width: 25px; height: 12px; }

.cs-phone__sb-item {
  opacity: 0;
  transform: scale(0.45);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Side buttons */
.cs-phone__btn {
  position: absolute;
  z-index: 2;
  border-radius: 3px;
  background: linear-gradient(180deg, #2c3037, #15171b);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-phone__btn--mute   { left: -3px;  top: 15%; width: 4px; height: 4.5%; transform: translateX(7px); }
.cs-phone__btn--vol-up { left: -3px;  top: 23%; width: 4px; height: 8%;   transform: translateX(7px); }
.cs-phone__btn--vol-dn { left: -3px;  top: 33%; width: 4px; height: 8%;   transform: translateX(7px); }
.cs-phone__btn--power  { right: -3px; top: 28%; width: 4px; height: 11%;  transform: translateX(-7px); }

/* Assembly: frame fades in + slides up → island pops → screenshot pops →
   status-bar items pop in left to right. Side buttons ride in with the frame. */
.cs-mobile-device.is-revealed .cs-phone {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cs-mobile-device.is-revealed .cs-phone__btn {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}
.cs-mobile-device.is-revealed .cs-phone__island {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition-delay: 0.8s;
}
.cs-mobile-device.is-revealed .cs-phone__shot {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.25s;
}
.cs-mobile-device.is-revealed .cs-phone__sb-item {
  opacity: 1;
  transform: scale(1);
}
.cs-mobile-device.is-revealed .cs-phone__sb-carrier   { transition-delay: 1.8s; }
.cs-mobile-device.is-revealed .cs-phone__sb-ico--cell { transition-delay: 1.9s; }
.cs-mobile-device.is-revealed .cs-phone__sb-ico--wifi { transition-delay: 2s; }
.cs-mobile-device.is-revealed .cs-phone__sb-ico--batt { transition-delay: 2.1s; }

@media (prefers-reduced-motion: reduce) {
  .cs-phone,
  .cs-phone__btn,
  .cs-phone__island,
  .cs-phone__shot,
  .cs-phone__sb-item { transition: none !important; }
}

@media (max-width: 640px) {
  .cs-mobile-device { top: 24px; left: 24px; right: 24px; }
}

/* Inline quote within a row */
/* Pull quote */
.cs-pullquote { padding-top: 0; }
.cs-pullquote__wrap {
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--r-xl);
}
.cs-pullquote__inner {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.cs-pullquote__text {
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--text);
  text-align: center;
  margin: 0 0 var(--sp-8);
}
.cs-pullquote__attribution {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

.cs-inline-quote {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--card-bg);
  border-radius: var(--r-sm);
}
/* Case-study page quote: no card, just a blue rule down the left edge.
   Scoped to .cs-work so the Omniview page's flush variant keeps its card. */
.cs-work .cs-inline-quote {
  background: none;
  border-radius: 0;
  border-left: 5px solid var(--mobiah-blue);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
}
.cs-inline-quote blockquote {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}
.cs-inline-quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.cs-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #147CFF;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-quote-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-quote-meta strong {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.cs-quote-meta span {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Checklist */
.cs-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.cs-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.cs-check svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #30A9C0;
}

/* Analytics metric grid — 2×2 stat card with count-up on scroll.
   Subgrid: value row and label row are shared across each pair of cells,
   so h3 heights and p heights equalize naturally. */
.cs-metric-wrap {
  position: relative;
  top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto auto);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom:4rem;
}
.cs-metric {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  background: var(--card-bg);
  padding: var(--sp-8) var(--sp-7);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}
.cs-metric:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; border-top-left-radius: calc(var(--r-lg) - 1px); }
.cs-metric:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; border-top-right-radius: calc(var(--r-lg) - 1px); }
.cs-metric:nth-child(3) { grid-column: 1; grid-row: 3 / span 2; border-bottom-left-radius: calc(var(--r-lg) - 1px); }
.cs-metric:nth-child(4) { grid-column: 2; grid-row: 3 / span 2; border-bottom-right-radius: calc(var(--r-lg) - 1px); }
/* The period these figures cover. Real markup, not generated content: a
   qualifier a crawler cannot read is a claim without its caveat. */
.cs-metric-note {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-metric-wrap:is(:hover, .is-pressed) .cs-metric { background: var(--card-bg-hover); }

.cs-metric-wrap.is-revealed .cs-metric { opacity: 1; transform: translateY(0); text-align: center; }
.cs-metric-wrap.is-revealed .cs-metric:nth-child(1) { transition-delay: 0s, 0s, 0s; }
.cs-metric-wrap.is-revealed .cs-metric:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s; }
.cs-metric-wrap.is-revealed .cs-metric:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s; }
.cs-metric-wrap.is-revealed .cs-metric:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s; }

.cs-metric h3 {
  align-self: end;
  margin: 0 0 0.25rem;
  font-size: var(--fs-6xl);
  font-weight: 300;
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(115deg, #2E61AD 0%, #E84C91 55%, #F65D22 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cs-metric p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cs-metric { transition: background 0.4s ease; }
}
@media (max-width: 640px) {
  .cs-metric { padding: var(--sp-6) var(--sp-5); }
  .cs-metric h3 { font-size: var(--fs-5xl); letter-spacing: var(--ls-tighter); }
}

/* Flow diagram */
.cs-screenshot--flow {
  background: var(--card-bg);
  border-radius: var(--r-lg);
  padding: var(--sp-9) var(--sp-8);
  line-height: normal;
}
.cs-flow-card__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--sp-5);
}
.cs-flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* ─── Actionable-insights flow: cards light up one by one on scroll ───────── */
.cs-flow__step {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  opacity: 0.45;
  filter: saturate(0.2);
  transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-flow__step.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(0);
}
/* Brand accents once a card is active */
.cs-flow__step--pp.is-active    { border-color: rgba(20,124,255,0.5);  box-shadow: 0 0 0 1px rgba(20,124,255,0.18),  0 10px 26px -14px rgba(20,124,255,0.55); }
.cs-flow__step--hs.is-active    { border-color: rgba(255,122,89,0.6);  box-shadow: 0 0 0 1px rgba(255,122,89,0.2),   0 10px 26px -14px rgba(255,122,89,0.6); }
.cs-flow__step--slack.is-active { border-color: rgba(54,197,240,0.55); box-shadow: 0 0 0 1px rgba(54,197,240,0.2),   0 10px 26px -14px rgba(46,182,125,0.55); }
.cs-flow__step--sales.is-active { border-color: rgba(29,158,117,0.55); box-shadow: 0 0 0 1px rgba(29,158,117,0.2),    0 10px 26px -14px rgba(29,158,117,0.55); }

.cs-flow__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  transition: filter 0.5s ease, box-shadow 0.5s ease;
}
.cs-flow__step.is-active .cs-flow__icon { filter: grayscale(0); }
.cs-flow__icon img,
.cs-flow__icon svg { width: 26px; height: 26px; object-fit: contain; display: block; }

.cs-flow__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 3px;
}
.cs-flow__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}

/* Connector that draws downward from one card to the next */
.cs-flow__line {
  display: flex;
  height: 22px;
  padding-left: var(--sp-7);
}
.cs-flow__line span {
  display: block;
  width: 2px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--mobiah-blue, #147CFF), rgba(20,124,255,0.35));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s ease;
}
.cs-flow__line.is-drawn span { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .cs-flow__step,
  .cs-flow__icon,
  .cs-flow__line span { transition: none; }
}

/* Omniview cross-sell */
.cs-omniview .section-hdr { margin-bottom: var(--sp-12); }
.cs-omniview__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--mobiah-blue);
  text-decoration: none;
  margin-top: var(--sp-1);
}
.cs-omniview__link:hover { text-decoration: underline; }
.cs-omniview__link .btn__arrow { width: 16px; height: 16px; }

.cs-omniview__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--sp-4);
}
.cs-omniview__cards .card-wrap {
  display: flex;
  flex-direction: column;
}

.cs-omniview__card {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
  transition: background 0.4s ease;
}
.card-wrap:is(:hover, .is-pressed) .cs-omniview__card { background: var(--card-bg-hover); }

/* Pill — prevent stretching in flex column */
.cs-omniview__card .product__pill { align-self: flex-start; margin-bottom: 0; }

/* Icon box — colored by default, matches pill */
.cs-omniview__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.cs-omniview__icon svg { display: block; }

.cs-omniview__icon { background: var(--bg); color: var(--text-faint); border-color: var(--border); }

[data-card="omniview"]:is(:hover, .is-pressed)   .cs-omniview__icon { background: #E6F1FB; color: #185FA5; border-color: #c5daf5; }
[data-card="sdrplus"]:is(:hover, .is-pressed) .cs-omniview__icon { background: #FEF0E9; color: #C44A1A; border-color: #fad5be; }
[data-card="analytics"]:is(:hover, .is-pressed)  .cs-omniview__icon { background: #E1F5EE; color: #0F6E56; border-color: #b8e8d6; }
[data-card="access"]:is(:hover, .is-pressed)     .cs-omniview__icon { background: #FCE7F0; color: #C0296A; border-color: #f7c6dc; }

.cs-omniview__mod-name {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--text);
  margin: 0;
}
.cs-omniview__mod-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin: 0;
}

/* Pill — prevent stretching in flex column */
.cs-omniview__card .product__pill { align-self: flex-start; margin-bottom: 0; }

@media (max-width: 960px) {
  .cs-row { grid-template-columns: 1fr; gap: var(--sp-10); padding: var(--sp-15) 0; }
  .cs-row--flip .cs-row__visual { order: 0; }
  .cs-row--flip .cs-row__text   { order: 0; }
  .cs-row__heading { font-size: var(--fs-2xl); }
  .cs-omniview__cards { grid-template-columns: 1fr; }
  .cs-brand-stage { min-height: 460px; }
  .cs-brand-cards { max-width: 340px; }
  .cs-metric-wrap { top: 0; margin-bottom: 2rem; }
}
@media (max-width: 640px) {
  .cs-meta { gap: var(--sp-4) var(--sp-7); }
  .cs-row { padding: var(--sp-10) 0; gap: var(--sp-7); }
  .cs-row__heading { font-size: var(--fs-xl); }

  /* Brand redesign — mobile: stacked layout, centered fan, ad in-section */
  .cs-brand-stage {
    min-height: auto;
    padding: var(--sp-2) var(--sp-4) var(--sp-8) var(--sp-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
  }
  #brand-redesign .cs-row__visual { overflow: visible; }
  .cs-brand-cards {
    position: relative;
    top: auto;
    left: auto;
    width: min(86%, 270px);
    max-width: none;
    margin: 0 auto;
    transform: translateX(16%);
  }
  /* Up-and-left fan (hero style) — bias upward so names peek above the front card */
  .cs-bcard--back { transform-origin: 88% 95%; }
  .cs-brand-stage.is-revealed .cs-bcard--back-l {
    transform: rotate(-10deg) translate(-5%, -30%);
  }
  .cs-brand-stage.is-revealed .cs-bcard--back-r {
    transform: rotate(-17deg) translate(-8%, -46%);
  }
  .cs-brand-ad {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    margin-top: var(--sp-7);
    transform: translateY(20px);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .cs-brand-stage.is-advanced .cs-brand-cards {
    transform: translateX(16%) scale(0.88);
    margin-bottom: -12px;
  }
  .cs-brand-stage.is-advanced .cs-brand-ad {
    opacity: 1;
    transform: translateY(0);
  }

  .cs-screenshot--flow { padding: var(--sp-6) var(--sp-4); }
  .cs-pullquote__inner { padding: var(--sp-9) var(--sp-7); }
  .cs-pullquote__text { font-size: var(--fs-md); }
}

/* ─── A Closer Look — sticky stacked-cards scroll choreography ─────────────── */
.cl-stack { position: relative; }
.cl-card .product__item { border: 1px solid var(--border); }

.cl-pin.cl-on { padding: 0; height: 200vh; }
.cl-pin.cl-on .cl-pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.cl-pin.cl-on .cl-pin__sticky > .container { width: 100%; }
.cl-pin.cl-on .cl-hdr { flex: none; margin-bottom: 6rem; }
.cl-pin.cl-on .cl-stack { flex: none; }
.cl-pin.cl-on .cl-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.cl-pin.cl-on .cl-card:nth-child(1) { z-index: 1; }
.cl-pin.cl-on .cl-card:nth-child(2) { z-index: 2; }
.cl-pin.cl-on .cl-card:nth-child(3) { z-index: 3; }

/* Roadmap section */
.roadmap__media {
  margin: var(--sp-12) auto 0;
  max-width: 1120px;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.roadmap__replay {
  position: absolute;
  bottom: 14px;
  right: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}
.roadmap__replay:hover { background: rgba(0,0,0,0.8); }
.roadmap__still,
.roadmap__video {
  width: 100%;
  display: block;
  border-radius: var(--r-lg);
}
.roadmap__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-12);
  margin-top: var(--sp-12);
  align-items: start;
}
.roadmap__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.roadmap__desc {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  opacity: 0.75;
}
.roadmap__cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.roadmap__feature {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.roadmap__feature .lp-feature__icon {
  flex: none;
  margin-top: 2px;
}
.roadmap__feature .lp-feature__name {
  font-size: var(--fs-base);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-1-5);
}
.roadmap__feature .lp-feature__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.roadmap__copy-title {
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: var(--ls-snug);
  color: var(--text-muted);
  margin: 0 0 var(--sp-1);
}
.roadmap__copy-sub {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: var(--ls-snug);
  color: var(--text);
  margin: var(--sp-2) 0 var(--sp-1);
}
.roadmap__cta {
  margin-top: var(--sp-3);
  display: inline-flex;
  align-self: flex-start;
}
@media (max-width: 768px) {
  .roadmap__body { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.roadmap__media { position: relative; }
.roadmap__unmute {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}
.roadmap__unmute:hover { background: rgba(0,0,0,0.8); }

@media (max-width: 768px) {
  .roadmap__body { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ─── Dark mode: card icons stay in brand color at rest ─────────────────────
   In light mode these icons are neutral and take their brand color on hover.
   In dark mode the color is the resting state (hover keeps the same values). */
[data-theme="dark"] .framework__wrap[data-fw="0"] .framework__icon-wrap { color: #2e61ad; border-color: #4a7bc6; }
[data-theme="dark"] .framework__wrap[data-fw="1"] .framework__icon-wrap { color: #d93978; border-color: #f175b0; }
[data-theme="dark"] .framework__wrap[data-fw="2"] .framework__icon-wrap { color: #eeab42; border-color: #eec26a; }
[data-theme="dark"] .framework__wrap[data-fw="3"] .framework__icon-wrap { color: #45c4ce; border-color: #81d0df; }

[data-theme="dark"] [data-card="marketing"] .bridge__icon-box { color: #3b60a7; border-color: #6a8bbf; }
[data-theme="dark"] [data-card="sales"]     .bridge__icon-box { color: #2da9b5; border-color: #6cc8d0; }

[data-theme="dark"] [data-card="architect"] .hww__icon { color: #525da4; border-color: #8088c0; }
[data-theme="dark"] [data-card="operate"]   .hww__icon { color: #d99220; border-color: #eeab42; }
[data-theme="dark"] [data-card="augment"]   .hww__icon { color: #009c8f; border-color: #4dbcb1; }

[data-theme="dark"] [data-card="sdrplus"]   .lp-feature__icon { color: #f15a29; border-color: #f4855e; }
[data-theme="dark"] [data-card="omniview"]  .lp-feature__icon { color: #2e7fd6; border-color: #5aa0e6; }
[data-theme="dark"] [data-card="analytics"] .lp-feature__icon { color: #1d9e75; border-color: #5cc4a3; }
[data-theme="dark"] [data-card="marketing"] .lp-feature__icon { color: #d98a1f; border-color: #eeab42; }
[data-theme="dark"] [data-card="sales"]     .lp-feature__icon { color: #2da9b5; border-color: #6cc8d0; }
[data-theme="dark"] [data-card="access"]    .lp-feature__icon { color: #d93978; border-color: #f175b0; }

/* cs-omniview icons carry a tinted background too — in dark, tint the brand
   color at low alpha instead of the light-mode pastel, at rest and on hover. */
[data-theme="dark"] [data-card="omniview"]  .cs-omniview__icon,
[data-theme="dark"] [data-card="omniview"]:is(:hover, .is-pressed)  .cs-omniview__icon { background: rgba(46,127,214,0.14);  color: #5aa0e6; border-color: rgba(46,127,214,0.35); }
[data-theme="dark"] [data-card="sdrplus"]   .cs-omniview__icon,
[data-theme="dark"] [data-card="sdrplus"]:is(:hover, .is-pressed)   .cs-omniview__icon { background: rgba(241,90,41,0.14);   color: #f4855e; border-color: rgba(241,90,41,0.35); }
[data-theme="dark"] [data-card="access"]    .cs-omniview__icon,
[data-theme="dark"] [data-card="access"]:is(:hover, .is-pressed)    .cs-omniview__icon { background: rgba(217,57,120,0.14);  color: #f175b0; border-color: rgba(217,57,120,0.35); }
[data-theme="dark"] [data-card="analytics"] .cs-omniview__icon,
[data-theme="dark"] [data-card="analytics"]:is(:hover, .is-pressed) .cs-omniview__icon { background: rgba(29,158,117,0.14); color: #5cc4a3; border-color: rgba(29,158,117,0.35); }

/* ─── Error pages ─────────────────────────────────────────────────────────── */
.error__inner { max-width: 40rem; margin: 0 auto; padding: 6rem 0; text-align: center; }
.error__code { display: inline-block; margin-bottom: 1.25rem; }
.error__h1 { margin-bottom: 0.75rem; }
.error__body { color: var(--text-muted); margin-bottom: 2rem; }
.error__links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; list-style: none; padding: 0; }
.error__links a { color: var(--mobiah-blue); text-decoration: none; }
.error__links a:hover { text-decoration: underline; }

/* ─── Legal documents ─────────────────────────────────────────────────────── */
.legal__inner { max-width: 52rem; margin: 0 auto; padding: var(--sp-7) 0; }

/* Centred masthead: eyebrow, title, then the effective-date line. */
.legal__header {
  text-align: center;
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
/* The eyebrow is the site's orange pill; it only needs centring. */
.legal__eyebrow { margin-bottom: var(--sp-3); }
.legal__h1 {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.legal__sub {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.legal__sub a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }

/* Same typography as the modal versions of these documents. */
.legal__body h3 {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--text);
  margin: var(--sp-7) 0 var(--sp-2);
}
.legal__body h4 {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text);
  margin: var(--sp-4) 0 var(--sp-1-5);
}
.legal__body p {
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-relaxed);
}
.legal__body ul {
  list-style: disc;
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
}
.legal__body li { line-height: var(--lh-relaxed); margin-bottom: var(--sp-1); }
.legal__body strong { color: var(--text); font-weight: 600; }
.legal__body em { font-style: italic; }
.legal__body section { margin-bottom: var(--sp-2); }
.legal__body a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--orange); }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.legal__table th,
.legal__table td {
  border: 1px solid var(--border);
  padding: var(--sp-1-5) var(--sp-2);
  text-align: left;
  vertical-align: top;
}
.legal__table th { background: var(--row-label-bg); color: var(--text); font-weight: 600; }
/* A wide table scrolls inside its own box rather than the page. */
.legal__table-wrap { overflow-x: auto; }

/* ─── Omniview Analytics: drill-down demo ───────────────────────────────────
   Mirrors the real Omniview All Pages drill-down (admin/demos/omniview/views/
   ga4-behavior/all-pages/drill.css): a compact page table, breakdown cards
   beside it, and the "Break down by" menu. The product is a light UI, so the
   mock keeps its light palette and takes the screenshot filter in dark mode. */
.dd-stage {
  --dd-accent: #2563eb;
  position: relative;
  margin-top: var(--sp-10);
  color: #111827;
}
[data-theme="dark"] .dd-stage .dx-layout,
[data-theme="dark"] .dd-stage .dx-menu { filter: hue-rotate(180deg) invert(0.925); }

.dx-layout { display: flex; align-items: flex-start; gap: 16px; }
.dx-table,
.dx-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 40px -28px rgb(20 45 90 / 0.35);
  overflow: hidden;
}
.dx-table { flex: 0 0 auto; }

/* Cards scroll sideways inside the track, never the page. Padding leaves room
   for the card shadow; negative margins keep the cards in place. The left edge
   stays flush so scrolled-away cards never peek out beside the table. */
.dx-track {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 16px 32px 0;
  margin: -8px -16px -32px 0;
  overflow: hidden;
}
/* Once the track scrolls, the card it scrolled past would be sliced flat by the
   clip edge; fade it out there instead. */
.dx-track.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px);
}
.dx-card { flex: 0 0 300px; transition: opacity 250ms ease; }
.dx-card.is-new { animation: dx-card-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.dx-card.is-leaving { opacity: 0; }
@keyframes dx-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dx-card__hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 12px 10px 16px; }
.dx-card__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563eb;
}
.dx-card__title { font-size: 14px; font-weight: 600; color: #111827; }
.dx-card__crumbs { font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: #9ca3af; }

.dx-cols,
.dx-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--dx-c3, 52px);
  align-items: center;
  gap: 12px;
  padding-inline: 16px;
}
/* Long second-metric names ("Event count") widen the card instead of wrapping. */
.dx-card--wide { flex-basis: 340px; --dx-c3: 84px; }
.dx-cols {
  padding-block: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  background: #f9fafb;
  border-block: 1px solid #f3f4f6;
}
.dx-cols span { white-space: nowrap; }
.dx-cols span:first-child { overflow: hidden; text-overflow: ellipsis; }
.dx-cols span:not(:first-child) { text-align: right; }
.dx-cols--table { border-top: 0; }

.dx-item {
  padding-block: 9px;
  font-size: 13px;
  line-height: 1.3;
  color: #111827;
  transition: background 150ms ease;
}
.dx-item + .dx-item { border-top: 1px solid #f3f4f6; }
.dx-item.is-hover,
.dx-item.is-open { background: #f3f4f6; }
.dx-item.is-selected { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
.dx-item__label { display: flex; align-items: center; min-width: 0; }
.dx-item__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Key-event star after the name (outside the truncating text), plus card footnotes. */
.dx-key { flex: none; display: inline-block; margin-left: 5px; color: #d97706; line-height: 0; }
.dx-note { margin: 0; padding: 8px 16px 10px; font-size: 11px; color: #6b7280; border-top: 1px solid #f3f4f6; }
.dx-note .dx-key { margin: 0 2px 0 0; vertical-align: -1px; }
.dx-note + .dx-note { border-top: 0; padding-top: 0; }

/* The page table that starts the demo: share, users, views, new users, key events,
   engagement. Once a page is clicked it shrinks to users and views. Spacing sits in
   the cells' padding so the collapsing columns take their gaps with them. */
.dx-cols--table,
.dx-item--page {
  grid-template-columns: 162px 64px 56px 56px 76px 82px 96px;
  column-gap: 0;
  transition: grid-template-columns 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 150ms ease;
}
.dx-cols--table > *:not(:first-child),
.dx-item--page > *:not(:first-child) { min-width: 0; padding-left: 12px; overflow: hidden; transition: opacity 0.3s ease; }
.dx-cols--table > :first-child,
.dx-item--page > :first-child { padding-right: 12px; }
.dx-table.is-compact .dx-cols--table,
.dx-table.is-compact .dx-item--page { grid-template-columns: 162px 0 56px 56px 0 0 0; }
.dx-table.is-compact .dx-cols--table > :nth-child(2),
.dx-table.is-compact .dx-cols--table > :nth-child(n+5),
.dx-table.is-compact .dx-item--page > :nth-child(2),
.dx-table.is-compact .dx-item--page > :nth-child(n+5) { opacity: 0; }
.dx-page { display: flex; flex-direction: column; min-width: 0; }
.dx-page__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-page__path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #9ca3af; }

.dx-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #374151; }
.dx-num em { font-style: normal; font-size: 11px; color: #9ca3af; }

.dx-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 44px 16px; font-size: 13px; color: #6b7280; border-top: 1px solid #f3f4f6; }
.dx-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid #dbeafe; border-top-color: #2563eb; animation: dx-spin 700ms linear infinite; }
@keyframes dx-spin { to { transform: rotate(360deg); } }

/* "Break down by" menu, positioned at the cursor inside the stage */
.dx-menu {
  position: absolute;
  z-index: 4;
  width: 280px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.05);
  animation: dx-menu-in 140ms ease-out;
}
.dx-menu[hidden] { display: none; }
@keyframes dx-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.dx-menu__label { padding: 8px 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; }
.dx-menu__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; transition: background 150ms ease; }
.dx-menu__item.is-hover { background: #f3f4f6; }
.dx-menu__item.is-disabled { opacity: 0.45; }
.dx-menu__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #eff6ff; color: #2563eb; }
.dx-menu__text { display: flex; flex-direction: column; min-width: 0; }
.dx-menu__name { font-size: 14px; font-weight: 500; color: #111827; }
.dx-menu__dim { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A category with several dimensions opens them as a list under its row. */
.dx-menu__sub { padding: 2px 0 6px 54px; }
.dx-menu__subitem { height: 30px; display: flex; align-items: center; padding: 0 10px; border-radius: 6px; font-size: 13px; color: #374151; transition: background 150ms ease; }
.dx-menu__subitem.is-hover { background: #f3f4f6; }

@media (max-width: 900px) {
  .dx-layout { flex-direction: column; }
  .dx-table, .dx-track { width: 100%; }
  .dx-layout > .dx-table { overflow-x: auto; }
  .dx-layout > .dx-table > * { min-width: 628px; }
  .dx-layout > .dx-table.is-compact > * { min-width: 0; }
}

/* Crossfade when the demo resets between loops. */
.dx-layout { transition: opacity 0.4s ease, transform 0.4s ease; }
.dd-stage.is-fading .dx-layout { opacity: 0; transform: translateY(10px); }

/* Scripted cursor */
.dd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1);
}
.dd-cursor[hidden] { display: none; }
.dd-cursor__i { position: relative; transform-origin: 2px 2px; transition: opacity 0.4s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.dd-cursor__i svg { display: block; }
.dd-cursor.is-gone .dd-cursor__i { opacity: 0; }
.dd-cursor.is-click .dd-cursor__i { animation: dd-press 0.45s ease-out; }
.dd-cursor__ripple {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dd-accent);
  opacity: 0;
}
.dd-cursor.is-click .dd-cursor__ripple { animation: dd-ripple 0.45s ease-out; }
@keyframes dd-press  { 0%, 100% { transform: scale(1); } 35% { transform: scale(0.82); } }
@keyframes dd-ripple { from { transform: scale(0.3); opacity: 0.4; } to { transform: scale(1.9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dx-card.is-new, .dx-menu { animation: none; }
  .dx-cols--table, .dx-item--page { transition: none; }
  .dx-spinner { animation-duration: 2s; }
}

/* ─── Omniview Professional hero: visitor enrichment ────────────────────────
   An anonymous visitor card resolves into a company, then CRM, traffic, and
   intent cards arrive beside it. Uses the site tokens, so it follows the theme. */
.pv-stage {
  position: relative;
  display: grid;
  width: calc(100% + 36px);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: var(--sp-9);
  align-items: center;
  min-height: 380px;
  transition: opacity 0.5s ease;
}
.pv-stage.is-resetting { opacity: 0; }

.pv-card {
  position: relative;
  z-index: 1;
  background: var(--card-bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
/* The site's own card glow, lit once the visitor is identified. */
.pv-main-wrap { position: relative; }
.pv-stage.is-lit .pv-main-wrap .card-glow { opacity: 0.6; }
.pv-main { padding: var(--sp-4); }

.pv-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pv-link {
  fill: none;
  stroke: #2E61AD;
  stroke-width: 1.5;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  stroke-linejoin: round;
  transition: stroke-dashoffset 0.3s ease;
}
.pv-link.is-drawn { stroke-dashoffset: 0; }

/* Identity: avatar plus name lines */
.pv-id { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.pv-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-faint);
  transition: border-radius 0.3s ease, border-color 0.3s ease;
}
.pv-avatar > svg { grid-area: 1 / 1; transition: opacity 0.25s ease, transform 0.25s ease; }
.pv-avatar__logo { opacity: 0; transform: scale(0.6); }
.pv-avatar.is-known { border-radius: 12px; border-color: transparent; }
.pv-avatar.is-known .pv-avatar__anon { opacity: 0; transform: scale(0.6); }
.pv-avatar.is-known .pv-avatar__logo { opacity: 1; transform: none; }
.pv-avatar.is-spin { animation: pv-spin 1s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-id__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }

/* A field is a gray bar until it's filled, then its text rises in. */
.pv-field { position: relative; min-width: 0; height: 20px; }
.pv-field--title { height: 24px; }
.pv-bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--w, 60%);
  height: 8px;
  margin-top: -4px;
  border-radius: var(--r-pill);
  background: var(--border);
  transform-origin: left center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.pv-stage.is-scanning .pv-bar {
  background: linear-gradient(90deg, var(--border) 0%, var(--card-bg-hover) 50%, var(--border) 100%);
  background-size: 200% 100%;
  animation: pv-shimmer 1.2s linear infinite;
}
@keyframes pv-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pv-val {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.pv-field--title .pv-val { font-size: var(--fs-md); font-weight: 600; line-height: 24px; }
.pv-val--muted { font-size: var(--fs-xs); color: var(--text-muted); }
.pv-field.is-filled .pv-bar { opacity: 0; transform: scaleX(0.4); }
.pv-field.is-filled .pv-val { opacity: 1; transform: none; }

.pv-facts { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); }
.pv-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--sp-2); }

/* Side cards */
.pv-side { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.pv-side .pv-card {
  padding: var(--sp-3) var(--sp-4);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pv-crm { transform: translateX(-32px); }
.pv-traffic, .pv-intent, .pv-paid { transform: translateY(-16px); }
.pv-side .pv-card.is-in { opacity: 1; transform: none; }

.pv-card__hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
.pv-mark { display: block; flex: none; width: 14px; height: 14px; }
[data-theme="dark"] .pv-mark--mono { filter: invert(1); }

.pv-event { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding-block: var(--sp-1); }
.pv-event__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 122, 89, 0.14); color: #E8663D; }
.pv-event__text { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-xs); line-height: 1.3; color: var(--text-muted); }
.pv-event__text strong { font-weight: 600; color: var(--text); }
.pv-event__text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-event__when { font-size: var(--fs-2xs); color: var(--text-faint); }

.pv-metric { display: flex; flex-direction: column; gap: 2px; }
.pv-metric__num { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.pv-metric__sub { font-size: var(--fs-xs); color: var(--text-muted); }
.pv-spark { display: flex; align-items: flex-end; gap: 4px; height: 24px; margin-top: var(--sp-2); }
.pv-spark span { flex: 1; height: var(--h); border-radius: 2px; background: #2E61AD; opacity: 0.35; transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s ease; }
.pv-spark span:last-child { opacity: 1; }
.pv-traffic.is-in .pv-spark span { transform: none; }
.pv-traffic.is-in .pv-spark span:nth-child(2) { transition-delay: 0.05s; }
.pv-traffic.is-in .pv-spark span:nth-child(3) { transition-delay: 0.1s; }
.pv-traffic.is-in .pv-spark span:nth-child(4) { transition-delay: 0.15s; }
.pv-traffic.is-in .pv-spark span:nth-child(5) { transition-delay: 0.2s; }
.pv-traffic.is-in .pv-spark span:nth-child(6) { transition-delay: 0.25s; }
.pv-traffic.is-in .pv-spark span:nth-child(7) { transition-delay: 0.3s; }
.pv-pill {
  align-self: flex-start;
  margin-bottom: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: #FEF0E9;
  color: #C44A1A;
  font-size: var(--fs-xs);
  font-weight: 600;
}
[data-theme="dark"] .pv-pill { background: rgba(196, 74, 26, 0.2); color: #f5906a; }

@media (max-width: 640px) {
  .pv-stage { width: 100%; grid-template-columns: 1fr; row-gap: var(--sp-6); min-height: 0; }
  .pv-links { display: none; }
  .pv-crm { transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-stage *, .pv-stage { transition: none !important; animation: none !important; }
}

/* ─── Omniview hero: the module board ───────────────────────────────────────
   The board builds in as Omniview wordmarks, one wave turns each card into its
   tool, then questions run across it. Site tokens, so it follows the theme. */
.eb-stage { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); }

/* The grid of tools. Logos sit muted until an answer draws on them. */
.eb-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--eb-gap); }
.eb-cell {
  position: relative;
  aspect-ratio: 1;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.55s ease-in-out, transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
  transition-delay: calc(var(--i) * 26ms);
}
.eb-stage.is-built .eb-cell { opacity: 1; transform: none; }
/* While the cards hold the Omniview logo they only fade: any per-card slide or
   scale moves each tile on its own and the logo visibly wiggles. Transform is
   left out of the transition too, so on later loops the cards snap back from
   their wind-down offset instead of drifting home under the logo. */
.eb-stage.is-omni .eb-cell { transform: none; transition-property: opacity; }
/* The reveal wave runs while the logo tiles are still showing. The wave's
   per-card scale pulse would grow each tile with its card and break the logo
   apart at the card edges, so the reveal keeps the brightening but not the
   pulse. Later sweeps, over the tools, pulse as before. */
.eb-stage.is-revealing.is-sweeping .eb-cell:not(.is-lit) { animation: none; }

/* The highlight passing through, and the card it settles on. */
.eb-cell.is-lit { z-index: 2; transition-delay: 0s; }
.eb-cell.is-lit .eb-cell__card { border-color: var(--g1); background: var(--surface); }
.eb-cell.is-lit { transform: scale(1.06); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1); }

/* The sweep: one slow pass over the board. Cards brighten and settle back; no
   glow here, that is reserved for the cards the answer actually uses. */
.eb-stage.is-sweeping .eb-cell:not(.is-lit) { animation: eb-wave 1.1s ease-in-out calc(var(--i) * 42ms) both; }
.eb-stage.is-sweeping .eb-cell:not(.is-lit) .eb-cell__card { animation: eb-wave-card 1.1s ease-in-out calc(var(--i) * 42ms) both; }
.eb-stage.is-sweeping .eb-cell:not(.is-lit) .eb-cell__logo { animation: eb-wave-logo 1.1s ease-in-out calc(var(--i) * 42ms) both; }
.eb-stage.is-sweeping .eb-cell:not(.is-lit) .eb-cell__logo--light { animation-name: eb-wave-logo-light; }
[data-theme="dark"] .eb-stage.is-sweeping .eb-cell:not(.is-lit) .eb-cell__logo { animation-name: eb-wave-logo-dark; }
.eb-stage.is-sweeping .eb-cell:not(.is-lit) .eb-cell__glyph { animation: eb-wave-glyph 1.1s ease-in-out calc(var(--i) * 42ms) both; }
@keyframes eb-wave            { 50% { transform: scale(1.03); } }
@keyframes eb-wave-card       { 50% { background: var(--surface); border-color: var(--border-muted); } }
@keyframes eb-wave-logo       { 50% { filter: grayscale(0) opacity(0.95); } }
@keyframes eb-wave-logo-light { 50% { filter: brightness(0) opacity(0.9); } }
@keyframes eb-wave-logo-dark  { 50% { filter: brightness(0) invert(1) opacity(0.95); } }
@keyframes eb-wave-glyph      { 50% { color: var(--text); opacity: 0.9; } }

/* The card itself sits above its glow, which is a sibling, never a child of the
   painted surface. Same order as the site's card-wrap / card-glow pairing. */
.eb-cell__card {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card-bg-hover);
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* A soft, still glow behind the card, built to the same recipe as the site's
   card-glow: inset -8, blur 20, low opacity. Each card carries its own pair. */
.eb-cell__glow {
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: var(--r-2xl);
  background: radial-gradient(ellipse 55% 55% at 68% 28%, var(--g1) 0%, transparent 65%),
              radial-gradient(ellipse 48% 48% at 32% 72%, var(--g2) 0%, transparent 60%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.eb-cell.is-lit .eb-cell__glow { opacity: 0.75; }

.eb-cell__logo {
  width: auto;
  height: 24px;
  max-width: 62%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.4);
  transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.eb-cell.is-lit .eb-cell__logo { filter: none; transform: scale(1.05); }
/* Brands with no icon in the repo show their wordmark, sized by width. */
.eb-cell__logo--word { height: auto; width: 76%; max-width: 76%; max-height: 18px; }
/* Artwork that is white in its source file, so it needs forcing dark in light mode. */
.eb-cell__logo--light { filter: brightness(0) opacity(0.4); }
.eb-cell.is-lit .eb-cell__logo--light { filter: brightness(0) opacity(0.9); }
[data-theme="dark"] .eb-cell.is-lit .eb-cell__logo { filter: brightness(0) invert(1); }
[data-theme="dark"] .eb-cell__logo { filter: brightness(0) invert(1) opacity(0.4); }
[data-theme="dark"] .eb-cell.is-lit .eb-cell__logo { filter: brightness(0) invert(1); }

.eb-cell__glyph { color: var(--text-muted); opacity: 0.55; transition: color 0.5s ease, opacity 0.5s ease; }
.eb-cell.is-lit .eb-cell__glyph { color: var(--g1); opacity: 1; }

/* Omniview first. Together the cards form one big Omniview logo: every card
   holds the whole board-sized logo, shifted by its column and row and clipped
   to the card, so each shows its own tile. .is-omni on the stage shows the
   tiles; when it comes off during the wave, each card swaps to its tool at the
   wave's peak (half of the 1.1s pass, on the same 42ms stagger). */
.eb-board { container-type: inline-size; --eb-gap: var(--sp-2); --eb-cell: calc((100cqw - 5 * var(--eb-gap)) / 6); }
.eb-cell__card { overflow: hidden; }
.eb-cell__brand { display: grid; place-items: center; width: 100%; height: 100%; }
.eb-cell__ov {
  position: absolute;
  /* The card's border sits 1px inside the cell, so offset by it too. */
  left: calc(-1 * var(--c) * (var(--eb-cell) + var(--eb-gap)) - 1px);
  top: calc(-1 * var(--r) * (var(--eb-cell) + var(--eb-gap)) - 1px);
  width: 100cqw;
  height: calc(4 * var(--eb-cell) + 3 * var(--eb-gap));
  color: var(--text);
  opacity: 0;
}
.eb-cell__brand, .eb-cell__ov { transition: opacity 0.3s ease calc(var(--i) * 42ms + 0.4s); }
.eb-stage.is-omni .eb-cell__ov { opacity: 0.85; }
.eb-stage.is-omni .eb-cell__brand { opacity: 0; }
/* Going back to Omniview happens while the board is hidden; no stagger needed. */
.eb-stage.is-omni .eb-cell__brand,
.eb-stage.is-omni .eb-cell__ov { transition-delay: 0s; }

.eb-board, .eb-ask { position: relative; z-index: 1; }
/* Phones: the cards are ~40px, so an 8px gap broke the logo into pieces. A
   hairline gap and tighter corners keep it reading as one wordmark. */
@media (max-width: 640px) {
  .eb-board { --eb-gap: 3px; }
  .eb-cell__card { border-radius: 6px; padding: var(--sp-1); }
}

/* The question strip: a text thread shown one bubble at a time, straight on
   the hero with no box around it. Questions sit on the right, answers on the
   left. Every bubble shares one grid cell, so the strip is only ever as tall as
   the bubble in it; the new one rises in from below as the old one rises out. */
.eb-ask {
  opacity: 0;
  transform: translateY(8px);
}
.eb-stage.is-asking .eb-ask { opacity: 1; transform: none; }
.eb-chat {
  display: grid;
  min-height: calc(var(--lh-body) * var(--fs-sm) + 2 * var(--sp-2) + 2 * var(--sp-3));
  padding: var(--sp-3) 0;
  overflow: hidden;
}
.eb-chat__msg {
  --tail: var(--surface);
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  max-width: 82%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 18px;
  background: var(--tail);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  animation: eb-msg-in 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
/* The tail: the classic message curl. A block in the bubble's colour, its
   bottom-left corner rounded (16x14), with a second rounded block (radius 10)
   cut away beside the bubble, leaves a curl that sweeps out to a point and
   tucks back under. Drawn as an SVG mask so it works on any background. The
   box's x=13 is the bubble's edge. Answers mirror it to the left. */
.eb-chat__msg::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -7px;
  width: 20px;
  height: 25px;
  background: var(--tail);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3CclipPath id='c'%3E%3Cpath d='M0 0H20V25H16A16 14 0 0 1 0 11Z'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23c)' fill-rule='evenodd' d='M0 0H20V25H0Z M13 0H20V24.54A10 10 0 0 1 13 15Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3CclipPath id='c'%3E%3Cpath d='M0 0H20V25H16A16 14 0 0 1 0 11Z'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23c)' fill-rule='evenodd' d='M0 0H20V25H0Z M13 0H20V24.54A10 10 0 0 1 13 15Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.eb-chat__msg.is-out { animation: eb-msg-out 0.4s ease both; }
.eb-chat__msg--q {
  --tail: #2E61AD;
  justify-self: end;
  margin-right: 8px;
  color: #fff;
}
.eb-chat__msg--a {
  justify-self: start;
  margin-left: 8px;
  color: var(--text-muted);
}
.eb-chat__msg--a::after { right: auto; left: -7px; transform: scaleX(-1); }
@keyframes eb-msg-in  { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes eb-msg-out { to   { opacity: 0; transform: translateY(-100%); } }
.eb-ask__val { font-weight: 600; color: var(--text); }


.eb-ask { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1); }


@media (prefers-reduced-motion: reduce) {
  .eb-stage *, .eb-stage { transition: none !important; animation: none !important; }
}

/* Marks an animated mock-up as an example, so neither a reader nor a crawler
   takes its invented numbers for real ones. The stages carry data-nosnippet. */
.demo-label {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
.lp-hero__right .demo-label { text-align: right; }

/* Space between stacked CTA paragraphs */
.cta__body + .cta__body { margin-top: var(--sp-4); }

/* Omniview pricing: icon and plan name share one row, the icon sized to the
   name's line, so each card has four rows instead of five. */
.hww__cards--ov { grid-template-rows: repeat(4, auto); }
.hww__cards--ov .card-wrap,
.hww__cards--ov .hww__card { grid-row: span 4; }
.hww__head { display: flex; align-items: center; gap: var(--sp-3); padding:1rem 0; font-size: var(--fs-3xl); }
.hww__head .hww__icon { width: 1.05em; height: 1.05em; margin-top: 0; }
.hww__head .hww__icon svg { width: 0.6em; height: 0.6em; }
.hww__head .hww__name {color:var(--text-muted);}
.hww__cards--ov .hww__desc { padding-bottom: 1rem; font-size:0.9rem;}
.hww__cards--ov [data-glow="here"] .card-glow-spin        { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(241,90,41,0.9) 0%, transparent 65%); }
.hww__cards--ov [data-glow="here"] .card-glow-mask        { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(217,57,120,0.7) 0%, transparent 60%); }
.hww__cards--ov [data-glow="green-blue"] .card-glow-spin  { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(0,156,143,0.9) 0%, transparent 65%); }
.hww__cards--ov [data-glow="green-blue"] .card-glow-mask  { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(82,93,164,0.7) 0%, transparent 60%); }
.hww__cards--ov [data-glow="yellow-teal"] .card-glow-spin { background: radial-gradient(ellipse 55% 55% at 68% 28%, rgba(238,171,66,0.9) 0%, transparent 65%); }
.hww__cards--ov [data-glow="yellow-teal"] .card-glow-mask { background: radial-gradient(ellipse 48% 48% at 32% 72%, rgba(69,196,206,0.7) 0%, transparent 60%); }

/* Pricing: monthly price as the headline, annual price underneath */
.hww__price { display: flex; align-items: baseline; gap: var(--sp-1); }
.hww__price-amt {
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}
.hww__price-per {
  font-size: var(--fs-m);
  font-weight: 400;
  line-height: var(--lh-display);
  color: var(--text-muted);
}
.hww__price-star { font-size: var(--fs-m); color: var(--text-faint); }
.hww__price { margin-bottom: var(--sp-3); }

/* Card footer: the button, with the pay-as-you-go rate as its footnote. */
.hww__foot { margin-top: auto; }
.hww__foot .btn--buy { width: 100%; justify-content: center; padding: var(--sp-3) var(--sp-5); color: var(--text); }
.hww__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-faint);
  text-align: center;
}
.hww__note + .hww__note { margin-top: var(--sp-1); }