*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* =========================================================================
   ActiumHealth design tokens
   Source: the reference design's shared stylesheet
   Extracted: `npm run migrate:tokens` -> scrape/analysis/REPORT.md
   ========================================================================= */

:root{
  /* ── Primary palette (verbatim from the reference design) ── */
  --primary--off-white:       #fffdf1;  /* page background */
  --primary--white:           #ffffff;
  --primary--black:           #202020;  /* body text */
  --primary--electric-purple: #6f00ff;  /* signature brand accent */
  --primary--deep-purple:     #5600c7;  /* hover/pressed states */
  --primary--light-purple:    #d2b0ff;  /* soft accent surfaces */
  --primary--primary-orange:  #ff7355;  /* secondary accent */
  --primary--gentle-coral:    #ffb592;  /* soft secondary */
  --primary--transparent:     transparent;

  /* ── Neutral scale (7-step, verbatim from the reference design) ── */
  --gray--gray-1: #f6f6f6;  /* near-white surfaces */
  --gray--gray-2: #e3e3e3;  /* borders / dividers */
  --gray--gray-3: #c4c4c4;  /* disabled borders */
  --gray--gray-4: #a0a0a0;  /* placeholder text */
  --gray--gray-5: #888888;  /* muted text */
  --gray--gray-6: #585858;  /* secondary text on light bg */
  --gray--gray-7: #202020;  /* ≈ primary--black */

  /* ── Opacity layers (black/white overlays, from the reference design) ── */
  --opacity-b--black-4:  rgba(0,0,0,.04);
  --opacity-b--black-8:  rgba(0,0,0,.08);
  --opacity-b--black-16: rgba(0,0,0,.16);
  --opacity-b--black-25: rgba(0,0,0,.25);
  --opacity-b--black-50: rgba(0,0,0,.50);
  --opacity-b--black-80: rgba(0,0,0,.80);
  --opacity-w--white-4:  rgba(255,255,255,.04);
  --opacity-w--white-8:  rgba(255,255,255,.08);
  --opacity-w--white-16: rgba(255,255,255,.16);
  --opacity-w--white-25: rgba(255,255,255,.25);
  --opacity-w--white-50: rgba(255,255,255,.50);
  --opacity-w--white-80: rgba(255,255,255,.80);

  /* ── Semantic aliases: backgrounds ── */
  --base-light:    var(--primary--off-white);
  --base-dark:     var(--primary--black);
  --lift-light:    var(--primary--white);
  --lift-dark:     #2a2a2a;
  --depth-light:   var(--gray--gray-2);
  --depth-dark:    #121212;

  --bg:            var(--primary--off-white);
  --bg-white:      var(--primary--white);
  --bg-alt:        var(--gray--gray-1);
  --bg-subtle:     var(--gray--gray-1);
  --bg-dark:       var(--primary--black);
  --bg-dark-card:  var(--opacity-w--white-8);
  --bg-indigo:     var(--primary--deep-purple);
  --bg-cream:      #fff8eb;
  --bg-pearl:      #f8f2f7;
  --bg-sky:        var(--primary--light-purple);
  --bg-periwinkle: #e9e0ff;

  /* ── Semantic aliases: text ── */
  --text:            var(--primary--black);
  --text-secondary:  var(--gray--gray-6);
  --text-accessible: var(--gray--gray-6);  /* WCAG AA on off-white */
  --text-muted:      var(--gray--gray-5);
  --tone-faint:      var(--opacity-b--black-8);

  /* ── Semantic aliases: accents ── */
  --accent:         var(--primary--electric-purple);
  --accent-hover:   var(--primary--deep-purple);
  --accent-soft:    var(--primary--light-purple);
  --accent-bluejay: var(--primary--electric-purple);  /* legacy alias, re-pointed */
  --accent-seaglass:var(--primary--primary-orange);   /* legacy alias, re-pointed */
  --accent-slate:   var(--gray--gray-6);
  --accent-indigo:  var(--primary--deep-purple);

  /* ── Borders ── */
  --border:       var(--gray--gray-2);
  --border-light: var(--opacity-b--black-8);

  /* ── Radii (Actium: 24px is dominant, 200px pill, 16/20/32 cards) ── */
  --radius-tiny:       2px;
  --radius-sm:         8px;
  --radius:           16px;
  --radius-lg:        20px;
  --radius-xl:        24px;
  --radius-2xl:       32px;
  --radius-pill:     200px;
  /* Buttons site-wide are full pills (matching the nav `.button` + "Explore
     solutions"). --radius-btn is consumed ONLY by .btn and
     .case-study-card-link — both buttons — so this keeps every button shape
     consistent. (Was 16px, which read as rounded rectangles next to the pills.) */
  --radius-btn:      var(--radius-pill);
  --radius-btn-circle:24px;
  --radius-input:      8px;
  --radius-tag:        4px;

  /* ── Spacing scale (px, frequency-sorted from Actium's live CSS) ── */
  --sp-0:   0;
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-80: 80px;
  --sp-100:100px;
  --sp-120:120px;
  --sp-160:160px;
  --sp-200:200px;

  /* ── Section padding (Actium uses tighter vertical rhythm than enterprise defaults) ── */
  --section-pad-xl: 120px;
  --section-pad-lg: 100px;
  --section-pad-md:  80px;
  --section-pad-sm:  48px;
  --section-pad-xs:  24px;

  /* ── Typography ──
     Inter (sans) for body + UI, STIX Two Text (serif) for display headings.
     Both loaded via Google Fonts link in <head> (see build.js renderHead). */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    var(--font);
  --font-heading: 'STIX Two Text', Georgia, 'Times New Roman', serif;
  --font-button:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-label:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Layout ── */
  --max-w:       1440px;
  --container:   1232px;
  --grid-margin:   32px;
  --grid-gutter:   16px;
  --nav-height:    64px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.08);

  /* ── Gradients (Actium-brand-aligned; keep Syllable aliases pointed here) ── */
  --gradient-electric:   linear-gradient(122deg, #5600c7 0%, #6f00ff 59%, #d2b0ff 94%, #f8f2f7 100%);
  --gradient-coral:      linear-gradient(122deg, #ff7355 0%, #ffb592 59%, #ffd4bf 94%, #fff8eb 100%);
  --gradient-cream:      linear-gradient(122deg, #fff8eb 0%, #fffdf1 100%);
  --gradient-midnight:   linear-gradient(135deg, #202020 0%, #2a1a4a 32%, #370186 71%, #5600c7 100%);
  --gradient-seaglass:   var(--gradient-coral);     /* legacy alias, re-pointed */
  --gradient-periwinkle: var(--gradient-electric);  /* legacy alias, re-pointed */

  /* ── Icon defaults ── */
  --icon-color:          var(--accent);
  --icon-accent:         var(--accent);
  --icon-bg:             var(--bg-alt);
  --icon-bg-default:     var(--primary--light-purple);
  --icon-accent-default: var(--primary--electric-purple);

  /* ── Platform accents (used by legacy build.js platform-color logic) ── */
  --platform-build-accent:    var(--primary--electric-purple);
  --platform-build-color:     var(--primary--white);
  --platform-run-accent:      var(--primary--deep-purple);
  --platform-run-color:       var(--primary--white);
  --platform-optimize-accent: var(--primary--primary-orange);
  --platform-optimize-color:  var(--primary--white);
  --platform-channels-accent: var(--primary--electric-purple);
  --platform-channels-color:  var(--primary--white);
}

/* ── Figma: 🔠 Typography — Element rules (Desktop) ── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text)}
h1{font-size:4rem;font-weight:400;line-height:1.06;letter-spacing:-0.016em}
h2{font-size:3rem;font-weight:400;line-height:1.17;letter-spacing:-0.01em}
h3{font-size:1.75rem;font-weight:400;line-height:1.2;letter-spacing:-0.012em}
h4{font-size:2rem;font-weight:400;line-height:1.25}
h5{font-size:1.5rem;font-weight:400;line-height:1.33}
h6{font-size:1.25rem;font-weight:400;line-height:1.2;text-transform:uppercase}
p{font-size:1rem;font-weight:300;line-height:1.5;color:var(--text-secondary)}
.subhead{font-size:1.25rem;font-weight:300;line-height:1.6;color:var(--text-secondary);max-width:580px}
.section .text-center .subhead{max-width:720px}
.small{font-size:0.813rem;font-weight:300;line-height:1.54}
.btn{font-family:var(--font-button);font-size:1rem;font-weight:400;line-height:1.25}
.btn-sm{font-family:var(--font-button);font-size:0.875rem;font-weight:400;line-height:1.14}
.label,.tag{font-family:var(--font-label);font-size:0.75rem;font-weight:400;line-height:1.33;letter-spacing:0.063em;text-transform:uppercase}
.label-sm{font-family:var(--font-label);font-size:0.625rem;font-weight:400;line-height:1.2;letter-spacing:0.075em;text-transform:uppercase}

/* ── Figma: 🔠 Typography — Mobile overrides ── */
@media(max-width:767px){
  h1{font-size:3rem;line-height:1.08;letter-spacing:-0.021em}
  h2{font-size:2.25rem;line-height:1.11;letter-spacing:-0.014em}
  h3{font-size:1.75rem;line-height:1.14;letter-spacing:-0.009em}
  h4{font-size:1.5rem;line-height:1.17}
  h5{font-size:1.25rem;line-height:1.4}
  h6{font-size:1rem;line-height:1.25}
  p{font-size:0.875rem;line-height:1.43}
  .subhead{font-size:1rem;line-height:1.5}
  .small{font-size:0.75rem;line-height:1.33}
  .btn{font-size:0.875rem;line-height:1.43}
  .btn-sm{font-size:0.75rem;line-height:1}
  .label,.tag,.section-label .tag{font-size:0.625rem;line-height:1.2;letter-spacing:0.05em}
  .label-sm{font-size:0.5rem;line-height:1.25;letter-spacing:0.063em}
}

html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
/* Responsive <picture> wrappers are layout-transparent: the wrapped <img>
   keeps the exact box behavior (and containing block for position:absolute)
   it had as a bare <img>, so srcset can be added without touching layout CSS. */
picture{display:contents}

.container{max-width:var(--max-w);margin:0 auto;padding:0 40px;display:block}
.hero .container,.section .container{display:block}

/* ── Nav (class-based chrome) ──────────────────────────────────
   Base layout, typography, colours and responsive behaviour come straight
   from base.css via `.navbar`, `.navbar-container`, `.nav-menu`,
   `.dropdown`, `.nav-link-drop`, `.dropdown-list`, `.left-nav-buttons`,
   etc. The rules below only add what the base layout relied on JS for:
     1. Open each `.dropdown-list` on hover of `.dropdown`
     2. A small "below-nav" spacer so heroes never sit underneath the
        fixed pill on narrower viewports
   No tag-selector on `nav {}` — we deliberately *avoid* it now because
   the navbar itself is a `<div>` and `<nav>` only appears as an inner
   element (`.nav-menu`, `.dropdown-list`), which the base layout styles directly. */

.dropdown.w-dropdown{position:static}
.dropdown .dropdown-list{
  display:block;opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease;
  position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);
  z-index:29;
}
.dropdown:hover .dropdown-list,
.dropdown:focus-within .dropdown-list{
  opacity:1;pointer-events:auto;transform:translate(-50%,0);
}
.dropdown-container{
  background:var(--primary--black,#202020);
}
/* Narrow dropdown (Resources): size the panel to its content and center it
   under the toggle instead of stretching the full navbar width. The base
   `.dropdown.w-dropdown` is position:static + the list is pinned left:0/right:0,
   so we override both with matching specificity. */
.dropdown.w-dropdown.dropdown--narrow{position:relative}
.dropdown--narrow .dropdown-list{width:max-content;max-width:720px;right:auto}
.dropdown--narrow .dropdown-container{width:auto}
.menu-label{
  color:var(--opacity-w--white-80,rgba(255,255,255,.8));
  font-weight:400;
}
.menu-label.semi{font-weight:500;color:#fff}
/* The intro + highlight descriptions are <p> elements, so without an explicit
   color they inherit the global `p` rule (--text-secondary / #585858 — meant
   for light backgrounds) and render as low-contrast dark gray inside the dark
   dropdown. Match them to the dropdown links (80% white). */
.menu-intro-link,
.menu-intro-desc,
.menu-highlight-title,
.menu-highlight-desc{
  color:var(--opacity-w--white-80,rgba(255,255,255,.8));
}
.menu-intro-link:hover,
.menu-highlight-card:hover .menu-highlight-title{color:#fff}
.nav-link-drop .drop-arrow{transition:transform .2s ease}
.dropdown:hover .nav-link-drop .drop-arrow{transform:rotate(270deg)}

/* ROOT-CAUSE NAV FIX. The base `.navbar` over-constrains its horizontal box:
   it sets BOTH `left:32px; right:32px` (which on a position:fixed element fully
   defines width + position) AND `width:100%; margin-left:50%; transform:
   translate(-50%)` (a different centering scheme). The two fight, which throws
   off the inner centering and the right-side layout (the clipped button + the
   off-center menu). Resolve to ONE model: drop left/right and keep the
   margin/transform centering, capped at max-width:1440, with side breathing room
   via horizontal margin. This alone fixes the clip and centering. */
.navbar.w-nav{left:auto;right:auto;width:calc(100% - 64px);margin-left:50%}
@media(max-width:1440px){
  .navbar.w-nav{width:calc(100% - 48px)}
}
/* Just above the 991px hamburger cutoff the full nav still fits but gets tight
   (links + the two CTA buttons crowd together). Tighten link/button padding and
   gaps in the 992–1080 band only, so it has breathing room. No layout/hamburger
   change — purely spacing. Reverts to roomy defaults above 1080. */
@media(min-width:992px) and (max-width:1080px){
  .navbar.w-nav .nav-link-drop,
  .navbar.w-nav .nav-link{padding-left:8px;padding-right:8px;gap:4px}
  .navbar.w-nav .navbar-container{grid-column-gap:8px}
  .navbar.w-nav .left-nav-buttons{grid-column-gap:6px}
  .navbar.w-nav .left-nav-buttons .button,
  .navbar.w-nav .left-nav-buttons .btn{padding-left:14px;padding-right:14px}
}

.btn-block{width:100%;text-align:center}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  padding:var(--sp-12) var(--sp-24);border-radius:var(--radius-btn);
  font-family:var(--font-button);font-weight:600;font-size:.875rem;
  transition:all .2s;cursor:pointer;border:none;letter-spacing:-.01em;
}
.btn-pill{border-radius:var(--radius-pill)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.btn-primary .ph{font-size:16px;line-height:1}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--text);color:var(--text);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.btn-group{display:flex;gap:var(--sp-12);flex-wrap:wrap}
.btn-group-center{justify-content:center}

/* Typography h1-h6, p, .subhead, .label, .btn are generated from Figma tokens above */
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ── Section Label ── */
/* Default tag: colored square + uppercase text (all blocks except split). */
/* Icon-box tag: Phosphor icon in rounded box + text (split blocks only). */
.section-label{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  color:var(--text);margin-bottom:var(--sp-16);
}
.section-label-square{
  width:10px;height:10px;border-radius:2px;
  background:var(--icon-accent,var(--icon-accent-default));flex-shrink:0;
}
.section-label-icon{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-8);border-radius:var(--radius-sm);
  background:var(--icon-bg,var(--icon-bg-default));flex-shrink:0;
  font-size:16px;line-height:1;color:var(--icon-color,var(--text));
}
.section-label .tag{
  font-family:var(--font-label);font-size:0.75rem;font-weight:400;
  line-height:1.33;letter-spacing:0.063em;text-transform:uppercase;
  color:var(--text);
}
.section-dark .section-label-square{background:var(--accent-seaglass)}
.section-dark .section-label-icon{background:rgba(255,255,255,.1);color:#fff}
.section-dark .section-label .tag{color:var(--accent-seaglass)}

/* ── Platform color classes (Figma token-driven) ── */
/* All four platforms now share Gradient/Midnight icon BG and seaglass accent */
.platform-build,.platform-run,.platform-optimize,.platform-channels{--icon-accent:var(--platform-build-accent);--icon-color:var(--platform-build-color)}
.platform-build .section-label-icon,
.platform-build .card-icon,
.platform-build .mega-item-icon,
.platform-run .section-label-icon,
.platform-run .card-icon,
.platform-run .mega-item-icon,
.platform-optimize .section-label-icon,
.platform-optimize .card-icon,
.platform-optimize .mega-item-icon,
.platform-channels .section-label-icon,
.platform-channels .card-icon,
.platform-channels .mega-item-icon{background:var(--gradient-midnight)}

/* ── Hero ── */
.hero{padding:var(--section-pad-xl) 0 var(--section-pad-sm);position:relative;overflow:hidden}
.hero .container{position:relative;z-index:1}
.hero h1{margin-bottom:var(--sp-20)}
.hero .subhead{margin-bottom:var(--sp-32)}
.hero.hero-center{text-align:center}
.hero.hero-center .subhead{margin-left:auto;margin-right:auto}
.hero.hero-center .btn-group{justify-content:center}

/* ── Resources-index hero (case-studies / blog / reports): an optional
   top→cream gradient + full-bleed lines-system Rive animation behind centered
   text, no foreground visual. Tone modifier sets the gradient per page.
   Reference: .section_100.hero-news (.bg-img-cont.lavanda/.orange). ── */
.hero.hero-resources{text-align:center;padding:var(--section-pad-lg) 0 var(--section-pad-sm);min-height:572px;display:flex;align-items:center}
/* Tall wash hero (about-us): full-height like the base `section_100 hero`. */
.hero.hero-resources--tall{min-height:900px}
.hero-resources-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Bottom fade: melt the hero background (gradient OR animated Rive) into the
   off-white body so there's no hard line at the hero's bottom edge. Sits above
   the Rive canvas within the bg container. The body section below every
   resources hero is --primary--off-white, so this blends seamlessly. */
.hero-resources-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:2;
  background:linear-gradient(180deg, transparent 0%, var(--primary--off-white,#fffdf1) 100%);
  pointer-events:none;
}
.hero-resources-gradient{position:absolute;inset:0}
.hero-resources-gradient--lavender{background:linear-gradient(180deg,var(--primary--light-purple,#d2b0ff) 0%,var(--primary--off-white,#fffdf1) 100%)}
.hero-resources-gradient--orange{background:linear-gradient(180deg,#ffb592 0%,var(--primary--off-white,#fffdf1) 100%)}
.hero-resources-bg .rive-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.5}
.hero.hero-resources .hero-resources-inner{position:relative;z-index:1}
.hero.hero-resources .subhead{margin-left:auto;margin-right:auto}
.hero.hero-resources .btn-group{justify-content:center}

/* ── Hero Spotlight (full-bleed Rive/video background, centered overlay) ── */
.hero.hero-spotlight{
  position:relative;
  /* Full-viewport hero (matches the reference Hero's min-h-screen): fills the
     screen until the user scrolls. max() keeps a 620px floor on very short windows. */
  min-height:max(100vh, 620px);
  padding:0;
  margin:0;
  overflow:hidden;
  color:var(--primary--off-white);
  background:var(--primary--deep-purple,#5600c7);
  isolation:isolate;
}
.hero-spotlight-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* Deep-purple base only shows in letterboxed areas; the video covers it. */
  background:var(--primary--deep-purple);
}
.hero-spotlight-bg .hero-spotlight-video,
.hero-spotlight-bg canvas.rive-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;
}
/* Photo plays at full opacity — no purple wash over it. */
.hero-spotlight-bg .hero-spotlight-video{z-index:1}
.hero-spotlight-bg canvas.rive-canvas{z-index:2}
/* Soft centered scrim behind the hero text: the photo is light, so a faint
   radial darkening centered on the headline keeps the white text legible
   without visibly dimming the whole image. (Mobile uses a stronger top-down
   variant — see the max-width:767px block.) */
.hero-spotlight-bg .hero-spotlight-scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 75% at 50% 38%, rgba(35,31,35,.42) 0%, rgba(35,31,35,.24) 45%, rgba(35,31,35,0) 80%);
}
.hero-spotlight-inner{
  position:relative;z-index:4;
  max-width:820px;margin:0 auto;
  padding:clamp(200px, 26vh, 320px) var(--sp-32) clamp(140px, 18vh, 220px);
  text-align:center;
  color:#fff;
}
.hero-spotlight-h1{
  font-family:var(--font-serif, 'STIX Two Text', serif);
  font-weight:500;
  font-size:clamp(2.4rem, 4.8vw, 4rem);
  line-height:1.1;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 1px 24px rgba(35,31,35,.45);
  margin:0 0 var(--sp-24);
}
.hero-spotlight-sub{
  max-width:60ch;margin:0 auto var(--sp-32);
  color:#fff;
  text-shadow:0 1px 16px rgba(35,31,35,.55);
  font-size:clamp(.95rem, 1.15vw, 1.0625rem);
  font-weight:450;
  line-height:1.55;
}
.hero-spotlight-cta{display:flex;justify-content:center}
.btn.btn-pill-light{
  display:inline-flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-12) var(--sp-24);
  background:var(--primary--off-white);color:var(--primary--black);
  border-radius:var(--radius-pill, 999px);
  text-decoration:none;font-weight:500;font-size:.9375rem;
  box-shadow:0 10px 30px rgba(35,31,35,.22);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.btn-pill-light:hover{
  background:#fff;transform:translateY(-1px);
  box-shadow:0 14px 38px rgba(35,31,35,.28);
}
.btn.btn-pill-light .ph{font-size:1.05rem;line-height:1;color:var(--primary--deep-purple,#5600c7)}
/* Hero Rive artboard swap (mirrors Webflow desk-tablet/land-mobile at 767px).
   Desktop is the default and untouched; the portrait "-mobile" artboard only
   appears on phones, where it sizes correctly and anchors the agent cards to
   the bottom (data-align=bottom-center). */
.hero-spotlight-bg canvas.rive-canvas.hero-rive-mobile{display:none}
@media (max-width:720px){
  .hero-spotlight-inner{padding:120px var(--sp-20) 80px}
}
@media (max-width:767px){
  .hero-spotlight-bg canvas.rive-canvas.hero-rive-desktop{display:none}
  .hero-spotlight-bg canvas.rive-canvas.hero-rive-mobile{display:block}
  /* Lift the bottom-anchored artboard (incl. the sliding agent cards) off the
     purple footer so the cards aren't flush against it. The canvas keeps
     filling the hero from the top; only the bottom edge is raised. */
  .hero-spotlight-bg canvas.rive-canvas.hero-rive-mobile{
    top:auto;
    bottom:48px;
    height:calc(100% - 48px);
  }
  /* The mobile hero photo is light, so make the headline + subhead pure white
     and add a soft top-down scrim behind them for guaranteed contrast.
     Desktop is unaffected (this lives inside the 767px block). */
  .hero-spotlight-bg .hero-spotlight-scrim{
    background:linear-gradient(180deg, rgba(35,31,35,.55) 0%, rgba(35,31,35,.42) 38%, rgba(35,31,35,.22) 58%, rgba(35,31,35,0) 80%);
  }
  .hero-spotlight-h1{
    color:#fff;
    text-shadow:0 1px 20px rgba(35,31,35,.5);
  }
  .hero-spotlight-sub{
    color:#fff;
    text-shadow:0 1px 16px rgba(35,31,35,.6);
  }
}

/* ── Product hero (reference ProductHero): photo bg + text-left + Rive-right ── */
.hero.hero-product{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  min-height:82vh;padding:124px 0 0;
  background-color:var(--primary--deep-purple);
  background-image:
    radial-gradient(circle at 0% 70%, var(--primary--electric-purple), transparent 40%),
    radial-gradient(circle farthest-side at 100% 90%, rgba(255,255,255,.5), var(--primary--light-purple) 15%, transparent 47%);
}
/* Tall variant: top-level product page + workflow heroes run full-height on
   the reference (~900px) vs the 82vh agent/use-case heroes. */
.hero.hero-product--tall{min-height:100vh}
.hero.hero-product--orange{
  background-color:#E85D3A;
  background-image:
    radial-gradient(circle at 0% 70%, var(--primary--primary-orange), transparent 40%),
    radial-gradient(circle farthest-side at 100% 90%, rgba(255,255,255,.5), var(--primary--gentle-coral) 15%, transparent 47%);
}
.hero-product-bg{position:absolute;inset:0;z-index:0}
.hero-product-bg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Dark scrim over the hero photo — matches the reference `.bg-degree`: a flat 25%
   black tint plus a bottom-up gradient (25% black at the base → transparent).
   Keeps the white headline legible against bright hero imagery. */
.hero-product-bg-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.25),rgba(255,255,255,0));
}
.hero-product-inner{
  /* Align the hero content width to the navbar's inner content (~1408px) so it
     doesn't look pinched against the full-bleed 1440px nav. Side padding matches
     the nav-container's inset (~32px). */
  position:relative;z-index:2;max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-40);
  padding:0 var(--sp-32);
}
.hero-product-text{display:flex;flex-direction:column;gap:var(--sp-24);max-width:38rem;padding:var(--sp-80) 0}
.hero-product-eyebrow{display:inline-block;color:rgba(255,255,255,.7);font-size:.875rem;
  font-weight:500;letter-spacing:.01em;margin:0 0 var(--sp-12)}
.hero-product-h1{font-family:var(--font-heading);font-weight:400;color:#fff;margin:0;
  font-size:clamp(2rem,4vw,3.25rem);line-height:1.15;letter-spacing:-.01em}
.hero-product-sub{color:rgba(255,255,255,.8);max-width:28rem;margin:0;font-size:1.0625rem;line-height:1.6}
.hero-product-cta{display:inline-flex;align-items:center;gap:var(--sp-10);
  padding:var(--sp-12) var(--sp-24);border-radius:var(--radius-pill,200px);
  background:#fff;color:var(--primary--black);font-weight:500;font-size:.9375rem;text-decoration:none;
  transition:background .25s ease}
.hero-product-cta:hover{background:rgba(255,255,255,.9)}
.hero-product-cta .ph-waveform{color:var(--primary--deep-purple)}
.hero-product-visual{position:relative;width:100%;max-width:500px;height:60vh;flex:0 0 auto}
.hero-product-visual canvas{width:100%;height:100%;display:block}
.hero-product-visual--image{display:flex;align-items:center;justify-content:center}
.hero-product-visual--image img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:900px){
  .hero-product-inner{flex-direction:column;align-items:flex-start}
  .hero-product-text{padding:var(--sp-48) 0 var(--sp-24)}
  .hero-product-visual{height:46vh;max-width:100%;align-self:center}
}

/* ── hero-orbit — animated use-case hero visual ──────────────────────────────
   Live-DOM replacement for the static `*-hero-fg.png` composite on use-case
   pages (Visual: orbit::default). Center product pill + dashed orbit ring; two
   feature pills ALTERNATE around the ring (top half then bottom half), one at a
   time. Whole composite scales as one unit via container-query width units
   (cqw), so it shrinks in lockstep and the pills stay on the ring at any size.
   Source of truth + design rationale: marketing/animations/hero-orbit/.
   Falls back to a static resting frame under prefers-reduced-motion. */
/* The orbit sizes itself (aspect-ratio + cqw); free it from the panel's fixed
   vh height so it isn't squashed. */
.hero-product-visual:has(.hero-orbit){height:auto;align-self:center}
.hero-orbit{
  --ho-accent:#6f00ff;
  --ho-accent-soft:#c89bff;
  --ho-ring:rgba(255,255,255,.85);
  /* Pills ALTERNATE — only one visible. Full cycle = one pill's 3s sweep + the
     other's 3s sweep = 6s; each animates during its half, hidden the other. */
  --ho-cycle:6s;
  --ho-pill-bg:linear-gradient(135deg,#8d7a63,#6f5e4d);
  position:relative;width:100%;max-width:560px;
  /* SQUARE box: SVG ring (preserveAspectRatio=meet -> min(w,h)) and the pill
     motion-path circle(%) (diagonal basis) only agree when w==h. */
  aspect-ratio:1/1;margin-inline:auto;
  container-type:inline-size; /* 1cqw == 1% of this element's width */
  /* `contain:layout` (not `paint`) isolates layout for smoothness WITHOUT
     clipping — `paint` was cropping the wider pills (e.g. "Zero Hold Time /
     Instant Booking") where they extend past the box at the 3/9 o'clock sides.
     Layer promotion on the pills (translateZ) carries the compositor benefit. */
  contain:layout;
  overflow:visible;
}
.hero-orbit__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-orbit__ring circle{fill:none;stroke:var(--ho-ring);stroke-width:.5;stroke-dasharray:1.4 2.6;stroke-linecap:round}
.hero-orbit__center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;align-items:center;gap:3.2cqw;width:min(94%,540px);padding:2.86cqw;
  background:#fff;border-radius:3.93cqw;
  box-shadow:0 0 0 2.14cqw rgba(120,95,70,.6),0 4.3cqw 10.7cqw rgba(40,20,60,.22);
}
.hero-orbit__icon{flex:0 0 auto;display:grid;place-items:center;width:11.4cqw;height:11.4cqw;border-radius:2.86cqw;background:var(--ho-accent);color:#fff;font-size:5.36cqw}
.hero-orbit__title{flex:1 1 auto;margin:0;font-size:3.93cqw;font-weight:700;line-height:1.15;color:#111}
.hero-orbit__status{flex:0 0 auto;display:inline-flex;align-items:center;gap:1.43cqw;padding:2.14cqw 3.57cqw;border-radius:2.14cqw;font-size:3.04cqw;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--ho-accent),var(--ho-accent-soft))}
.hero-orbit__status i{font-size:3.57cqw}
.hero-orbit__pill{
  position:absolute;top:0;left:0;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  padding:2.5cqw 4.64cqw;border-radius:999px;font-size:3.04cqw;font-weight:600;color:#fff;white-space:nowrap;
  background:var(--ho-pill-bg);border:1px solid rgba(255,255,255,.9);box-shadow:0 1.79cqw 5.36cqw rgba(40,20,60,.18);
  offset-path:circle(33% at 50% 50%);offset-rotate:0deg;offset-anchor:center;
  will-change:offset-distance,opacity;
  transform:translateZ(0);backface-visibility:hidden; /* own compositor layer */
}
/* scripts/runtime/hero-orbit.js sets `.ho-wait` immediately (so the motion is
   held during the load crunch — it fights Rive/Lottie/reveal init otherwise),
   then removes it after load to start smoothly. Default (no-JS) = running, so
   the orbit never gets stuck if the script doesn't run. */
.hero-orbit.ho-wait .hero-orbit__pill{animation-play-state:paused}
/* TOP pill owns the top half: left -> up -> right (offset-distance 50->75->100).
   offset-distance on circle(): 0%=3 o'clock, 25%=6, 50%=9, 75%=12. */
.hero-orbit__pill--top{animation:ho-orbit-top var(--ho-cycle) linear infinite}
@keyframes ho-orbit-top{
  0%{offset-distance:50%;opacity:0}
  5%{opacity:1}
  44%{offset-distance:96%;opacity:1}
  50%{offset-distance:100%;opacity:0}        /* arrive right, fade -> handoff */
  50.01%{offset-distance:50%;opacity:0}       /* snap back to start, hidden */
  100%{offset-distance:50%;opacity:0}         /* wait out the bottom pill's turn */
}
/* BOTTOM pill owns the bottom half: right -> down -> left (0->25->50). Delayed
   half a cycle so it runs while the top pill is hidden. */
.hero-orbit__pill--bottom{animation:ho-orbit-bottom var(--ho-cycle) linear infinite;animation-delay:calc(var(--ho-cycle) * -0.5)}
@keyframes ho-orbit-bottom{
  0%{offset-distance:0%;opacity:0}
  5%{opacity:1}
  44%{offset-distance:46%;opacity:1}
  50%{offset-distance:50%;opacity:0}          /* arrive left, fade -> handoff */
  50.01%{offset-distance:0%;opacity:0}         /* snap back to start, hidden */
  100%{offset-distance:0%;opacity:0}           /* wait out the top pill's turn */
}
@media (prefers-reduced-motion: reduce){
  .hero-orbit__pill{animation:none;opacity:1}
  .hero-orbit__pill--top{offset-distance:68%}    /* ~upper-left */
  .hero-orbit__pill--bottom{offset-distance:18%} /* antipodal -> lower-right */
}

/* ── convo-stack — animated workflow hero visual ────────────────────────────
   Live-DOM replacement for the static `*-workflow-hero-fg.png` conversation
   composite (and the ui-10-scheduling Lottie). A stack of notification cards
   that build in sequence: each drops in, its message types out, a connector
   line draws to the next, and the final card resolves (grey "Listening…" ->
   purple badge). Sequencer + min-height anchoring: scripts/runtime/convo-stack.js.
   Source of truth + rationale: marketing/animations/convo-stack/.
   GOTCHA: do NOT use cqw on .convo-stack itself (the container-declaring element)
   — it resolves against the PARENT column, not its own width. Children only. */
/* Top-anchor the stack in its panel so it grows DOWN as cards appear, instead
   of staying vertically centered (which makes it drift up on each reveal). */
.hero-product-visual--convo{
  height:auto;align-self:flex-start;
  /* nudge the stack down from the top and in from the right edge so it sits a
     little closer to the hero text (desktop only — reset when stacked below). */
  padding-top:80px;padding-right:60px;
}
@media(max-width:900px){
  .hero-product-visual--convo{padding-top:0;padding-right:0}
}
/* Product-animation hero (inbound/outbound/insights): the phone-call is a tall
   fixed-aspect scene — center it in the hero column and lift it off the bottom
   edge with padding so it doesn't sit flush at the bottom. */
.hero-product-visual--anim{
  height:auto;align-self:center;
  display:flex;align-items:center;justify-content:center;
  padding-top:40px;padding-bottom:64px;
}
.hero-product-visual--anim .phone-call{max-width:380px}
.hero-product-visual--anim .app-flow{max-width:520px}
@media(max-width:900px){
  .hero-product-visual--anim{padding:24px 0 40px}
}
.convo-stack{
  --cs-accent:#6f00ff;
  --cs-accent-soft:#b27bff;
  --cs-card:rgba(58,54,60,.34);     /* frosted glass: low-opacity dark tint over a strong blur */
  --cs-bubble:rgba(86,82,84,.6);    /* lighter inner message bubble */
  --cs-text:#fff;
  position:relative;width:100%;max-width:380px;margin-inline:auto;
  display:flex;flex-direction:column;gap:12px;   /* NOT cqw (see gotcha above) */
  min-height:var(--cs-minh,0px);      /* reserve final height -> grows down */
  container-type:inline-size;contain:layout;
}
.convo-card{
  position:relative;border-radius:5.5cqw;padding:3.6cqw 4cqw;
  background:var(--cs-card);
  /* Frosted glass: strong blur of the hero photo behind + a hairline edge + an
     inset top highlight. Low-opacity --cs-card lets the blur read as frost. */
  backdrop-filter:blur(28px) saturate(130%);-webkit-backdrop-filter:blur(28px) saturate(130%);
  border:0.5px solid rgba(255,255,255,.16);   /* hairline glass edge (true 0.5px on 2x displays) */
  box-shadow:0 10px 36px rgba(20,10,30,.3),inset 0 1px 0 rgba(255,255,255,.18);color:var(--cs-text);
  transform:translateZ(0);will-change:transform,opacity;
  display:none;                       /* absent until .is-shown */
}
.convo-card.is-shown{display:block;animation:cs-card-in .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes cs-card-in{from{opacity:0;transform:translateY(5cqw) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.convo-card__head{display:flex;align-items:center;gap:3.3cqw}
.convo-card__avatar{flex:0 0 auto;width:9.5cqw;height:9.5cqw;border-radius:2.8cqw;display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.14);color:#fff;font-size:6.32cqw}/* glyph = 24px @380 (box stays 36px) */
.convo-card__avatar img{width:100%;height:100%;object-fit:cover}
.convo-card__avatar--accent{background:linear-gradient(135deg,var(--cs-accent),var(--cs-accent-soft));color:#fff}
.convo-card__meta{flex:1 1 auto;min-width:0}
.convo-card__name{font-weight:700;font-size:3.8cqw;line-height:1.1}
.convo-card__channel{font-size:2.9cqw;opacity:.7;margin-top:2px}/* 2px gap between name + channel lines */
.convo-card__icon{flex:0 0 auto;width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;font-size:3.5cqw}
.convo-card__msg{margin-top:3cqw;padding:3cqw 3.6cqw;border-radius:3.4cqw;background:var(--cs-bubble);font-size:3.6cqw;line-height:1.4}
.convo-card__msg .cs-char{opacity:0}
.convo-card__msg .cs-char.is-typed{opacity:1}
/* two-state pill on the resolution card */
.convo-card__status{position:relative;margin-left:auto;display:inline-grid;align-items:center}
.convo-card__status>span{grid-area:1/1;display:inline-flex;align-items:center;gap:1.6cqw;padding:2.2cqw 3.8cqw;border-radius:2.6cqw;font-size:3.2cqw;font-weight:600;white-space:nowrap;transition:opacity .35s ease}
.convo-card__status i{font-size:6.32cqw}/* check glyph = 24px @380 (pill text stays 3.2cqw) */
.convo-card__status .cs-idle{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.convo-card__status .cs-resolved{background:linear-gradient(135deg,var(--cs-accent),var(--cs-accent-soft));color:#fff;opacity:0}
.convo-card--resolved.is-resolved .convo-card__status .cs-idle{opacity:0}
.convo-card--resolved.is-resolved .convo-card__status .cs-resolved{opacity:1}
/* connector line — negative margins cancel the stack's 12px gap on both sides */
.convo-connector{display:none;height:6cqw;margin:-12px auto;width:0;border-left:1.5px solid rgba(255,255,255,.5)}
.convo-connector.is-shown{display:block;transform-origin:top center;animation:cs-line-draw .32s ease both}
@keyframes cs-line-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){
  .convo-card{display:block;animation:none;opacity:1;transform:none}
  .convo-connector{display:block;animation:none;transform:none}
  .convo-card__msg .cs-char{opacity:1}
  .convo-card__status .cs-idle{opacity:0}
  .convo-card__status .cs-resolved{opacity:1}
}

/* ── Product-pitch animations (phone-call + app-flow) ─────────────────────────
   Live-DOM replacements for the ui-04 / ui-05 / ui-06 Rive panels on the
   products + solutions pitch sections and the inbound/outbound/insights agent
   heroes. Source of truth + design rationale: marketing/animations/phone-call/
   and marketing/animations/app-flow/. Sequencers run in scripts/runtime/
   product-anim.js (deferred + viewport-gated). prefers-reduced-motion shows a
   rested frame. GOTCHA (as ever): cqw lives on descendants, never on the
   container that declares container-type. */

/* phone-call -------------------------------------------------------------- */
.phone-call{--pc-accent:#6f00ff;--pc-accent-soft:#b27bff;--pc-phone-bg:#d9ccf2;--pc-card:rgba(255,255,255,.92);--pc-text:#141414;position:relative;width:100%;max-width:540px;aspect-ratio:540/600;margin-inline:auto;container-type:inline-size}
.phone-call__phone{position:absolute;top:0;right:4cqw;width:56cqw;aspect-ratio:300/600;border-radius:9cqw;background:var(--pc-phone-bg);box-shadow:0 20px 60px rgba(40,20,70,.35);overflow:hidden;opacity:0;transform:translateY(4cqw);animation:pc-rise .6s cubic-bezier(.22,.61,.36,1) .1s forwards}
.phone-call__notch{position:absolute;top:2.4cqw;left:50%;transform:translateX(-50%);width:18cqw;height:2.6cqw;border-radius:2cqw;background:rgba(255,255,255,.55)}
.phone-call__callhdr{position:absolute;top:14cqw;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2cqw;color:rgba(40,20,70,.5)}
.phone-call__callicon{width:8.5cqw;height:8.5cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.5);color:rgba(40,20,70,.6);font-size:4.4cqw}
.phone-call__callstatus{font-size:3.2cqw;font-weight:500}
.phone-call__wave{position:absolute;left:0;right:0;top:40cqw;display:flex;align-items:center;justify-content:center;gap:.9cqw;height:14cqw;opacity:0;animation:pc-fade .5s ease .7s forwards}
.phone-call__wave span{display:block;width:1cqw;border-radius:1cqw;background:#fff;height:2cqw;animation:pc-bar 1.1s ease-in-out infinite}
/* product-anim.js adds .pc-hold immediately to pause the looping waveform until
   the scene scrolls into view (so the loop doesn't burn CPU off-screen / pre-
   load). Default (no-JS) keeps it running. Mirrors hero-orbit's .ho-wait. */
.phone-call.pc-hold .phone-call__wave span{animation-play-state:paused}
.phone-call__wave span:nth-child(odd){animation-duration:.9s}
.phone-call__wave span:nth-child(3n){animation-delay:-.2s}
.phone-call__wave span:nth-child(3n+1){animation-delay:-.5s}
.phone-call__wave span:nth-child(4n){animation-delay:-.8s;height:3cqw}
@keyframes pc-bar{0%,100%{height:2cqw;opacity:.7}50%{height:11cqw;opacity:1}}
.phone-call__controls{position:absolute;left:8cqw;right:8cqw;bottom:8cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:5cqw 6cqw;opacity:0;animation:pc-fade .5s ease .9s forwards}
.phone-call__ctrl{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;color:rgba(40,20,70,.45);font-size:2.5cqw}
.phone-call__ctrl i:first-child{width:9cqw;height:9cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.4);font-size:4cqw}
.phone-call__ctrl--end i:first-child{background:#e8536b;color:#fff}
.phone-call__cards{position:absolute;left:0;bottom:6cqw;width:70cqw;z-index:3;display:flex;flex-direction:column;gap:3cqw}
.pc-card{border-radius:4.5cqw;padding:3.4cqw 3.8cqw;background:var(--pc-card);box-shadow:0 12px 34px rgba(40,20,70,.22);color:var(--pc-text);opacity:0;transform:translateX(-6cqw) translateY(2cqw)}
.pc-card.is-shown{animation:pc-card-in .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes pc-card-in{to{opacity:1;transform:translateX(0) translateY(0)}}
.pc-card__head{display:flex;align-items:center;gap:2.6cqw}
.pc-card__avatar{flex:0 0 auto;width:8cqw;height:8cqw;border-radius:2.4cqw;display:grid;place-items:center;overflow:hidden;background:rgba(0,0,0,.06)}
.pc-card__avatar img{width:100%;height:100%;object-fit:cover}
.pc-card__avatar--accent{background:linear-gradient(135deg,var(--pc-accent),var(--pc-accent-soft));color:#fff;font-size:4.4cqw}
.pc-card__meta{flex:1 1 auto;min-width:0}
.pc-card__name{font-weight:700;font-size:3.3cqw;line-height:1.15;white-space:nowrap}
.pc-card__sub{font-size:2.6cqw;opacity:.6;margin-top:2px}
.pc-card__phoneicon{flex:0 0 auto;width:6.5cqw;height:6.5cqw;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.06);color:rgba(0,0,0,.45);font-size:3cqw}
.pc-card__msg{margin-top:2.6cqw;padding:2.6cqw 3cqw;border-radius:2.8cqw;background:rgba(0,0,0,.05);font-size:3cqw;line-height:1.35}
.pc-card__msg .pc-char{opacity:0}
.pc-card__msg .pc-char.is-typed{opacity:1}
.pc-card__status{flex:0 0 auto;margin-left:auto;display:inline-grid;align-items:center}
.pc-card__status>span{grid-area:1/1;display:inline-flex;align-items:center;gap:1.4cqw;padding:2cqw 3.4cqw;border-radius:2.4cqw;font-size:2.8cqw;font-weight:600;white-space:nowrap;transition:opacity .35s ease}
.pc-card__status .pc-idle{background:rgba(0,0,0,.06);color:rgba(0,0,0,.5)}
.pc-card__status .pc-resolved{background:linear-gradient(135deg,var(--pc-accent),var(--pc-accent-soft));color:#fff;opacity:0}
.pc-card.is-resolved .pc-card__status .pc-idle{opacity:0}
.pc-card.is-resolved .pc-card__status .pc-resolved{opacity:1}
.pc-card__status i{font-size:3.4cqw}
@keyframes pc-rise{to{opacity:1;transform:translateY(0)}}
@keyframes pc-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .phone-call__phone,.phone-call__wave,.phone-call__controls,.pc-card{animation:none;opacity:1;transform:none}
  .phone-call__wave span{animation:none;height:6cqw}
  .pc-card__msg .pc-char{opacity:1}
  .pc-card__status .pc-idle{opacity:0}.pc-card__status .pc-resolved{opacity:1}
}

/* app-flow ---------------------------------------------------------------- */
.app-flow{--af-accent:#6f00ff;--af-accent-soft:#b27bff;--af-win:#b9a6e6;--af-card:#fff;--af-ink:#2a2533;--af-muted:rgba(40,30,60,.4);--af-onpurple:rgba(40,20,70,.55);position:relative;width:100%;max-width:560px;aspect-ratio:560/440;margin-inline:auto;container-type:inline-size}
.app-flow__win{position:absolute;inset:0;border-radius:5cqw;background:var(--af-win);box-shadow:0 24px 70px rgba(40,20,70,.35),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden;display:flex;padding:3.5cqw;gap:3.5cqw;opacity:0;transform:translateY(3cqw) scale(.99);animation:af-rise .6s cubic-bezier(.22,.61,.36,1) .1s forwards}
.app-flow__nav{flex:0 0 auto;border-radius:6cqw;background:rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;gap:2.4cqw;padding:3.5cqw 2.6cqw;overflow:hidden}
.app-flow__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3cqw}
.app-flow__bar{flex:0 0 auto;display:flex;align-items:center;gap:2cqw}
.app-flow__bar-logo{width:6cqw;height:6cqw;display:grid;place-items:center;flex:0 0 auto}
.app-flow__url{flex:0 1 52cqw;margin:0 auto;height:6cqw;border-radius:3cqw;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:2.6cqw;color:var(--af-onpurple);font-weight:500}
.app-flow__bar-actions{display:flex;gap:1.6cqw;flex:0 0 auto}
.app-flow__bar-actions span{width:6cqw;height:6cqw;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center;color:var(--af-onpurple);font-size:2.8cqw;font-weight:600}
.app-flow__bar-actions .af-avatar{font-size:2.4cqw;letter-spacing:.02em}
.app-flow__nav-item{width:6.5cqw;height:6.5cqw;border-radius:2cqw;display:grid;place-items:center;background:rgba(255,255,255,.6);color:var(--af-muted);font-size:3cqw}
.app-flow__nav-item--active{background:linear-gradient(135deg,var(--af-accent),var(--af-accent-soft));color:#fff;box-shadow:0 4cqw 10cqw rgba(111,0,255,.3)}
.app-flow__body{flex:1 1 auto;position:relative;overflow:hidden}
.app-flow__screen{position:absolute;inset:0;opacity:0}
.app-flow__screen h3{margin:0 0 3cqw;font-size:4.6cqw;font-weight:700;color:#fff}
.app-flow__screen--dash.is-active{opacity:1;animation:af-screen-in .4s ease both}
.app-flow__screen--insights.is-active{opacity:1;animation:af-screen-in .45s ease both}
.app-flow__searchbar{height:4.6cqw;border-radius:2.3cqw;background:rgba(40,30,60,.05);margin-bottom:3cqw}
.app-flow__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw}
.app-flow__tile{border-radius:2.6cqw;padding:2.6cqw;background:var(--af-card);box-shadow:0 4cqw 12cqw rgba(40,20,70,.12);display:flex;flex-direction:column;gap:2cqw;min-height:16cqw}
.app-flow__tile-ic{width:7cqw;height:7cqw;border-radius:2cqw;display:grid;place-items:center;background:rgba(40,30,60,.07);color:rgba(40,30,60,.55);font-size:3.4cqw}
.app-flow__tile--accent .app-flow__tile-ic{background:linear-gradient(135deg,var(--af-accent),var(--af-accent-soft));color:#fff}
.app-flow__tile-label{font-size:2.5cqw;color:rgba(40,30,60,.7);font-weight:600}
.app-flow__tile--target.is-pressed{transform:scale(.96);transition:transform .15s ease}
.app-flow__tabs{display:flex;gap:2cqw;margin-bottom:3cqw}
.app-flow__tab{height:5.2cqw;border-radius:2.6cqw;background:rgba(255,255,255,.35);flex:0 0 26cqw}
.app-flow__tab--active{background:linear-gradient(135deg,var(--af-accent),var(--af-accent-soft));flex:0 0 32cqw;display:flex;align-items:center;padding:0 3cqw;color:#fff;font-size:2.6cqw;font-weight:600;white-space:nowrap}
.app-flow__table{background:var(--af-card);border-radius:2.6cqw;overflow:hidden;box-shadow:0 8cqw 24cqw rgba(40,20,70,.18);display:flex;flex-direction:column}
.app-flow__thead{height:6cqw;background:rgba(40,30,60,.05);border-bottom:1px solid rgba(40,30,60,.08)}
.app-flow__row{display:grid;grid-template-columns:1fr 1fr 1.7fr 1fr;padding:3cqw;gap:2.4cqw;align-items:center;border-bottom:1px solid rgba(40,30,60,.07);opacity:0;transform:translateX(-2cqw)}
.app-flow__row:last-child{border-bottom:0}
.app-flow__row.is-in{opacity:1;transform:translateX(0);transition:opacity .35s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
.app-flow__cell{display:flex;flex-direction:column;gap:1.4cqw}
.app-flow__cellbar{height:2.6cqw;border-radius:1.3cqw;background:var(--af-accent)}
.app-flow__cellbar--soft{background:var(--af-accent-soft)}
.app-flow__cellbar--faint{background:rgba(120,60,200,.18)}
.app-flow__cellbar.w80{width:80%}.app-flow__cellbar.w60{width:60%}.app-flow__cellbar.w100{width:100%}
.app-flow__row.is-selected{background:rgba(111,0,255,.07);box-shadow:inset 3px 0 0 var(--af-accent);transition:background .25s ease}
.app-flow__screen--detail.is-active{opacity:1;animation:af-screen-in .45s ease both}
.app-flow__detail-head{display:flex;align-items:center;gap:2.4cqw;margin-bottom:3cqw}
.app-flow__back{width:6cqw;height:6cqw;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.4);color:#fff;font-size:3cqw}
.app-flow__detail-head h3{margin:0}
.app-flow__detail-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.6cqw;grid-auto-rows:min-content}
.app-flow__panel{background:var(--af-card);border-radius:2.6cqw;padding:3cqw;box-shadow:0 6cqw 18cqw rgba(40,20,70,.14);display:flex;flex-direction:column;gap:2cqw;opacity:0;transform:translateY(2cqw)}
.app-flow__panel.is-in{opacity:1;transform:translateY(0);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.app-flow__panel-label{font-size:2.6cqw;color:var(--af-muted);font-weight:600}
.app-flow__panel--pie{grid-row:span 2;align-items:center}
.app-flow__panel--line{grid-column:1/4}
.app-flow__pie{width:22cqw;height:22cqw;border-radius:50%;margin:auto;background:conic-gradient(var(--af-accent) 0turn,var(--af-accent) .52turn,var(--af-accent-soft) .52turn,var(--af-accent-soft) .8turn,rgba(120,60,200,.18) .8turn,rgba(120,60,200,.18) 1turn);-webkit-mask:radial-gradient(circle,transparent 38%,#000 39%);mask:radial-gradient(circle,transparent 38%,#000 39%);clip-path:inset(0);animation:af-pie-sweep 1s ease both}
@keyframes af-pie-sweep{from{clip-path:polygon(50% 50%,50% 0%,50% 0%)}25%{clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 0%)}50%{clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%)}75%{clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%)}to{clip-path:inset(0)}}
.app-flow__stat{font-size:7cqw;font-weight:800;color:var(--af-ink);line-height:1}
.app-flow__stat-unit{font-size:3.4cqw;font-weight:700;color:var(--af-muted);margin-left:.6cqw}
.app-flow__panel--stat{justify-content:center}
.app-flow__linegraph{width:100%;height:22cqw;overflow:visible}
.af-line{stroke:var(--af-accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.app-flow__panel--line.is-in .af-line{animation:af-line-draw 1.1s ease .15s forwards}
.af-area{opacity:0}
.app-flow__panel--line.is-in .af-area{animation:af-fade .6s ease .9s forwards}
@keyframes af-line-draw{to{stroke-dashoffset:0}}
@keyframes af-fade{to{opacity:1}}
.app-flow__cursor{position:absolute;z-index:5;width:5cqw;height:5cqw;color:var(--af-ink);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));opacity:0;transition:transform .9s cubic-bezier(.5,.05,.3,1)}
.app-flow__cursor.is-on{opacity:1}
@keyframes af-rise{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes af-screen-in{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .app-flow__win{animation:none;opacity:1;transform:none}
  .app-flow__screen--dash,.app-flow__screen--insights{display:none}
  .app-flow__screen--detail{opacity:1}
  .app-flow__panel{opacity:1;transform:none}
  .app-flow__pie{animation:none;clip-path:inset(0)}
  .af-line{stroke-dashoffset:0}.af-area{opacity:1}
  .app-flow__cursor{display:none}
}

/* Pitch-panel host: fill the right-side panel large. The parent
   .pitch-card-rive is absolutely positioned (right-aligned, full height); give
   the anim a definite, generous width that scales down on narrow viewports. */
.pitch-card-anim{width:600px;max-width:46vw;display:flex;align-items:center;justify-content:center}
.pitch-card-anim .phone-call,.pitch-card-anim .app-flow{max-width:none;width:100%}

/* ── Product demo (single-mode agent-module) ── */
.section-product-demo{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background-color:var(--primary--deep-purple);
  background-image:
    radial-gradient(circle at 0% 70%, var(--primary--electric-purple), transparent 29%),
    radial-gradient(circle farthest-side at 100% 0%, rgba(255,255,255,.75), rgba(210,176,255,.8) 15%, transparent 47%);
  padding:var(--sp-64) 0 var(--sp-80)}
.section-product-demo .product-demo-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.product-demo-fade-top{position:absolute;inset:0 0 auto 0;height:128px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, var(--primary--deep-purple), transparent)}
.product-demo-fade-bottom{position:absolute;inset:auto 0 0 0;height:160px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, #370186)}
/* Orange variant (outbound) — matches the reference .section_auto.orange wash. */
.section-product-demo.theme-orange{
  background-color:var(--primary--primary-orange,#ff7355);
  background-image:
    linear-gradient(#0000 42%, var(--primary--primary-orange,#ff7355) 75%),
    linear-gradient(135deg, #ffb592, #0000);
}
.section-product-demo.theme-orange .product-demo-fade-top{
  background:linear-gradient(to bottom, var(--primary--primary-orange,#ff7355), transparent)}
.section-product-demo.theme-orange .product-demo-fade-bottom{
  background:linear-gradient(to bottom, transparent, #e76c51)}
.product-demo-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:680px}
.product-demo-title{font-family:var(--font-heading);font-weight:400;color:#fff;margin:0 0 var(--sp-32);
  font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.2}
.product-demo-agent{width:100%}
.product-demo-connect{margin-top:var(--sp-24);color:rgba(255,255,255,.6);font-size:.875rem}
.section-product-demo .product-demo-agent .agent-title,
.section-product-demo .product-demo-agent .agent-text{color:#fff}
.product-demo-connect a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ── Hero Dark (with background image) ── */
.hero.hero-dark{
  background-color:var(--bg-dark);
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  color:#fff;
}
.hero.hero-dark h1{color:#fff}
.hero.hero-dark .subhead{color:rgba(255,255,255,.75)}
.hero.hero-dark .visual-card{background:transparent;box-shadow:none;border:none}

/* Demo hero: a tall, dark full-bleed photo with centered white text + a white
   pill CTA (reference: /demo). Scrim keeps the text legible. */
.hero.hero-demo-photo{
  text-align:center;color:#fff;position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  min-height:900px;display:flex;align-items:center;
  padding:var(--section-pad-xl) 0;
}
/* Scrim matches the reference `.bg-degree.midle`: flat 25% black tint + a strong
   bottom-up gradient (75% black at the base → transparent at the top). */
.hero.hero-demo-photo::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.75),rgba(255,255,255,0))}
.hero.hero-demo-photo .container{position:relative;z-index:1}
.hero.hero-demo-photo h1{color:#fff;margin-bottom:var(--sp-20)}
.hero.hero-demo-photo .subhead{color:rgba(255,255,255,.9);margin:0 auto var(--sp-32);max-width:46ch}
/* Careers: same scrim as the base (`.bg-degree.midle`) but shorter —
   the base layout uses `_82vh` (~738px) here vs the demo hero's full height. */
.hero.hero-careers{min-height:738px}

/* ── Hero intro overlay (glassmorphic card around live text) ── */
.hero-intro-overlay{
  position:relative;max-width:920px;margin:0 auto;
  padding:var(--sp-32) var(--sp-32);
  border-radius:24px;
  background:transparent;
  border:none;
  box-shadow:none;
}
.hero-intro-frame{display:none}
.hero-intro-overlay h1,
.hero-intro-overlay .subhead,
.hero-intro-overlay .btn-group{
  position:relative;z-index:1;
}

/* ── Hero demo call button (WebRTC) ── */
.hero-demo-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-12);
  margin:var(--sp-32) 0;
}

/* Play button (idle state) */
.hero-demo-play{
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.5);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  position:relative;padding:0;
}
.hero-demo-play:hover{
  transform:scale(1.08);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 0 24px rgba(255,255,255,.15);
}
.hero-demo-play:active{transform:scale(.96)}
.hero-demo-play.is-connecting{
  animation:hero-demo-pulse 1.2s ease-in-out infinite;
  pointer-events:none;opacity:.8;
}

/* Active call controls (mic mute + end call) */
.hero-demo-controls{
  display:none;flex-direction:row;align-items:center;gap:var(--sp-16);
}
.hero-demo-wrap.is-active .hero-demo-play{display:none}
.hero-demo-wrap.is-active .hero-demo-controls{display:flex}
.hero-demo-ctrl{
  width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.hero-demo-ctrl:active{transform:scale(.92)}

/* Mic button */
.hero-demo-mute{
  background:rgba(255,255,255,.15);
}
.hero-demo-mute:hover{background:rgba(255,255,255,.25)}
.hero-demo-mute .ph-microphone-slash{display:none}
.hero-demo-mute.is-muted .ph-microphone{display:none}
.hero-demo-mute.is-muted .ph-microphone-slash{display:inline}
.hero-demo-mute.is-muted{background:rgba(255,180,50,.35)}

/* End call button */
.hero-demo-end{
  background:rgba(220,60,60,.8);
}
.hero-demo-end:hover{background:rgba(220,60,60,1);box-shadow:0 0 16px rgba(220,60,60,.4)}

@keyframes hero-demo-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 0 0 14px rgba(255,255,255,0)}
}
.hero-demo-label{
  font-size:.8125rem;color:rgba(255,255,255,.7);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
}
.hero-demo-status{
  font-size:.75rem;color:rgba(255,255,255,.6);
  min-height:1.2em;
  font-family:var(--font-body);
}
.hero-demo-status:empty{display:none}
@media(prefers-reduced-motion:reduce){
  .hero-demo-play.is-connecting{animation:none}
}
@media(max-width:768px){
  .hero-demo-play{width:56px;height:56px;font-size:24px}
  .hero-demo-ctrl{width:48px;height:48px;font-size:20px}
  .hero-demo-label{font-size:.75rem}
}

/* ── Hero visual below intro overlay (optional) ── */
.hero-visual{max-width:900px;margin:var(--sp-48) auto 0}
.hero-visual img,.hero-visual video{width:100%;height:auto;display:block}

/* ── Hero centered — full-width visual (Figma hero-centered) ── */
.hero-visual-wide{margin:var(--sp-80) auto 0;border-radius:12px;overflow:hidden;height:520px}
.hero-visual-wide img,.hero-visual-wide svg{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero-visual-wide canvas.rive-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-visual-wide{position:relative}

/* ── Hero split — text left, visual right (Figma hero-split-text-left) ── */
.hero.hero-split{background:var(--bg-cream);padding:120px 0;text-align:left}
.hero-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:132px;align-items:center}
.hero-split-text .subhead{margin-left:0;margin-right:0}
.hero-split-visual{
  aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--gradient-midnight);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-64);
}
.hero-split-visual img,.hero-split-visual svg{max-width:100%;max-height:100%;border-radius:12px}

/* ── Hero dark with graphic (Figma hero-dark-left-with-graphic) ── */
.hero.hero-dark-graphic{
  background-size:cover;background-position:right center;background-repeat:no-repeat;
  color:#fff;min-height:680px;display:flex;align-items:center;
  padding:var(--section-pad-xl) 0;
}
.hero.hero-dark-graphic .container{width:100%}
.hero-dark-graphic-inner{position:relative}
.hero-dark-graphic-text{max-width:720px;margin:0 auto;text-align:center}
.hero-dark-graphic-text .btn-group{justify-content:center}
.hero-dark-graphic-text h1{color:#fff;font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.1;letter-spacing:-.02em}
.hero-dark-graphic-text .subhead{color:rgba(255,255,255,.75)}
.hero-dark-graphic-text .btn-primary{background:var(--primary--off-white);color:var(--primary--black);border-color:transparent}
.hero-dark-graphic-text .btn-primary:hover{background:var(--primary--white)}
.hero-dark-graphic-text .btn-ghost{
  background:rgba(255,253,241,.08);color:var(--primary--off-white);border:1px solid transparent;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-dark-graphic-text .btn-ghost:hover{background:rgba(247,246,245,.16)}
.hero-dots{display:none}

/* ── Sections ── */
/* Override a leftover base rule (base.css `.section{margin-bottom:100px}`)
   that exposed the cream body background as a strip between sections. The
   reference uses padding-only sections that butt together — no inter-section margin. */
.section{padding:var(--section-pad-md) 0;margin-bottom:0}
.section-alt{background:var(--bg-white)}
.section-cream{background:var(--bg-cream)}
.section-dark{background:var(--bg-dark);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p,.section-dark .subhead{color:rgba(255,255,255,.6)}
.section-dark .section-label .tag{color:var(--accent-seaglass)}

/* ── Split Layout ── */
.section-split{padding:var(--section-pad-md) 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-80);align-items:center}
.split-center{align-items:center}
.split-top{align-items:start}
.split > div > .section-label{margin-bottom:var(--sp-32)}
.split > div > h2{font-size:2.5rem;line-height:1.2;letter-spacing:-0.012em;margin-bottom:var(--sp-20)}
.split > div > p{margin-bottom:var(--sp-12)}
.split > div > p:last-of-type{margin-bottom:0}
.split > div > .btn-group{margin-top:var(--sp-32)}

/* ── Cards ── */
.card-grid{display:grid;gap:var(--sp-20);margin-top:var(--sp-48)}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:var(--sp-32);
  transition:box-shadow .3s,transform .3s;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3{margin-bottom:var(--sp-8)}
.card p{font-size:.925rem;margin-bottom:0}
.card-link{
  display:inline-flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-16);
  font-size:.875rem;font-weight:600;
  color:var(--text);text-decoration:none;transition:color .2s;
}
.card-link:hover{color:var(--text-secondary)}
.card-link::after{content:'\2192'}

.section-dark .card{background:var(--bg-dark-card);border-color:rgba(255,255,255,.08)}
.section-dark .card h3{color:#fff}
.section-dark .card p{color:rgba(255,255,255,.55)}

/* ── Card Icon Box ── */
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-16);border-radius:var(--radius);
  background:var(--icon-bg,var(--icon-bg-default));
  margin-bottom:var(--sp-24);
}
.card-icon i{font-size:32px;color:var(--icon-color,var(--text))}
.section-dark .card-icon{background:rgba(255,255,255,.06)}
.section-dark .card-icon i{color:var(--primary--off-white)}

/* ── Card Icon Logo (partner logo in card-icon box) ── */
.card-icon-logo{background:transparent}
.card-icon-logo img{max-height:32px;width:auto;display:block}
.section-dark .card-icon-logo{background:transparent}

/* ── Hero Partner Logo ── */
.hero-partner-logo{margin-top:var(--sp-24);margin-bottom:var(--sp-24);display:flex;align-items:center;justify-content:center;gap:var(--sp-16)}
.hero-partner-logo img{height:40px;width:auto}
.hero-partner-plus{font-size:24px;font-weight:300;color:var(--text-secondary, #6b6b6b);line-height:1}

/* ── Card-Grid Flat Style (Figma default) ── */
.card-grid-header{max-width:680px}
.card-grid.style-flat{gap:var(--sp-80) var(--sp-16);margin-top:var(--sp-120)}
.card-grid.style-flat .card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:transparent;border:none;box-shadow:none;
  padding:0;border-radius:0;
}
.card-grid.style-flat .card:hover{box-shadow:none;transform:none}
.card-grid.style-flat .card .card-icon{margin-bottom:var(--sp-24)}
.card-grid.style-flat .card h3{font-size:1.25rem;font-weight:500;line-height:1.6;margin-bottom:var(--sp-16)}
.card-grid.style-flat .card p{font-size:1rem;font-weight:300;line-height:1.5;color:rgba(35,31,35,.64);margin-bottom:0}
.section-dark .card-grid.style-flat .card p{color:rgba(255,255,255,.55)}

/* ── Visual Card (container for Figma-exported visuals) ── */
.visual-card{
  border-radius:var(--radius);padding:var(--sp-48) var(--sp-32);
  background:var(--gradient-seaglass);
  min-height:280px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.split .visual-card{aspect-ratio:1;padding:0}
.visual-card img,.visual-card svg{max-width:100%;height:auto}
.split .visual-card img{width:100%;height:100%;object-fit:cover}
.visual-card p{display:none}
.visual-card .asset-missing{display:none}
.visual-card.gradient-v1{background:var(--gradient-periwinkle)}
.visual-card.gradient-v2{background:var(--gradient-cream)}

/* ── Stats / Metrics ── */
.metrics-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-16);margin-top:var(--sp-48)}
.metric,.metric-card{flex:0 1 calc(25% - var(--sp-16) * 3 / 4)}
.metric,.metric-card{text-align:center;background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--sp-32) var(--sp-24);transition:box-shadow .3s,transform .3s}
.metric:hover,.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.metric .value,.metric-value{display:block;font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:var(--sp-8)}
.metric .label,.metric-label{font-family:var(--font-label);font-size:.875rem;color:var(--text-accessible);line-height:1.5}
.metric-heading{font-family:var(--font-label);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-accessible);margin-bottom:var(--sp-12);font-weight:500}

.section-dark .metric,.section-dark .metric-card{background:var(--bg-dark-card);border-color:rgba(255,255,255,.08)}
.section-dark .metric .value,.section-dark .metric-value{color:#fff}
.section-dark .metric .label,.section-dark .metric-label{color:rgba(255,255,255,.5)}
.section-dark .metric-heading{color:rgba(255,255,255,.4)}

/* ── Feature Grid ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-24)}
.feature-card{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:var(--sp-32);
  transition:box-shadow .3s,transform .3s;
}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.feature-card h3{margin-bottom:var(--sp-12)}
.feature-card p{font-size:.925rem;margin-bottom:0}
.section-alt .feature-card{background:var(--bg-white)}
.section-dark .feature-card{background:var(--bg-dark-card);border-color:rgba(255,255,255,.08)}
.section-dark .feature-card h3{color:#fff}
.section-dark .feature-card p{color:rgba(255,255,255,.55)}

/* ── Feature List (Figma: split-text-*-with-bullets) ── */
.feature-list{list-style:none;margin-top:var(--sp-48);display:flex;flex-direction:column;gap:var(--sp-8)}
.feature-list li{
  display:flex;align-items:flex-start;gap:var(--sp-16);
  font-size:1rem;font-weight:500;line-height:1.5;
  color:var(--text);
}
.feature-list li::before{
  content:'';flex-shrink:0;
  width:10px;height:10px;border-radius:2px;background:var(--accent-bluejay);
  margin-top:7px;
}
.feature-list .feature-def{display:flex;flex-direction:column;gap:2px}
.feature-list .feature-def strong{font-weight:700}
.feature-list .feature-def>span{font-weight:400}
.section-dark .feature-list li{color:#fff}
.section-dark .feature-list li::before{background:var(--accent-seaglass)}

/* ── Badge Row Section ── */
.section-badge{padding:var(--section-pad-md) 0}

/* ── Compliance / Badge Cards (badge-row block) ── */
.badge-row{display:flex;gap:var(--sp-16);justify-content:center;position:relative;overflow:visible}
.badge-card{
  width:200px;height:186px;border-radius:var(--radius-lg);padding:var(--sp-32);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  overflow:hidden;flex-shrink:0;
  background:var(--bg-white);border:1px solid rgba(35,31,35,.08);
}
.section-dark .badge-card{background:var(--bg-pearl);border-color:rgba(247,246,245,.08)}
.badge-card-img{display:flex;align-items:center;justify-content:center;flex:1}
.badge-card-img img{max-height:93px;max-width:136px;width:auto;height:auto}
.badge-card-img .asset-missing{font-family:var(--font-label);font-size:.625rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.badge-card-label{
  font-family:var(--font-label);font-size:12px;font-weight:400;line-height:16px;
  letter-spacing:0.75px;text-transform:uppercase;color:var(--depth-dark);white-space:nowrap;
}

/* ── Edge-fade overlays on badge row ── */
.badge-row::before,.badge-row::after{
  content:'';position:absolute;top:0;bottom:0;width:216px;z-index:1;pointer-events:none;
}
.badge-row::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.badge-row::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.section-dark .badge-row::before{background:linear-gradient(to right,var(--bg-dark),transparent)}
.section-dark .badge-row::after{background:linear-gradient(to left,var(--bg-dark),transparent)}

/* ── Inline badge pills (split blocks) ── */
.badge-row-inline{position:static;overflow:visible;justify-content:flex-start;flex-wrap:wrap;margin-top:var(--sp-20)}
.badge-row-inline::before,.badge-row-inline::after{display:none}
.badge-row-inline span{
  background:var(--bg-white);padding:var(--sp-12) var(--sp-20);border-radius:var(--radius-tag);
  border:1px solid var(--border);font-family:var(--font-label);font-size:.8rem;font-weight:500;color:var(--text);
}
.section-dark .badge-row-inline span{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.85);
}

/* ── FAQ ── */
.section-faq > .container > h2{text-align:center}
.section-faq > .container > .section-label{justify-content:center}
.faq-list{margin-top:var(--sp-48);max-width:760px;margin-left:auto;margin-right:auto}
.faq-item{border-bottom:1px solid var(--border);padding:var(--sp-24) 0}
.faq-item:first-child{border-top:1px solid var(--border)}
details.faq-item{cursor:pointer}
details.faq-item summary{font-size:1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:"+";font-size:1.25rem;font-weight:300;color:var(--text-muted);transition:transform .2s}
details[open].faq-item summary::after{content:"\2212"}
details.faq-item p{margin-top:var(--sp-12);font-size:.925rem;color:var(--text-secondary)}
details.faq-item .faq-answer{margin-top:var(--sp-12);font-size:.925rem;color:var(--text-secondary);line-height:1.7}
details.faq-item summary h3{font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:0;margin:0}

/* FAQ variant: split — intro + CTA left, visible answers right */
.faq-split-grid{display:grid;grid-template-columns:2fr 3fr;gap:var(--sp-80);align-items:start}
.faq-split-intro{position:sticky;top:120px}
.faq-split-subhead{margin-top:var(--sp-16);font-weight:300;line-height:1.6;color:var(--text-secondary)}
.faq-split-intro .btn-group{margin-top:var(--sp-32)}
.faq-qa{border-bottom:1px solid var(--border);padding:var(--sp-24) 0}
.faq-qa:first-child{border-top:none;padding-top:0}
.faq-qa h3{font-size:1.05rem;font-weight:600;line-height:1.4;letter-spacing:0}
.faq-qa p{margin-top:var(--sp-12);font-size:.925rem;color:var(--text-secondary);line-height:1.7}
@media (max-width:900px){
  .faq-split-grid{grid-template-columns:1fr;gap:var(--sp-40)}
  .faq-split-intro{position:static}
}

/* FAQ variant: featured — first Q&A as a visible definition callout */
.faq-featured .faq-featured-card{
  max-width:760px;margin:var(--sp-48) auto 0;
  background:var(--bg-white);border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);padding:var(--sp-32) var(--sp-40);
}
.faq-featured .faq-featured-card h3{font-size:1.15rem;font-weight:600;line-height:1.4;letter-spacing:0}
.faq-featured .faq-featured-card p{margin-top:var(--sp-12);font-size:.95rem;color:var(--text-secondary);line-height:1.7}
.faq-featured .faq-list{margin-top:var(--sp-24)}
.faq-featured .faq-item:first-child{border-top:none}

/* ── Testimonial ── */
.testimonial{max-width:720px;margin:0 auto;text-align:center}
.testimonial-visual{margin-bottom:var(--sp-32)}
.testimonial-visual img{display:block;max-width:300px;margin:0 auto}
.testimonial-visual .placeholder{
  width:80px;height:80px;margin:0 auto;border-radius:50%;
  background:var(--bg-cream);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--text-muted);
}
.testimonial-quote{
  font-family:var(--font-heading);font-size:clamp(1.25rem,2.5vw,1.5rem);
  font-weight:500;line-height:1.6;letter-spacing:-.01em;
  color:var(--text);font-style:normal;
  border:none;padding:0;margin:0 0 var(--sp-24);
  position:relative;
}
.testimonial-quote::before{
  content:'\201C';display:block;font-size:3rem;line-height:1;
  color:var(--accent-bluejay);margin-bottom:var(--sp-8);
}
.testimonial-attribution{
  font-size:.925rem;color:var(--text-muted);font-weight:500;
}

/* ── Card-Grid Style Variants ── */
.card-grid.style-values{gap:var(--sp-16)}
.card-grid.style-values .card{
  text-align:left;border:1px solid var(--border-light);background:#f1efef;
  border-radius:var(--radius-lg);box-shadow:none;
  padding:var(--sp-32);display:flex;flex-direction:column;align-items:flex-start;
}
.card-grid.style-values .card:hover{box-shadow:none;transform:none}
.card-grid.style-values .card .card-icon{
  padding:var(--sp-8);border-radius:var(--radius-sm);margin-bottom:var(--sp-24);
}
.card-grid.style-values .card .card-icon i{font-size:16px}
.card-grid.style-values .card h3{font-size:1.5rem;font-weight:400;margin-bottom:var(--sp-16)}
.card-grid.style-values .card p{font-size:1.25rem;font-weight:500;line-height:1.5}

/* ── Tutorials Style ── */
.card-grid.style-tutorials{gap:var(--sp-32)}
.tutorial-card{display:flex;flex-direction:column;text-decoration:none;color:var(--text);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-white);transition:box-shadow .25s,transform .2s}
.tutorial-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-3px)}
.tutorial-thumb{position:relative;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--bg-depth,#eae9e8)}
.tutorial-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);transition:background .2s}
.tutorial-card:hover .tutorial-play{background:rgba(0,0,0,.4)}
.tutorial-play i{font-size:3.5rem;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.tutorial-tags{display:flex;flex-wrap:wrap;gap:var(--sp-8);padding:var(--sp-16) var(--sp-20) 0}
.tutorial-tag{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:var(--radius-sm);background:var(--bg-depth,#eae9e8);color:var(--text-secondary)}
.tutorial-card h3{padding:var(--sp-8) var(--sp-20) 0;font-size:1.1rem;font-weight:600}
.tutorial-card p{padding:0 var(--sp-20) var(--sp-20);font-size:.9rem;color:var(--text-secondary);line-height:1.5}

.card-grid.style-proofpoints .card{
  text-align:center;background:var(--bg-white);
  border-radius:var(--radius-lg);
  padding:var(--sp-48) var(--sp-24);
}
.card-grid.style-proofpoints .card h3{
  font-family:var(--font-heading);font-size:clamp(2rem,4vw,2.5rem);
  font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:var(--sp-8);
}
.card-grid.style-proofpoints .card p{font-size:.925rem}

/* ── CTA Section ── */
.cta-section{text-align:center;padding:200px 0 160px;background:var(--bg-white);color:var(--text);position:relative;overflow:hidden;margin:0}
.cta-gradient-blob{position:absolute;top:65%;left:50%;width:90%;max-width:1308px;height:590px;transform:translate(-50%,-30%);border-radius:50%;background:linear-gradient(to top,var(--primary--deep-purple) 0%,var(--primary--electric-purple) 48%,var(--primary--light-purple) 76%,var(--primary--off-white) 100%);filter:blur(40px);opacity:.7;pointer-events:none;z-index:0}
.cta-fade-overlay{position:absolute;top:0;left:0;width:100%;height:252px;background:linear-gradient(to bottom,var(--bg-white),transparent);pointer-events:none;z-index:1}
.cta-section .container{position:relative;z-index:2}
.cta-section h2{color:var(--text);margin-bottom:var(--sp-16)}
.cta-section .subhead{margin-left:auto;margin-right:auto;color:var(--text-secondary);margin-bottom:var(--sp-32)}
.cta-section .btn-primary{background:var(--accent);color:var(--primary--off-white)}
.cta-section .btn-primary:hover{background:var(--accent-hover)}
.cta-section .btn-primary:hover{background:rgba(35,31,35,.9);box-shadow:0 6px 20px rgba(35,31,35,.2)}
.cta-section .btn-ghost{border-color:var(--border);color:var(--text)}

/* ── Contact Form ── */
.contact-form-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--sp-32)}
.contact-form{display:flex;flex-direction:column;gap:var(--sp-20)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16)}
.form-field{display:flex;flex-direction:column;gap:var(--sp-4)}
.form-field label{font-family:var(--font-label);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.form-field .req{color:#c0392b}
.form-field input,.form-field textarea{
  font-family:var(--font);font-size:.9375rem;font-weight:400;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);
  padding:var(--sp-12) var(--sp-16);transition:border-color .2s,box-shadow .2s;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--accent-seaglass);box-shadow:0 0 0 3px rgba(114,193,197,.15)}
.form-field textarea{resize:vertical;min-height:100px}
.contact-form .btn-block{width:100%;text-align:center;margin-top:var(--sp-8)}
.contact-form-error{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-16);border-radius:var(--radius-input);background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;font-size:.875rem;font-weight:500}
.contact-form-error[hidden]{display:none}
.contact-form-error i{font-size:1.125rem;flex-shrink:0}
.contact-form-success[hidden]{display:none}
.contact-form-success{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-16);padding:var(--sp-64) var(--sp-32);min-height:400px}
.contact-form-success i{font-size:3rem;color:var(--accent-seaglass)}
.contact-form-success h3{font-size:1.5rem;font-weight:500}
.contact-form-success p{font-size:1rem;color:var(--text-secondary);max-width:360px}
@media(max-width:768px){
  .form-row{grid-template-columns:1fr}
}

/* ── Showcase Chat ── */
.showcase-chat-container{border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-white);display:flex;flex-direction:column;min-height:520px}
.showcase-chat-header{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-16) var(--sp-20);font-weight:600;font-size:.95rem;color:var(--text);border-bottom:1px solid var(--border-light);background:var(--bg-cream)}
.showcase-chat-header i{font-size:1.25rem;color:var(--accent-seaglass)}
.showcase-chat-body{flex:1;min-height:460px;width:100%;border:none}
.showcase-chat-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-16);color:var(--text-secondary);background:linear-gradient(135deg,var(--bg-cream) 0%,var(--bg-white) 100%)}
.showcase-chat-placeholder i{font-size:3.5rem;color:var(--accent-seaglass);opacity:.6}
.showcase-chat-placeholder p{font-size:1.1rem;font-weight:500;margin:0}

/* Showcase voice demo widget */
.showcase-demo-header{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-16) var(--sp-20);font-weight:600;font-size:.95rem;color:var(--text);border-bottom:1px solid var(--border-light);background:var(--bg-cream)}
.showcase-demo-header i{font-size:1.25rem;color:var(--accent-seaglass)}
.showcase-demo-body{
  flex:1;min-height:460px;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-12);
  background:linear-gradient(135deg,var(--bg-cream) 0%,var(--bg-white) 100%);
}
.showcase-demo-idle{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16)}
.showcase-demo-active{display:none;flex-direction:column;align-items:center;gap:var(--sp-16)}
.showcase-demo-body.is-active .showcase-demo-idle{display:none}
.showcase-demo-body.is-active .showcase-demo-active{display:flex}
.showcase-demo-play{
  width:80px;height:80px;border-radius:50%;
  background:rgba(0,0,0,.06);
  border:2px solid var(--border-light);
  color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  padding:0;
}
.showcase-demo-play:hover{
  transform:scale(1.08);
  background:rgba(0,0,0,.1);
  border-color:var(--accent-seaglass);
  box-shadow:0 0 20px rgba(0,0,0,.08);
}
.showcase-demo-play:active{transform:scale(.96)}
.showcase-demo-play.is-connecting{
  animation:showcase-demo-pulse 1.2s ease-in-out infinite;
  pointer-events:none;opacity:.6;
}
@keyframes showcase-demo-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.12)}
  50%{box-shadow:0 0 0 14px rgba(0,0,0,0)}
}
.showcase-demo-controls{display:flex;align-items:center;gap:var(--sp-16)}
.showcase-demo-ctrl{
  width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  transition:transform .15s ease,background .15s ease;
}
.showcase-demo-ctrl:active{transform:scale(.92)}
.showcase-demo-mute{background:rgba(0,0,0,.5)}
.showcase-demo-mute:hover{background:rgba(0,0,0,.65)}
.showcase-demo-mute .ph-microphone-slash{display:none}
.showcase-demo-mute.is-muted .ph-microphone{display:none}
.showcase-demo-mute.is-muted .ph-microphone-slash{display:inline}
.showcase-demo-mute.is-muted{background:rgba(200,140,30,.8)}
.showcase-demo-end{background:rgba(220,60,60,.8)}
.showcase-demo-end:hover{background:rgba(220,60,60,1)}
.showcase-demo-label{
  font-size:.8125rem;color:var(--text-secondary);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
}
.showcase-demo-status{
  font-size:.75rem;color:var(--text-muted);
  min-height:1.2em;
  font-family:var(--font-body);
}
.showcase-demo-status:empty{display:none}
.showcase-demo-hero{
  background:none;min-height:auto;
  padding:var(--sp-32) 0 var(--sp-16);
}
.showcase-info-block{max-width:680px;margin:0 auto;text-align:center}
@media(prefers-reduced-motion:reduce){
  .showcase-demo-play.is-connecting{animation:none}
}
@media(max-width:768px){
  .showcase-demo-play{width:56px;height:56px;font-size:24px}
  .showcase-demo-ctrl{width:48px;height:48px;font-size:20px}
}

