/* ============================================================
   VividCharts — Homepage redesign
   Brand-aligned: Object Sans · teal + dark-chocolate + ivory
   Tokens trace to the VividCharts Design System foundations.
   ============================================================ */

@import url('fonts.css');

:root {
  /* Surfaces — brand backgrounds are flat: white, ivory, gray-01 */
  --cream: #FFFFFF;        /* page base (brand white) */
  --light-cream: #F3EBE6;  /* ivory — the brand's warm surface (bands, footers) */
  --white: #FFFFFF;        /* clean card / panel surface */
  --ash: #383838;          /* charcoal (secondary interactive) */
  --dark-ash: #23222D;     /* dark chocolate — chrome / dark bands */

  /* Brand interactive */
  --brand: #3FC1C7;         /* primary teal */
  --brand-fg: #202020;      /* text/icon on a teal fill — charcoal, never white */
  --brand-strong: #349DA1;  /* teal-dark — hover / pressed */
  --turquoise: #3FC1C7;
  --light-turq: #9FE0E3;    /* teal-light — on-dark accents */
  --dark-blue: #23222D;     /* (legacy name) → dark chocolate */

  /* Text — brand fg1/fg2/fg3 */
  --ink: #202020;
  --ink-2: #383838;
  --ink-3: #707070;
  --line: #E4DFD8;          /* warm-neutral hairline on ivory/white */
  --line-strong: #C6C6C6;   /* brand gray-02 */

  /* Teal washes */
  --brand-tint: #EAFAFA;
  --brand-tint-2: #D6F4F5;

  --maxw: 1200px;
  --gutter: 40px;

  /* One corner radius — crisp, not pillowy (brand: 4px everywhere) */
  --r-sm: 4px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-xl: 4px;

  /* Elevation — soft diffuse halos, neutral (brand 01dp / 02dp), no blue tint */
  --shadow-sm: 0 0 6px 1px rgba(0,0,0,.07);
  --shadow-md: 0 0 8px 2px rgba(0,0,0,.13);
  --shadow-lg: 0 0 14px 2px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.10);

  --font-display: "Object Sans", system-ui, sans-serif;
  --font-body: "Object Sans", system-ui, sans-serif;
  --heading-weight: 700;

  --tracking-caps: 0.12em;  /* brand all-caps tracking */

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Numbered chapter kicker: teal numeral + hairline rule + label */
.eyebrow .knum {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.eyebrow .knum::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--line-strong);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--brand);
}
/* The `center` modifier only changes the eyebrow when the layout is actually
   centered (the alignment Tweak). In the default left layout every numbered
   eyebrow keeps its leading teal bar so they all read identically. */
body[data-align="center"] .eyebrow.center { justify-content: center; color: var(--ink-2); }
body[data-align="center"] .eyebrow.center::before { display: none; }
/* Dot-style eyebrows (hero / sandbox / final CTA) carry their own dot, so
   they never show the leading bar. */
