/* Spira marketing site — single stylesheet, no build step. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
}

:root {
  --ink: #131025;          /* headings, dark sections */
  --text: #4a4660;         /* body copy */
  --muted: #6b6580;
  --line: #e3e3ea;
  --bg: #ffffff;
  --tint: #f6f5ff;
  --accent: #918ffe;       /* brand lavender (decorative only) */
  --accent-strong: #5652d8; /* passes contrast with white text */
  --accent-soft: #ecebff;
  --muted-2: #8e89a6;      /* inactive tab titles */
  --line-soft: #e6e4f0;
  --page: #f9f8fd;         /* light lavender-white below the hero */
  --ink-deep: #131025;     /* dark closing card, from the old site */
  --lav-grad: linear-gradient(135deg, #a8a6ff 0%, #918ffe 48%, #7c79f2 100%); /* brand lavender fill */
  --radius: 18px;
  --shadow: 0 10px 30px rgba(19, 16, 37, 0.08);
  --max: 1160px;
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* small titles and badges, as on the old site */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 { color: var(--ink); font-weight: 500; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-strong); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: #fff;
  border: 1px solid var(--accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow-dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #c9c7ff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 1rem var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent-strong); color: #fff; }
.btn-primary:hover { background: #4642c4; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-outline { min-height: 40px; padding: 0 18px; color: var(--ink); border-color: var(--line); background: #fff; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Header: one floating glass pill that never leaves. Its height and position never change, only its width.
   - Over the hero: wide, with the full Spira logo, Home / Company and Schedule a demo.
   - From the product sections on (body.past-hero): the word "Spira" softly fades and drifts away while
     the bar eases narrower; the icon never moves or resizes (it's a separate layer).
   - In the product sections (body.in-sections): Home / Company slide out, the section names slide in,
     and the demo button tucks away. JS measures each label set so the width eases between them. */
/* One easing curve and duration for every part of the menu so it moves as one piece */
:root { --nav-ease: cubic-bezier(.32, .72, 0, 1); --nav-dur: .7s; --hero-extra: 136px; }
.site-header {
  position: fixed; z-index: 50; top: 22px; left: 0; right: 0;
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
}
.nav {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 0;
  height: 64px; padding: 0 9px 0 22px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(237, 237, 237, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: box-shadow .4s, background-color .3s;
}
.site-header.is-scrolled .nav {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px -10px rgba(19, 16, 37, 0.15);
}

/* Logo: the icon and the word "Spira" are two layers drawn on the same canvas, so they line up exactly.
   The word fades, blurs and drifts left (quickly, before the bar has narrowed much); on the way back
   it waits for the bar to open up before fading in. No clipping, so no hard edge sweeps across it.
   Over the hero the extra right margin balances the wider demo button, so Home / Company sit dead centre. */
.nav-logo {
  position: relative; display: block; flex: none; width: 98px; height: 34px; margin-right: 82px;
  transition: width var(--nav-dur) var(--nav-ease), margin var(--nav-dur) var(--nav-ease);
}
.nav-logo img { position: absolute; left: 0; top: 0; width: 98px; max-width: none; height: 34px; }
.logo-words {
  transform-origin: 32% 50%;
  transition: opacity .4s ease .22s, filter .5s ease .18s, transform .7s var(--nav-ease) .1s;
}
.past-hero .nav-logo { width: 31px; margin-right: 18px; }
.past-hero .logo-words {
  opacity: 0; filter: blur(6px); transform: translateX(-12px) scale(.96);
  transition: opacity .22s ease, filter .3s ease, transform .5s var(--nav-ease);
}

/* Label slot */
.nav-stage { position: relative; height: 44px; flex: none; }
.nav-group { display: flex; align-items: center; height: 100%; white-space: nowrap; }
.nav-links a {
  display: block; padding: 10px 14px; border-radius: 999px;
  color: #303030; text-decoration: none;
  font-size: 14.5px; line-height: 24px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }
.section-links { position: relative; gap: 2px; }
.section-links a {
  position: relative; z-index: 1; flex: none;
  padding: 10px 16px; border-radius: 999px;
  color: #4a4660; text-decoration: none; font-size: 0.95rem; line-height: 24px;
  transition: color .3s ease;
}
.section-links a:hover, .section-links a.is-active { color: var(--ink); }
.section-indicator {
  position: absolute; z-index: 0; left: 0; top: 50%; height: 40px;
  width: var(--w, 0); transform: translate(var(--x, 0), -50%);
  border-radius: 999px; background: rgba(145, 143, 254, 0.14);
  box-shadow: inset 0 0 0 1px rgba(145, 143, 254, 0.18);
  opacity: 0;
  transition: transform .5s var(--nav-ease), width .5s var(--nav-ease), opacity .3s;
}
.section-links.has-active .section-indicator { opacity: 1; }
/* Without JS only the site links show */
html:not(.js) .section-links { display: none; }

/* With JS: both label sets sit in the same slot, centred, and swap with a short slide + fade */
.js .nav-stage { width: calc(var(--main-w, 180px) + var(--hero-extra)); transition: width var(--nav-dur) var(--nav-ease); }
.js .past-hero .nav-stage { width: var(--main-w, auto); }
.js .in-sections .nav-stage { width: var(--sections-w, auto); }
.js .nav-group {
  position: absolute; top: 0; left: 50%;
  transition: opacity .35s ease, filter .4s ease, transform .6s var(--nav-ease), visibility 0s linear 0s;
}
.js .nav-links { transform: translate(-50%, 0); }
.js .section-links { opacity: 0; filter: blur(5px); visibility: hidden; transform: translate(-50%, 8px); transition-delay: 0s, 0s, 0s, .6s; }
.js .in-sections .nav-links { opacity: 0; filter: blur(5px); visibility: hidden; transform: translate(-50%, -8px); transition-delay: 0s, 0s, 0s, .6s; }
.js .in-sections .section-links { opacity: 1; filter: none; visibility: visible; transform: translate(-50%, 0); transition-delay: .12s, .12s, .05s, 0s; }
.js .past-hero:not(.in-sections) .nav-links { transition-delay: .12s, .12s, .05s, 0s; }

/* Demo button tucks away in the product sections */
.nav-cta-wrap {
  flex: none; display: flex; justify-content: flex-end;
  padding-left: 12px;
  /* Coming back: let the bar open up first, then fade the button in */
  transition: width var(--nav-dur) var(--nav-ease), padding var(--nav-dur) var(--nav-ease), opacity .4s ease .25s, filter .45s ease .2s;
}
.js .nav-cta-wrap { width: var(--cta-w, auto); }
/* Leaving: fade and blur the button out quickly, before the narrowing box reaches it */
.js .in-sections .nav-cta-wrap { width: 0; padding-left: 0; opacity: 0; filter: blur(5px); visibility: hidden; pointer-events: none; transition: width var(--nav-dur) var(--nav-ease), padding var(--nav-dur) var(--nav-ease), opacity .18s ease, filter .25s ease, visibility 0s linear .7s; }
/* Menu button: transparent outline pill (as on the old site). On hover it grows a touch, lavender fills
   out from the centre, it picks up a soft glow, and a faint sheen sweeps across.
   On mouse-off the fill simply fades away at full size, then resets its scale once it's invisible. */
.nav-cta {
  position: relative; isolation: isolate; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  border-radius: 999px; border: 1px solid #cfcfd8; background: transparent;
  color: #303030; text-decoration: none; white-space: nowrap;
  font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform .6s var(--nav-ease), color .55s ease, border-color .55s ease, box-shadow .6s ease;
}
.nav-cta::before, .nav-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; }
.nav-cta::before { background: var(--lav-grad); opacity: 0; transform: scale(0.4); transition: opacity .6s ease, transform 0s linear .6s; }
.nav-cta::after {
  z-index: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
}
.nav-cta:hover, .nav-cta:focus-visible {
  transform: scale(1.045); color: #fff; border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(124, 121, 242, 0.75);
}
.nav-cta:hover::before, .nav-cta:focus-visible::before { opacity: 1; transform: scale(1); transition: opacity .5s ease, transform .7s var(--nav-ease); }
.nav-cta:hover::after, .nav-cta:focus-visible::after { transform: translateX(120%); transition: transform 1s ease .1s; }
.nav-cta:active { transform: scale(0.98); }
.nav-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-toggle, .nav-burger { display: none; }

@media (max-width: 860px) {
  .site-header { top: 12px; padding: 0 12px; }
  .nav { width: 100%; height: 58px; padding: 0 6px 0 16px; }
  .nav-logo { width: 92px; height: 32px; margin-right: 8px; }
  .nav-logo img { width: 92px; height: 32px; }
  .past-hero .nav-logo { width: 29px; margin-right: 8px; }
  /* The label slot takes the free space; the site links become a dropdown */
  .nav-stage, .js .nav-stage, .js .past-hero .nav-stage, .js .in-sections .nav-stage { flex: 1; width: auto; min-width: 0; position: static; }
  .nav-cta-wrap { margin-left: auto; padding-left: 0; }
  .js .nav-cta-wrap { width: auto; }
  .nav-cta { height: 40px; padding: 0 14px; font-size: 12px; }
  .nav-burger { display: block; flex: none; order: 3; width: 44px; height: 44px; position: relative; cursor: pointer; transition: opacity .3s; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); content: ""; transition: transform .2s, background-color .2s;
  }
  .nav-burger span { top: 21px; }
  .nav-burger span::before { left: 0; top: -7px; }
  .nav-burger span::after { left: 0; top: 7px; }
  .nav-cta-wrap { order: 2; }
  .nav-toggle { display: block; position: absolute; opacity: 0; width: 44px; height: 44px; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; cursor: pointer; z-index: 2; }
  .nav-links, .js .nav-links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; height: auto;
    transform: none; flex-direction: column; align-items: stretch;
    padding: 8px; border-radius: 24px;
    /* Opaque: a blur nested inside the glass pill doesn't render in Chromium, so text behind would show through. */
    background: #fcfcff;
    border: 1px solid rgba(237, 237, 237, 0.9);
    box-shadow: 0 8px 30px rgba(19, 16, 37, 0.08);
  }
  .nav-links a { padding: 14px 16px; border-radius: 16px; font-size: 15px; }
  .nav-links a:hover { background: rgba(145, 143, 254, 0.08); }
  .nav-toggle:checked ~ .nav-stage .nav-links { display: flex; }
  .nav-toggle:checked + .nav-burger span { background: transparent; }
  .nav-toggle:checked + .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }
  /* Product sections on phones: the section names fill the bar and scroll sideways */
  .js .section-links {
    left: 52px; right: 6px; top: 6px; bottom: 6px; height: auto;
    transform: translateY(10px); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .js .section-links::-webkit-scrollbar { display: none; }
  .js .in-sections .section-links { transform: none; }
  .section-links a { padding: 9px 14px; font-size: 0.9rem; }
  .section-indicator { height: 36px; }
  .in-sections .nav-burger, .in-sections .nav-toggle { opacity: 0; pointer-events: none; }
  .js .in-sections .nav-cta-wrap { width: 0; }
}
@media (max-width: 380px) {
  .nav-cta { padding: 0 11px; font-size: 11px; }
}

/* Hero: full-screen, video background under a lavender wash, demo video on the right */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 110px 0;
  background: #fff;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Same stack as the WordPress hero: video, then the lavender gradient, then a white wash
   (rgba white 0.8 at 70% opacity) to tone it down. */
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(237, 214, 255, 0.74) 0%, rgba(224, 222, 255, 0.778) 55%, #fff 94%);
}
.hero-bg-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.8); opacity: 0.7;
}
.hero-inner {
  width: 100%; max-width: 1560px; margin: 0 auto;
  padding: 0 clamp(20px, 3.3vw, 48px) 0 clamp(20px, 6.9vw, 100px);
  display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 700fr); gap: clamp(32px, 4.4vw, 64px); align-items: center;
}
.hero .eyebrow { color: var(--accent); background: #fff; border: 2px solid #fff; font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 2px; padding: 5px 13px; margin-bottom: 10px; }
.hero h1 { font-size: clamp(2.25rem, 3.15vw, 2.9rem); line-height: 1.25; font-weight: 500; color: #272727; letter-spacing: 0; margin-bottom: 22px; }
.hero .lead { font-size: clamp(1rem, 1.19vw, 1.15rem); line-height: 1.8; color: #676767; max-width: 487px; margin: 0; }
.hero-media { position: relative; }
.hero-demo {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 20px; background: #f4f4fa;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 7px rgba(0, 0, 0, 0.05), 0 12px 22px rgba(0, 0, 0, 0.06);
}

/* Play button over the demo; the whole card is clickable.
   With a mouse, JS adds .is-following: the system cursor hides and the button trails the pointer.
   Without JS, on touch screens, or with reduced motion, it sits in the centre. */
.play-btn {
  position: absolute; inset: 0;
  border: 0; padding: 0; margin: 0; border-radius: 20px;
  background: transparent; cursor: pointer;
}
.play-btn.is-following { cursor: none; }
.play-btn-follow {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  will-change: transform; pointer-events: none;
}
.play-btn.is-following .play-btn-follow { left: 0; top: 0; }
.play-btn-circle {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: clamp(64px, 6vw, 88px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(145, 143, 254, 0.95);
  box-shadow: 0 10px 30px rgba(86, 82, 216, 0.3);
  opacity: 0; transform: translate(-50%, -50%) scale(0.6);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.play-btn-circle svg { width: 38%; height: 38%; fill: #fff; margin-left: 6%; }
.play-btn:hover .play-btn-circle, .play-btn:focus-visible .play-btn-circle { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.play-btn:active .play-btn-circle { transform: translate(-50%, -50%) scale(0.92); }
.play-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
/* No hover on touch screens: keep the button visible in the centre */
@media (hover: none) { .play-btn-circle { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Full-size video player */
.video-modal {
  width: min(92vw, 1400px); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 20px; overflow: visible;
  background: transparent;
}
.video-modal::backdrop { background: rgba(19, 16, 37, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.video-modal-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; background: #f4f4fa; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.video-modal-close {
  position: absolute; top: -52px; right: 0;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
}
.video-modal-close svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.video-modal-close:hover { background: #fff; }

@media (max-width: 900px) {
  .hero { padding: 120px 0 56px; align-items: flex-start; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Below the hero: start pure white (the hero fades to white), then ease into the tinted page colour
   with a few soft lavender glows so the background isn't flat. */
main { background: #fff; }
.story {
  background:
    radial-gradient(45% 22% at 100% 22%, rgba(222, 214, 255, 0.55) 0%, transparent 70%),
    radial-gradient(40% 20% at 0% 50%, rgba(236, 224, 255, 0.6) 0%, transparent 70%),
    radial-gradient(45% 20% at 100% 78%, rgba(226, 220, 255, 0.5) 0%, transparent 70%),
    linear-gradient(180deg, #fff 0, var(--page) 560px, var(--page) 100%);
}

/* Records to clarity: headline, then a stage where scattered records gather, flow through the
   Spira mark, and land as a cited patient overview. The stage content is laid out on a fixed design
   canvas (1200 x 560 desktop, 360 x 720 phone) that JS scales to fit, so it stays sharp at any size. */
.records { padding: clamp(96px, 10vw, 160px) 0 0; }
.records-head { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); text-align: center; }
.records-head h2 {
  margin: 0 0 18px; font-size: clamp(2.1rem, 3.9vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em;
}
.records-head p { margin: 0 auto; max-width: 30em; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; color: var(--muted); }
.records-pin { position: relative; padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 48px) 0; }
.records-pin.is-pinned { height: 260vh; padding-top: 0; }
.records-pin.is-pinned .records-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 40px; }
.records-stage {
  position: relative; overflow: hidden; margin: 0 auto; width: 100%; max-width: 1200px;
  aspect-ratio: 1200 / 560; border-radius: clamp(24px, 3vw, 36px);
  background: linear-gradient(150deg, #f5f3fe 0%, #eeeafc 55%, #f7f0f9 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 40px 80px -50px rgba(60, 50, 140, 0.35);
}
.records-stage.is-phone { max-width: 480px; }
.rc-canvas { position: absolute; left: 0; top: 0; width: 1200px; height: 560px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.rc-canvas > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }

.rc-blossom { border-radius: 50%; filter: blur(60px); pointer-events: none; will-change: auto; }
.rc-blossom-a { width: 520px; height: 420px; left: -120px; top: -140px; background: rgba(196, 190, 255, 0.55); }
.rc-blossom-b { width: 560px; height: 440px; left: 760px; top: 260px; background: rgba(238, 214, 248, 0.6); }
.is-phone .rc-blossom-a { width: 300px; height: 300px; left: -100px; top: -60px; }
.is-phone .rc-blossom-b { width: 320px; height: 320px; left: 140px; top: 420px; }
.rc-ring { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(145, 143, 254, 0.06); }

/* Records */
.rc-doc {
  width: 176px; padding: 12px 13px 14px; border-radius: 10px; display: grid; gap: 6px; align-content: start;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(22, 22, 40, 0.06), 0 1px 2px rgba(20, 20, 50, 0.04), 0 14px 30px -16px rgba(40, 36, 110, 0.28);
}
.rc-doc-title { font-size: 10px; font-weight: 500; color: #8b8b99; letter-spacing: 0.01em; margin-bottom: 2px; white-space: nowrap; }
.rc-line { display: block; height: 5px; border-radius: 3px; background: #ebeaf2; }
.rc-line.w90 { width: 92%; } .rc-line.w85 { width: 84%; } .rc-line.w75 { width: 74%; } .rc-line.w70 { width: 66%; } .rc-line.w60 { width: 56%; }
.rc-doc.is-fax { background: #efeef2; }
.rc-doc.is-fax .rc-line { background: #d9d8e0; }
.rc-doc.is-fax::after { /* faint scan lines */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(60, 58, 80, 0.035) 0 1px, transparent 1px 3px);
}
.rc-hl { position: relative; justify-self: start; margin: 1px -4px; padding: 2px 4px; font-size: 9.5px; line-height: 1.3; font-weight: 500; color: #5652d8; white-space: nowrap; }
.rc-hl::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgba(145, 143, 254, 0.18);
  box-shadow: inset 0 0 0 1px rgba(124, 119, 242, calc(0.45 * var(--t, 1)));
  transform-origin: left center; transform: scaleX(var(--h, 0));
  opacity: calc(0.45 + 0.55 * var(--t, 1)); /* once the line has been lifted out, only a soft tint stays */
}
.rc-hl > span { position: relative; opacity: calc(var(--h, 0) * var(--t, 1)); }
.rc-hl::after { /* grey bar shown until the line lights up */
  content: ""; position: absolute; left: 4px; right: 18%; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px;
  background: #ebeaf2; opacity: calc(1 - var(--h, 0));
}
.is-fax .rc-hl::after { background: #d9d8e0; }

/* Spira mark */
.rc-mark {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 1px rgba(145, 143, 254, 0.18), 0 18px 40px -14px rgba(86, 82, 216, 0.5), 0 0 0 calc(var(--g, 0) * 10px) rgba(145, 143, 254, 0.14);
}
.rc-mark img { width: 30px; height: auto; }

.rc-links { width: 100%; height: 100%; overflow: visible; }
.rc-link { fill: none; stroke: rgba(124, 119, 242, 0.45); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rc-links .rc-link { stroke: url(#rc-grad-1); }
[data-decide] .rc-links .rc-link { stroke: url(#rc-grad-2); }
/* A soft pulse of light travels along each drawn line into the mark (and on into the card) */
.rc-flow {
  fill: none; stroke: #7c77f2; stroke-width: 2.4; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 0.07 0.93; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(124, 119, 242, 0.7));
  animation: rc-flow 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
.records-stage:not(.is-live) .rc-flow { animation-play-state: paused; }
@keyframes rc-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-flow { display: none; } }

/* Patient overview card (frosted, as in the demo video) */
.rc-card {
  width: 360px; padding: 18px 18px 16px; border-radius: 18px; transform-origin: left center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(22, 22, 40, 0.06), 0 1px 2px rgba(20, 20, 50, 0.04), 0 30px 60px -28px rgba(40, 36, 110, 0.35);
  color: #3c3c48; font-size: 12px; line-height: 1.5;
}
.is-phone .rc-card { width: 320px; padding: 16px 15px 14px; transform-origin: center top; }
.rc-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.rc-card-title { font-size: 14px; font-weight: 600; color: #16161f; letter-spacing: -0.01em; }
.rc-card-meta { font-size: 10.5px; color: #8b8b99; }
.rc-patient { display: flex; align-items: center; gap: 7px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(22, 22, 40, 0.06); font-size: 11.5px; color: #8b8b99; }
.rc-patient b { font-weight: 600; color: #16161f; }
.rc-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--lav-grad); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 50px; align-content: flex-start; }
.rc-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 1;
}
.rc-chip em { font-style: normal; font-weight: 400; opacity: .7; }
.c-lilac { background: #ecebff; color: #5652d8; }
.c-peach { background: #fdeee4; color: #b0561f; }
.c-sky { background: #e6effc; color: #3863b0; }
.c-grey { background: #f0eff5; color: #3c3c48; }
.rc-card [data-slot] { opacity: 0; } /* filled in when the flying chip lands */
.rc-fly { opacity: 0; box-shadow: 0 8px 20px -8px rgba(86, 82, 216, 0.45); }
.rc-summary { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(22, 22, 40, 0.06); }
.rc-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 11.5px; color: #5a5770; }
.rc-step { opacity: var(--k, 0); transform: translateY(calc((1 - var(--k, 0)) * 6px)); }
.rc-cite {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; vertical-align: 1px;
  border-radius: 50%; background: rgba(124, 119, 242, 0.14); color: #7c77f2; font-size: 9.5px; font-weight: 600; line-height: 1;
}
.rc-cite::after {
  content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: #7c77f2; color: #fff; opacity: var(--f, 0);
}

/* Second scroll stage: evidence in, treatment options out (shares the records stage styles above) */
.decide { padding-top: clamp(80px, 8vw, 130px); }
.dc-patient { width: 270px; padding: 16px 16px 14px; }
.dc-patient .rc-chips { min-height: 0; margin-bottom: 12px; }
.dc-key { box-shadow: 0 0 0 calc(var(--pulse, 0) * 5px) rgba(56, 99, 176, 0.16); }
.dc-risk { display: grid; gap: 6px; }
.dc-risk-label { font-size: 10.5px; color: #8b8b99; }
.dc-risk-bar, .dc-risk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
/* Four equal segments; the fill runs through them in turn up to High (JS sets --r 0..1) */
.dc-risk-bar span { position: relative; height: 6px; border-radius: 3px; background: #eceaf5; overflow: hidden; }
.dc-risk-bar span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lav-grad); transform-origin: left center;
  transform: scaleX(clamp(0, calc(var(--r, 0) * 3 - var(--i)), 1));
}
.dc-risk-bar span:nth-child(1) { --i: 0; } .dc-risk-bar span:nth-child(2) { --i: 1; }
.dc-risk-bar span:nth-child(3) { --i: 2; } .dc-risk-bar span:nth-child(4) { --i: 3; }
.dc-risk-steps { font-size: 9px; color: #a9a5bd; text-align: center; white-space: nowrap; }
.dc-risk-steps i { font-style: normal; transition: color .3s; }
.dc-risk-steps i.is-on { color: #5652d8; font-weight: 600; }

.rc-doc.dc-src { width: 232px; gap: 7px; }
.dc-row { display: flex; align-items: center; gap: 8px; }
.dc-row i { flex: none; width: 58px; font-style: normal; font-size: 9px; color: #a9a5bd; }
.dc-row .rc-line { flex: 1; }
.dc-paper { display: grid; gap: 4px; padding: 6px 8px; border-radius: 6px; background: #f6f5fa; }
.dc-pref { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-pref .rc-line { flex: 0 0 62%; }
.dc-toggle { position: relative; width: 22px; height: 13px; border-radius: 999px; background: #e3e1ee; }
.dc-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }

.dc-plan { width: 336px; }
.dc-option { margin-bottom: 6px; padding: 9px 11px; border-radius: 11px; font-size: 11.5px; color: #5a5770; }
.dc-option b { font-weight: 500; color: #16161f; font-size: 11.5px; }
.dc-option:not(.is-top) { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(240, 239, 245, 0.6); }
.dc-option.is-top { padding: 11px 12px 12px; background: #f7f6ff; box-shadow: inset 0 0 0 1px rgba(124, 119, 242, 0.28); }
.dc-option.is-top b { font-weight: 600; font-size: 12.5px; }
.dc-option-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; min-height: 20px; }
.dc-option p { margin: 0 0 9px; }
.dc-option .rc-chips { margin: 0; min-height: 22px; }
.dc-tag { height: 20px; font-size: 10.5px; }
.dc-refs { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; padding-top: 9px; margin-top: 2px; border-top: 1px solid rgba(22, 22, 40, 0.06); font-size: 10.5px; color: #8b8b99; }
.dc-refs .rc-cite { margin: 0 3px 0 8px; }
.dc-refs .rc-cite:first-child { margin-left: 0; }
.is-phone .dc-patient { width: 320px; }
.is-phone .dc-plan { width: 320px; }

/* Feature sections: tabs on the left autoplay through media on the right */
.feature { padding: clamp(80px, 9vw, 150px) 0 0; }
.feature-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px);
}
.feature-title {
  font-size: clamp(2.1rem, 3.7vw, 3.4rem); font-weight: 400; line-height: 1.1;
  letter-spacing: -0.035em; color: var(--ink); text-align: center;
  margin: 0 auto clamp(36px, 4vw, 60px);
}
.feature-inner { max-width: 1360px; }
.feature-body {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 4.5vw, 72px); align-items: center;
}
.feature-tabs { display: flex; flex-direction: column; padding-top: 4px; }
.feature-tab {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 22px 0 22px; margin: 0;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
}
.feature-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* Hairline above each tab; on the active tab it doubles as the progress bar */
.feature-tab-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.feature-tab-fill {
  position: absolute; inset: 0; transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  opacity: 0; transition: opacity .3s;
}
.feature-tab.is-active .feature-tab-fill { opacity: 1; }
/* Hover: freeze, hide the progress bar, and fade every tab except the one under the pointer */
.feature.is-paused .feature-tab-fill { opacity: 0; }
.feature-tab { transition: opacity .35s ease; }
.feature-tabs.is-hovering .feature-tab:not(.is-hovered) { opacity: 0.4; }
.feature-tabs.is-hovering .feature-tab.is-hovered .feature-tab-title { color: var(--ink); }
.feature-tab-title {
  display: block; font-size: 1.0625rem; line-height: 1.4; font-weight: 500;
  color: var(--muted-2); transition: color .3s;
}
.feature-tab:hover .feature-tab-title { color: var(--ink); }
.feature-tab.is-active .feature-tab-title { color: var(--ink); }
/* Description expands smoothly on the active tab */
.feature-tab-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1); }
.feature-tab-desc > span {
  overflow: hidden; display: block; max-width: 30em;
  font-size: 0.95rem; line-height: 1.6; color: var(--muted);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.feature-tab.is-active .feature-tab-desc { grid-template-rows: 1fr; }
.feature-tab.is-active .feature-tab-desc > span { opacity: 1; transform: none; padding-top: 8px; }

/* Media stage */
.feature-media {
  position: relative; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(214, 206, 255, 0.9) 0%, transparent 60%),
    linear-gradient(160deg, #f1eeff 0%, #e6e2fb 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 30px 60px -30px rgba(60, 50, 140, 0.25);
}
.feature-panel {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(0.985);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.feature-panel.is-active { opacity: 1; transform: none; }
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Placeholder until the feature videos arrive */
.skeleton { position: relative; width: min(62%, 520px); display: grid; gap: 14px; justify-items: start; }
.skeleton-card {
  width: 100%; display: grid; gap: 12px; padding: 22px 24px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 40px -18px rgba(60, 50, 140, 0.3);
}
.sk-row { display: flex; align-items: center; gap: 8px; }
.sk-gap { margin-top: 6px; }
.sk-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); }
.sk-bar, .sk-chip, .sk-pill {
  display: block; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #efedf7 0%, #f8f7fc 40%, #efedf7 80%) 0 0 / 300% 100%;
  animation: shimmer 2.2s ease-in-out infinite;
}
.sk-chip { width: 44px; height: 16px; border-radius: 999px; background-color: var(--accent-soft); }
.sk-pill { width: 72px; height: 22px; border-radius: 999px; }
.w30 { width: 30%; } .w60 { width: 60%; } .w75 { width: 75%; } .w90 { width: 90%; }
.skeleton-label {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  background: rgba(255, 255, 255, 0.7); padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 640px) {
  .skeleton { width: 72%; gap: 8px; }
  .skeleton-card { padding: 14px 16px; gap: 8px; border-radius: 12px; }
  .sk-gap, .skeleton-label { display: none; }
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (max-width: 900px) {
  .feature-body { grid-template-columns: 1fr; gap: 28px; }
  .feature-media { order: -1; border-radius: 20px; }
  .feature-tab { padding: 18px 0; }
}

/* Trust and security: heading row, then a bento of four cards. Each card has a small, quiet
   illustration that settles into place when the card scrolls into view. */
.assure {
  padding: clamp(88px, 8vw, 128px) 0 0;
  background: linear-gradient(180deg, var(--page) 0%, var(--page) 55%, #fff 100%);
}
.assure-inner { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.assure-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(32px, 3.5vw, 48px);
}
.assure-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-family: var(--font-alt); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-strong);
}
.assure-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(145, 143, 254, 0.18); }
.assure-head h2 {
  margin: 0; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em;
}
.assure-lede p { margin: 0 0 18px; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 30em; }
.assure-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.assure-link {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none;
  background: #fff; border: 1px solid var(--line-soft);
  box-shadow: 0 6px 18px -10px rgba(60, 50, 140, 0.3);
  transition: border-color .3s, box-shadow .4s, transform .5s var(--nav-ease);
}
.assure-link svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-strong); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--nav-ease); }
.assure-link:hover { border-color: rgba(145, 143, 254, 0.55); box-shadow: 0 10px 24px -12px rgba(86, 82, 216, 0.45); transform: translateY(-1px); }
.assure-link:hover svg { transform: translate(2px, -2px); }
.assure-link.is-quiet { height: auto; padding: 0; background: none; border: 0; box-shadow: none; color: var(--muted); }
.assure-link.is-quiet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4fbf8b; box-shadow: 0 0 0 3px rgba(79, 191, 139, 0.18); }
.assure-link.is-quiet:hover { color: var(--ink); transform: none; }

.assure-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.assure-card {
  position: relative; grid-column: span 5; display: flex; flex-direction: column;
  padding: 8px; border-radius: 22px; background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(230, 228, 240, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 50px -36px rgba(60, 50, 140, 0.35);
  transition: border-color .4s, box-shadow .5s, transform .6s var(--nav-ease);
}
.assure-card.is-wide { grid-column: span 7; }
.assure-card:hover { border-color: rgba(145, 143, 254, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 60px -34px rgba(60, 50, 140, 0.45); }
/* Edge glow: a soft light follows the cursor around the card borders (JS sets --mx/--my per card,
   so neighbouring cards catch the edge of the light too). Mouse users only. */
.assure-card::before, .assure-card::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.assure-card::before { /* the lit border */
  inset: -1px; padding: 1.5px; z-index: 3;
  background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(124, 121, 242, 0.95), rgba(145, 143, 254, 0.45) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.assure-card::after { /* a faint wash inside the card under the cursor */
  inset: 0; z-index: 2;
  background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(145, 143, 254, 0.11), transparent 60%);
}
.assure-grid.is-lit .assure-card::before, .assure-grid.is-lit .assure-card::after { opacity: 1; }
/* Stagger the cards' fade-up */
.js .assure-card.reveal { transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1), border-color .4s, box-shadow .5s; }
.js .assure-card.reveal:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s; }
.js .assure-card.reveal:nth-child(3) { transition-delay: .04s, .04s, 0s, 0s; }
.js .assure-card.reveal:nth-child(4) { transition-delay: .12s, .12s, 0s, 0s; }

.assure-text { padding: 16px 14px 12px; }
.assure-text h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; }
.assure-text p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.assure-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 0.88rem; font-weight: 500; color: var(--accent-strong); text-decoration: none;
}
.assure-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the link */
.assure-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--nav-ease); }
.assure-card:hover .assure-more svg { transform: translateX(3px); }
.assure-more:focus-visible { outline: none; }
.assure-more:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Shared illustration stage */
.assure-visual {
  position: relative; overflow: hidden; height: clamp(150px, 13vw, 172px); border-radius: 15px;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    radial-gradient(80% 90% at 100% 100%, rgba(214, 206, 255, 0.75) 0%, transparent 65%),
    linear-gradient(160deg, #f4f2ff 0%, #ebe8fc 100%);
}
.assure-visual::after { /* fine dot grid, faded toward the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(86, 82, 216, 0.13) 1px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
}
.assure-visual > * { position: relative; z-index: 1; }
.assure-visual svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assure-visual .sk-bar { animation: none; background: #eceaf5; height: 8px; }

/* Window-style illustrations sit low and run off the bottom edge */
.v-authorize, .v-browser { place-items: end center; }
.va-panel, .vb-window { margin-bottom: -16px; }

/* 1. You authorize each patient: one patient switched on, the rest stay locked */
.va-panel {
  width: min(72%, 340px); padding: 10px 10px 26px; border-radius: 14px; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 20px 40px -22px rgba(60, 50, 140, 0.35);
  display: grid; gap: 2px;
}
.va-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 6px; }
.va-head .sk-bar { width: 34%; }
.va-count { width: 30px; height: 14px; border-radius: 999px; background: var(--accent-soft); }
.va-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
  color: #b9b5cc; opacity: .6; transition: background .6s ease, box-shadow .6s ease, opacity .6s ease;
}
.va-avatar { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #eceaf5; transition: background .6s ease; }
.va-lines { flex: 1; display: grid; gap: 6px; }
.va-lines span { display: block; height: 7px; border-radius: 4px; background: #eceaf5; }
.va-lines span:first-child { width: 58%; } .va-lines span:last-child { width: 36%; }
.va-lock { flex: none; width: 16px; height: 16px; }
.va-toggle {
  flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: #e3e1ee;
  transition: background .5s ease .5s;
}
.va-toggle span {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(19, 16, 37, 0.25); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) .5s;
}
.va-row.is-on { opacity: 1; transition-delay: .5s; }
.is-visible .va-row.is-on { background: #f6f5ff; box-shadow: inset 0 0 0 1px rgba(145, 143, 254, 0.35); }
.is-visible .va-row.is-on .va-avatar { background: var(--lav-grad); }
.is-visible .va-row.is-on .va-lines span { background: #dcd9f7; }
.is-visible .va-toggle { background: var(--accent); }
.is-visible .va-toggle span { transform: translateX(14px); }

/* 2. HIPAA compliant: a shield with soft rings and two badges */
.v-shield { color: var(--accent-strong); }
.vs-ring {
  position: absolute; z-index: 0; width: 112px; height: 112px; border-radius: 50%;
  border: 1px solid rgba(145, 143, 254, 0.35); left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.vs-ring + .vs-ring { width: 176px; height: 176px; border-color: rgba(145, 143, 254, 0.2); }
.is-visible .vs-ring { animation: ring-breathe 6s ease-in-out infinite; }
.is-visible .vs-ring + .vs-ring { animation-delay: -3s; }
@keyframes ring-breathe { 50% { transform: translate(-50%, -50%) scale(1.06); opacity: .55; } }
.vs-shield {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px;
  background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 36px -16px rgba(86, 82, 216, 0.45), inset 0 0 0 1px rgba(145, 143, 254, 0.2);
}
.vs-shield svg { width: 30px; height: 30px; stroke-width: 1.7; }
.vs-shield svg path + path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .7s ease .6s; }
.is-visible .vs-shield svg path + path { stroke-dashoffset: 0; }
.vs-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-alt); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 20px -10px rgba(60, 50, 140, 0.35);
  opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.vs-chip svg { width: 12px; height: 12px; stroke-width: 2.2; }
.vs-chip-a { left: 14%; top: 20%; transform: translateY(8px); transition-delay: .35s; }
.vs-chip-b { right: 10%; bottom: 18%; transform: translateY(8px); transition-delay: .5s; }
.is-visible .vs-chip { opacity: 1; transform: none; }

/* 3. Built by clinicians: a note that gets signed off */
.vn-note {
  width: min(64%, 260px); display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 36px -20px rgba(60, 50, 140, 0.35);
}
.vn-line { display: block; height: 7px; border-radius: 4px; background: #eceaf5; }
.vn-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #e3e1ee; }
.vn-signature { width: 96px; height: 26px; color: var(--accent-strong); stroke-width: 1.6; }
.vn-signature path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.6s ease .4s; }
.is-visible .vn-signature path { stroke-dashoffset: 0; }
.vn-check {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) 1.6s, opacity .3s ease 1.6s;
}
.vn-check svg { width: 13px; height: 13px; stroke-width: 2.6; }
.is-visible .vn-check { transform: none; opacity: 1; }

/* 4. Beside your systems: a browser window with the EHR and Spira side by side */
.vb-window {
  width: min(80%, 420px); border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 24px 44px -24px rgba(60, 50, 140, 0.4), 0 0 0 1px rgba(230, 228, 240, 0.9);
}
.vb-bar { display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: #f7f6fb; border-bottom: 1px solid #eeedf4; }
.vb-dots { display: flex; gap: 5px; }
.vb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e0deea; }
.vb-url { flex: 1; max-width: 46%; height: 12px; margin: 0 auto; border-radius: 999px; background: #eceaf3; }
.vb-body { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 124px; }
.vb-ehr, .vb-spira { display: grid; align-content: start; gap: 7px; padding: 11px 12px 28px; }
.vb-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #a9a5bd; }
.vb-label img { width: 12px; height: auto; }
.vb-block { height: 22px; border-radius: 8px; background: #f3f2f8; margin-top: 2px; }
.vb-spira {
  background: linear-gradient(180deg, #faf9ff, #f3f1ff); border-left: 1px solid #e9e6fb;
  transform: translateX(24px); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .35s, opacity .7s ease .35s;
}
.vb-spira .vb-label { color: var(--accent-strong); }
.vb-line { display: block; height: 7px; border-radius: 4px; background: #dedbfa; }
.vb-cite { width: 46px; height: 16px; margin-top: 4px; border-radius: 999px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(145, 143, 254, 0.35); }
.is-visible .vb-spira { transform: none; opacity: 1; }

@media (max-width: 960px) {
  .assure-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .assure-card, .assure-card.is-wide { grid-column: span 6; }
}
@media (max-width: 680px) {
  .assure { padding-top: 64px; }
  .assure-head h2 br { display: none; }
  .assure-grid { gap: 14px; }
  .assure-card, .assure-card.is-wide { grid-column: 1 / -1; border-radius: 22px; }
  .assure-visual { height: 160px; border-radius: 14px; }
  .assure-text { padding: 14px 10px 10px; }
  .va-panel { width: 86%; padding: 10px; }
  .vb-window { width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .is-visible .vs-ring { animation: none; }
  .va-row, .va-toggle, .va-toggle span, .vs-chip, .vs-shield svg path + path, .vb-spira, .vn-signature path, .vn-check { transition: none; }
  .js .assure-card.reveal { transition: none; }
}

/* Closing call to action: a dark rounded card (the old site's "Get started" block, refined)
   with slowly drifting lavender light behind the copy */
.closing { padding: clamp(96px, 10vw, 160px) clamp(16px, 3vw, 40px) clamp(64px, 7vw, 110px); }
.closing-card {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1240px; margin: 0 auto; text-align: center;
  padding: clamp(72px, 9vw, 128px) clamp(24px, 6vw, 96px);
  border-radius: clamp(24px, 3vw, 36px);
  background: var(--ink-deep); color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 40px 80px -40px rgba(19, 16, 37, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.closing-glow, .closing-glow::before, .closing-glow::after { position: absolute; border-radius: 50%; pointer-events: none; }
.closing-glow { inset: 0; z-index: -1; border-radius: 0; }
.closing-glow::before, .closing-glow::after { content: ""; filter: blur(60px); }
.closing-glow::before {
  width: 60%; height: 90%; left: -10%; top: -35%;
  background: radial-gradient(closest-side, rgba(145, 143, 254, 0.55), transparent);
  animation: drift-a 18s ease-in-out infinite alternate;
}
.closing-glow::after {
  width: 55%; height: 85%; right: -12%; bottom: -40%;
  background: radial-gradient(closest-side, rgba(119, 151, 255, 0.4), transparent);
  animation: drift-b 22s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-20%, -18%) scale(1.1); } }
.closing-eyebrow { margin: 0 0 18px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #a8a6ff; }
.closing h2 {
  margin: 0 auto 22px; max-width: 16em; color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em;
}
.closing-sub { max-width: 34em; margin: 0 auto 40px; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; }

/* Big lavender button with an arrow chip; on hover it lifts, glows, and the arrow slides out and back in */
.btn-cta {
  position: relative; display: inline-flex; align-items: center; gap: 22px;
  height: 64px; padding: 0 8px 0 32px; border-radius: 999px;
  background: var(--lav-grad); background-size: 160% 160%; background-position: 0% 50%;
  color: #fff; text-decoration: none; font-size: 1.15rem; font-weight: 500;
  box-shadow: 0 14px 34px -14px rgba(145, 143, 254, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform .6s var(--nav-ease), box-shadow .6s ease, background-position .8s ease;
}
.btn-cta:hover, .btn-cta:focus-visible {
  transform: translateY(-2px) scale(1.035); background-position: 100% 50%;
  box-shadow: 0 22px 48px -16px rgba(145, 143, 254, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-cta:active { transform: scale(0.99); }
.btn-cta:focus-visible { outline: 2px solid #c9c7ff; outline-offset: 4px; }
.btn-cta-icon {
  position: relative; overflow: hidden; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #7c79f2;
}
.btn-cta-icon svg {
  grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .55s var(--nav-ease);
}
.btn-cta-icon svg + svg { transform: translate(-150%, 150%); }
.btn-cta:hover .btn-cta-icon svg:first-child, .btn-cta:focus-visible .btn-cta-icon svg:first-child { transform: translate(150%, -150%); }
.btn-cta:hover .btn-cta-icon svg + svg, .btn-cta:focus-visible .btn-cta-icon svg + svg { transform: none; transition-delay: .06s; }
.closing-email { margin: 28px 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.55); }
.closing-email a { color: #c9c7ff; text-decoration: none; border-bottom: 1px solid rgba(201, 199, 255, 0.35); transition: color .2s, border-color .2s; }
.closing-email a:hover { color: #fff; border-color: #fff; }
@media (max-width: 640px) {
  .closing h2 br { display: none; }
  .btn-cta { height: 56px; gap: 16px; padding-left: 24px; font-size: 1.05rem; }
  .btn-cta-icon { width: 42px; height: 42px; }
}

/* Footer (light, from v1) */
.site-footer { background: #f2f2fa; padding: 64px 0 24px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand img { width: 104px; height: auto; }
.footer-brand p { color: var(--muted); margin: 16px 0 8px; max-width: 260px; }
.site-footer h2 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer li { margin-bottom: 10px; }
.site-footer nav a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent-strong); }
.footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.footer-bottom p { margin: 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* Gentle fade-up as sections scroll into view (JS adds .is-visible) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .sk-bar, .sk-chip, .sk-pill, .closing-glow::before, .closing-glow::after { animation: none; }
  .feature-panel, .feature-tab-desc, .feature-tab-desc > span { transition: none; }
  .site-header, .nav, .nav-logo, .logo-words, .nav-stage, .nav-group, .nav-cta-wrap, .nav-cta, .section-indicator { transition: none !important; }
  .logo-words, .nav-group, .nav-cta-wrap { filter: none !important; }
}

/* ---------- Contact / Schedule a demo page ---------- */
.contact-page { position: relative; overflow: clip; background: #fff; }
.contact-bg {
  position: absolute; inset: 0 0 auto 0; height: 1100px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 8%, rgba(237, 214, 255, 0.75) 0%, transparent 70%),
    radial-gradient(50% 45% at 92% 18%, rgba(224, 222, 255, 0.85) 0%, transparent 70%),
    radial-gradient(40% 35% at 70% 75%, rgba(255, 228, 244, 0.5) 0%, transparent 70%),
    linear-gradient(180deg, #faf8ff 0%, #ffffff 100%);
}
.contact {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  padding: clamp(120px, 12vw, 160px) clamp(20px, 5vw, 64px) clamp(80px, 9vw, 130px);
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
  gap: clamp(56px, 7vw, 120px); align-items: start;
}
.contact-intro { position: sticky; top: 130px; padding-top: 12px; }
.contact-intro .eyebrow { color: var(--accent); border-color: transparent; font-weight: 500; letter-spacing: 2px; font-size: 13px; padding: 5px 13px; margin-bottom: 14px; }
.contact-intro h1 { font-size: clamp(2.4rem, 4.2vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: #272727; margin-bottom: 18px; }
.contact-lead { font-size: 1.1rem; line-height: 1.7; color: #676767; max-width: 30em; margin-bottom: 36px; }

.contact-steps { display: grid; gap: 26px; margin-bottom: 44px; }
.contact-steps li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; }
.contact-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 17.5px; top: 40px; bottom: -18px; width: 1px;
  background: linear-gradient(var(--line-soft), transparent);
}
.contact-step-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid #e4e2f4; color: var(--accent-strong);
  font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 12px -6px rgba(86, 82, 216, 0.3);
}
.contact-steps h2 { font-size: 1.02rem; font-weight: 500; color: var(--ink); margin: 6px 0 4px; letter-spacing: 0; }
.contact-steps p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }

.contact-trust { display: flex; flex-wrap: nowrap; gap: 7px; margin-bottom: 30px; }
/* One line where it fits (desktop); narrower screens wrap rather than cut a chip off */
@media (max-width: 990px) { .contact-trust { flex-wrap: wrap; } }
.contact-trust li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.7); border: 1px solid #ebe9f6; font-size: 0.8rem; color: #4a4660;
}
.contact-trust li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.contact-trust a { color: inherit; text-decoration: none; }
.contact-trust a:hover { color: var(--accent-strong); }
.contact-alt { margin: 0; font-size: 0.95rem; color: var(--muted); }
.contact-alt a { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid rgba(86, 82, 216, 0.3); }
.contact-alt a:hover { border-color: var(--accent-strong); }

/* Frosted form card */
.contact-card {
  position: relative; border-radius: 28px; padding: clamp(24px, 3.4vw, 44px);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(227, 225, 240, 0.7), 0 40px 90px -40px rgba(60, 50, 140, 0.35), 0 12px 30px -18px rgba(60, 50, 140, 0.2);
}
.contact-form { display: grid; gap: 18px; }
.form-head h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; }
.form-head p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: 0.875rem; font-weight: 500; color: #3c3854; }
.optional { font-weight: 400; color: var(--muted-2); }
.field input, .field select, .field textarea {
  width: 100%; height: 50px; padding: 0 16px; margin: 0;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #e3e1ef; border-radius: 12px;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { height: auto; min-height: 112px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a9a5bd; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cfcce4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(145, 143, 254, 0.18);
}
.field select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.field select:has(option[value=""]:checked) { color: #a9a5bd; }
.field select option { color: var(--ink); }
/* Errors only show after the visitor has interacted or tried to submit */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid,
.was-validated .field input:invalid, .was-validated .field select:invalid {
  border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.1);
}
.field-error { display: none; margin: 0; font-size: 0.8rem; color: #d13438; }
.field input:user-invalid + .field-error, .was-validated .field input:invalid + .field-error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Multi-select (EHR & oncology systems) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field-label { font-size: 0.875rem; font-weight: 500; color: #3c3854; }
.ms-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; height: 50px; padding: 0 16px; cursor: pointer; text-align: left;
  font: inherit; font-size: 1rem; color: #a9a5bd;
  background: #fff; border: 1px solid #e3e1ef; border-radius: 12px;
  transition: border-color .2s, box-shadow .25s;
}
.ms-trigger:hover { border-color: #cfcce4; }
.ms-trigger:focus-visible, .ms.is-open .ms-trigger { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(145, 143, 254, 0.18); }
.ms.has-value .ms-trigger { color: var(--ink); }
.ms-chevron { flex: none; width: 18px; height: 18px; fill: none; stroke: #6b6580; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--nav-ease); }
.ms.is-open .ms-chevron { transform: rotate(180deg); }
.ms-panel {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 14px; background: #fff;
  border: 1px solid #e7e5f3; box-shadow: 0 24px 50px -20px rgba(60, 50, 140, 0.35), 0 4px 12px -6px rgba(60, 50, 140, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity .2s ease, transform .3s var(--nav-ease), visibility 0s linear .3s;
}
.ms-control { position: relative; }
.ms.is-open .ms-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--nav-ease), visibility 0s; }
.ms-group { border: 0; margin: 0; padding: 4px 0; }
.ms-group + .ms-group { border-top: 1px solid #f0eef8; }
.ms-group legend { padding: 8px 10px 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.ms-option {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px;
  font-size: 0.95rem; color: var(--ink); cursor: pointer; transition: background-color .15s;
}
.ms-option:hover { background: #f6f5ff; }
.field .ms-option input {
  flex: none; width: 18px; height: 18px; margin: 0; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 1.5px solid #c9c6dd; border-radius: 5px; background: #fff;
  transition: background-color .15s, border-color .15s, box-shadow .2s;
}
.field .ms-option input:checked {
  border-color: var(--accent-strong);
  background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.field .ms-option input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(145, 143, 254, 0.35); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-chips:empty { display: none; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: #f1f0ff; border: 1px solid #e2e0fb; color: #3c3854; font-size: 0.85rem;
  animation: chip-in .35s var(--nav-ease) both;
}
.ms-chip button {
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #8e89a6; cursor: pointer; transition: background-color .15s, color .15s;
}
.ms-chip button:hover, .ms-chip button:focus-visible { background: #dedcfa; color: var(--ink); outline: none; }
.ms-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@keyframes chip-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.ms-other { display: grid; gap: 8px; margin-top: 4px; }
.ms-other label { font-size: 0.85rem; font-weight: 500; color: #3c3854; }
.ms-other input {
  width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: #fff; border: 1px solid #e3e1ef; border-radius: 12px; transition: border-color .2s, box-shadow .25s;
}
.ms-other input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(145, 143, 254, 0.18); }
/* Without JS: just show the checkbox list */
html:not(.js) .ms-trigger { display: none; }
html:not(.js) .ms-panel { position: static; opacity: 1; visibility: visible; transform: none; max-height: none; }

.form-note {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 12px 14px;
  border-radius: 12px; background: #f6f5ff; color: #5a5670; font-size: 0.875rem; line-height: 1.45;
}
.form-note svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linejoin: round; }
.form-submit {
  width: 100%; justify-content: space-between; border: 0; cursor: pointer;
  font-family: inherit; margin-top: 4px;
}
.form-legal { margin: 0; text-align: center; font-size: 0.8rem; line-height: 1.5; color: var(--muted-2); }
.form-legal a { color: var(--muted); }

/* Thank-you state */
.form-success { text-align: center; padding: clamp(24px, 4vw, 48px) 8px; outline: none; }
.form-success:not([hidden]) { animation: success-in .7s var(--nav-ease) both; }
.success-icon {
  display: inline-grid; place-items: center; width: 68px; height: 68px; margin-bottom: 22px; border-radius: 50%;
  background: var(--lav-grad); box-shadow: 0 16px 36px -14px rgba(124, 121, 242, 0.8);
  animation: success-pop .8s var(--nav-ease) .1s both;
}
.success-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-success h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 12px; }
.form-success p { max-width: 26em; margin: 0 auto 28px; color: var(--muted); line-height: 1.65; }
.success-back { color: var(--accent-strong); text-decoration: none; font-weight: 500; }
.success-back:hover { text-decoration: underline; }
@keyframes success-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes success-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; padding-top: 110px; }
  .contact-intro { position: static; }
  .contact-steps { display: none; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-card { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .form-success:not([hidden]), .success-icon, .ms-chip { animation: none; }
  .ms-panel, .ms-chevron { transition: none; }
}

/* ---------- Company page ---------- */
.company-page { position: relative; overflow: clip; background: #fff; }
.company-bg {
  position: absolute; inset: 0 0 auto 0; height: 900px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 50% at 18% 0%, rgba(237, 214, 255, 0.7) 0%, transparent 70%),
    radial-gradient(45% 50% at 85% 10%, rgba(224, 222, 255, 0.85) 0%, transparent 70%);
}
.company-intro {
  position: relative; z-index: 1; text-align: center;
  max-width: 980px; margin: 0 auto; padding: clamp(150px, 16vw, 210px) 20px clamp(48px, 6vw, 80px);
}
.company-intro .eyebrow { color: var(--accent); border: 1px solid rgba(145, 143, 254, 0.45); background: rgba(255, 255, 255, 0.7); font-weight: 500; letter-spacing: 3px; font-size: 13px; padding: 6px 16px; margin-bottom: 22px; }
.company-intro h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: #272727; margin: 0 0 26px; }
.company-lead { max-width: 34em; margin: 0 auto; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; color: #6b6580; }

.company-story { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 24px clamp(80px, 9vw, 140px); }
.company-story p { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.8; color: #4a4660; margin: 0; }
/* Both paragraphs share one size; "That's changing now." is the single emphasis, with equal space around it */
.company-story .story-turn {
  display: inline-block; margin: 0.9em 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #272727 0%, #5652d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Team grid */
.team { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.team::before { content: ""; display: block; height: 1px; margin-bottom: clamp(56px, 7vw, 96px); background: linear-gradient(90deg, transparent, var(--line-soft) 20%, var(--line-soft) 80%, transparent); }
.team-title { text-align: center; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; margin: 0 0 clamp(40px, 5vw, 72px); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.5vw, 56px); }
.team-card {
  display: grid; gap: 0; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.team-photo {
  display: block; overflow: hidden; aspect-ratio: 1085 / 1515; border-radius: 22px; margin-bottom: 26px;
  background: #e9e8ee;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 24px 50px -30px rgba(19, 16, 37, 0.35);
  transition: transform .7s var(--nav-ease), border-radius .7s var(--nav-ease), box-shadow .7s ease;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--nav-ease); }
.team-card:hover .team-photo, .team-card:focus-visible .team-photo {
  transform: scale(0.965); border-radius: 34px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 30px 60px -30px rgba(86, 82, 216, 0.45);
}
.team-card:hover .team-photo img, .team-card:focus-visible .team-photo img { transform: scale(1.06); }
.team-card:focus-visible { outline: none; }
.team-card:focus-visible .team-photo { outline: 3px solid var(--accent); outline-offset: 4px; }
.team-role { font-family: var(--font-alt); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6580; margin-bottom: 8px; }
.team-name { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.team-more { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--accent); }
.team-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--nav-ease); }
.team-card:hover .team-more svg, .team-card:focus-visible .team-more svg { transform: translateX(6px); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* Phones: smaller, slightly shorter photos so each person fits on screen with their name */
  .team-grid { grid-template-columns: 1fr; max-width: 260px; margin: 0 auto; gap: 40px; }
  .team-photo { aspect-ratio: 4 / 5; margin-bottom: 18px; }
  .team-photo img { object-position: 50% 18%; }
}

/* Full-screen split bio */
/* The whole bio (and its backdrop) fades as one layer; nothing slides, so nothing jumps. */
.bio {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  opacity: 0; transition: opacity .55s cubic-bezier(.4, 0, .2, 1);
}
.bio.is-visible { opacity: 1; }
.bio::backdrop { background: transparent; }
.bio-grid { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.bio-text { position: relative; display: flex; align-items: center; background: #f4f3f8; overflow-y: auto; }
.bio-body { width: 100%; max-width: 620px; margin: 0 auto; padding: clamp(96px, 10vh, 140px) clamp(28px, 6vw, 96px); }
/* Fading out (e.g. on Next) is quick; fading in is slow and staggered */
.bio-entry > * { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.bio.is-shown .bio-entry > * { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform 1.1s var(--nav-ease); }
.bio.is-shown .bio-entry > :nth-child(1) { transition-delay: .18s; }
.bio.is-shown .bio-entry > :nth-child(2) { transition-delay: .24s; }
.bio.is-shown .bio-entry > :nth-child(3) { transition-delay: .32s; }
.bio.is-shown .bio-entry > :nth-child(4) { transition-delay: .40s; }
.bio.is-shown .bio-entry > :nth-child(5) { transition-delay: .48s; }
.bio-role { margin: 0 0 6px; font-size: 1rem; color: #6b6580; }
.bio-name { font-family: var(--font-alt); font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: #2b2838; margin: 0 0 30px; }
.bio-entry p:not(.bio-role) { font-size: 1.02rem; line-height: 1.75; color: #57536a; margin: 0 0 1.3em; }
.bio-links { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.bio-linkedin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #3c3854; transition: background-color .2s, color .2s; }
.bio-linkedin:hover { background: #fff; color: #0a66c2; }
.bio-linkedin svg { width: 24px; height: 24px; fill: currentColor; overflow: visible; }
.bio-next {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; color: #3c3854;
}
.bio-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--nav-ease); }
.bio-next:hover { color: var(--accent-strong); }
.bio-next:hover svg { transform: translateX(5px); }
.bio-photo { position: relative; overflow: hidden; background: #d9d8df; }
.bio-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform-origin: 50% 35%;
  opacity: 0; transition: opacity .35s ease;
}
.bio.is-shown .bio-photo img { transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1) .05s; }
/* Photo fades in while a very slow zoom starts, so it never feels static */
.bio.is-shown .bio-photo img { opacity: 1; animation: bio-zoom 18s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes bio-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* Close: a large circle with an X. With a mouse it becomes the cursor (trailing softly);
   clicking anywhere except a link closes. On touch / keyboard it sits top-right of the text panel. */
.bio-close {
  position: absolute; z-index: 5; top: clamp(24px, 5vh, 56px); right: clamp(24px, 5vw, 72px);
  display: grid; place-items: center; width: 96px; height: 96px; padding: 0; border-radius: 50%;
  border: 1.5px solid #2b2838; background: rgba(244, 243, 248, 0.6); color: #2b2838; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .3s ease, width .35s var(--nav-ease), height .35s var(--nav-ease), background-color .3s, border-color .3s, color .3s;
}
.bio-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: opacity .2s, transform .5s var(--nav-ease); }
.bio-close:hover { background: #2b2838; color: #fff; }
.bio-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.bio.follow { cursor: none; }
.bio.follow .bio-close { position: fixed; top: 0; left: 0; right: auto; pointer-events: none; will-change: transform; }
/* The cursor circle eases in on the spot as the bio fades in (scale lives on the icon so it
   doesn't fight the JS position transform) */
.bio.follow .bio-close { opacity: 0; }
.bio.follow.is-visible .bio-close { opacity: 1; transition: opacity .5s ease .1s, width .35s var(--nav-ease), height .35s var(--nav-ease), background-color .3s, border-color .3s, color .3s; }
.bio.follow .bio-close svg { transform: scale(.6); }
.bio.follow.is-visible .bio-close svg { transform: none; }
.bio.follow.is-visible.over-link .bio-close svg { opacity: 0; transform: scale(.5); }
/* Over the photo the circle turns white so it reads against the image */
.bio.follow.over-photo .bio-close { border-color: rgba(255, 255, 255, 0.9); color: #fff; background: rgba(255, 255, 255, 0.12); }
/* Over a link: shrink to a small dot and give the normal pointer back */
.bio.follow.over-link .bio-close { width: 14px; height: 14px; background: #2b2838; }
.bio.follow.over-link .bio-close svg { opacity: 0; transform: scale(.5); }
.bio.follow .bio-linkedin, .bio.follow .bio-next { cursor: pointer; }
html.bio-open { overflow: hidden; }

@media (max-width: 820px) {
  /* Mobile bios: text only (the photo is already on the card that was tapped) */
  .bio-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .bio-photo { display: none; }
  .bio-text { align-items: flex-start; }
  .bio-body { padding: 96px 24px 48px; }
  .bio-close { position: fixed; top: 16px; right: 16px; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.85); border-color: rgba(43, 40, 56, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .team-photo, .team-photo img, .bio-entry > *, .bio, .bio-photo img { transition: none; }
  .bio.is-shown .bio-photo img { animation: none; }
}



/* ---------- Particle swarm (company page) ---------- */
.swarm {
  position: relative; isolation: isolate; text-align: center;
  margin-top: clamp(72px, 8vw, 128px); padding: clamp(56px, 7vw, 110px) 20px clamp(40px, 5vw, 72px);
}
/* A soft lavender glow behind the words that fades into the page (no hard edges) */
.swarm::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -5%; pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 50%, rgba(224, 220, 255, 0.75) 0%, rgba(236, 232, 255, 0.35) 45%, transparent 75%),
    radial-gradient(30% 34% at 28% 60%, rgba(246, 226, 244, 0.45) 0%, transparent 70%),
    radial-gradient(30% 34% at 74% 40%, rgba(214, 210, 255, 0.45) 0%, transparent 70%);
}
.swarm-canvas { display: block; width: min(1200px, 100%); height: clamp(300px, 40vw, 500px); margin: 0 auto; touch-action: pan-y; }
@media (max-width: 640px) { .swarm-canvas { height: 380px; } }
/* The closing card follows closely after the swarm */
.swarm + .closing { padding-top: clamp(40px, 5vw, 80px); }

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-page { background: linear-gradient(180deg, var(--page) 0, #fff 420px); }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(140px, 14vw, 190px) clamp(20px, 5vw, 40px) clamp(80px, 9vw, 120px); color: var(--text); }
.legal h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 10px; }
.legal-updated { color: var(--muted); font-size: 0.95rem; margin-bottom: 44px; }
.legal h2 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em; margin: 44px 0 12px; }
.legal h3 { font-size: 1.05rem; font-weight: 600; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 1rem; line-height: 1.75; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.25em; list-style: disc; }
.legal li { margin-bottom: 4px; }
.legal li::marker { color: var(--accent); }
.legal address { font-style: normal; line-height: 1.75; padding: 18px 22px; border-radius: 14px; background: var(--page); border: 1px solid var(--line-soft); }

/* ---------- 404 ---------- */
.notfound-page { background: radial-gradient(60% 50% at 50% 0%, rgba(214, 206, 255, 0.55), transparent 70%), #fff; }
.notfound { min-height: 78vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 140px 20px 80px; }
.notfound h1 { max-width: 14em; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 400; letter-spacing: -0.03em; }
.notfound p:not(.eyebrow) { color: var(--muted); margin-bottom: 32px; }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.notfound-link { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.notfound-link:hover { border-color: var(--ink); }

/* Demo form: Turnstile widget, error line, sending state */
/* Turnstile usually runs invisibly: take up no space (and cancel the form's 18px gap) unless it shows a challenge */
.cf-turnstile { margin: 0 0 -18px; }
.cf-turnstile.is-shown { margin: 4px 0 2px; }
.form-status { margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; }
.form-status.is-error { color: #9b2c2c; background: #fdf0f0; border: 1px solid #f3d0d0; }
.form-status a { color: inherit; }
.form-submit.is-sending { opacity: .7; pointer-events: none; }
.form-submit.is-sending .btn-cta-icon svg:first-child { animation: send-nudge 0.9s ease-in-out infinite; }
@keyframes send-nudge { 50% { transform: translate(3px, -3px); } }
.legal-summary { margin: 0 0 8px; padding: 22px 26px 8px; border-radius: 16px; background: var(--tint); border: 1px solid var(--line-soft); }
.legal-summary h2 { margin: 0 0 10px; font-size: 1.1rem; }
.legal a { overflow-wrap: anywhere; }