/* Showcase action buttons */
.showcase-actions{display:flex;flex-direction:column;gap:var(--sp-24);margin-top:var(--sp-24)}
.showcase-action-row{display:flex;align-items:flex-start;gap:var(--sp-16)}
.showcase-action-btn{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  padding:var(--sp-12) var(--sp-20);
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--bg-white);color:var(--text);
  font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap;flex-shrink:0;
  min-width:200px;
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.showcase-action-btn i{font-size:1.15rem;color:var(--accent-seaglass)}
.showcase-action-btn:hover{border-color:var(--accent-seaglass);box-shadow:0 2px 8px rgba(114,193,197,.18);transform:translateY(-1px)}
.showcase-action-desc{
  font-size:.85rem;line-height:1.5;color:var(--text-secondary);
  margin:0;padding-top:var(--sp-4);
}
@media(max-width:768px){
  .showcase-action-row{flex-direction:column;gap:var(--sp-8)}
  .showcase-action-btn{align-self:flex-start}
}

/* ── Footer ── */
/* Site footer — mirrors the base layout's `footer.footer` with a cream background,
   a tagline+logo block on the left, four flat link columns, and two
   right-side CTA cards. The dark navy `footer` we had before is replaced
   wholesale here; any legacy `.footer-art` / `.footer-card` markup is
   no longer emitted. */