.eyebrow:has(.dot)::before { display: none; }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink);
  --fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.btn svg { transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover svg { transform: translateX(3px); }

.btn-brand { --bg: var(--brand); --fg: var(--brand-fg); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.btn-brand:hover { --bg: var(--brand-strong); box-shadow: 0 10px 26px rgba(0,0,0,.16); }

.btn-ghost {
  --bg: transparent; --fg: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { --bg: var(--white); border-color: var(--ink); }

.btn-text {
  background: none; border: none; padding: 13px 4px;
  color: var(--ink); font-weight: 600;
}
.btn-text:hover { transform: none; box-shadow: none; color: var(--brand); }
.btn-text:hover svg { transform: translateX(3px); }

.btn-on-dark.btn-ghost { --fg: var(--light-cream); border-color: rgba(255,255,255,.25); }
.btn-on-dark.btn-ghost:hover { --bg: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(245,243,239,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-symbol { width: 21px; height: auto; flex: none; display: block; color: var(--brand); }
.brand-symbol svg { display: block; width: 100%; height: auto; }
.brand-wordmark { height: 21px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { white-space: nowrap; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  position: relative; transition: color .2s var(--ease);
}
/* Top-level nav items share one box model so plain links, the mega trigger,
   and dropdown triggers sit on the same vertical center. The triggers are
   <button>s (inline-flex, line-height:1); matching the top-level links to that
   removes the ~5–10px offset from the links' inherited body line-height. (VIV-2887) */
.nav-links > a,
.nav-trigger { display: inline-flex; align-items: center; line-height: 1; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: var(--brand); transition: width .25s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; flex: none; }

/* Nav dropdown (desktop) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: color .2s var(--ease);
}
.nav-trigger:hover,
.nav-item.open .nav-trigger { color: var(--ink); }
.dd-caret { transition: transform .2s var(--ease); }
.nav-item.open .dd-caret { transform: rotate(180deg); }
.nav-dd {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 264px; z-index: 200;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* hover bridge so the gap between trigger and panel doesn't drop the hover */
.nav-dd::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 16px; }
.nav-item.open .nav-dd { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dd a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px; border-radius: var(--r-sm); white-space: nowrap;
  transition: background .14s var(--ease);
}
.nav-dd a::after { display: none; }
.nav-dd a b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.nav-ext-ic { display: inline-block; vertical-align: baseline; margin-left: 5px; color: var(--ink-3); opacity: .8; }
.nav-dd a:hover .nav-ext-ic { color: var(--brand-strong); opacity: 1; }
.nav-ext-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-dd a span { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.nav-dd a:hover { background: var(--brand-tint); }
.nav-dd a:hover b { color: var(--brand-strong); }

/* Solutions super menu — mega panel (3 columns + ivory footer CTA) [VIV-2846 redesign]
   All rules scoped under .nav-dd--mega so they win over the generic .nav-dd a* rules
   that the legacy hardcoded-nav pages still rely on (those broad element selectors
   would otherwise leak onto .mega-ic / .mega-txt span / .mega-foot-cta). */
.nav-dd--mega {
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 768px; min-width: 0;
  padding: 0; overflow: hidden;
}
.nav-item.open .nav-dd--mega { transform: translateX(-50%) translateY(0); }

.nav-dd--mega .mega-cols { display: grid; grid-template-columns: 1.55fr 1fr 1.15fr; }
.nav-dd--mega .mega-col { padding: 22px 14px 24px; }
.nav-dd--mega .mega-col + .mega-col { border-left: 1px solid var(--line); }
.nav-dd--mega .mega-head {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 12px 10px;
}

/* a row inside a column: [icon] [title + description] */
.nav-dd--mega .mega-link {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r-sm); white-space: nowrap;
  text-decoration: none; border: 0;
  transition: background .14s var(--ease);
}
.nav-dd--mega .mega-ic {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-strong);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-dd--mega .mega-ic svg { width: 18px; height: 18px; display: block; }
.nav-dd--mega .mega-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-dd--mega .mega-txt b { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.nav-dd--mega .mega-txt span { font-size: 12px; font-weight: 500; color: var(--ink-3); line-height: 1.3; }

.nav-dd--mega .mega-link:hover { background: var(--brand-tint); }
.nav-dd--mega .mega-link:hover b { color: var(--brand-strong); }
.nav-dd--mega .mega-link:hover .mega-ic { background: var(--brand); color: var(--brand-fg); }

.nav-dd--mega .mega-col--product .mega-link { padding: 7px 12px; }
.nav-dd--mega .mega-link--lead .mega-txt b { color: var(--brand-strong); }

/* plain text links (Role / Team columns — no icon, no description) */
.nav-dd--mega .mega-link--plain { padding: 9px 12px; }
.nav-dd--mega .mega-link--plain .mega-txt b { font-weight: 500; }
.nav-dd--mega .mega-link--plain:hover .mega-txt b { font-weight: 700; }

/* ivory footer strip with CTA */
.nav-dd--mega .mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 26px; background: var(--light-cream);
  border-top: 1px solid var(--line);
}
.nav-dd--mega .mega-foot p { margin: 0; font-size: 13px; color: var(--ink-2); }
.nav-dd--mega .mega-foot p b { color: var(--ink); font-weight: 700; }
.nav-dd--mega .mega-foot-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; border-radius: 0;
  font-size: 13px; font-weight: 700; color: var(--brand-strong);
  white-space: nowrap; text-decoration: none; background: transparent;
}
.nav-dd--mega .mega-foot-cta svg { transition: transform .18s var(--ease); }
.nav-dd--mega .mega-foot-cta:hover { color: var(--ink); background: transparent; }
.nav-dd--mega .mega-foot-cta:hover svg { transform: translateX(3px); }

/* Hamburger (mobile) */
.nav-toggle {
  display: none; flex: none; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; position: relative; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: background .15s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gutter) 16px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform .26s var(--ease), opacity .26s var(--ease);
  }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  /* When the menu is open and the Solutions accordion expands taller than the
     viewport, give the menu its own scroll region instead of overflowing the
     page behind it (VIV-5242). The menu is position:absolute under the sticky
     .nav, so its containing block is .nav itself — `100%` here resolves to the
     rendered header height, making the offset exact at every breakpoint (incl.
     the compact ≤540px header) with no hardcoded value. dvh keeps the mobile
     address bar from clipping it; the vh line is an older-browser fallback. */
  .nav.open .nav-links {
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links a {
    font-size: 16px; font-weight: 500; color: var(--ink);
    padding: 14px 2px; border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a::after { display: none; }

  /* dropdown → accordion on mobile */
  .nav-item { flex-direction: column; align-items: stretch; }
  .nav-trigger {
    width: 100%; justify-content: space-between;
    font-size: 16px; color: var(--ink);
    padding: 14px 2px; border-bottom: 1px solid var(--line);
  }
  .nav-dd {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    min-width: 0; z-index: auto;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; gap: 0; display: none;
  }
  .nav-item.open .nav-dd { display: flex; transform: none; }
  .nav-dd a { padding: 13px 2px 13px 18px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-dd a b { font-size: 15px; }

  /* mega panel → in-flow stacked sections [VIV-2846 redesign] */
  .nav-dd--mega {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    width: auto; min-width: 0; z-index: auto;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; overflow: visible; display: none;
  }
  .nav-item.open .nav-dd--mega { display: block; transform: none; }
  .nav-dd--mega .mega-cols { display: block; }
  .nav-dd--mega .mega-col { padding: 4px 0 8px; }
  .nav-dd--mega .mega-col + .mega-col {
    border-left: 0; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px;
  }
  .nav-dd--mega .mega-head { padding: 8px 18px 6px; }
  .nav-dd--mega .mega-link { padding: 11px 18px; border-radius: 0; border-bottom: 0; }
  .nav-dd--mega .mega-ic { width: 30px; height: 30px; }
  .nav-dd--mega .mega-ic svg { width: 16px; height: 16px; }
  .nav-dd--mega .mega-foot {
    flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; margin-top: 4px;
  }
  .nav.open {
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
  }
}

/* Narrow phones: shrink page gutter and compact the header CTA cluster so the
   brand + Book a Demo + hamburger fit within the viewport (VIV-2840). */
@media (max-width: 540px) {
  :root { --gutter: 20px; }
  /* Compact the header CTA cluster so brand + Book a Demo + hamburger fit
     within 375px. The button's uppercase label is the widest contributor, so
     trim its font-size/padding (plus the gap) — this clears the ~5px header
     overflow that previously pushed .nav-cta/.nav-toggle to right≈379.9 and
     set document scrollWidth to 380 at a 375px viewport. (VIV-4155) */
  .nav-cta { gap: 8px; }
  .nav-cta .btn-brand { padding: 11px 13px; font-size: 12px; }
  .nav-cta .btn-brand svg { display: none; }
  /* Eyebrow labels are forced onto a single line (white-space: nowrap) so a
     long one — e.g. the hero "Built natively on the ServiceNow Platform" — overflows
     narrow viewports (~57px past 375px). Let them wrap on mobile; keep the
     leading dot/bar pinned to the first line. */
  .eyebrow { white-space: normal; align-items: flex-start; }
  .eyebrow .dot, .eyebrow .knum { margin-top: 5px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 86px 0 70px;
  text-align: left;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-bg .glow {
  position: absolute; left: 50%; top: -120px; transform: translateX(-50%);
  width: 900px; height: 520px;
  background: radial-gradient(ellipse at center, rgba(63,193,199,.20), rgba(63,193,199,0) 62%);
  filter: blur(4px);
}
.hero-bg .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  opacity: .55;
}
.hero .wrap { position: relative; z-index: 1; }
body.no-hero-grid .hero-bg .grid { display: none; }

/* Sparks travelling along the grid lines — subtle "alive" motion */
.grid-dots {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
body.no-hero-grid .grid-dots { display: none; }
.spark {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 7px 1px rgba(63,193,199,.5);
  opacity: 0; will-change: transform, opacity;
}
.spark::before { content: ""; position: absolute; border-radius: 999px; }
.spark.sx { margin-top: -2px; }   /* centre on a horizontal grid line */
.spark.sx::before {
  width: 28px; height: 2px; right: 3px; top: 1.5px;
  background: linear-gradient(90deg, rgba(63,193,199,0), rgba(63,193,199,.45));
}
.spark.sy { margin-left: -2px; }  /* centre on a vertical grid line */
.spark.sy::before {
  width: 2px; height: 28px; bottom: 3px; left: 1.5px;
  background: linear-gradient(180deg, rgba(63,193,199,0), rgba(63,193,199,.45));
}
@keyframes spark-x {
  0%   { transform: translateX(-30px); opacity: 0; }
  9%   { opacity: .8; }
  88%  { opacity: .8; }
  100% { transform: translateX(calc(100vw + 30px)); opacity: 0; }
}
@keyframes spark-y {
  0%   { transform: translateY(-30px); opacity: 0; }
  12%  { opacity: .6; }
  78%  { opacity: .6; }
  100% { transform: translateY(540px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .grid-dots { display: none; } }

.hero h1 {
  font-size: clamp(38px, 6.2vw, 76px);
  max-width: 17ch;
  margin: 22px 0 0;
}
.hero h1 .accent { color: var(--brand); }
.hero-sub {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 60ch;
  margin: 24px 0 0;
  line-height: 1.55;
}
.hero-actions {
  margin-top: 34px;
  display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap;
}

/* Featured hero/final-CTA email capture — layout glue only; the input,
   button, caption, error and success states all reuse the shared .sbx-*
   styles (VIV-2996). No new visual components. */
.hero-capture { margin-top: 22px; max-width: 580px; }
body[data-align="center"] .hero-capture { margin-left: auto; margin-right: auto; }
.hero-capture-label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; }

/* Centered variant (toggled via Tweaks) */
body[data-align="center"] .hero { text-align: center; }
body[data-align="center"] .hero h1,
body[data-align="center"] .hero-sub { margin-left: auto; margin-right: auto; }
body[data-align="center"] .hero-actions { justify-content: center; }
.hero-trust {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13.5px; color: var(--ink-3); font-weight: 500;
}
.hero-trust .stars { display: inline-flex; gap: 2px; color: var(--brand); }
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* Live-pulse keyframe — retained here because webinar.css (.video-tag .rec)
   references it as a global keyframe. */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,193,199,.5); }
  70% { box-shadow: 0 0 0 7px rgba(63,193,199,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,193,199,0); }
}

/* ---- Hero focus-area deck (VIV-5075) ----
   Auto-advancing slide deck that replaced the old static product mock.
   Ported from the CEO's focus_area_deck.html reference. The deck keeps its
   dark treatment (the point of the experiment) inside the light hero; its own
   rounded frame + shadow separate it from the section. All selectors are
   namespaced under .hero-deck so the deck's raw element styles can't leak.
   Typography maps to the site's existing font variables (Sora -> --font-display,
   Manrope -> --font-body) rather than importing a second Google Fonts set.
   Driven by /deck.js. */
.hero-deck {
  --vc-teal: #3fc1c7;
  --vc-teal-deep: #2a9aa0;
  --vc-teal-bright: #5fd8dd;
  --vc-cream: #f3ebe6;
  --vc-mist: rgba(243, 235, 230, .62);
  --vc-mist2: rgba(243, 235, 230, .40);
  --vc-line: rgba(243, 235, 230, .10);
  --vc-text: #f3ebe6;
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 76px auto 0;
  color: var(--vc-text);
  font-family: var(--font-body);
}

.hero-deck .hd-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
  /* inline-size (not size) so the stage height can flow from content when we
     switch to auto height on mobile; the deck only uses cqw units. */
  container-type: inline-size;
  container-name: hd;
}

.hero-deck .hd-slide {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(63, 193, 199, .12) 0%, transparent 46%),
    radial-gradient(100% 80% at 6% 94%, rgba(63, 193, 199, .06) 0%, transparent 52%),
    linear-gradient(155deg, #2a2935 0%, #23222d 52%, #1d1c26 100%);
  padding: 4cqw 4.7cqw;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 27cqw 1fr;
  column-gap: 3.7cqw;
  row-gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.hero-deck .hd-slide.active { opacity: 1; visibility: visible; }

.hero-deck .hd-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--vc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vc-line) 1px, transparent 1px);
  background-size: 3.75cqw 3.75cqw;
  -webkit-mask-image: radial-gradient(circle at 60% 50%, black 0%, transparent 78%);
  mask-image: radial-gradient(circle at 60% 50%, black 0%, transparent 78%);
  opacity: .55;
  pointer-events: none;
}
.hero-deck .hd-slide > * { position: relative; z-index: 1; }

.hero-deck header { grid-column: 1 / -1; margin-bottom: 2.3cqw; }
.hero-deck .hd-eyebrow {
  display: inline-flex; align-items: center; gap: .7cqw;
  font-size: 1.05cqw; letter-spacing: .22em; text-transform: uppercase;
  color: var(--vc-teal); font-weight: 600; margin-bottom: .9cqw;
}
.hero-deck .hd-eyebrow .hd-dot { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--vc-teal); box-shadow: 0 0 0 .3cqw rgba(63, 193, 199, .18); }
.hero-deck .hd-h { color: var(--vc-text); font-family: var(--font-display); font-weight: 700; font-size: 3.4cqw; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
.hero-deck .hd-h .hd-accent { color: var(--vc-teal); }
.hero-deck .hd-subhead { color: var(--vc-mist); font-size: 1.2cqw; margin-top: .65cqw; max-width: 60cqw; line-height: 1.5; }

.hero-deck .hd-kpi {
  align-self: start;
  background: linear-gradient(160deg, rgba(63, 193, 199, .10), rgba(63, 193, 199, .02));
  border: 1px solid rgba(63, 193, 199, .22);
  border-radius: 1.4cqw; padding: 2.3cqw 2.3cqw 2cqw;
}
.hero-deck .hd-kpi .hd-label { font-size: 1.05cqw; letter-spacing: .04em; color: var(--vc-mist); font-weight: 600; text-transform: uppercase; }
.hero-deck .hd-kpi .hd-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 7.5cqw; line-height: .95; letter-spacing: -.03em;
  margin: .8cqw 0 .15cqw;
  background: linear-gradient(120deg, #fff 8%, var(--vc-teal) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-deck .hd-kpi .hd-num .hd-unit { font-size: 3.75cqw; -webkit-text-fill-color: var(--vc-teal); }
.hero-deck .hd-kpi .hd-num-sub { font-size: 1.2cqw; color: var(--vc-cream); font-weight: 600; opacity: .85; }
.hero-deck .hd-kpi .hd-divider { height: 1px; background: linear-gradient(90deg, rgba(243, 235, 230, .32), transparent); margin: 1.7cqw 0 1.4cqw; }
.hero-deck .hd-stat-row { display: flex; justify-content: space-between; margin-bottom: 1.1cqw; align-items: baseline; }
.hero-deck .hd-stat-row:last-child { margin-bottom: 0; }
.hero-deck .hd-stat-row .k { color: var(--vc-mist); font-size: 1.1cqw; }
.hero-deck .hd-stat-row .v { font-family: var(--font-display); font-weight: 600; font-size: 1.4cqw; color: var(--vc-text); }
.hero-deck .hd-stat-row .v.up { color: var(--vc-teal); }

.hero-deck .hd-chart-card { align-self: stretch; display: flex; flex-direction: column; min-width: 0; }
.hero-deck .hd-chart-title { font-family: var(--font-display); font-weight: 600; font-size: 1.56cqw; margin-bottom: .15cqw; }
.hero-deck .hd-chart-sub { color: var(--vc-mist); font-size: 1.05cqw; margin-bottom: 1.1cqw; }
.hero-deck .hd-chart-wrap { flex: 1; position: relative; min-height: 0; }
.hero-deck svg { width: 100%; height: 100%; display: block; overflow: visible; }

.hero-deck .hd-axis-label { fill: var(--vc-mist); font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.hero-deck .hd-grid-line { stroke: var(--vc-line); stroke-width: 1; }

.hero-deck .hd-area { opacity: 0; transition: opacity 1.1s ease .9s; }
.hero-deck .hd-area.show { opacity: 1; }
.hero-deck .hd-trend {
  fill: none; stroke: url(#hdLineGrad); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 6px 14px rgba(63, 193, 199, .35));
}
.hero-deck .hd-pt { opacity: 0; }
.hero-deck .hd-pt circle.ring { fill: #23222d; stroke: var(--vc-teal); stroke-width: 2.5; }
.hero-deck .hd-pt circle.core { fill: var(--vc-teal); }
.hero-deck .hd-peak-flag { opacity: 0; }
.hero-deck .hd-peak-flag rect { fill: rgba(243, 235, 230, .12); stroke: rgba(243, 235, 230, .4); stroke-width: 1; }
.hero-deck .hd-peak-flag text { fill: var(--vc-cream); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }

.hero-deck .hd-hbar-track { fill: rgba(243, 235, 230, .06); }
.hero-deck .hd-hbar-label { fill: var(--vc-text); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.hero-deck .hd-hbar-val { fill: var(--vc-cream); font-family: var(--font-display); font-size: 15px; font-weight: 700; opacity: 0; }

.hero-deck .hd-vbar-label { fill: var(--vc-mist); font-family: var(--font-body); font-size: 12.5px; font-weight: 500; }

.hero-deck .hd-legend { display: flex; gap: 1.7cqw; margin-top: .8cqw; font-size: 1.05cqw; color: var(--vc-mist); }
.hero-deck .hd-legend span { display: inline-flex; align-items: center; gap: .6cqw; }
.hero-deck .hd-legend i { width: 1.7cqw; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--vc-teal-deep), var(--vc-teal-bright)); display: inline-block; }
.hero-deck .hd-legend .hd-pdot { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--vc-teal); box-shadow: 0 0 0 .23cqw rgba(63, 193, 199, .2); }
.hero-deck .hd-legend .hd-gdot { width: .8cqw; height: .8cqw; border-radius: 50%; background: rgba(243, 235, 230, .30); }

.hero-deck .hd-donut-center { fill: var(--vc-text); font-family: var(--font-display); font-weight: 800; font-size: 46px; }
.hero-deck .hd-donut-sub { fill: var(--vc-mist); font-family: var(--font-body); font-size: 14px; font-weight: 600; }

@keyframes hd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hd-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.hero-deck .hd-slide.active .anim { opacity: 0; animation: hd-rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-deck .hd-slide.active .anim.d1 { animation-delay: .05s; }
.hero-deck .hd-slide.active .anim.d2 { animation-delay: .18s; }
.hero-deck .hd-slide.active .anim.d3 { animation-delay: .30s; }
.hero-deck .hd-slide.active .anim.d4 { animation-delay: .42s; }
.hero-deck .hd-slide.active .anim.d5 { animation-delay: .54s; }

.hero-deck .hd-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding: 0 4px; }
/* The controls strip renders below the dark stage, directly on the white page
   (--cream). It was ported from the dark reference, so recolor ONLY this strip
   with the site's light-context tokens (the stage above stays dark). VIV-5082. */
.hero-deck .hd-ctrl-btn {
  width: 42px; height: 42px; border-radius: 11px; cursor: pointer;
  background: #fff; border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 17px; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .1s; font-family: var(--font-display);
}
.hero-deck .hd-ctrl-btn:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-strong); }
.hero-deck .hd-ctrl-btn:active { transform: scale(.95); }
.hero-deck .hd-ctrl-right { display: flex; gap: 10px; }
.hero-deck .hd-dots { display: flex; gap: 14px; align-items: center; }
.hero-deck .hd-dots button { border: none; cursor: pointer; padding: 0; height: 9px; border-radius: 50%; width: 9px; background: rgba(32, 32, 32, .25); transition: width .3s, background .3s, border-radius .3s; }
.hero-deck .hd-dots button.on { width: 30px; border-radius: 5px; background: var(--brand); }
.hero-deck .hd-dots .hd-lbl { font-family: var(--font-display); font-size: 13px; color: var(--ink-2); margin-left: 6px; letter-spacing: .04em; }
.hero-deck .hd-progress { height: 3px; background: rgba(32, 32, 32, .10); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.hero-deck .hd-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--vc-teal-deep), var(--vc-teal-bright)); border-radius: 2px; }

/* Tablet/phone: stack the KPI card above the chart, drop the grid sidebar, and
   give the stage room to breathe so nothing overflows. cqw keeps text scaled to
   the box; the bumped multipliers below keep it legible at small widths. */
@media (max-width: 760px) {
  .hero-deck { margin-top: 48px; }
  .hero-deck .hd-stage { aspect-ratio: auto; height: auto; min-height: 0; }
  .hero-deck .hd-slide {
    position: relative;
    grid-template-columns: 1fr;
    row-gap: 4.5cqw;
    padding: 6cqw 6cqw 7cqw;
  }
  /* Only the active slide takes flow height; others collapse so the stage sizes
     to the visible slide. */
  .hero-deck .hd-slide:not(.active) { position: absolute; inset: 0; }
  .hero-deck header { margin-bottom: 4cqw; }
  .hero-deck .hd-eyebrow { font-size: 3cqw; gap: 2cqw; margin-bottom: 2.5cqw; }
  .hero-deck .hd-eyebrow .hd-dot { width: 2cqw; height: 2cqw; }
  .hero-deck .hd-h { font-size: 7.5cqw; }
  .hero-deck .hd-subhead { font-size: 3.4cqw; margin-top: 2cqw; max-width: none; }
  .hero-deck .hd-kpi { padding: 5cqw; border-radius: 4cqw; }
  .hero-deck .hd-kpi .hd-label { font-size: 3cqw; }
  .hero-deck .hd-kpi .hd-num { font-size: 16cqw; }
  .hero-deck .hd-kpi .hd-num .hd-unit { font-size: 8cqw; }
  .hero-deck .hd-kpi .hd-num-sub { font-size: 3.2cqw; }
  .hero-deck .hd-stat-row .k { font-size: 3cqw; }
  .hero-deck .hd-stat-row .v { font-size: 3.6cqw; }
  .hero-deck .hd-chart-card { min-height: 46cqw; }
  .hero-deck .hd-chart-title { font-size: 4cqw; }
  .hero-deck .hd-chart-sub { font-size: 3cqw; margin-bottom: 3cqw; }
  .hero-deck .hd-legend { font-size: 2.8cqw; gap: 4cqw; }
}