.site-footer{background:var(--bg-cream,#f8f4ea);color:var(--text,#13161a);padding:var(--sp-96) 0 var(--sp-40);border-top:1px solid rgba(26,19,37,.06)}
.site-footer .footer-top{display:grid;grid-template-columns:1.1fr 2.4fr;gap:var(--sp-64);align-items:start;margin-bottom:var(--sp-64)}
.site-footer .footer-brandwrap{display:flex;flex-direction:column;gap:var(--sp-24)}
.site-footer .footer-brand img{height:28px;width:auto;display:block}
.site-footer .footer-tagline{color:var(--text-secondary,#5a5a62);font-size:.9375rem;line-height:1.5;max-width:300px}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:var(--sp-32)}
.site-footer .column-footer{display:flex;flex-direction:column;gap:var(--sp-16)}
.site-footer .subtle-f{font-size:.75rem;font-weight:600;color:var(--text,#13161a);letter-spacing:.02em;text-transform:uppercase}
.site-footer .links-wrapp{display:flex;flex-direction:column;gap:var(--sp-8)}
.site-footer .link-footer{color:var(--text-secondary,#5a5a62);font-size:.875rem;text-decoration:none;transition:color .15s ease}
.site-footer .link-footer:hover{color:var(--text,#13161a)}
/* Right-column CTA cards (the base layout's `.column-last > .cta-f`). */
.site-footer .column-last{display:flex;flex-direction:column;gap:var(--sp-16)}
.site-footer .cta-f{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-20);border-radius:var(--radius-16,16px);background:rgba(255,255,255,.72);border:1px solid rgba(26,19,37,.08)}
.site-footer .cta-f .div-right{display:flex;align-items:center;gap:var(--sp-12)}
.site-footer .cta-f .icon-40{width:40px;height:40px;border-radius:999px;background:var(--primary-100,#efe7ff);color:var(--primary-600,#5600c7);display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;font-size:1.125rem}
.site-footer .cta-f-copy{font-size:.875rem;line-height:1.35;color:var(--text,#13161a);font-weight:500}
.site-footer .cta-f .btn-pill{align-self:flex-start;border-radius:999px;padding:10px 18px;font-size:.8125rem;font-weight:600}
.site-footer .cta-f .btn-secondary{background:transparent;color:var(--text,#13161a);border:1px solid rgba(26,19,37,.2)}
/* Bottom bar: copyright | legal | social */
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16);flex-wrap:wrap;padding-top:var(--sp-24);border-top:1px solid rgba(26,19,37,.08)}
.site-footer .footer-copy{color:var(--text-secondary,#5a5a62);font-size:.8125rem}
.site-footer .footer-legal{display:flex;gap:var(--sp-24);align-items:center}
.site-footer .footer-legal .link-footer{font-size:.8125rem}
.site-footer .footer-social{display:flex;gap:var(--sp-16);align-items:center}
.site-footer .footer-social a{color:var(--text-secondary,#5a5a62);display:inline-flex;transition:color .15s ease}
.site-footer .footer-social a:hover{color:var(--text,#13161a)}
.site-footer .footer-social svg{width:20px;height:20px;fill:currentColor}
@media (max-width:1100px){
  .site-footer .footer-top{grid-template-columns:1fr}
  .site-footer .footer-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer .column-last{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .site-footer .cta-f{flex:1 1 260px}
}
@media (max-width:640px){
  .site-footer{padding:var(--sp-64) 0 var(--sp-32)}
  .site-footer .footer-grid{grid-template-columns:1fr}
  .site-footer .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ── Proof / Logo Strip ── */
.proof-strip{display:flex;gap:var(--sp-48);flex-wrap:wrap;justify-content:center;align-items:center;padding:var(--sp-24) 0}
.proof-strip span{font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--text-muted)}

/* ── Logo Marquee ── */
.logo-marquee{overflow:hidden;position:relative;padding:var(--sp-24) 0;margin-top:var(--sp-48)}
.logo-marquee::before,.logo-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none;
}
.logo-marquee::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.logo-marquee::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.marquee-track{
  display:flex;align-items:center;gap:var(--sp-48);
  width:max-content;
  animation:marquee-scroll 30s linear infinite;
}
.marquee-reverse{animation-name:marquee-scroll-reverse}
.logo-marquee-2row{gap:var(--sp-16);display:flex;flex-direction:column}
.marquee-track img{height:32px;width:auto;opacity:.7;transition:opacity .3s}
.marquee-track img:hover{opacity:1}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-scroll-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}

/* ── Case Study Cards ── */
.case-card{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:var(--sp-32);
  transition:box-shadow .3s,transform .3s;
}
.case-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.case-card h3{font-size:1rem;margin-bottom:var(--sp-12);line-height:1.5}
.case-card a{color:var(--text);font-size:.875rem;font-weight:600}

/* ── Content links ── */
.section p a,.section li a,.section h3 a,.section h4 a,.section .copy-block a,.card p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.section p a:hover,.section li a:hover,.section h3 a:hover,.section h4 a:hover,.section .copy-block a:hover,.card p a:hover{color:var(--text);text-decoration-color:var(--text)}

/* ── Spacing helpers ── */
.mb-8{margin-bottom:var(--sp-8)}
.mb-12{margin-bottom:var(--sp-12)}
.mb-16{margin-bottom:var(--sp-16)}
.mb-20{margin-bottom:var(--sp-20)}
.mb-24{margin-bottom:var(--sp-24)}
.mb-32{margin-bottom:var(--sp-32)}
.mb-40{margin-bottom:40px}
.mb-48{margin-bottom:var(--sp-48)}
.mt-24{margin-top:var(--sp-24)}
.mt-32{margin-top:var(--sp-32)}
.mt-40{margin-top:40px}
.mt-48{margin-top:var(--sp-48)}
.gap-48{gap:var(--sp-48)}
.gap-64{gap:var(--sp-64)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;margin:var(--sp-24) 0;max-width:960px;margin-inline:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.table-wrap th,.table-wrap td{padding:var(--sp-12) var(--sp-16);text-align:left;border-bottom:1px solid var(--border)}
.table-wrap thead th{background:var(--bg);font-weight:600;position:sticky;top:0}
.table-wrap thead th:nth-child(2){background:var(--bg-cream);color:var(--text)}
.table-wrap tbody td:nth-child(2){background:rgba(13,113,148,.04)}
.table-wrap tbody tr:hover{background:rgba(0,0,0,.03)}
.table-wrap tbody tr:nth-child(even){background:rgba(0,0,0,.03)}
.table-wrap tbody tr:nth-child(even) td:nth-child(2){background:rgba(13,113,148,.06)}
.table-wrap td:first-child{font-weight:500}

/* ── Content Images ── */
.content-img{max-width:100%;height:auto;border-radius:var(--radius-lg);display:block}
.content-figure{margin:var(--sp-24) 0;text-align:center}
.content-figure .content-img{margin:0 auto}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-lg)}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:var(--radius-lg)}
.published-date{font-size:.875rem;font-weight:400;color:var(--text-secondary);margin-bottom:var(--sp-24);letter-spacing:.02em}
.hero + .section-split{padding-top:var(--sp-32)}
.section-split > .container > h2{margin-top:var(--sp-32);margin-bottom:var(--sp-16);font-size:1.75rem;line-height:1.3;letter-spacing:-0.01em}
.section-split > .container > h3{margin-top:var(--sp-24);margin-bottom:var(--sp-12);font-size:1.35rem;line-height:1.35;letter-spacing:-0.005em}

/* ── Responsive Tables ── */
@media(max-width:768px){
  .table-wrap table{font-size:.875rem}
  .table-wrap th,.table-wrap td{padding:var(--sp-8) var(--sp-12)}
  .table-wrap thead{position:sticky;top:0;z-index:2;background:var(--bg)}
  .table-wrap thead th{font-size:.75rem;white-space:nowrap}
}

/* ── Blog Card Grid Equalization ── */
.card-grid.cols-3 .card{display:flex;flex-direction:column}
.card-grid.cols-3 .card p{flex:1}

/* ── FAQ <details> Expand/Collapse ── */
details.faq-item .faq-answer{margin-top:var(--sp-12);font-size:.925rem;color:var(--text-secondary);line-height:1.7}

/* ── Release Notes 2-Column ── */
.card-grid.cols-release{grid-template-columns:repeat(2,1fr)}

/* ── Privacy Policy TOC ── */
.toc{
  position:static;top:auto;left:auto;right:auto;z-index:auto;
  background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:var(--sp-24) var(--sp-32);margin-bottom:var(--sp-48);
}
.toc h3{font-size:1rem;margin-bottom:var(--sp-12)}
.toc ol{padding-left:var(--sp-24);margin:0}
.toc li{padding:var(--sp-4) 0;font-size:.925rem;color:var(--text-secondary)}
.toc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.toc a:hover{text-decoration-color:var(--text)}

/* ── Compare Index 2x2 Grid ── */
.card-grid.cols-compare{grid-template-columns:repeat(2,1fr)}

/* ── Responsive ── */
@media(max-width:1100px){
  .footer-art{display:none}
  .footer-top>div:first-child{grid-column:1 / -1}
  nav .nav-links{gap:var(--sp-4)}
  nav .nav-links>li>a,nav .nav-links .nav-dropdown>a{font-size:.8125rem;padding:var(--sp-8) var(--sp-8)}
  nav .nav-right .btn{padding:var(--sp-8) var(--sp-12);font-size:.75rem}
  nav .nav-right .nav-signin{font-size:.8125rem;padding:var(--sp-8) var(--sp-8)}
  nav .nav-inner{padding:0 var(--sp-16)}
}
@media(max-width:960px){
  .card-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .mega-menu-wide{min-width:min(560px,calc(100vw - 32px))}
  .card-grid.cols-release{grid-template-columns:repeat(2,1fr)}
  nav .nav-links{gap:0}
  nav .nav-links>li>a,nav .nav-links .nav-dropdown>a{font-size:.75rem;padding:var(--sp-8) var(--sp-4)}
  nav .nav-right .nav-signin{display:none}
  nav .nav-right .btn{padding:6px var(--sp-8);font-size:.75rem}
}
@media(max-width:768px){
  .split{grid-template-columns:1fr;gap:var(--sp-32)}
  .card-grid.cols-2,.card-grid.cols-3,.feature-grid{grid-template-columns:1fr}
  .card-grid.cols-release{grid-template-columns:1fr}
  .card-grid.cols-compare{grid-template-columns:1fr}
  nav .nav-links{display:none}
  nav .nav-right{display:none}
  .mobile-menu-btn{display:inline-flex}
  .section{padding:var(--sp-64) 0}
  .section-badge{padding:var(--sp-64) 0}
  .badge-row{flex-wrap:wrap}
  .badge-card{width:160px;height:156px;padding:var(--sp-24)}
  .badge-card-img img{max-height:72px;max-width:110px}
  .badge-row::before,.badge-row::after{width:80px}
  .hero{padding:100px 0 56px}
  .hero-intro-overlay{max-width:100%;padding:var(--sp-32) var(--sp-24);border-radius:20px}
  .hero-intro-overlay h1{font-size:clamp(1.75rem,5vw,2.5rem)}
  .hero-intro-overlay .subhead{font-size:.925rem}
  .hero.hero-split{padding:80px 0}
  .hero-split-grid{grid-template-columns:1fr;gap:var(--sp-32)}
  .hero-split-visual{aspect-ratio:auto;min-height:320px}
  .hero.hero-dark-graphic{min-height:auto;padding:100px 0 80px}
  .hero-dark-graphic-text{max-width:100%}
  .hero-dark-graphic-text h1{font-size:clamp(2.5rem,8vw,4rem);line-height:1.05;letter-spacing:-1px}
  .hero-dots{display:none}
  .container{padding:0 var(--sp-24)}
  nav{padding:var(--sp-8) var(--sp-16)}
  .footer-top{grid-template-columns:repeat(2,1fr);gap:var(--sp-24) var(--sp-16)}
  .footer-top>div:first-child{grid-column:1 / -1}
  .footer-col a{font-size:.875rem;padding:4px 0}
  .metric,.metric-card{flex:0 1 calc(50% - var(--sp-16) / 2)}
  .card-grid.style-flat{margin-top:var(--sp-48);gap:var(--sp-48) var(--sp-16)}
  .mega-menu{display:none !important}
  .cta-section{padding:var(--sp-120) 0 var(--sp-80)}
  .cta-section h2{font-size:1.5rem}
  .cta-section .btn-group{flex-direction:column;align-items:stretch}
  .cta-section .btn-group .btn{text-align:center}
  .footer-bottom{flex-direction:column;text-align:center;gap:var(--sp-12)}
  .footer-legal{justify-content:center}
  .footer-social{justify-content:center}
  .visual-card{min-height:200px;padding:var(--sp-32) var(--sp-24)}
  .split .visual-card{aspect-ratio:auto}
  .section-split{padding:var(--sp-64) 0}
  .split > div > h2{font-size:1.75rem;line-height:1.14;letter-spacing:-0.009em}
}
@media(max-width:480px){
  .metric,.metric-card{flex:0 1 100%}
  .btn-group{flex-direction:column;align-items:stretch}
  .btn-group .btn{text-align:center}
  .footer-top{grid-template-columns:1fr}
  .footer-top>div:first-child{grid-column:auto}
  h1{font-size:clamp(2rem,5vw,3.5rem)}
}

/* ── Actium-native block skeletons (Phase 2d taxonomy) ── */

.eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-500,#6a3ad8);margin-bottom:var(--sp-16)}

/* themes */
.section-electric-purple{background:linear-gradient(135deg,#7c4dff 0%,#5a2cff 100%);color:#fff}
.section-electric-purple h2,.section-electric-purple h3,.section-electric-purple .eyebrow{color:#fff}
.section-purple-gradient{background:linear-gradient(135deg,#6a3ad8 0%,#3d1a8c 100%);color:#fff}
.section-purple-gradient h2,.section-purple-gradient h3,.section-purple-gradient .eyebrow{color:#fff}
.section-deep-purple{background:var(--primary--deep-purple,#5600c7);color:#fff}
.section-deep-purple h2,.section-deep-purple h3,.section-deep-purple .eyebrow{color:#fff}
.section-deep-purple .subhead{color:rgba(255,255,255,.85)}
.section-solid-purple{background:#4c1ed1;color:#fff}
.section-solid-purple h2,.section-solid-purple h3{color:#fff}
.section-gradient{background:linear-gradient(180deg,var(--bg-cream,#fbf9f5) 0%,var(--bg-white,#fff) 100%)}

/* logo-row + leaders */
.section-logo-row{padding:var(--sp-48) 0}
.logo-row{display:flex;flex-wrap:wrap;gap:var(--sp-40);align-items:center;justify-content:center;opacity:.82}
.logo-row img{height:40px;width:auto;object-fit:contain;filter:grayscale(1);transition:filter .18s ease,opacity .18s ease;opacity:.78}
.logo-row img:hover{filter:none;opacity:1}
.section-logo-row.theme-dark{
  /* Deep-purple band that continues the hero color (matches reference TrustedByBar). */
  background:linear-gradient(180deg,#370186 0%,#420199 50%,#370186 100%);
  color:var(--primary--off-white);
  padding:var(--sp-56) 0;
  /* Animate the recolor in sync with the demo's own background transition when
     the Outbound tab is toggled (see :has rule below). */
  transition:background .3s ease;
}
/* When the demo immediately below is in Outbound (orange) mode, recolor this
   "Trusted by" band to coral so it blends into the demo's top edge instead of
   leaving a hard purple/coral seam. The band ends at #ffb592 — the demo's top
   gradient stop — mirroring how the purple band's #370186 matches the inbound
   demo top. (`:has(+ X)` = "this element is immediately followed by X".) */
.section-logo-row.theme-dark:has(+ .section-receptionist.orange){
  background:linear-gradient(180deg,#e0613f 0%,#ff7355 45%,#ffb592 100%);
}
.section-logo-row.theme-dark h2{color:var(--primary--off-white)}
.section-logo-row.theme-dark .logo-row{opacity:1}
.section-logo-row.theme-dark .logo-row img,
.section-logo-row.theme-dark .marquee-track img{filter:brightness(0) invert(1);opacity:.92}
.section-logo-row.theme-dark .logo-row img:hover,
.section-logo-row.theme-dark .marquee-track img:hover{opacity:1}

/* Animated "Trusted by" marquee (logo-row with Animate). */
.logo-row-marquee{margin-top:var(--sp-40);padding:var(--sp-8) 0}
.logo-row-marquee .marquee-track{gap:var(--sp-64)}
.logo-row-marquee .marquee-track img{height:40px;opacity:.92}
.logo-row-marquee:hover .marquee-track{animation-play-state:paused}
/* Edge fade: fade to the band color, not the page background. */
.section-logo-row.theme-dark .logo-row-marquee{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.section-logo-row.theme-dark .logo-row-marquee::before,
.section-logo-row.theme-dark .logo-row-marquee::after{display:none}
.section-leaders{padding:var(--sp-64) 0;text-align:center}
.leaders-heading{font-size:clamp(2rem,4vw,3rem);margin-bottom:var(--sp-40);letter-spacing:-.015em}
.leaders-logos{display:flex;flex-wrap:wrap;gap:var(--sp-40);align-items:center;justify-content:center}
.leaders-logos img{height:40px;width:auto}

/* ── Testimonials carousel ─────────────────────────────────────────────
   Single-slide card with peek of neighbors, prev/next arrow pills and
   dot pagination. JS lives in scripts/runtime/testimonials.js. */
.section-testimonials{padding:var(--sp-96) 0;background:var(--primary--off-white,#fffdef)}
.testimonials-carousel{position:relative;max-width:1100px;margin:0 auto;overflow:hidden}
.testimonials-track{
  list-style:none;margin:0;padding:0;
  display:flex;gap:var(--sp-24);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.testimonial-slide{
  flex:0 0 100%;
  box-sizing:border-box;
  padding:0 var(--sp-16);
}
.testimonial-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:var(--sp-40);
  border-radius:28px;
  padding:var(--sp-40);
  background:
    linear-gradient(135deg, var(--primary--electric-purple,#8a2bff) 0%, var(--primary--deep-purple,#5600c7) 60%, var(--primary--black,#231f23) 160%);
  color:var(--primary--off-white,#fffdef);
  box-shadow:0 30px 60px -20px rgba(86,0,199,.35);
  min-height:440px;
}
.testimonial-portrait{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%);
  min-height:340px;
  display:flex;align-items:center;justify-content:center;
}
.testimonial-portrait.has-image{background:rgba(0,0,0,.18)}
.testimonial-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The "-card" portraits are self-contained composites (headshot + a white plate
   with the logo, name, and title baked in). object-fit:cover cropped that
   bottom plate, cutting off the logo and title. Show the whole image instead
   and let it set the box height so nothing is clipped. (Initials-placeholder
   slides — no .has-image — keep the cover/min-height behaviour.) */
.testimonial-portrait.has-image{min-height:0;align-self:stretch}
.testimonial-portrait.has-image img{position:relative;inset:auto;width:100%;height:100%;object-fit:contain}
.testimonial-initials{
  font:600 clamp(2.5rem,5vw,4rem)/1 var(--font-serif, "GT Sectra", "Times New Roman", serif);
  color:rgba(255,255,255,.85);
  letter-spacing:.04em;
  user-select:none;
}
.testimonial-body{display:flex;flex-direction:column;gap:var(--sp-24);justify-content:space-between}
.testimonial-header{display:flex;flex-direction:column;gap:var(--sp-4, 4px)}
.testimonial-logo{height:28px;width:auto;margin:0 0 var(--sp-16);opacity:.9;filter:brightness(0) invert(1)}
.testimonial-name{
  margin:0;font-weight:500;
  font-size:clamp(1.1rem,1.5vw,1.375rem);color:var(--primary--off-white,#fffdef);
}
.testimonial-meta{margin:0;color:rgba(255,253,239,.9);font-size:.9375rem;font-weight:600}
.testimonial-quote{
  margin:var(--sp-16) 0 0;
  font-family:var(--font-serif,'STIX Two Text',serif);
  font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.55;
  color:rgba(255,253,239,.92);
}
/* The shared .testimonial-quote::before decorative quote glyph (a `bluejay`/
   electric-purple `"`) is nearly invisible on the carousel card's purple bg and
   just wastes vertical space, so drop it here. (Kept on the static, light-bg
   testimonial where it reads fine.) */
.testimonial-card .testimonial-quote::before{display:none}
.testimonial-stats{
  list-style:none;margin:var(--sp-24) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-32) var(--sp-48);
}
.testimonial-stats li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4,4px);max-width:220px}
.testimonial-stat-value{
  font-family:var(--font-heading,'STIX Two Text',serif);
  font-weight:500;font-size:clamp(2rem,3.4vw,3rem);line-height:1;
  color:var(--primary--off-white,#fffdef);
}
.testimonial-stat-label{font-size:.8125rem;line-height:1.4;color:rgba(255,253,239,.75)}
.testimonial-controls{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-16);
  margin-top:var(--sp-32);
}
.testimonial-nav{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border,rgba(35,31,35,.18));background:var(--primary--off-white,#fffdef);color:var(--primary--black,#231f23);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s ease, transform .2s ease;
}
.testimonial-nav:hover{background:#fff;transform:translateY(-1px)}
.testimonial-nav .ph{font-size:18px}
.testimonial-dots{display:inline-flex;gap:var(--sp-8);background:var(--primary--off-white,#fffdef);padding:8px 12px;border-radius:999px;border:1px solid var(--border,rgba(35,31,35,.18))}
.testimonial-dot{
  width:8px;height:8px;border-radius:50%;border:0;background:rgba(35,31,35,.18);cursor:pointer;padding:0;
  transition:background .2s ease, width .2s ease;
}
.testimonial-dot.is-active{background:var(--primary--black,#231f23);width:18px;border-radius:999px}
@media(max-width:860px){
  .testimonial-card{grid-template-columns:1fr;padding:var(--sp-24);min-height:0}
  .testimonial-portrait{min-height:200px}
}

/* scroll-pitch + sticky-showcase */
.section-scroll-pitch,.section-sticky-showcase{padding:var(--sp-96) 0}
.pitch-stack,.showcase-stack{display:grid;gap:var(--sp-80);margin-top:var(--sp-48)}
.pitch-panel,.showcase-frame{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-48);align-items:center}
.pitch-panel-text .pitch-index,.showcase-frame-text .showcase-index{display:block;font-size:.875rem;font-weight:600;letter-spacing:.1em;color:var(--primary-500,#6a3ad8);margin-bottom:var(--sp-12)}
.pitch-panel h3,.showcase-frame h3{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 var(--sp-16)}
.pitch-panel p,.showcase-frame p{font-size:1.0625rem;line-height:1.6;color:var(--text-secondary,#4a4a55)}
.pitch-panel-visual,.showcase-frame-visual{border-radius:var(--radius-24,24px);overflow:hidden;aspect-ratio:4/3;background:var(--bg-cream,#f7f6f5)}
.pitch-panel-visual img,.showcase-frame-visual img,.pitch-panel-visual canvas,.showcase-frame-visual canvas{width:100%;height:100%;object-fit:cover;display:block}
.pitch-visual-stack{position:relative;width:100%;height:100%;isolation:isolate;background:var(--primary--black,#0d0d0f)}
.pitch-visual-stack .pitch-visual-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pitch-visual-stack .pitch-visual-rive{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
@media(max-width:900px){
  .pitch-panel,.showcase-frame{grid-template-columns:1fr;gap:var(--sp-32)}
}

/* ── Scroll-pitch: full-bleed cinematic cards (reference PerksSticky) ── */
.section-scroll-pitch{display:flex;flex-direction:column;gap:var(--sp-24);
  max-width:var(--max-w);margin:0 auto;padding:var(--sp-24) var(--sp-40)}
.pitch-card{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:85vh;border-radius:var(--radius-xl,24px);
  background:var(--primary--black);
}
.pitch-card-bg,.pitch-card-bg .pitch-card-video{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pitch-card-video{object-fit:cover;display:block}
/* Animated lines-system Rive texture (when there's no video bg), dimmed so it
   reads as subtle motion over the tint. */
.pitch-card-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.35;mix-blend-mode:screen}
/* Per-section tint base (sits under the lines + scrim). Defaults to deep purple. */
.pitch-card{background:linear-gradient(135deg,#3a0a8c 0%,#5600c7 100%)}
.pitch-card--purple{background:linear-gradient(135deg,#3a0a8c 0%,#5600c7 100%)}
.pitch-card--coral{background:linear-gradient(135deg,#c8482e 0%,#ff7355 100%)}
.pitch-card--lavender{background:linear-gradient(135deg,#5b3aa6 0%,#8b6fd6 100%)}
/* Purple gradient rising from the bottom (reference: rgba(86,0,199,.55)→.15→transparent). */
.pitch-card-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 40%, transparent 70%)}
/* Rive UI panel: right side, vertically centered via flex (NOT transform — the
   reveal animation owns transform). Full-height column centers the fixed-size
   inner so a tall panel never bleeds off the card. */
.pitch-card-rive{position:absolute;right:var(--sp-48);top:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  pointer-events:none;padding:var(--sp-24) 0}
.pitch-card-rive-inner{width:460px;max-width:44vw;height:var(--rive-h,420px);max-height:100%}
.pitch-card-rive canvas{width:100%;height:100%;display:block}
/* Content: vertically centered on the left (aligns with the right-side Rive
   panel), half width, white. Extra left padding for breathing room. */
.pitch-card-content{position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:var(--sp-20);padding:var(--sp-64) var(--sp-64) var(--sp-64) var(--sp-80);max-width:55%}
.pitch-card-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--radius,16px);background:#fff;color:var(--primary--black,#202020)}
.pitch-card-icon svg{width:24px;height:24px;display:block}
.pitch-card-title{font-family:var(--font-heading);font-weight:400;color:#fff;margin:0;
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.01em}
.pitch-card-copy{color:rgba(255,255,255,.72);max-width:30rem;margin:0;font-size:1rem;line-height:1.6}
.pitch-card-cta{display:inline-block;width:fit-content;margin-top:var(--sp-4);
  padding:var(--sp-12) var(--sp-24);border-radius:var(--radius-pill,200px);
  background:#fff;color:var(--primary--black);border:1px solid rgba(255,255,255,.2);
  font-weight:500;font-size:.9375rem;text-decoration:none;
  transition:background .25s ease,color .25s ease}
.pitch-card-cta:hover{background:var(--primary--black);color:#fff}
@media(max-width:900px){
  .pitch-card{min-height:auto}
  .pitch-card-content{position:relative;max-width:100%;padding:var(--sp-32)}
  .pitch-card-rive{display:none}
  /* Video cards: stack a 240px video preview above the in-flow content. */
  .pitch-card-bg:has(.pitch-card-video){position:relative;height:240px}
  .pitch-card-bg:has(.pitch-card-video) .pitch-card-video{position:relative;height:240px}
  /* Lines/gradient cards (no video) have no media to stack — keep the bg as a
     full-card background so the content fills the card and centers instead of
     being pushed to the bottom by an empty 240px block (the mobile dead space). */
  .pitch-card-bg:not(:has(.pitch-card-video)){position:absolute;inset:0;height:100%}
}

/* rive-demo */
.section-rive-demo{padding:var(--sp-96) 0}
.rive-demo-frame{position:relative;border-radius:var(--radius-24,24px);overflow:hidden;aspect-ratio:16/9;background:rgba(255,255,255,.06);max-width:1100px;margin:0 auto}
.rive-demo-frame .rive-canvas{width:100%;height:100%;display:block}
.rive-demo-controls{position:absolute;top:var(--sp-24);left:50%;transform:translateX(-50%);display:flex;gap:var(--sp-8);background:rgba(0,0,0,.35);padding:4px;border-radius:999px;backdrop-filter:blur(10px);z-index:2}
.rive-demo-control{border:0;background:transparent;color:rgba(255,255,255,.7);padding:8px 18px;border-radius:999px;font:inherit;cursor:pointer;transition:all .15s ease}
.rive-demo-control.is-active{background:#fff;color:#1a1325}
.rive-demo-control:hover:not(.is-active){color:#fff}

/* ai-receptionist — homepage interactive demo block */
.section-receptionist{position:relative;padding:var(--sp-128,128px) 0;overflow:hidden;isolation:isolate;color:#fff;background:
  radial-gradient(110% 70% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 55%),
  /* Bloom-to-lavender, matching reference AgentDemo (was dark indigo #2f1d73…). */
  linear-gradient(180deg, #370186 0%, #5600c7 30%, #8b3fe8 70%, #d2b0ff 100%)}
/* Orange/coral variant (outbound mode) — swapped in at runtime when the demo's
   Outbound tab is active, matching /outbound/outreach-engine. */
/* Matches the base layout's orange wash (`linear-gradient(135deg, #ffb592, #ff7355)`):
   light peach top-left → coral bottom-right, carried to a deeper #e0613f at the
   end so the button row + footer link (which sit low in the section) keep
   readable white-text contrast. The previous 180deg version faded to near-white
   #ffd4bf exactly where that text sits (~1.3:1 contrast). */
.section-receptionist.orange{background:
  radial-gradient(110% 70% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 55%),
  linear-gradient(135deg, #ffb592 0%, #ff7355 60%, #e0613f 100%)}
.section-receptionist.orange::before{background:linear-gradient(#ffb592, transparent)}
/* Top fade: softens the hard cut from the previous section by fading its solid
   #370186 over this section's gradient (matches reference AgentDemo's
   `absolute inset-x-0 top-0 h-32` overlay). */
.section-receptionist::before{
  content:"";position:absolute;inset:0 0 auto 0;height:128px;z-index:1;pointer-events:none;
  background:linear-gradient(#370186, transparent);
  transition:background .3s ease;
}
.section-receptionist{transition:background .3s ease}
.section-receptionist .receptionist-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.35;pointer-events:none}
.receptionist-container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px}
/* The agent-module's .agent-title/.agent-text set no color of their own — they
   inherit from the container (reference renders them white on the purple bg).
   Our base styles cascade a dark color onto <p>, so force white — but ONLY on
   these two elements, NOT the example cards (.agent-card keeps its own dark
   --card-text-color on the light card background). */
.section-receptionist .agent-title,
.section-receptionist .agent-text{color:#fff}
.section-receptionist .receptionist-connect{color:rgba(255,255,255,.6)}
.section-receptionist .receptionist-connect a,
.section-receptionist .receptionist-connect .link-bold{color:#fff}
/* `max-width:22ch` forced "Your 24/7/365 AI Receptionist" (~29 chars) to wrap.
   Widen so it holds one line; reference renders it on a single line. */
.receptionist-eyebrow{font:400 clamp(1.9rem,3.4vw,2.75rem)/1.12 var(--font-serif,"GT Sectra","Times New Roman",serif);margin:0 0 var(--sp-48);max-width:none;color:#fff}
.receptionist-playwrap{position:relative;width:200px;height:200px;margin:0 auto var(--sp-32);display:flex;align-items:center;justify-content:center}
.receptionist-playring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);pointer-events:none}
.receptionist-playring--lg{inset:-12px;border-color:rgba(255,255,255,.15);animation:receptionistPulse 3.4s ease-in-out infinite}
.receptionist-playring--md{inset:6px;border-color:rgba(255,255,255,.28);animation:receptionistPulse 3.4s ease-in-out .9s infinite}
@keyframes receptionistPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.15;transform:scale(1.08)}}
.receptionist-play{width:96px;height:96px;border-radius:50%;border:0;background:#0c0616;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.45);transition:transform .2s ease, background .2s ease}
.receptionist-play:hover{transform:scale(1.04);background:#1a1025}
.receptionist-play svg{width:34px;height:34px;margin-left:4px}
.receptionist-panels{position:relative;width:100%;min-height:180px}
.receptionist-mode{display:none;flex-direction:column;align-items:center;gap:var(--sp-12)}
.receptionist-mode.is-active{display:flex}
.receptionist-title{font:600 clamp(1.5rem,2.6vw,2rem)/1.2 var(--font-sans,inherit);margin:0;color:#fff}
.receptionist-sub{margin:0;color:rgba(255,255,255,.85);font-size:.95rem}
.receptionist-prompts{position:relative;width:100%;max-width:540px;min-height:86px;margin-top:var(--sp-16)}
.receptionist-prompt{position:absolute;inset:0;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 20px;color:#fff;font-size:.95rem;line-height:1.5;text-align:left;opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .35s ease;pointer-events:none}
.receptionist-prompt.is-active{opacity:1;transform:none;pointer-events:auto}
.receptionist-prompt__label{color:rgba(255,255,255,.6);margin-right:6px}
.receptionist-prompt-dots{display:flex;gap:8px;margin:var(--sp-16) 0 var(--sp-32);justify-content:center}
.receptionist-dot{width:6px;height:6px;border-radius:50%;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:background .15s ease, transform .15s ease}
.receptionist-dot.is-active{background:#fff;transform:scale(1.25)}
.receptionist-toggle{display:inline-flex;gap:4px;padding:4px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.receptionist-toggle-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:rgba(255,255,255,.72);padding:10px 20px;border-radius:999px;font:inherit;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .2s ease}
.receptionist-toggle-btn:hover:not(.is-active){color:#fff}
.receptionist-toggle-btn.is-active{background:#fff;color:#1a1025}
.receptionist-toggle-icon{display:inline-flex;width:16px;height:16px}
.receptionist-toggle-icon svg{width:100%;height:100%}
.receptionist-connect{margin:var(--sp-32) 0 0;color:rgba(255,255,255,.72);font-size:.9rem}
.receptionist-connect a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .15s ease}
.receptionist-connect a:hover{border-bottom-color:#fff}
@media(max-width:640px){
  .receptionist-playwrap{width:160px;height:160px}
  .receptionist-play{width:80px;height:80px}
  .receptionist-toggle{flex-direction:column;border-radius:20px}
  .receptionist-toggle-btn{width:100%;justify-content:center}
}

/* challenge-grid */
.section-challenge{padding:var(--sp-96) 0}
.section-challenge.section-deep-purple{padding:80px 0 100px}
.section-challenge.section-electric-purple{padding:80px 0 100px}
/* Animated lines-system Rive background (reference: preset 2, bottom-center). */
.section-challenge.has-rive-bg{position:relative;overflow:hidden;isolation:isolate}
.challenge-rive-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.challenge-rive-bg .rive-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.section-challenge.has-rive-bg .container{position:relative;z-index:1}
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);margin-top:var(--sp-48)}
/* Text-only fallback card (no bg image) */
.challenge-card{position:relative;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:32px;padding:var(--sp-32);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-12)}
.challenge-card h3{font-size:1.375rem;margin:0;color:#fff;font-family:var(--font-heading);font-weight:400}
.challenge-card p{font-size:.9375rem;line-height:1.55;margin:0;color:rgba(255,255,255,.85)}
/* Photo card (reference .service-card): full image + transparent→black scrim,
   white icon chip top-left, title/copy pinned to bottom. */
.challenge-card.has-bg{min-height:448px;padding:var(--sp-32);justify-content:space-between;border:none;background:none}
.challenge-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.challenge-card-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 0%,#000 100%)}
.challenge-card-icon{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;padding:9px;align-self:flex-start}
/* Icons are currentColor (normalized in build). Default: dark on the white chip;
   purple-chip variants below override to white. */
.challenge-card-icon svg{width:100%;height:100%;display:block;color:var(--primary--black,#202020)}
.challenge-card-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--sp-8)}
.challenge-card.has-bg h3{font-size:1.375rem}
.challenge-card.has-bg p{color:rgba(255,255,255,.8)}
/* Problem/solution card (use-case): light cream card, purple icon chip,
   dark text, with a lavender solution sub-card pinned to the bottom.
   Reference .card-use-c + .top-use-card + .infi-card-use. */
.challenge-card.has-solution{
  background:var(--primary--off-white,#fffdf1);border:none;border-radius:24px;
  padding:var(--sp-32);justify-content:space-between;gap:var(--sp-32);min-height:0;
}
.challenge-card.has-solution .challenge-card-icon{background:var(--primary--electric-purple,#6f00ff);align-self:flex-start;margin-bottom:var(--sp-4)}
.challenge-card.has-solution .challenge-card-icon svg{color:#fff}
.challenge-card.has-solution .challenge-card-inner{gap:var(--sp-12)}
.challenge-card.has-solution h3{color:var(--primary--black,#202020);font-size:1.25rem}
.challenge-card.has-solution .challenge-card-inner p{color:var(--text-secondary,#5a5a62)}
.challenge-card-solution{background:#e9e1ef;border-radius:12px;padding:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-8)}
.challenge-card-solution-label{font-weight:600;color:var(--primary--black,#202020);font-size:.9375rem}
.challenge-card-solution p{margin:0;font-size:.875rem;line-height:1.5;color:var(--text-secondary,#5a5a62)}
@media(max-width:800px){.challenge-grid{grid-template-columns:1fr}}

/* capability */
.section-capability{padding:var(--sp-96) 0}
.capability-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64);align-items:center}
.capability-visual{border-radius:var(--radius-24,24px);overflow:hidden;aspect-ratio:4/3;background:var(--bg-cream,#f7f6f5)}
.capability-visual img,.capability-visual canvas{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.capability-split{grid-template-columns:1fr;gap:var(--sp-40)}}

/* stats-row */
.section-stats{padding:var(--sp-96) 0;background-size:cover;background-position:center}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-32);margin-top:var(--sp-48)}
.stat{text-align:center}
.stat-value{display:block;font-family:var(--font-serif,"STIX Two Text",serif);font-size:clamp(2.5rem,5vw,4rem);line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--primary-500,#6a3ad8)}
.stat-label{display:block;margin-top:var(--sp-12);font-size:1rem;font-weight:600;color:var(--text-primary,#1a1325)}
.stat-desc{display:block;margin-top:var(--sp-4);font-size:.9375rem;color:var(--text-secondary,#5a5a62)}
.stats-cta{margin-top:var(--sp-48);text-align:center}

/* case-study-grid */
.section-case-grid{padding:var(--sp-96) 0}
.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-20);margin-top:var(--sp-48)}
.case-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-24,24px);background:var(--bg-white,#fff);border:1px solid var(--border,rgba(26,19,37,.08));text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;min-height:360px}
.case-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(26,19,37,.10)}
.case-card-media{position:relative;min-height:160px;background:linear-gradient(135deg,#efeafe,#e0d6fc);display:flex;align-items:center;justify-content:center;padding:var(--sp-24);overflow:hidden}
.case-card--has-bg .case-card-media{background-image:var(--case-card-bg);background-size:cover;background-position:center}
.case-card-media > *{position:relative;z-index:1}
/* Logo plate: a white chip so dark-fill partner logos read cleanly on
   any background image. The chip itself is a wrapping <span> so the
   `filter:brightness(0)` applied to white-fill SVGs affects only the
   logo paths, not the plate behind them. */
.case-card-logo-plate{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);padding:var(--sp-12) var(--sp-20);border-radius:var(--radius-12,12px);box-shadow:0 2px 12px rgba(26,19,37,.12);max-width:80%}
.case-card-logo{height:40px;width:auto;max-width:200px;object-fit:contain;display:block}
.case-card-logo[data-invert="1"]{filter:brightness(0)}
.case-card-body{padding:var(--sp-24);display:flex;flex-direction:column;flex:1}
.case-card-metric{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--primary-100,#efe7ff);color:var(--primary-700,#4c1ed1);font-size:.75rem;font-weight:600;margin-bottom:var(--sp-12);align-self:flex-start;letter-spacing:.02em}
.case-card h3{font-size:1rem;line-height:1.35;margin:0 0 var(--sp-12);color:var(--text,#13161a);font-weight:600}
.case-card p{font-size:.875rem;line-height:1.45;color:var(--text-secondary,#5a5a62);margin:0 0 var(--sp-20);flex:1}
.case-card-link{align-self:flex-start;color:var(--primary-500,#6a3ad8);display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;text-decoration:none}
.case-card-link i{transition:transform .18s ease}
.case-card:hover .case-card-link i{transform:translateX(4px)}
@media(max-width:1100px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.case-grid{grid-template-columns:1fr}}

/* service-scale-grid */
/* scale-stepper — sticky scroll-stepper (reference .section-services-wrap-sml).
   Tall section; inner card pins; left image swaps + right step highlights on
   scroll via scale-stepper.js (data-active). */
.scale-stepper{position:relative;height:var(--stepper-height,450vh);background:var(--primary--off-white,#fffdf1)}
.scale-stepper>.container{padding-top:var(--sp-96)}
.scale-stepper-heading,.scale-stepper .text-center,.scale-stepper .mb-48{position:relative;z-index:2}
.stepper-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.stepper-frame{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64);align-items:center;width:100%}
.stepper-visuals{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;width:100%}
.stepper-visual{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.stepper-visual img{width:100%;height:100%;object-fit:cover;display:block}
.stepper-steps{display:flex;flex-direction:column}
.stepper-step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-24);padding:var(--sp-24) 0;border-top:1px solid rgba(32,32,32,.12);opacity:.4;transition:opacity .3s ease}
.stepper-step-num{font-size:.875rem;color:var(--text-secondary,#5a5a62);font-variant-numeric:tabular-nums}
.stepper-step-body h3{font-family:var(--font-body,'Inter',sans-serif);font-weight:400;font-size:1.375rem;margin:0 0 var(--sp-8);color:var(--primary--black,#202020)}
.stepper-step-body p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--text-secondary,#5a5a62)}
.stepper-step-link{display:none;align-self:flex-start;margin-top:var(--sp-16);min-height:38px;align-items:center;padding:10px 20px;border-radius:999px;background:var(--primary--black,#202020);color:#fff;font-size:.875rem;font-weight:500;text-decoration:none}
/* Active step: full opacity + reveal the Learn more button + show its image. */
.scale-stepper[data-active="0"] .stepper-visual[data-index="0"],
.scale-stepper[data-active="1"] .stepper-visual[data-index="1"],
.scale-stepper[data-active="2"] .stepper-visual[data-index="2"],
.scale-stepper[data-active="3"] .stepper-visual[data-index="3"],
.scale-stepper[data-active="4"] .stepper-visual[data-index="4"]{opacity:1}
.scale-stepper[data-active="0"] .stepper-step[data-index="0"],
.scale-stepper[data-active="1"] .stepper-step[data-index="1"],
.scale-stepper[data-active="2"] .stepper-step[data-index="2"],
.scale-stepper[data-active="3"] .stepper-step[data-index="3"],
.scale-stepper[data-active="4"] .stepper-step[data-index="4"]{opacity:1}
.scale-stepper[data-active="0"] .stepper-step[data-index="0"] .stepper-step-link,
.scale-stepper[data-active="1"] .stepper-step[data-index="1"] .stepper-step-link,
.scale-stepper[data-active="2"] .stepper-step[data-index="2"] .stepper-step-link,
.scale-stepper[data-active="3"] .stepper-step[data-index="3"] .stepper-step-link,
.scale-stepper[data-active="4"] .stepper-step[data-index="4"] .stepper-step-link{display:inline-flex}
@media(max-width:900px){
  /* Static stack: show all steps + their images, no pinning. */
  .scale-stepper{height:auto}
  .stepper-sticky{position:static;height:auto;display:block}
  .stepper-frame{grid-template-columns:1fr;gap:var(--sp-24)}
  .stepper-visuals{display:none}
  .stepper-step{opacity:1}
  .stepper-step .stepper-step-link{display:inline-flex}
}

/* service-scale-grid — "Built for your specific scale of care".
   Image-forward cards, 2-up rows with a widened 2nd card. The blend into the
   purple CTA section below is handled by a cream→transparent fade at the TOP
   of the CTA banner (see .cta-banner::before), not a gradient here. */
.section-scale{
  padding:100px 0 0;position:relative;
  background:var(--primary--off-white,#fffdf1);
}
.section-scale .container{position:relative;z-index:1}
.scale-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-16);
  margin-top:var(--sp-48);padding-bottom:120px;
}
.scale-card{
  grid-column:span var(--span,2);
  position:relative;display:flex;flex-direction:column;gap:var(--sp-24);
  padding:var(--sp-32);border-radius:24px;
  background:#f8f2f7;border:1px solid rgba(76,34,25,.1);
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.scale-card:hover{border-color:var(--primary--deep-purple,#5600c7);transform:translateY(-2px);box-shadow:0 16px 40px rgba(24,16,48,.12)}
.scale-card-media{width:100%;height:240px;border-radius:24px;overflow:hidden;flex:0 0 auto}
.scale-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.scale-card-body{display:flex;flex-direction:column;gap:var(--sp-12);flex:1 1 auto}
.scale-card h3{
  font-family:var(--font-body,'Inter',sans-serif);font-weight:400;
  font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--primary--black,#202020);margin:0;
}
.scale-card p{font-size:.9375rem;color:var(--text-secondary,#5a5a62);margin:0;line-height:1.55}
.scale-card-link{
  align-self:flex-start;display:inline-flex;align-items:center;
  min-height:38px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--primary--black,#202020);background:transparent;
  color:var(--primary--black,#202020);font-size:.875rem;font-weight:500;line-height:1;
  transition:background-color .2s ease,color .2s ease;
}
.scale-card:hover .scale-card-link{background:var(--primary--black,#202020);color:var(--primary--off-white,#fffdf1)}
@media(max-width:991px){
  .scale-grid{grid-template-columns:repeat(2,1fr);padding-bottom:96px}
  .scale-card{grid-column:span 1}
  /* Mobile nav: the .nav-menu panel is hidden until the menu button toggles
     `data-menu-open` on the navbar (our runtime sets it; we don't ship the base layout's
     JS). Reveal it as a full-screen overlay below the bar when open. */
  .navbar.w-nav .nav-menu{
    display:none !important;position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;height:100dvh;z-index:200;overflow:auto;
    padding:80px 24px 28px;
  }
  .navbar.w-nav[data-menu-open] .nav-menu{display:flex !important}
  .navbar.w-nav[data-menu-open]{z-index:300}

  /* Hamburger → X toggle (CSS spans; no CDN image, no .w--open dependency). */
  .navbar.w-nav .menu-button{position:relative;z-index:310;background-image:none;width:28px;height:22px;flex-direction:column;justify-content:center;gap:5px}
  .navbar.w-nav .menu-button span{display:block;width:24px;height:2px;border-radius:2px;background:var(--primary--off-white,#fffdf1);transition:transform .25s ease,opacity .2s ease}
  .navbar.w-nav[data-menu-open] .menu-button span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navbar.w-nav[data-menu-open] .menu-button span:nth-child(2){opacity:0}
  .navbar.w-nav[data-menu-open] .menu-button span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Compact nav typography (reference: ~20px top-level, 16px nested). */
  .navbar.w-nav .nav-link-drop,
  .navbar.w-nav .nav-link{font-size:20px;font-weight:400;padding:10px 0;justify-content:space-between;width:100%}
  .navbar.w-nav .nav-menu .menu-intro-link{font-size:16px;font-weight:600;padding:8px 0}
  .navbar.w-nav .nav-menu .menu-intro-desc{font-size:13px;line-height:1.45}
  .navbar.w-nav .nav-menu .menu-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:12px 0 4px}
  .navbar.w-nav .nav-menu .dropdown-link{font-size:16px;padding:7px 0;display:block}
  .navbar.w-nav .nav-menu .menu-column{padding:0}
  /* Collapsed dropdowns: only expand the one tapped open (JS sets .w--open on
     the .w-dropdown wrapper). Force the list to flow in-line (the base layout makes it
     an absolutely-positioned floating panel by default). */
  .navbar.w-nav .nav-menu .w-dropdown{width:100%;display:block;position:static}
  .navbar.w-nav .nav-menu .w-dropdown .dropdown-list{display:none}
  .navbar.w-nav .nav-menu .w-dropdown.w--open .dropdown-list{display:flex;position:static;flex-direction:column;align-items:flex-start;padding:4px 0 12px;gap:0;min-width:0;width:100%;
    opacity:1 !important;left:0 !important;transform:none !important;background:transparent !important;box-shadow:none !important}
  .navbar.w-nav .nav-menu .w-dropdown.w--open .dropdown-list *{background:transparent !important}
  /* Collapse the desktop mega-menu grid into a tight single column on mobile. */
  .navbar.w-nav .nav-menu .dropdown-list .dropdown-container,
  .navbar.w-nav .nav-menu .dropdown-list .menu-scroll,
  .navbar.w-nav .nav-menu .dropdown-list .module-scroll,
  .navbar.w-nav .nav-menu .dropdown-list [class*="menu-grid"],
  .navbar.w-nav .nav-menu .dropdown-list .nav-grid{display:flex !important;flex-direction:column;gap:12px;width:100%;height:auto}
  .navbar.w-nav .nav-menu .dropdown-list .menu-column{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;padding:0;margin:0}
  .navbar.w-nav .nav-menu .dropdown-list .linea,
  .navbar.w-nav .nav-menu .dropdown-list .hide-mobile{display:none}
  .navbar.w-nav .nav-menu .dropdown-list .highlight-column,
  .navbar.w-nav .nav-menu .dropdown-list .menu-highlight-card{display:none}
  .navbar.w-nav .nav-menu .menu-intro-desc{color:rgba(255,255,255,.65) !important}
  .navbar.w-nav .nav-menu .drop-arrow{transition:transform .25s ease}
  .navbar.w-nav .nav-menu .w-dropdown.w--open .drop-arrow{transform:rotate(90deg)}

  /* Keep the logo (and its container) visible above the open overlay. */
  .navbar.w-nav[data-menu-open] .navbar-container,
  .navbar.w-nav[data-menu-open] .brand{position:relative;z-index:310}
  /* Clean X button: no leftover background swatch. */
  .navbar.w-nav .menu-button{background-color:transparent}
}
@media(max-width:599px){
  .scale-grid{grid-template-columns:1fr}
  .scale-card-media{height:200px}
}

/* roi-widget */
.section-roi{padding:var(--sp-96) 0}
.roi-card{display:grid;grid-template-columns:1fr auto;gap:var(--sp-48);align-items:center;padding:var(--sp-48);border-radius:var(--radius-24,24px);border:1px solid var(--border,rgba(26,19,37,.08));background:linear-gradient(135deg,var(--bg-cream,#fbf9f5) 0%,var(--bg-white,#fff) 100%)}
.roi-card-text h2{font-size:clamp(1.75rem,3vw,2.5rem);margin:0}
.roi-card-text .subhead{margin-top:var(--sp-16)!important}
@media(max-width:800px){.roi-card{grid-template-columns:1fr}}
/* ROI banner — full-bleed bg image + diagonal scrim + centered white content
   (reference: "Calculate Your Potential Savings" over the doctor-at-laptop). */
.section-roi-banner{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  min-height:520px;padding:var(--sp-100) var(--sp-32);color:#fff}
.roi-banner-bg{position:absolute;inset:0;z-index:0}
.roi-banner-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Diagonal black→transparent scrim (reference: linear-gradient(45deg,#000000b3 42%,transparent)). */
.roi-banner-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(45deg,rgba(0,0,0,.7) 42%,transparent)}
.roi-banner-content{position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-16);max-width:46ch}
.roi-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:999px;background:#fff;padding:15px;margin-bottom:var(--sp-12)}
.roi-icon img{width:100%;height:100%;display:block}
.roi-banner-content h2{font-family:var(--font-heading);font-weight:400;color:#fff;margin:0;
  font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.15;letter-spacing:-.012em}
.roi-sub{color:rgba(255,255,255,.8);margin:0;font-size:1rem;line-height:1.5;max-width:46ch}
.roi-banner-cta{display:inline-flex;align-items:center;justify-content:center;
  margin-top:var(--sp-32);min-height:46px;padding:var(--sp-12) var(--sp-24);
  border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:#fff;font-weight:500;font-size:.9375rem;text-decoration:none;
  transition:background .25s ease,border-color .25s ease}
.roi-banner-cta:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}

/* integrations-grid */
/* integrations-grid — "Your Schedule, Synchronized" (reference
   .card-capabilities.orange-auto): cream cards, title+copy top, logo bottom. */
.section-integrations{padding:140px 0;background:var(--primary--off-white,#fffdf1)}
.integrations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);margin-top:var(--sp-48)}
.integration-card{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:378px;padding:var(--sp-32);border-radius:24px;
  background:#fff8eb;border:1px solid rgba(76,34,25,.1);
}
.integration-card-body{display:flex;flex-direction:column;gap:var(--sp-12)}
.integration-card h3{
  font-family:var(--font-body,'Inter',sans-serif);font-weight:400;
  font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--primary--black,#202020);margin:0;
}
.integration-card p{font-size:.9375rem;color:var(--text-secondary,#5a5a62);margin:0;line-height:1.55}
.integration-logo-wrap{display:flex;align-items:flex-end;margin-top:var(--sp-32)}
.integration-logo{height:32px;width:auto;display:block}
@media(max-width:900px){
  .section-integrations{padding:96px 0}
  .integrations-grid{grid-template-columns:1fr;gap:var(--sp-16)}
  .integration-card{min-height:0}
}

/* use-case-directory */
.section-usecase-dir{padding:var(--sp-96) 0}
.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-20);margin-top:var(--sp-48)}
.usecase-tile{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-32);border-radius:var(--radius-20,20px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);text-decoration:none;color:inherit;transition:background .15s ease,transform .15s ease}
.usecase-tile:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.usecase-tile .usecase-icon{width:32px;height:32px;font-size:32px;color:inherit}
.usecase-tile h3{font-size:1.0625rem;margin:0;color:inherit}
.usecase-tile p{font-size:.875rem;margin:0;opacity:.8}
@media(max-width:900px){.usecase-grid{grid-template-columns:repeat(2,1fr)}}

/* purple-accent */
.section-accent{padding:var(--sp-96) 0;text-align:center}
.section-accent .accent-visual{max-width:900px;margin-left:auto;margin-right:auto;border-radius:var(--radius-24,24px);overflow:hidden}
.section-accent .accent-visual img{width:100%;height:auto;display:block}

/* resource-grid */
.section-resources{padding:var(--sp-96) 0}
/* Filter + sort toolbar (case-studies). Chips left, sort right; wraps on mobile. */
.resource-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;margin-bottom:var(--sp-32)}
.resource-toolbar .resource-filter{margin-bottom:0;justify-content:flex-start;flex:1 1 auto}
.resource-sort{display:flex;align-items:center;gap:var(--sp-8);flex:0 0 auto}
.resource-sort-label{font-size:.875rem;color:var(--text-secondary,#5a5a62)}
.resource-sort-select{font:inherit;font-size:.875rem;padding:8px 28px 8px 12px;border-radius:999px;border:1px solid var(--border,rgba(26,19,37,.12));background:var(--bg-white,#fff);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a62' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.resource-card.is-hidden,.case-study-card.is-hidden{display:none}
@media(max-width:599px){.resource-toolbar{flex-direction:column;align-items:stretch}.resource-sort{justify-content:flex-end}}
.resource-filter{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-32);justify-content:center}
.resource-chip{border:1px solid var(--border,rgba(26,19,37,.12));background:var(--bg-white,#fff);padding:8px 16px;border-radius:999px;font:inherit;font-size:.875rem;cursor:pointer;transition:all .15s ease}
.resource-chip:hover,.resource-chip.is-active{border-color:var(--primary-500,#6a3ad8);background:var(--primary-100,#efe7ff);color:var(--primary-700,#4c1ed1)}
.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-24)}
.resource-card{display:flex;flex-direction:column;gap:var(--sp-12);padding:0;border-radius:var(--radius-20,20px);background:var(--bg-white,#fff);border:1px solid var(--border,rgba(26,19,37,.08));text-decoration:none;color:inherit;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.resource-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(26,19,37,.08)}
.resource-cover{aspect-ratio:16/10;background:var(--bg-cream,#f7f6f5);overflow:hidden}
.resource-cover img{width:100%;height:100%;object-fit:cover;display:block}
.resource-type{padding:0 var(--sp-24);margin-top:var(--sp-20);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--primary-500,#6a3ad8)}
.resource-card h3{font-size:1.125rem;line-height:1.35;margin:0 var(--sp-24);padding:var(--sp-4) 0}
.resource-card p{font-size:.9375rem;color:var(--text-secondary,#5a5a62);margin:0 var(--sp-24) var(--sp-24)}
.resource-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 var(--sp-24) var(--sp-24)}
.resource-tags span{font-size:.75rem;padding:4px 10px;background:var(--bg-cream,#f7f6f5);border-radius:999px;color:var(--text-secondary,#5a5a62)}

/* blog-grid — full-image cover cards with scrim + overlaid label/title/Read more
   (reference: /blog list). */
.section-blog-grid{padding:var(--section-pad-lg) 0;background:var(--primary--off-white)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);margin-top:var(--sp-48)}
.blog-card{position:relative;display:flex;border-radius:var(--radius-20,20px);overflow:hidden;min-height:440px;text-decoration:none;color:#fff;transition:transform .18s ease,box-shadow .18s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(26,19,37,.12)}
.blog-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.blog-card-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,16,30,0) 30%,rgba(20,16,30,.55) 62%,rgba(20,16,30,.92) 100%)}
.blog-card-body{position:relative;z-index:2;margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-28,28px)}
.blog-card-label{font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.85)}
.blog-card h3{font-family:var(--font-heading);font-weight:400;font-size:1.25rem;line-height:1.25;margin:0;color:#fff}
.blog-card-link{align-self:flex-start;margin-top:var(--sp-4);display:inline-flex;align-items:center;background:var(--primary--off-white,#fffdf1);color:var(--primary--black,#202020);font-size:.875rem;font-weight:500;padding:9px 20px;border-radius:999px}
@media(max-width:980px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-card{min-height:360px}}

/* ── Case-study detail page (reference: hero-entry + two-col body) ── */
/* Hero: gradient/animation bg, H1 left, logo-on-gradient card right. */
.hero.hero-case-study{min-height:660px}
.hero-cs-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-48);align-items:center}
.hero-cs-text h1{margin:0;font-size:clamp(2rem,4vw,3.25rem);line-height:1.1}
.cs-hero-card{position:relative;border-radius:24px;overflow:hidden;min-height:420px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#ffb592 0%,#ff8f6b 100%)}
.cs-hero-card .case-study-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cs-hero-card .case-study-card-logo{position:relative;z-index:1;background:var(--primary--off-white,#fffdf1);border-radius:16px;padding:var(--sp-40) var(--sp-48);max-width:74%;display:flex;align-items:center;justify-content:center}
.cs-hero-card .case-study-card-logo img{max-width:100%;height:auto;display:block}
@media(max-width:860px){.hero-cs-grid{grid-template-columns:1fr;gap:var(--sp-32)}.cs-hero-card{min-height:300px}}
/* Blog-post hero: H1 + date left, featured image in a white card right.
   `.hero.hero-blog-post` (two classes) so it beats `.hero.hero-resources`. */
.hero.hero-blog-post{min-height:660px}
.hero-blog-date{display:block;margin-top:var(--sp-24);font-size:.9375rem;color:var(--text-secondary,#5a5a62)}
.blog-hero-card{border-radius:20px;overflow:hidden;background:var(--primary--off-white,#fffdf1);box-shadow:0 20px 50px rgba(26,19,37,.12);aspect-ratio:16/11}
.blog-hero-card img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.blog-hero-card{aspect-ratio:16/10}}
/* `wide-image` variant: for full-bleed designed hero cards authored at 16:9
   (e.g. a branded title slide). Matches the card to the image aspect so the
   whole graphic shows edge-to-edge with no cropping. Default 16:11 + cover is
   tuned for the 4:3 photo heroes the other posts use. */
.blog-hero-card--wide{aspect-ratio:16/9}
@media(max-width:860px){.blog-hero-card--wide{aspect-ratio:16/9}}

/* Stats band: soft lavender panel, headline + description columns w/ rules. */
.section-cs-stats{padding:var(--sp-32) 0}
.cs-stats-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-32);background:var(--primary-100,#efe7ff);border-radius:24px;padding:var(--sp-40) var(--sp-48)}
.cs-stat{display:flex;flex-direction:column;gap:var(--sp-8);padding-left:var(--sp-32);border-left:1px solid rgba(86,0,199,.18)}
.cs-stat:first-child{padding-left:0;border-left:none}
.cs-stat-headline{font-family:var(--font-heading);font-weight:400;font-size:1.25rem;line-height:1.25;color:var(--primary--black,#202020)}
.cs-stat-desc{margin:0;font-size:.9375rem;line-height:1.5;color:var(--text-secondary,#5a5a62)}
@media(max-width:768px){.cs-stats-panel{grid-template-columns:1fr;gap:var(--sp-24);padding:var(--sp-32)}.cs-stat{padding-left:0;border-left:none}}

/* Two-column body: facts sidebar (left) + prose (right). */
.section-cs-body{padding:var(--sp-48) 0 var(--sp-96)}
.cs-body-grid{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-64);align-items:start}
.cs-body-sidebar{position:sticky;top:var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-24)}
.cs-fact-date{font-size:.875rem;color:var(--text-secondary,#5a5a62)}
.cs-fact{display:flex;flex-direction:column;gap:var(--sp-4);padding-bottom:var(--sp-24);border-bottom:1px solid var(--border,rgba(26,19,37,.12))}
.cs-fact-label{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary,#5a5a62)}
.cs-fact-value{font-size:1rem;color:var(--primary--black,#202020);line-height:1.4}
.cs-fact-overview{border-bottom:none}
.cs-fact-overview p{margin:var(--sp-4) 0 0;font-size:.9375rem;line-height:1.6;color:var(--text-secondary,#5a5a62)}
.cs-body-main{max-width:720px}
@media(max-width:860px){.cs-body-grid{grid-template-columns:1fr;gap:var(--sp-40)}.cs-body-sidebar{position:static}}

/* article-body */
.section-article{padding:var(--sp-64) 0}
.article-body{max-width:720px;margin:0 auto}
.article-section{margin-bottom:var(--sp-48)}
.article-section .eyebrow{margin-bottom:var(--sp-8)}
.article-section h2{margin:0 0 var(--sp-16);font-size:1.75rem;line-height:1.2}
.cs-body-main .article-section:last-child{margin-bottom:0}
/* In-article headings: scoped well below the global h1/h2 display sizes so a
   body H2 never rivals the hero H1. */
.article-body h2{margin:var(--sp-40) 0 var(--sp-16);font-size:1.75rem;line-height:1.25;letter-spacing:-0.008em}
.article-body h3{margin:var(--sp-32) 0 var(--sp-12);font-size:1.375rem;line-height:1.3}
.article-body h4{margin:var(--sp-28) 0 var(--sp-12);font-size:1.125rem;line-height:1.35}
.article-body p{font-size:1.0625rem;line-height:1.7;margin:0 0 var(--sp-20)}
/* Prose list (article bodies): a clean disc bullet with text flowing as one
   block, so a leading "**Label:**" stays inline with its description. */
.article-list{margin:0 0 var(--sp-20);padding-left:var(--sp-24);list-style:disc}
.article-list li{font-size:1.0625rem;line-height:1.7;margin:0 0 var(--sp-12);padding-left:var(--sp-8)}
.article-list li::marker{color:var(--accent,#6f00ff)}
.article-list li strong{font-weight:600;color:var(--primary--black,#202020)}
.article-body img{max-width:100%;height:auto;border-radius:var(--radius-16,16px);margin:var(--sp-24) 0}
.article-body blockquote{margin:var(--sp-32) 0;padding:var(--sp-24) var(--sp-32);border-left:4px solid var(--primary-500,#6a3ad8);background:var(--bg-cream,#fbf9f5);font-style:italic}
.article-body blockquote cite{display:block;margin-top:var(--sp-16);font-style:normal;font-weight:600;font-size:0.9375rem;color:var(--primary--black,#202020)}
.article-body .content-figure figcaption{margin-top:var(--sp-12);font-size:0.875rem;color:var(--text-muted,#6b6b6b);font-style:italic}
.article-body hr{border:0;border-top:1px solid var(--border,#e6e2d9);margin:var(--sp-32) 0}
/* Set-off disclaimer / source note: muted italic body with a rule above and
   below, bracketing it off from the article (e.g. slide-permission credit). */
.article-body .article-note{font-size:0.9375rem;line-height:1.6;color:var(--text-secondary,#5a5a62);font-style:italic;margin:var(--sp-40) 0 0;padding:var(--sp-24) 0;border-top:1px solid var(--border,#e6e2d9);border-bottom:1px solid var(--border,#e6e2d9)}

/* legal-body */
.section-legal{padding:var(--sp-64) 0}
.legal-body{max-width:820px;margin:0 auto}
.legal-body h1{font-size:clamp(2rem,4vw,2.75rem);margin:0 0 var(--sp-32)}
.legal-body h2{font-size:1.5rem;margin:var(--sp-40) 0 var(--sp-16)}
.legal-body p{font-size:1rem;line-height:1.7;margin:0 0 var(--sp-16)}

/* audio-demo */
.section-audio-demo{padding:var(--sp-64) 0}
.audio-demo-frame{max-width:680px;margin:0 auto}
.audio-demo-frame iframe{width:100%;border:0;border-radius:var(--radius-16,16px)}

/* careers-grid */
.section-careers{padding:var(--sp-64) 0}
/* Two job cards side by side, centered under the heading (reference:
   the reference design). Each card: title + middot meta, then an
   always-visible "Apply here" pill. */
.job-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);
  margin-top:var(--sp-40);max-width:780px;margin-left:auto;margin-right:auto;
}
.job-card{
  display:flex;flex-direction:column;gap:var(--sp-24);
  padding:var(--sp-32);border:1px solid var(--border,rgba(26,19,37,.10));
  border-radius:var(--radius-16,16px);background:#fff;
}
/* No card-level :hover — the card isn't a link (only the "Apply here" button
   is), so a hover affordance on the whole card misleads users into clicking it. */
.job-card-body{display:flex;flex-direction:column;gap:var(--sp-8)}
.job-card h3{font-size:1.25rem;margin:0;color:var(--primary--black,#202020)}
.job-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.875rem;color:var(--text-secondary,#5a5a62)}
.job-meta-dot{color:var(--text-secondary,#5a5a62);opacity:.6}
.job-apply{
  align-self:flex-start;display:inline-flex;align-items:center;
  min-height:40px;padding:10px 22px;border-radius:999px;
  border:1px solid var(--primary--black,#202020);background:transparent;
  color:var(--primary--black,#202020);font-size:.875rem;font-weight:500;line-height:1;
  text-decoration:none;transition:background-color .2s ease,color .2s ease;
}
.job-apply:hover{background:var(--primary--black,#202020);color:var(--primary--off-white,#fffdf1)}
@media(max-width:640px){.job-grid{grid-template-columns:1fr}}

/* agent-features — "Resolve, don't just route" capability grid.
   Matches the base .card-capabilities: lavender card + outlined purple circle
   icon + Inter title + "Learn more" pill. Tokens from the scrape. */
.section-agent-features{padding:100px 0}
.agent-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-16);margin-top:var(--sp-48)}
.agent-feature{
  display:flex;flex-direction:column;gap:var(--sp-24);
  padding:var(--sp-24);border-radius:24px;
  background:#f8f2f7;border:1px solid rgba(76,34,25,.1);
}
.agent-feature-body{display:flex;flex-direction:column;gap:var(--sp-12);flex:1 1 auto}
/* Per-section accent. Defaults to the brand purple; a section (or any
   ancestor) carrying `.theme-orange` flips shared blocks to the coral accent
   used on the outbound page. Blocks read --block-accent / --block-accent-deep
   instead of hardcoding purple, so one flag re-themes them all. */
.theme-orange{
  --block-accent:var(--primary--primary-orange,#ff7355);
  --block-accent-deep:var(--primary--primary-orange,#ff7355);
}
.agent-feature-icon{
  display:inline-flex;width:40px;height:40px;flex:0 0 40px;
  align-items:center;justify-content:center;padding:8px;
  border-radius:50%;border:1px solid var(--block-accent-deep,var(--primary--deep-purple,#5600c7));
  background:transparent;color:var(--block-accent,var(--primary--electric-purple,#6f00ff));
}
.agent-feature-icon svg{width:100%;height:100%;display:block}
.agent-feature h3{
  font-family:var(--font-body,'Inter',sans-serif);font-weight:400;
  font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--primary--black,#202020);margin:0;
}
.agent-feature p{font-size:.9375rem;line-height:1.55;color:var(--text-secondary,#5a5a62);margin:0}
.agent-feature-link{
  align-self:flex-start;display:inline-flex;align-items:center;
  min-height:38px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--primary--black,#202020);background:transparent;
  color:var(--primary--black,#202020);font-size:.875rem;font-weight:500;line-height:1;
  text-decoration:none;transition:background-color .2s ease,color .2s ease;
}
.agent-feature-link:hover{background:var(--primary--black,#202020);color:var(--primary--off-white,#fffdf1)}
@media(max-width:1100px){.agent-features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.agent-features-grid{grid-template-columns:1fr}}
/* Purple-theme variant (solutions "Use Cases"): electric-purple section
   (reference .purple-degree-2) with white heading + an animated lines-system
   Rive bg. The CARDS stay light (cream #f8f2f7, purple-outline icon, dark
   text) — same as the default agent-features card, matching the reference. */
.section-agent-features.agent-features--purple{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--primary--electric-purple,#6f00ff);
  background-image:linear-gradient(250deg,#3c0584,transparent);
  color:#fff;
}
.agent-features--purple h2,.agent-features--purple .eyebrow{color:#fff}
.agent-features--purple .subhead{color:rgba(255,255,255,.85)}
.agent-features--purple .container{position:relative;z-index:1}
.agent-features-rive-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.agent-features-rive-bg .rive-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Photo card variant (about-us CX services): the card IS a photo, with a dark
   bottom gradient, copy overlaid at the base, and a small white badge top-left.
   Reference: the reference design. */
.agent-feature--photo{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:460px;justify-content:flex-end;
  padding:var(--sp-24);border:none;background:#111;
}
.agent-feature-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}
.agent-feature-photo-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,4,18,.92) 0%,rgba(8,4,18,.72) 30%,rgba(8,4,18,.18) 62%,rgba(8,4,18,.05) 100%);
}
.agent-feature-badge{
  position:absolute;top:var(--sp-24);left:var(--sp-24);z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  color:var(--primary--deep-purple,#5600c7);
}
.agent-feature-badge svg{width:20px;height:20px;display:block}
.agent-feature-badge i{font-size:20px;line-height:1}
.agent-feature--photo .agent-feature-body{position:relative;z-index:2;flex:0 0 auto}
.agent-feature--photo h3{color:#fff}
.agent-feature--photo p{color:rgba(255,255,255,.82)}

/* image-full */
.section-image-full{padding:0}
.image-full{margin:0}
.image-full img{width:100%;height:auto;display:block}
.image-full figcaption{padding:var(--sp-16) 0;text-align:center;font-size:.875rem;color:var(--text-secondary,#5a5a62)}

/* footer-cta — full-bleed purple-gradient band matching the base layout's
   `.purple-degree` (electric→deep purple with a light halo bottom-left).
   The old radial "blob" implementation has been replaced by this layered
   gradient background so the CTA reads as one continuous purple band
   rather than a floating shape on white. */
.section-footer-cta{position:relative;padding:162px 0;background:var(--primary--deep-purple,#5600c7);overflow:hidden;text-align:center;color:#fff}
.section-footer-cta .container{position:relative;z-index:1}
.section-footer-cta .cta-gradient-blob,
.section-footer-cta .cta-fade-overlay{display:none}
.section-footer-cta h2{color:#fff;max-width:920px;margin:0 auto var(--sp-24)}
.section-footer-cta .subhead{color:rgba(255,255,255,.86);max-width:520px;margin:0 auto var(--sp-40);font-size:1.125rem;line-height:1.5}
.section-footer-cta .footer-cta-stack{display:flex;flex-direction:column;align-items:center;gap:var(--sp-32)}
.section-footer-cta .cta-group{justify-content:center}
/* Contrast CTA against the purple band — invert primary button to white. */
.section-footer-cta .btn-primary{background:#fff;color:var(--primary--deep-purple,#5600c7);border-color:#fff}
.section-footer-cta .btn-primary:hover{background:rgba(255,255,255,.92)}
.section-footer-cta .btn-secondary{color:#fff;border-color:rgba(255,255,255,.6)}
.section-footer-cta .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media (max-width:900px){
  .section-footer-cta{padding:96px 0}
}

/* =========================================================================
   class-based block overrides
   -------------------------------------------------------------------------
   the base layout's original CSS places specific elements in grid cells via
   per-element `#w-node-<hash> { grid-area: … }` rules. Those hashes are
   page-specific, so we replicate the *effect* with generic selectors.
   ========================================================================= */

/* `.button.transparent` (second CTA in `.left-nav-buttons`) — the base layout's
   base has this styled on a dark nav, but we want it to read as a clear
   outlined pill on the blurred dark backdrop. */
.left-nav-buttons .button.transparent{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.left-nav-buttons .button.transparent:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);
}

/* Footer grid areas.
   the base layout's `.footergrid` is a 12-column grid whose children get specific
   `grid-area` values via per-element `#w-node-...` CSS rules that are
   page-specific hashes, so we replicate them here by child-position.
   Layout per reference inspection:
     row 1: [.column-footer × 4 (each span 2)] _ [.column-last span 3]
     row 2: [©-copy span 3] [.column-footer.hor span 3 at col 5] [.column-footer.sn at col 12]
   ─────────────────────────────────────────────────────────────── */
.footer .footergrid:not(._2) > .column-footer{grid-column:span 2}
.footer .footergrid:not(._2) > .column-last{grid-column:10 / 13}

.footer .footergrid._2 > *:nth-child(1){grid-column:span 3}
.footer .footergrid._2 > .column-footer.hor{grid-column:5 / 8}
.footer .footergrid._2 > .column-footer.sn{grid-column:12 / 13}

/* Keep a minimum legible column width so sub-labels (AI Agents / Workflows)
   and long links (Prescription Refill Automation) never stack one-char-
   per-line. the base layout's columns are ~216 px visible; our `span 2` of the
   12-column grid on a 1440-viewport resolves to the same. */
.footer .column-footer{min-width:0}
.footer .column-footer .subtle-2-f{
  margin-top:4px;margin-bottom:4px;
}
.footer .column-footer .links-wrapp + .links-wrapp{margin-top:16px}

/* the base layout's `.bg-button` (the purple gradient hover plate inside every
   `.button.w-inline-block`) is injected at `opacity: 0` by the base layout's JS
   runtime and animated to 1 on hover. We don't ship that runtime, so
   the plate stays always-visible, washing our black CTAs purple.
   Replicate the base state + hover reveal in CSS. */
.button.w-inline-block{position:relative;overflow:hidden}
.button.w-inline-block .bg-button{
  opacity:0;transition:opacity .25s ease;
}
.button.w-inline-block:hover .bg-button{opacity:1}
/* Keep `.button.purple-gradient` (our default purple primary) solid;
   there the gradient IS the intended surface, not a hover effect. */
.button.purple-gradient .bg-button{opacity:1}

/* =========================================================================
   Phase 2 — Semantic block styles
   -------------------------------------------------------------------------
   These blocks have been re-anchored off legacy class names and onto
   token-driven semantic classes, per docs/DESIGN-MIGRATION-PLAN.md
   and the C## component specs in docs/reference/COMPONENT-LIBRARY.md.
   When adding a new block here, list the spec it implements and the
   legacy classes it replaced — so the purge pipeline can drop those
   classes from base.css on the next run.
   ========================================================================= */

/* ── Hero — graphic background variant (C02c / C02d) ─────────────────────
   Used by: organization, use-case, workflow archetypes when a backgroundVisual
   is provided. Full-bleed image with a darkening gradient overlay; centered
   white headline + body copy over top.
   Replaces legacy classes: .section_100.hero-bound, .container-horizontal,
   .div-gap-24 (when .white), .max-52, .bg-img-cont, .bg-degree,
   .image_cover.solo-desktop. */
.hero.hero-graphic{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:100vh;padding:124px var(--sp-32) var(--sp-32);
  color:var(--primary--white);background-color:var(--primary--black);
}
/* Organization heroes are shorter in the reference (~738px) than the full-height
   solutions hero. */
.hero.hero-graphic--organization{min-height:738px}
.hero.hero-graphic .hero-graphic-inner{
  position:relative;z-index:2;
  display:flex;justify-content:center;width:100%;max-width:var(--max-w);
  margin:0 auto;
}
.hero.hero-graphic .hero-graphic-content{
  display:flex;flex-direction:column;gap:var(--sp-24);
  text-align:center;align-items:center;
  max-width:620px;margin:0 auto;
}
.hero.hero-graphic h1{
  font-family:var(--font-heading);font-weight:400;color:inherit;
  font-size:3rem;line-height:1.25;letter-spacing:-0.01em;margin:0;
}
.hero.hero-graphic .hero-graphic-subhead{
  color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto;
  font-size:1.125rem;line-height:1.5;
}
.hero-graphic-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.hero-graphic-bg-image{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
/* Purple-degree overlay image (reference degree-bg.png) layered over the
   photo, beneath the gradient scrim. */
.hero-graphic-bg-degree{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.hero-graphic-bg-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,0));
}
@media(max-width:767px){
  .hero.hero-graphic{min-height:100vh;padding:72px var(--sp-20) var(--sp-32)}
  .hero.hero-graphic h1{font-size:2.25rem}
  .hero.hero-graphic .hero-graphic-subhead{font-size:1rem}
}

/* ── Case Study Cards (C10) ──────────────────────────────────────────────
   Replaces legacy classes: .section_auto.no-pad-mob, .container_vertical,
   .div-gap-24.max-36, .collection-list-wrapper.space-24-54.w-dyn-list,
   .collection-list.w-dyn-items, .w-dyn-item, .card-study, .top-card,
   .bg-absolute, .image_cover, .logo-cont, .image_contain, .bot-card,
   .infi-card-blog, .button.line.w-button, .h3.h2-mob.black. */
.case-study-section{
  background:var(--primary--off-white);
  padding:var(--section-pad-xl) 0;
}
.case-study-container{
  max-width:var(--container);margin:0 auto;padding:0 var(--sp-32);
  display:flex;flex-direction:column;gap:var(--sp-56);align-items:center;
}
/* No `ch` cap on the heading container — 36ch (~363px) clamped the large H2 and
   wrapped short titles like "Impact at Health System Scale". The subhead keeps
   its own readable measure below. */
.case-study-heading{
  display:flex;flex-direction:column;gap:var(--sp-16);
  text-align:center;align-items:center;
}
/* Header-row variant (related-resources): heading left, "View All" right. */
.case-study-heading--row{
  flex-direction:row;justify-content:space-between;align-items:center;
  text-align:left;max-width:none;width:100%;gap:var(--sp-24);
}
.case-study-heading--row .case-study-heading-text{display:flex;flex-direction:column;gap:var(--sp-8)}
.case-study-viewall{
  flex:0 0 auto;display:inline-flex;align-items:center;
  background:var(--primary--black,#202020);color:#fff;text-decoration:none;
  font-size:.9375rem;font-weight:500;padding:12px 24px;border-radius:999px;transition:opacity .15s ease;
}
.case-study-viewall:hover{opacity:.85}
.case-study-heading h3,
.case-study-heading h2{
  font-family:var(--font-heading);font-weight:400;color:var(--primary--black);
  font-size:2.25rem;line-height:1.2;letter-spacing:-0.012em;margin:0;
}
.case-study-heading p{
  color:var(--text-secondary);margin:0;max-width:52ch;
}
.case-study-grid{
  display:grid;gap:var(--sp-20);width:100%;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
@media(max-width:991px){
  .case-study-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:599px){
  .case-study-grid{grid-template-columns:1fr}
}
.case-study-card{
  display:grid;grid-template-rows:216px auto;
  border:1px solid var(--opacity-b--black-8);
  background:var(--primary--off-white);
  border-radius:var(--radius-xl);overflow:hidden;
  color:inherit;text-decoration:none;height:100%;
  transition:box-shadow .25s ease, transform .25s ease;
}
.case-study-card:hover{
  box-shadow:var(--shadow-lg);transform:translateY(-2px);
}
.case-study-card-top{
  position:relative;background:var(--primary--light-purple);
  padding:var(--sp-32) var(--sp-20);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.case-study-card-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.case-study-card-logo{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary--off-white);border-radius:var(--radius-sm);
  width:100%;max-width:240px;
  min-height:96px;
  padding:var(--sp-16) var(--sp-24);
}
.case-study-card-logo img{
  display:block;
  width:100%;max-width:100%;height:auto;max-height:56px;
  object-fit:contain;
}
.case-study-card-logo img[data-invert="1"]{filter:brightness(0)}
.case-study-card-body{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--sp-24);padding:var(--sp-24);
}
.case-study-card-text{
  display:flex;flex-direction:column;gap:var(--sp-12);
}
.case-study-card-text h6{
  color:var(--primary--black);text-transform:none;
  font-size:1.125rem;font-weight:500;line-height:1.3;letter-spacing:-0.005em;
  margin:0;
}
.case-study-card-text p{
  color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin:0;
}
.case-study-card-link{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:var(--sp-8);
  padding:var(--sp-10) var(--sp-20);
  border:1px solid var(--primary--black);border-radius:var(--radius-btn);
  background:transparent;color:var(--primary--black);
  font-family:var(--font-button);font-size:.875rem;font-weight:400;
  min-height:38px;transition:background .2s ease, color .2s ease;
}
.case-study-card-link:hover{
  background:var(--primary--black);color:var(--primary--off-white);
}

/* ── CTA Banner (C14) ────────────────────────────────────────────────────
   Replaces legacy classes: .section_auto.pad-162, .bg-absolute > .purple-degree,
   .div-gap-24.white, .max-52, .button.white-black.w-inline-block,
   .cont-button. */
.cta-banner{
  position:relative;overflow:hidden;isolation:isolate;
  /* Base = reference CTABanner: deep-purple + a bottom-left electric glow and a
     bright white→lavender bloom bottom-right (the bloom is what makes it pop). */
  background-color:var(--primary--deep-purple);
  background-image:
    radial-gradient(circle at 0% 70%, var(--primary--electric-purple), transparent 29%),
    radial-gradient(circle farthest-side at 100% 90%, rgba(255,255,255,.75), var(--primary--light-purple) 15%, transparent 47%);
  /* +50px top / +50px bottom over the prior 100/138 — the band read too skinny. */
  padding:150px var(--sp-32) 188px;
  color:var(--primary--white);
}
/* Soft top fade: the cream/off-white of the section above bleeds down into the
   purple for a gentle seam (replaces the old hard purple gradient). Sits above
   the bg layers, below the content. */
.cta-banner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:140px;z-index:0;
  background:linear-gradient(180deg,var(--primary--off-white,#fffdf1) 0%,transparent 100%);
  opacity:.5;pointer-events:none;
}
.cta-banner-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.cta-banner-bg canvas.rive-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  /* Reference dims the Rive lines to 50% ("to match live site") so they read
     as a subtle texture, not a bright pattern. */
  opacity:.5;
}
/* Purple overlay sitting above the Rive lines, below content (reference: opacity .6). */
.cta-banner-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--primary--electric-purple), transparent 40%),
    radial-gradient(circle farthest-side at 20% 160%, var(--primary--light-purple), transparent 76%);
  opacity:.6;
}
.cta-banner-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-24);
  max-width:60ch;margin:0 auto;text-align:center;
}
.cta-banner-content h2,
.cta-banner-content h3{
  font-family:var(--font-heading);font-weight:400;color:inherit;
  font-size:2.5rem;line-height:1.15;letter-spacing:-0.012em;margin:0;
}
.cta-banner-content p{
  color:rgba(255,255,255,.75);max-width:52ch;margin:0;
  font-size:1rem;line-height:1.5;
}
.cta-banner-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:138px;min-height:44px;margin-top:var(--sp-8);
  padding:var(--sp-12) var(--sp-24);
  background:var(--primary--white);color:var(--primary--black);
  /* Full pill to match the nav "Try our demo"/"Meet with us" CTAs and the rest
     of the site's primary buttons (was --radius-btn / 16px, which read as a
     rounded rectangle next to the site's pill buttons). */
  border:1px solid transparent;border-radius:var(--radius-pill);
  font-family:var(--font-button);font-size:.9375rem;font-weight:500;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.cta-banner-button:hover{
  background:var(--primary--black);color:var(--primary--white);
  border-color:var(--primary--deep-purple);
}
@media(max-width:767px){
  .cta-banner{padding:var(--sp-64) var(--sp-20) var(--sp-80)}
  .cta-banner-content h2,
  .cta-banner-content h3{font-size:1.875rem}
}

/* ── Feature Pillars (C04 — split layout) ───────────────────────────────
   Replaces legacy classes: .section_100.auto--pad80, .div-gap-24.max-42,
   .text-18, .in-out-section._4-invert, .section-modulles.pad-32,
   .module-scroll, .rich-module.orga-14.w-richtext, .line-hor,
   .right-media.no-pad, .image_cover, .bg-degree.purple, .h3.h2-mob.black. */
.feature-pillars{
  background:var(--primary--off-white);
  padding:var(--section-pad-md) 0;
  /* Match the standard section width (.container: --max-w + 40px gutters) so
     this section lines up with the rest of the page, not the narrower 1232px. */
  max-width:var(--max-w);margin:0 auto;
  padding-left:40px;padding-right:40px;
  display:flex;flex-direction:column;gap:var(--sp-48);
}
/* The container is NOT width-capped: a `ch` cap is sized to the body font, but
   the H2 renders much larger, so a "52ch" box (~525px) is far narrower than the
   heading and forced short titles to wrap at desktop. Let the heading use the
   full section width and wrap only when it genuinely needs to; the subhead keeps
   its own readable measure below. */
.feature-pillars-heading{
  display:flex;flex-direction:column;gap:var(--sp-16);
  margin:0 auto;text-align:center;align-items:center;
}
/* `heading-left`: left-align the heading band (about-us "We believe..."). */
.feature-pillars-heading--left{
  margin:0;text-align:left;align-items:flex-start;
}
.feature-pillars-heading .feature-pillars-subhead{
  color:var(--text-secondary);font-size:1.125rem;margin:0;max-width:52ch;
}
.feature-pillars-heading h2{
  font-family:var(--font-heading);font-weight:400;color:var(--primary--black);
  font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-0.012em;margin:0;
}
.feature-pillar-eyebrow{
  color:var(--text-secondary);font-size:.875rem;font-weight:400;margin:0;
}
.feature-pillars-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);
  align-items:stretch;width:100%;
}
/* Visual panel on the left, pillar list on the right (workflow layout). */
.feature-pillars-layout--media-left .feature-pillars-media{order:-1}
.feature-pillars-layout--media-left .feature-pillars-list{padding:var(--sp-32) 0 var(--sp-32) var(--sp-48)}
.feature-pillars-list{
  background:transparent;
  border:none;
  border-radius:0;
  padding:var(--sp-32) var(--sp-48) var(--sp-32) 0;
  display:flex;flex-direction:column;gap:var(--sp-32);
}
.feature-pillar{
  display:flex;flex-direction:column;gap:var(--sp-12);color:var(--primary--black);
}
.feature-pillar h5{
  font-family:var(--font-heading);font-weight:400;
  font-size:1.5rem;line-height:1.25;letter-spacing:-0.008em;margin:0;
}
.feature-pillar p{color:var(--text-secondary);margin:0;font-size:1rem;line-height:1.55}
.feature-pillar-divider{
  height:1px;background:var(--opacity-b--black-8,rgba(32,32,32,.08));width:100%;
}
.feature-pillars-media{
  position:relative;border-radius:var(--radius-2xl);overflow:hidden;
  min-height:520px;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-48);
  /* Deep-purple panel (reference) — the UI graphic floats inside it, contained. */
  background:linear-gradient(160deg,#5600c7 0%,#3a0a8c 100%);
}
.feature-pillars-media-image{
  position:relative;z-index:1;width:100%;height:100%;max-height:100%;
  object-fit:contain;display:block;
}
/* Inset variant: a smaller mockup floating centered on the panel with padding
   around it (reference: demo "Value" chat mockup), instead of filling
   the panel edge-to-edge. */
.feature-pillars-media--inset .feature-pillars-media-image{
  width:auto;height:auto;max-width:62%;max-height:82%;margin:0 auto;
}
.feature-pillars-media-overlay{display:none}
/* Collage plate (about-us "We believe"): one large photo + two stacked beside
   it, all rounded, filling the purple panel. Reference: the reference design
   /about-us. */
.feature-pillars-collage{
  position:relative;z-index:1;display:flex;gap:var(--sp-16);
  width:100%;height:100%;min-height:440px;align-items:stretch;
}
.feature-pillars-collage-main{flex:1 1 62%;min-width:0;border-radius:18px;overflow:hidden}
.feature-pillars-collage-stack{
  flex:1 1 38%;min-width:0;display:flex;flex-direction:column;gap:var(--sp-16);
}
.feature-pillars-collage-cell{flex:1 1 0;min-height:0;border-radius:18px;overflow:hidden}
.feature-pillars-collage img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){
  .feature-pillars-collage{flex-direction:column}
  .feature-pillars-collage-stack{flex-direction:row}
}
/* Background-photo variant (reference: .media-center .image_contain over
   .bg-absolute.purple .image_cover) — e.g. Rx stat-card panel floating over a
   nurse photo. the base layout uses a SOLID purple panel with the photo cover-filling
   on top (no tint film), and the stat-card panel pinned bottom-left. The taller
   panel (matching the reference's ~3:4 portrait crop) shows more of the scene. */
.feature-pillars-media--bg-photo{
  padding:0;min-height:600px;align-items:flex-end;justify-content:flex-end;
  background:var(--primary--electric-purple,#6f00ff);
}
.feature-pillars-media--bg-photo .feature-pillars-media-bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;display:block;
}
/* No tint film over the photo — the base layout shows the photo at full opacity. */
.feature-pillars-media--bg-photo .feature-pillars-media-overlay{display:none}
/* Stat-card panel: contained, pinned to the lower-right over the photo. */
.feature-pillars-media--bg-photo .feature-pillars-media-image{
  position:relative;z-index:2;width:auto;height:auto;
  max-width:45%;max-height:62%;object-fit:contain;
  margin:0 var(--sp-40) var(--sp-40) 0;
}
/* bg-photo + inset (workflow pillar, reference: workflows/appointment-scheduling
   Figma): a full-bleed textured background with the UI panel floated SMALLER and
   CENTERED both axes (vs the default bottom-right pin), leaving ~100px gutters
   left/right. Used when the panel is a standalone mock over a lines-texture bg. */
.feature-pillars-media--bg-photo.feature-pillars-media--inset{
  align-items:center;justify-content:center;padding:var(--sp-48);
}
.feature-pillars-media--bg-photo.feature-pillars-media--inset .feature-pillars-media-image{
  width:auto;height:auto;max-width:78%;max-height:84%;margin:auto;
}
/* Cover variant (org pages): photo fills the panel edge-to-edge with a
   purple-degree overlay (reference .right-media.no-pad + .bg-degree.purple). */
.feature-pillars-media--cover{padding:0}
.feature-pillars-media--cover .feature-pillars-media-image{position:absolute;inset:0;object-fit:cover}
.feature-pillars-media--cover .feature-pillars-media-overlay{
  display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(45deg,rgba(111,0,255,.25),transparent 54%),linear-gradient(0deg,rgba(32,32,32,.55),transparent 70%);
}
@media(max-width:991px){
  .feature-pillars-layout{grid-template-columns:1fr}
  .feature-pillars-list{padding:var(--sp-48) var(--sp-32)}
  .feature-pillars-media{min-height:340px}
}
@media(max-width:599px){
  .feature-pillars{padding:var(--sp-64) var(--sp-20)}
  .feature-pillars-list{padding:var(--sp-32) var(--sp-24);gap:var(--sp-24)}
  .feature-pillar h5{font-size:1.25rem}
}

/* ── Feature Showcase (scroll-pinned product tour) ──────────────────────
   Tall section; its inner two-panel card sticks while the user scrolls.
   feature-showcase.js writes data-active (-1..N) on the section; CSS keys
   off it to crossfade the left Rive plate and cumulatively reveal the
   right-hand cards. Ref: temp FeatureShowcase.tsx. */
.feature-showcase{
  position:relative;
  height:var(--showcase-height,460vh);
  background:linear-gradient(180deg,#5600c7 0%,#7b2fe0 50%,#5600c7 100%);
}
/* Orange variant (outbound) — matches the reference .section-sticky.square-cont.orange. */
.feature-showcase.theme-orange{
  background:linear-gradient(180deg,var(--primary--primary-orange,#ff7355),#ffb592);
}
.showcase-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;overflow:hidden;
  padding:var(--sp-24) 0;
}
.showcase-frame{
  max-width:var(--container);margin:0 auto;width:100%;
  padding:0 var(--sp-24);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:var(--sp-12);
  height:calc(100vh - 64px);max-height:760px;
}
/* Left plate: photo bg + stacked Rive canvases */
.showcase-visuals{
  position:relative;border-radius:32px;overflow:hidden;height:100%;min-height:0;
  background-size:cover;background-position:center;
}
.showcase-visuals-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,0,0,.2),transparent 45%);
}
.showcase-visual{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity 1s ease;pointer-events:none;
}
.showcase-visual-inner{position:relative;width:80%;height:75%}
.showcase-visual-inner .rive-canvas{width:100%;height:100%;display:block}
/* Right panel: cream surface with cumulative text cards */
.showcase-panel{
  display:flex;flex-direction:column;justify-content:center;height:100%;min-height:0;
  overflow:hidden;border-radius:32px;background:#f5f3f0;
  padding:var(--sp-48) var(--sp-48);
}
.showcase-card{
  transition:opacity 1s ease,transform 1s ease;
  opacity:0;transform:translateY(32px);
  padding:var(--sp-12) 0;
}
.showcase-panel>.showcase-card-tagline{margin-bottom:var(--sp-12);flex:0 0 auto}
.showcase-panel>.showcase-card:first-of-type{padding-top:0}
.showcase-panel>.showcase-card:last-of-type{padding-bottom:0}
.showcase-card-tagline{font-size:.875rem;color:rgba(0,0,0,.4);display:block}
.showcase-card-eyebrow{margin-top:var(--sp-8);font-size:.875rem;font-weight:600;color:var(--block-accent,var(--primary--electric-purple))}
.showcase-card-title{
  margin:var(--sp-4) 0 0;font-family:var(--font-serif,'STIX Two Text',serif);font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.875rem);line-height:1.15;letter-spacing:-.01em;color:var(--primary--black);
}
.showcase-card-copy{margin:var(--sp-8) 0 0;max-width:32rem;font-size:.85rem;line-height:1.5;color:rgba(0,0,0,.6)}
.showcase-card-divider{height:1px;background:rgba(0,0,0,.08);margin-top:var(--sp-16)}
/* Active-state reveal: every card up to and incl. the active index shows */
.feature-showcase[data-active="0"] .showcase-card[data-index="0"],
.feature-showcase[data-active="1"] .showcase-card[data-index="0"],
.feature-showcase[data-active="1"] .showcase-card[data-index="1"],
.feature-showcase[data-active="2"] .showcase-card[data-index="0"],
.feature-showcase[data-active="2"] .showcase-card[data-index="1"],
.feature-showcase[data-active="2"] .showcase-card[data-index="2"]{
  opacity:1;transform:translateY(0);
}
.feature-showcase[data-active="0"] .showcase-visual[data-index="0"],
.feature-showcase[data-active="1"] .showcase-visual[data-index="1"],
.feature-showcase[data-active="2"] .showcase-visual[data-index="2"]{
  opacity:1;
}
/* Mobile: static stacked cards (hidden on desktop) */
.showcase-mobile{display:none}
@media(max-width:991px){
  .feature-showcase{height:auto;background:linear-gradient(180deg,#5600c7 0%,#7b2fe0 50%,#5600c7 100%)}
  .feature-showcase.theme-orange{background:linear-gradient(180deg,#ff7355,#ffb592)}
  .showcase-sticky{display:none}
  .showcase-mobile{
    display:flex;flex-direction:column;gap:var(--sp-16);
    max-width:var(--container);margin:0 auto;
    padding:var(--sp-48) var(--sp-24);
  }
  .showcase-mobile-card{overflow:hidden;border-radius:24px;background:#f5f3f0}
  .showcase-mobile-visual{position:relative;height:280px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
  .showcase-mobile-visual .rive-canvas{width:100%;height:100%;display:block}
  .showcase-mobile-text{padding:var(--sp-24)}
  .showcase-mobile-text .showcase-card-tagline{padding-top:0}
}

/* ── Stats Row (C06 — metrics bar, light surface) ───────────────────────
   Replaces legacy classes: .section_auto.pad-110-200, .container_vertical,
   .div-gap-24.max-52, .h2.black, .max-36, .grid-3c.hap-48-mpbile,
   .workflow-card, .info-workf, .count-up, .button.space-16. */
.stats-row{
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255, 210, 185, .45), transparent 72%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255, 196, 170, .35), transparent 72%),
    var(--primary--off-white);
  padding:var(--section-pad-lg) 0;
  position:relative;
  overflow:hidden;
}
/* Rive-background variant (bg-02-vertical2026 wash + white mask).
   Replaces the default orange gradient with the animated lavender bg. */
.stats-row.has-rive-bg{background:var(--primary--off-white);padding-bottom:150px}
.stats-row-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.stats-row-bg .rive-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stats-row-bg-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--primary--off-white) 0%,
    rgba(255,253,241,.35) 28%,
    rgba(255,253,241,.35) 72%,
    var(--primary--off-white) 100%);
}
.stats-row-container{
  position:relative;z-index:1;
  max-width:var(--container);margin:0 auto;padding:0 var(--sp-32);
  display:flex;flex-direction:column;gap:var(--sp-64);align-items:center;
}
/* No `ch` cap on the heading container (it clamped the large H2 and wrapped
   short titles). The subhead keeps its own readable max-width below. */
.stats-row-heading{
  display:flex;flex-direction:column;gap:var(--sp-16);
  align-items:center;text-align:center;
}
.stats-row-heading h2{
  font-family:var(--font-heading);font-weight:400;color:var(--primary--black);
  font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-0.012em;margin:0;
}
.stats-row-subhead{
  color:var(--text-secondary);margin:0;font-size:1.0625rem;line-height:1.5;max-width:48ch;
}
.stats-row-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-12) var(--sp-28, 28px);
  background:var(--primary--black);color:var(--primary--off-white);
  border-radius:var(--radius-pill);font-size:.9375rem;font-weight:500;
  text-decoration:none;
  transition:background .25s ease,transform .25s ease;
  margin-top:var(--sp-8);
}
.stats-row-cta:hover{
  background:var(--primary--deep-purple);
  transform:translateY(-1px);
}
.stats-row-grid{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-24);width:100%;
}
.stats-row-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-12);
}
.stats-row-value{
  font-family:var(--font-heading);font-weight:400;color:var(--primary--black);
  font-size:clamp(3.5rem,7.2vw,6rem);line-height:1;letter-spacing:-.02em;
}
.stats-row-label{
  color:var(--gray--gray-6);margin:0;max-width:36ch;font-size:.9375rem;line-height:1.5;
}
@media(max-width:991px){
  .stats-row-grid{grid-template-columns:1fr;gap:var(--sp-40)}
}
@media(max-width:599px){
  .stats-row{padding:var(--sp-64) 0}
  .stats-row-container{padding:0 var(--sp-20);gap:var(--sp-40)}
}

/* ── Scroll reveal (Phase 3 runtime) ───────────────────────────────────
   Any element marked `data-reveal` fades + slides up once it enters the
   viewport. `scripts/runtime/scroll-reveal.js` toggles `.in-view`. No-JS
   fallback: elements render fully visible after a short timeout via the
   `prefers-reduced-motion` CSS path below. */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-reveal].in-view{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}
/* Fail-safe: if JS never runs (or runtime is blocked) after 3s, still show
   the content. Uses a simple one-shot animation that sets the final
   values. Note: if `.in-view` is added by JS first it wins because it
   comes later in the cascade and re-triggers transitions. */
@keyframes actium-reveal-fallback { to { opacity: 1; transform: none; } }
[data-reveal]{animation:actium-reveal-fallback 0s linear 3s forwards}

/* ── Lottie inline player (Phase 3 runtime) ───────────────────────────── */
.lottie-player{display:block;width:100%;height:100%;position:relative}
.lottie-player:not([data-lottie-loaded="true"]){
  background:rgba(255,255,255,.04);border-radius:var(--radius-lg,20px);
}

/* ── Native ROI calculator (matches Elfsight layout, our tokens) ── */
.section-roi-calc{padding:var(--section-pad-lg) 0;background:var(--primary--off-white,#fffdf1)}
.roi-calc-head{max-width:680px;margin-bottom:var(--sp-48)}
.roi-calc-head h2{font-family:var(--font-heading);font-weight:400;font-size:2rem;line-height:1.15;margin:0 0 var(--sp-12);color:var(--primary--black,#202020)}
.roi-calc-head p{margin:0;color:var(--text-secondary,#5a5a62);font-size:1.0625rem;line-height:1.55}
.roi-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-48);align-items:start}
/* Inputs */
.roi-field{margin-bottom:var(--sp-32)}
.roi-field-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-12)}
.roi-field-label{font-weight:600;font-size:.9375rem;color:var(--primary--black,#202020)}
.roi-field-value{font-size:.9375rem;color:var(--primary--black,#202020);background:var(--bg-cream,#f7f1e6);border-radius:8px;padding:6px 14px;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.roi-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary--electric-purple,#6f00ff) var(--roi-fill,50%),rgba(26,19,37,.12) var(--roi-fill,50%));outline:none;cursor:pointer}
.roi-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--primary--electric-purple,#6f00ff);box-shadow:0 2px 6px rgba(26,19,37,.2);cursor:pointer}
.roi-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--primary--electric-purple,#6f00ff);cursor:pointer}
.roi-field-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary,#5a5a62);margin-top:6px}
.roi-assumptions{margin-top:var(--sp-40);padding-top:var(--sp-24);border-top:1px solid var(--border,rgba(26,19,37,.12))}
/* Heading family (STIX serif, inherited) to match the page's other headings —
   it was the only sans heading, which read as an extra font. */
.roi-assumptions h3{font-weight:400;font-size:1.125rem;margin:0 0 var(--sp-8)}
.roi-assumptions-note{font-size:.8125rem;font-weight:400;color:var(--text-secondary,#5a5a62);margin:0 0 var(--sp-12)}
.roi-assumptions ul{margin:0;padding-left:var(--sp-20);list-style:disc}
.roi-assumptions li{font-size:.875rem;line-height:1.55;color:var(--text-secondary,#5a5a62);margin-bottom:var(--sp-8)}
.roi-assumptions li strong{color:var(--primary--black,#202020);font-weight:600}
/* Results panel (dark) */
.roi-results{background:var(--primary--deep-purple,#5600c7);color:#fff;border-radius:24px;padding:var(--sp-40)}
.roi-results-eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.roi-results-total{display:block;font-family:var(--font-heading);font-weight:400;font-size:3rem;line-height:1.05;margin:var(--sp-4) 0 var(--sp-8)}
.roi-results-sub{margin:0 0 var(--sp-24);font-size:.875rem;color:rgba(255,255,255,.75)}
.roi-result-block{padding:var(--sp-20) 0;border-top:1px solid rgba(255,255,255,.16)}
.roi-result-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-16);font-weight:600;margin-bottom:var(--sp-12)}
.roi-result-big{font-family:var(--font-heading);font-weight:400;font-size:1.5rem;white-space:nowrap}
.roi-result-line{display:flex;justify-content:space-between;gap:var(--sp-16);font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:6px;font-variant-numeric:tabular-nums}
.roi-results-cta{margin-top:var(--sp-24);padding-top:var(--sp-24);border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start}
.roi-results-cta-title{font-weight:600;font-size:1.0625rem}
@media(max-width:860px){.roi-calc-grid{grid-template-columns:1fr;gap:var(--sp-32)}}

/* ── video-demos (recorded AI-agent demos, /demos) ── */
.section-video-demos{padding:var(--section-pad-md) 0}
.section-video-demos .container{display:flex;flex-direction:column;gap:var(--sp-64)}
.demo-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-48);align-items:center}
.demo-row--reverse .demo-text{order:2}
.demo-row--reverse .demo-video{order:1}
.demo-text h2{font-family:var(--font-heading);font-weight:400;font-size:2rem;line-height:1.15;margin:0 0 var(--sp-16);color:var(--primary--black,#202020)}
.demo-text p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--text-secondary,#5a5a62)}
.demo-video-frame{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;background:var(--bg-cream,#f7f1e6);box-shadow:0 16px 40px rgba(26,19,37,.12)}
.demo-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:860px){
  .demo-row{grid-template-columns:1fr;gap:var(--sp-24)}
  .demo-row--reverse .demo-text{order:1}
  .demo-row--reverse .demo-video{order:2}
  .demo-text h2{font-size:1.625rem}
}

/* ── contact (two-column: text left, form card right, over bg-02 animation) ── */
.section-contact{text-align:left;min-height:auto;padding:var(--section-pad-lg) 0;align-items:center;display:flex}
.section-contact .contact-split{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64);align-items:center}
/* This is a left-aligned two-column layout (text left, form right). Override the
   inherited `.hero.hero-resources{text-align:center}` so the heading + subhead
   align left together — the centered inherit left the full-width H1 and the
   narrower (46ch) subhead box looking mismatched. */
.section-contact .contact-split-text{text-align:left}
.contact-split-text h1{margin:0 0 var(--sp-20);font-size:clamp(2rem,3.5vw,3rem);line-height:1.1;text-align:left}
.contact-split-sub{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--text-secondary,#5a5a62);max-width:46ch;text-align:left}
.contact-card{background:var(--primary--off-white,#fffdf1);border-radius:24px;padding:var(--sp-40);box-shadow:0 24px 60px rgba(26,19,37,.12)}
.contact-card-title{font-family:var(--font-heading);font-weight:400;font-size:1.75rem;margin:0 0 var(--sp-24);color:var(--primary--black,#202020)}
/* HubSpot embed inherits container width */
.contact-card .hs-form-frame,.contact-card form{width:100%}
/* The HubSpot form loads asynchronously into an initially-empty .hs-form-frame,
   so the card collapses to just its title then jumps to full height once the
   form renders (a slow load looks like a frozen, empty card). Reserve the
   form's rendered desktop height up front so the layout is stable from first
   paint and the form just fills in. Measured ~886px at desktop; 890px leaves a
   hair of slack. Desktop-only (min-width:861px) — below that the form stacks
   taller and a reserved desktop height would leave a gap. */
@media(min-width:861px){
  .contact-card .hs-form-frame{display:block;min-height:890px}
}
@media(max-width:860px){
  .section-contact .contact-split{grid-template-columns:1fr;gap:var(--sp-32)}
  .contact-card{padding:var(--sp-28,28px)}
}

.feature-pillars-cta{margin-top:var(--sp-24)}

/* ── accolade-grid: award badges with captions (why-actiumhealth) ── */
.section-accolades { padding: 80px 0; background: #fff; }
.accolade-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin-top: 40px; }
.accolade-img { width: 100%; max-width: 180px; border-radius: 12px; display: block; }
.accolade-title { font-size: 16px; font-weight: 600; margin: 14px 0 6px; }
.accolade-copy { font-size: 13px; line-height: 1.45; color: #5b5b6b; margin: 0; }
@media (max-width: 991px) { .accolade-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .accolade-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ── comparison-chart: ActiumHealth vs. Other Solutions (why-actiumhealth) ── */
.section-comparison { padding: 80px 0; background: #fff; }
.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.comparison-card { background: #fbfaf7; border: 1px solid #ebe8e0; border-radius: 16px; padding: 24px; }
.comparison-tile { display: flex; align-items: center; justify-content: center; height: 170px; border-radius: 12px; font-size: 64px; color: #3b3580; margin-bottom: 20px; }
.comparison-tile--lavender { background: #efecfd; }
.comparison-tile--green { background: #e7f2ec; }
.comparison-tile--cream { background: #fdf3e7; }
.comparison-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.comparison-desc { font-size: 15px; line-height: 1.5; color: #5b5b6b; margin: 0 0 18px; }
.comparison-sub { border-top: 1px solid #ebe8e0; padding-top: 16px; margin-top: 16px; }
.comparison-sub h4 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.comparison-examples { list-style: none; margin: 0; padding: 0; }
.comparison-example { font-size: 15px; color: #5b5b6b; padding: 4px 10px; }
.comparison-example--actium { display: inline-block; background: #efecfd; border-radius: 8px; color: #3b3580; font-weight: 600; }
.comparison-advantage { font-size: 14px; line-height: 1.55; color: #5b5b6b; margin: 0; }
@media (max-width: 991px) { .comparison-grid { grid-template-columns: 1fr; } }

/* ── feature-pillars: title-left + media tints (why-actiumhealth reasons) ── */
.feature-pillars-title-left{
  font-family:var(--font-heading);font-weight:400;color:var(--primary--black);
  font-size:clamp(2rem,3.5vw,2.75rem);line-height:1.15;letter-spacing:-0.012em;margin:0 0 12px;
}
.feature-pillars-media--coral{background:linear-gradient(160deg,#ffb592 0%,#ff7355 100%)}
.feature-pillars-media--dark{background:linear-gradient(160deg,#370186 0%,#13161a 100%)}

/* ───────────────────────── Mobile / battery perf ─────────────────────────
   Animations were pinning idle CPU near 100% on phones and burning 15–38% CPU
   even when the tab was backgrounded. Three guards, in cascade order:

   1) Backgrounded-tab freeze (ALL devices): rive.js sets [data-rive-hidden] on
      <html> on visibilitychange; we pause every CSS animation in lockstep so
      decorative loops (orbit pills, pulses, marquees) stop costing battery when
      the page isn't even visible. Rive canvases are paused by the JS itself. */
html[data-rive-hidden] *,
html[data-rive-hidden] *::before,
html[data-rive-hidden] *::after{
  animation-play-state:paused !important;
}

/* 2) Reduced-motion (ALL devices): a blanket stop for genuinely AMBIENT loops
   (pulse rings, marquees) on top of the per-component reduced-motion blocks
   above. NOTE: hero-orbit pills are deliberately NOT listed here — they are the
   primary hero ANIMATION on use-case pages, not ambient polish, and the orbit
   component handles its own reduced-motion resting frame. Freezing them here
   left the hero stuck. */
@media (prefers-reduced-motion: reduce){
  .receptionist-playring--lg,
  .receptionist-playring--md,
  [class*="marquee"]{
    animation:none !important;
  }
}

/* 3) Mobile reduction (PHONES ONLY, ≤767px): stop only the truly AMBIENT
   infinite loops that run continuously as background polish — pulsing play
   rings and sweeping marquees. These have no informational value, so on phones
   we trade them for battery. Hero animations (orbit pills, Rive heroes, convo
   stacks) keep running — they ARE the content. Desktop keeps full motion. */
@media (max-width:767px){
  .receptionist-playring--lg,
  .receptionist-playring--md{animation:none !important}
}