/* ============================================================
   TRUSTED-BY CUSTOMER LOGO STRIP (VIV-4519)
   Monochrome, uniform optical height, wraps cleanly on mobile.
   Shared by the homepage (proof band under the hero) and About.
   ============================================================ */
.trust-strip { padding: 40px 0 8px; }
.trust-strip-lead {
  text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 26px;
}
.trust-logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 24px 30px;
}
.trust-logo { display: inline-flex; align-items: center; }
/* Normalize every logo to one optical height so the 6-up strip holds a single
   row at >=1024px (content column is 1120px wide). At 28px even the widest
   wordmarks (~5.3:1) land ~150px, under the shared cap, so nothing is
   constrained — keeps the row balanced with no logo dwarfing the others. */
.trust-logo img {
  display: block; width: auto; height: 28px; max-width: 160px; object-fit: contain;
  filter: grayscale(1); opacity: .85;
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.trust-logo img:hover { filter: grayscale(0); opacity: 1; }
/* EF/GlideFast ships as a white-on-transparent lockup; invert it so it reads
   as a dark monochrome mark on the light strip like the others. */
.trust-logo img[src*="everforth-glidefast"] { filter: invert(1) grayscale(1); }
.trust-logo img[src*="everforth-glidefast"]:hover { filter: invert(1) grayscale(1); }
@media (max-width: 540px) {
  .trust-strip { padding: 28px 0 4px; }
  .trust-logos { gap: 16px 24px; }
  .trust-logo img { height: 24px; max-width: 140px; }
}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { position: relative; }
.section { padding: 96px 0; }

/* Chapter rule — a crisp hairline at the top edge of a section, inset to the
   content column. Delineates same-color sections without adding weight. */
.section.ruled::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  height: 1px;
  background: var(--line);
}
.section.raas.ruled::before { background: rgba(255,255,255,.14); }

/* Alternate band shading (Tweak) — pushes "How it works" onto ivory so the
   Comparison / How-it-works / Features run reads cream · ivory · cream. */
body.alt-bands #how { background: var(--light-cream); }
body.alt-bands #how.ruled::before { background: var(--line-strong); }

/* VIV-5085: one strategic ivory band on the homepage (CSS-only). Per board
   feedback, every-other banding read as overkill — so a single "problem" (01)
   section sits on the brand ivory surface. The page run reads hero white ·
   social_proof white · problem IVORY · solutions white · how_it_works white ·
   raas dark · final_cta white: one early non-white break + the existing dark
   RaaS break, spaced across the page rather than an alternating rhythm.
   Homepage-scoped via the data-vc-section value unique to src/index.njk — the
   shared layout is untouched, so other pages are unaffected. Only --light-cream. */
[data-vc-section="problem"] { background: var(--light-cream); }
/* Keep the .ruled top hairline crisp where the band meets the white above it. */
[data-vc-section="problem"].ruled::before { background: var(--line-strong); }
/* Ivory-on-ivory guard: the manual-comparison card is normally --light-cream,
   which would vanish on the ivory "problem" band — flip it to white. The
   .col.vivid (dark) card and RaaS dark band are intentionally left as-is. */
[data-vc-section="problem"] .col.manual { background: var(--cream); }
.section-head { max-width: 720px; }
.section-head.center { margin: 0; text-align: left; }
.section-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  margin-top: 16px;
}
.section-head p {
  font-size: 18px; color: var(--ink-2); margin-top: 18px; line-height: 1.55;
  max-width: 60ch;
}
.section-head.center p { margin-left: 0; margin-right: 0; }
/* Centered variant (toggled via Tweaks) */
body[data-align="center"] .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
body[data-align="center"] .section-head.center p { margin-left: auto; margin-right: auto; }

/* ---------- Capabilities (3-up) ---------- */
.caps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 64px;
}
.cap {
  padding: 38px 34px 38px 0;
  border-right: 1px solid var(--line);
}
.cap:last-child { border-right: none; padding-right: 0; }
.cap:not(:first-child) { padding-left: 34px; }
.cap .num {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--brand); letter-spacing: .1em;
}
.cap .cap-ic {
  width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; margin: 18px 0 18px;
}
.cap h3 { font-size: 22px; }
.cap p { color: var(--ink-2); margin-top: 12px; font-size: 15.5px; line-height: 1.55; }
@media (max-width: 820px) {
  .caps { grid-template-columns: 1fr; }
  .cap { border-right: none; border-bottom: 1px solid var(--line); padding: 30px 0; }
  .cap:not(:first-child) { padding-left: 0; }
  .cap:last-child { border-bottom: none; }
}

/* ---------- Trust bar ---------- */
.trust { padding: 46px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--light-cream); }
.trust-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
.trust-label { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.trust-logos { display: flex; align-items: center; gap: 38px; flex-wrap: wrap; justify-content: center; }
.logo-ph {
  font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
  color: var(--ink-3); opacity: .8; display:flex; align-items:center; gap:8px;
  transition: color .2s, opacity .2s;
}
.logo-ph:hover { color: var(--ink); opacity: 1; }
.logo-ph .gl { width: 18px; height: 18px; border-radius: 5px; background: currentColor; opacity:.5; }

/* ---------- Comparison (manual vs vivid) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.col {
  border-radius: var(--r-lg); padding: 32px;
  border: 1px solid var(--line);
}
.col.manual { background: var(--light-cream); }
.col.vivid { background: var(--dark-blue); border-color: var(--dark-blue); color: var(--light-cream); }
.col-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-sm); margin-bottom: 22px;
}
.col.manual .col-tag { background: #efe9df; color: var(--ink-3); }
.col.vivid .col-tag { background: rgba(63,193,199,.18); color: var(--light-turq); }
.col h3 { font-size: 23px; margin-bottom: 22px; }
.col.vivid h3 { color: var(--white); }
.cmp-item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.col.vivid .cmp-item { border-top-color: rgba(255,255,255,.1); }
.cmp-item .ci {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; margin-top: 1px;
}
.col.manual .ci { background: rgba(192,60,49,.1); color: #C03C31; }
.col.vivid .ci { background: rgba(63,193,199,.2); color: var(--brand); }
.cmp-item .ct b { font-size: 15.5px; font-weight: 600; display: block; }
.col.vivid .cmp-item .ct b { color: var(--white); }
.cmp-item .ct span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.col.vivid .cmp-item .ct span { color: rgba(245,243,239,.72); }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }

/* ---------- How it works (numbered steps) ---------- */
.steps { margin-top: 60px; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 120px 1.1fr 1fr; gap: 36px; align-items: center;
  padding: 40px 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .snum {
  font-family: var(--font-display); font-size: 60px; font-weight: 500;
  color: var(--line-strong); line-height: 1; letter-spacing: -0.03em;
  transition: color .4s var(--ease);
}
.step.in .snum { color: var(--brand); }
.step .scopy h3 { font-size: 25px; }
.step .scopy p { color: var(--ink-2); margin-top: 12px; font-size: 15.5px; }
.step .svis {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white);
  padding: 16px; box-shadow: var(--shadow-sm); min-height: 132px;
}
@media (max-width: 880px) {
  .step { grid-template-columns: 64px 1fr; }
  .step .svis { grid-column: 1 / -1; }
  .step .snum { font-size: 42px; }
}
/* Closing line + category links — frames how-it-works as how we deliver solutions (VIV-4627). */
.how-deliver {
  margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 24px; padding-top: 32px; border-top: 1px solid var(--line);
}
.how-deliver-lead { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.how-deliver-links { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
  .how-deliver { flex-direction: column; align-items: flex-start; }
  .how-deliver-links { width: 100%; }
  .how-deliver-links .btn { flex: 1 1 auto; justify-content: center; }
}

/* mini visuals inside steps */
.mini-rows { display:flex; flex-direction:column; gap:9px; }
.mini-row { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-2); }
.mini-row .pill { height: 9px; border-radius: 999px; background: var(--line); }
.mini-row .dotc { width:9px;height:9px;border-radius:50%; background: var(--brand); flex:none; }
.mini-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.mini-tile { border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; }
.mini-tile .mt-lbl{ font-size:9.5px; color:var(--ink-3); font-weight:600; }
.mini-tile .mt-val{ font-family:var(--font-display); font-size:18px; font-weight:600; margin-top:3px; }
.mini-bars{ display:flex; align-items:flex-end; gap:7px; height:78px; }
.mini-bars span{ flex:1; border-radius:4px 4px 2px 2px; background:var(--brand-tint-2); }
.mini-bars span.b{ background: var(--brand); }
.mini-slide{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.mini-slide .ms-bar{ height:7px; background: var(--brand); }
.mini-slide .ms-body{ padding:11px; display:flex; gap:10px; align-items:center; }
.mini-slide .ms-chart{ width:46px;height:46px;border-radius:50%;
  background: conic-gradient(var(--brand) 0 62%, var(--brand-tint-2) 62% 100%); flex:none; }
.mini-slide .ms-lines{ flex:1; display:flex; flex-direction:column; gap:6px; }
.mini-slide .ms-lines i{ height:7px; border-radius:999px; background:var(--line); display:block; }
.mini-slide .ms-lines i:first-child{ width:70%; background:var(--line-strong); }
.mini-slide .ms-lines i:last-child{ width:45%; }

/* ---------- Features grid ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; }
.feature {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.feature .fic {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--light-cream); color: var(--ink); margin-bottom: 20px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.feature:hover .fic { background: var(--brand-tint); color: var(--brand); }
.feature h3 { font-size: 19px; }
.feature p { color: var(--ink-2); margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
.feature.wide { grid-column: span 1; }
@media (max-width: 880px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* ---------- Solutions grid ---------- */
.solutions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 60px; }
.sol-card {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; background: var(--white); text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.sol-card .sol-code {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand);
}
.sol-card h3 { font-size: 18px; margin-top: 10px; }
.sol-card p { color: var(--ink-2); margin-top: 8px; font-size: 14px; line-height: 1.55; }
.sol-card .sol-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.sol-card:hover .sol-link { color: var(--brand); gap: 9px; }
.sol-card--all { background: var(--light-cream); }
@media (max-width: 980px) { .solutions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .solutions { grid-template-columns: 1fr; } }

/* ---------- Impact metrics ---------- */
.impact { background: var(--light-cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; }
.metric { padding: 0 28px; border-left: 1px solid var(--line); }
.metric:first-child { border-left: none; padding-left: 0; }
.metric .mval {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.metric .mval .u { color: var(--brand); }
.metric .mlabel { font-size: 14.5px; color: var(--ink-2); margin-top: 14px; line-height: 1.45; }
@media (max-width: 880px) {
  .metrics { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .metric:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } .metric { border-left: none; padding-left: 0; } }

/* ---------- RaaS dark band ---------- */
.raas { background: var(--dark-blue); color: var(--light-cream); overflow: hidden; }
.raas .grid-dec {
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%);
}
.raas .wrap { position: relative; z-index: 1; }
.raas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.raas .eyebrow { color: var(--light-turq); }
.raas .eyebrow::before { background: var(--brand); }
.raas h2 { color: var(--white); font-size: clamp(30px, 3.6vw, 46px); margin-top: 16px; }
.raas p.lead { color: rgba(245,243,239,.74); font-size: 18px; margin-top: 18px; line-height: 1.55; }
.raas-actions { margin-top: 30px; display:flex; gap:14px; flex-wrap:wrap; }
.raas-list { display: flex; flex-direction: column; gap: 14px; }
.raas-card {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
  background: rgba(255,255,255,.03); padding: 20px 22px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.raas-card:hover { background: rgba(255,255,255,.06); border-color: rgba(63,193,199,.4); transform: translateX(4px); }
.raas-card .rc-ic { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
  background: rgba(63,193,199,.16); color: var(--brand); display: grid; place-items: center; }
.raas-card b { color: var(--white); font-size: 16px; font-weight: 600; }
.raas-card span { color: rgba(245,243,239,.66); font-size: 14px; display: block; margin-top: 5px; line-height: 1.5; }
@media (max-width: 880px) { .raas-grid { grid-template-columns: 1fr; gap: 40px; } }
/* Official ServiceNow partner badges on the RaaS band (VIV-4627). Badge tiles
   ship with their own dark navy field, so they sit on a faint translucent panel
   for edge separation against the dark band — mirrors the About page treatment. */
.raas-creds { margin-top: 32px; }
.raas-creds-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: rgba(245,243,239,.6); margin-bottom: 12px;
}
.raas-badges {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); border-radius: 14px;
}
.raas-badge { display: block; width: 84px; height: auto; }

/* ---------- Testimonial ---------- */
.quote { text-align: center; }
.quote .stars { display:flex; gap:4px; justify-content:center; color: var(--brand); margin-bottom: 26px; }
.quote blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.25; letter-spacing: -0.02em;
  max-width: 18ch; margin: 0 auto; color: var(--ink);
}
.quote blockquote .hl { color: var(--brand); }
.quote .by { margin-top: 30px; display: flex; align-items: center; gap: 13px; justify-content: center; }
.quote .av { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color: var(--brand); }
.quote .by .nm { font-weight: 600; font-size: 15px; }
.quote .by .rl { font-size: 13px; color: var(--ink-3); }
.quote .by .meta { text-align: left; }
/* multi-quote grid — reuses .quote / .stars / .by, just reframes as cards */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.quote-grid:has(> :only-child) { grid-template-columns: minmax(0, 720px); justify-content: center; }
.quote-card { text-align: left; display: flex; flex-direction: column; margin: 0;
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.quote-card .stars { justify-content: flex-start; margin-bottom: 18px; }
.quote-card blockquote { font-size: clamp(19px, 2vw, 23px); line-height: 1.35; max-width: none; margin: 0; flex: 1; }
.quote-card .by { justify-content: flex-start; margin-top: 26px; }
@media (max-width: 760px) { .quote-grid, .quote-grid:has(> :only-child) { grid-template-columns: 1fr; } }

/* ---------- Security / enterprise ---------- */
.secure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 20px; }
.secure-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.secure-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border:1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.secure-item .si { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand); display:grid; place-items:center; flex:none; }
.secure-item span { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.4; }
@media (max-width: 880px) { .secure-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 460px) { .secure-list { grid-template-columns: 1fr; } }

/* ---------- Live sandbox band ---------- */
.sandbox-band {
  background: var(--dark-blue);
  border-radius: var(--r-md);
  padding: 52px 56px;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 50%);
  gap: 48px;
  align-items: center;
}
.sandbox-band .eyebrow { color: rgba(255,255,255,.6); }
.sandbox-band h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin-top: 14px; }
.sandbox-copy p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.5; margin-top: 14px; max-width: 42ch; }

.sbx-pair { display: flex; gap: 10px; }
.sbx-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  padding: 14px 15px; outline: 0;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.sbx-input::placeholder { color: var(--ink-3); }
.sbx-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(63,193,199,.22); }
.sbx-input.is-invalid { border-color: #E86A60; box-shadow: 0 0 0 3px rgba(232,106,96,.2); }
.sandbox-band .sbx-input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; }
.sandbox-band .sbx-input::placeholder { color: rgba(255,255,255,.5); }
.sbx-form .btn-brand { flex: none; }

/* caption / error / success — light by default (hero), dark-band overrides below */
.sbx-cap { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.sbx-cap svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.sbx-err { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; font-weight: 600; color: #C03C31; }
.sbx-err svg { width: 14px; height: 14px; flex: none; }

/* The [hidden] attribute must win over the display:flex rules above. */
.sbx-err[hidden], .sbx-success[hidden], .sbx-cap[hidden] { display: none; }

.sbx-success {
  display: flex; align-items: center; gap: 14px;
  background: var(--brand-tint); border: 1px solid #BDEBEC;
  border-radius: var(--r-sm); padding: 16px 18px; max-width: 480px;}
.sbx-success .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-fg); display: grid; place-items: center; flex: none; }
.sbx-success .ic svg { width: 18px; height: 18px; }
.sbx-success b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.sbx-success span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

/* dark-band overrides */
.sandbox-band .sbx-cap { color: rgba(255,255,255,.6); }
.sandbox-band .sbx-err { color: #FF9A90; }
.sandbox-band .sbx-success { background: rgba(63,193,199,.12); border-color: rgba(63,193,199,.4); }
.sandbox-band .sbx-success b { color: #fff; }
.sandbox-band .sbx-success span { color: rgba(255,255,255,.72); }

@media (max-width: 860px) {
  .sandbox-band { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
}
@media (max-width: 460px) {
  .sbx-pair { flex-direction: column; }
  .sbx-form .btn-brand { width: 100%; justify-content: center; }
}

/* ---------- Shared instant-access modal (VIV-2996) ---------- */
.ia-modal[hidden] { display: none; }
.ia-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ia-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 19, 28, .55);
  backdrop-filter: blur(2px);
}
.ia-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md, 16px);
  box-shadow: 0 24px 60px rgba(20, 19, 28, .28);
  padding: 32px 30px 26px;
}
html.anim .ia-dialog { animation: ia-pop .22s var(--ease, ease) both; }
@keyframes ia-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ia-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--ink-2);
  transition: background .14s var(--ease, ease), color .14s var(--ease, ease);
}
.ia-close:hover { background: var(--line, rgba(0,0,0,.06)); color: var(--ink); }
.ia-close svg { width: 18px; height: 18px; }
.ia-title { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; margin: 0 36px 10px 0; }
.ia-desc { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 18px; }
.ia-modal .sbx-success { margin-top: 4px; }
/* Modal form: stack the input above a full-width button so the email
   field spans the full dialog width — long addresses fit while typing. */
.ia-form .sbx-pair { flex-direction: column; }
.ia-form .btn-brand { width: 100%; justify-content: center; }
.ia-alt {
  display: inline-block; margin-top: 16px;
  font-size: 14px; font-weight: 600; color: var(--brand);
  text-decoration: none;
}
.ia-alt:hover { text-decoration: underline; }
/* Lock background scroll while the modal is open. */
html.ia-open, html.ia-open body { overflow: hidden; }

/* ---------- Final CTA ---------- */
.finalcta { padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.finalcta .glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 760px; height: 460px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(63,193,199,.22), transparent 65%);
}
.finalcta .wrap { position: relative; z-index: 1; }
.finalcta h2 { font-size: clamp(34px, 5vw, 60px); max-width: 18ch; margin: 18px auto 0; }
.finalcta p { font-size: 18px; color: var(--ink-2); margin: 20px auto 0; max-width: 52ch; }
.finalcta .hero-actions { margin-top: 34px; justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: var(--dark-ash); color: rgba(245,243,239,.72); padding: 64px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer .brand-name { color: var(--white); }
.footer .fdesc { margin-top: 16px; font-size: 14.5px; max-width: 32ch; line-height: 1.6; }
.footer .fsocial { display: flex; gap: 10px; margin-top: 20px; }
.footer .fsocial a { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; color: rgba(245,243,239,.7); transition: all .2s var(--ease); }
.footer .fsocial a:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.fcol h5 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,243,239,.5); margin-bottom: 16px; }
.fcol a { display: block; font-size: 14.5px; padding: 6px 0; color: rgba(245,243,239,.72); transition: color .2s; }
.fcol a:hover { color: var(--white); }
.footer-bot { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; color: rgba(245,243,239,.5); }
.footer-bot .legal { display: flex; gap: 22px; }
.footer-bot a:hover { color: var(--white); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-top { grid-template-columns: 1fr; } }
/* Minimal footer (conversion pages, e.g. /book-a-demo/) — brand + social + copyright + legal only */
.footer-minimal { padding: 40px 0 32px; }
.footer-minimal .footer-top { display: block; }
.footer-minimal .footer-bot { margin-top: 28px; }

/* ============================================================
   SCROLL REVEAL
   Uses keyframe animation (transitions stall in some engines).
   Hidden state only when <html class="anim"> (JS + motion on).
   ============================================================ */
.reveal { will-change: opacity, transform; }
html.anim .reveal { opacity: 0; transform: translateY(22px); }
html.anim .reveal.in { animation: reveal-in .72s var(--ease) both; }
html.anim .reveal.d1.in { animation-delay: .08s; }
html.anim .reveal.d2.in { animation-delay: .16s; }
html.anim .reveal.d3.in { animation-delay: .24s; }
html.anim .reveal.d4.in { animation-delay: .32s; }

/* Replay zone (stats band) fades BOTH ways. Uses a transition rather than the
   one-shot keyframe, so leaving focus eases out gracefully instead of snapping.
   JS toggles .in on enter/exit. (The old hero dashboard was a replay zone too;
   the hero deck that replaced it manages its own motion in deck.js.) */
html.anim .stats .reveal {
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
/* Stats band fades fully out when out of view. */
html.anim .stats .reveal:not(.in) {
  animation: none !important;
  opacity: 0;
  transform: translateY(16px);
}
html.anim .stats .reveal.in {
  animation: none !important;
  opacity: 1;
  transform: none;
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { opacity: 1; transform: none; }
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PLACEHOLDER PAGES (scaffold — nav links resolve to real files)
   ============================================================ */
.ph-wrap {
  min-height: calc(100vh - 73px);
  display: grid; place-items: center;
  padding: 80px var(--gutter);
  position: relative; overflow: hidden;
}
.ph-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 18%, transparent 72%);
}
.ph { max-width: 660px; text-align: center; position: relative; z-index: 1; }
.ph .eyebrow { justify-content: center; }
.ph h1 { font-size: clamp(40px, 6vw, 68px); margin: 18px 0 0; }
.ph p { color: var(--ink-2); font-size: 18px; margin: 18px auto 0; max-width: 48ch; line-height: 1.55; }
.ph-actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }