/* ==========================================================================
   WarfaRef by Salve Therapeutics

   DIRECTION
   Rebuilt against measurements taken from the live WHOOP, Oura and Levels
   homepages rather than from memory. The three things those pages share,
   and that this one now shares with them:

     1. Display type is enormous and LIGHT. WHOOP runs its H1 at 120px/400,
        Oura at 110px/300, Levels at 102px/500. None of them use bold at
        display size. Weight is what separates premium from loud.
     2. The page is light. Dark appears exactly twice, at the two ends.
        Levels' section sequence is dark hero, eight light sections with two
        near-identical tints, dark closing block. No inversion in between.
     3. Hairlines carry structure, not cards. The largest single colour area
        on all three pages is a near-neutral 1px border around 92% lightness.

   SHAPE SYSTEM (one rule, everywhere)
     panels ................. 20px
     cards + media .......... 12px
     buttons + inputs ....... 8px
     chips + status pills ... full pill
   Measured: Oura's dominant radius is 8px, Levels' is 10px. Tight radii read
   as precise, which is what a clinical product needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Salve Therapeutics Official Brand Palette */
  --navy: #172d57;
  --navy-soft: #24406f;
  --salve-green: #3e7b34;

  /* Luminous surfaces. Never pure #000000 black. */
  --ink-deep: #0e1b33;
  --ink-deeper: #091325;

  /* Scrim. Light, brand-tinted overlays */
  --scrim-rgb: 23, 45, 87;
  --navy-deep: #132445;

  /* Ink on light */
  --ink: #091322;
  --body: #455266;
  --body-quiet: #5e6c80;

  /* Accent: Restored V1 popping emerald/teal green for high visibility */
  --accent: #10d29a;
  /* Popping emerald green on dark/tint surfaces */
  --accent-mid: #10a37f;
  /* Vibrant emerald for graphic elements */
  --accent-ink: #0b8a6a;
  /* High contrast popping green for eyebrows and links */
  --accent-soft: #eaf4eb;

  /* Darker step of accent-ink for small text (eyebrows, footnote sup):
     #0b8a6a only clears 4.32:1 on white, short of the 4.5:1 AA floor at
     these sizes. This clears 5.1:1. */
  --accent-ink-text: #0a7d60;

  /* Surfaces. Luminous, airy tints */
  --surface: #ffffff;
  --surface-tint: #f4f8fc;
  --surface-tint-2: #edf4fa;
  --surface-sink: #e4edf5;
  --hairline: #e2e8f0;
  --hairline-strong: #cbd5e1;

  /* On dark */
  --on-dark: #ffffff;
  --on-dark-quiet: #a4b3c9;
  --on-dark-hairline: rgba(255, 255, 255, 0.15);

  /* Type */
  --font-sans: "Switzer", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape */
  --r-panel: 20px;
  --r-card: 12px;
  --r-btn: 8px;
  --r-pill: 999px;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --max: 1280px;
  --section-y: clamp(3rem, 5vw, 4.5rem);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(23, 45, 87, 0.05),
    0 4px 12px rgba(23, 45, 87, 0.04);
  --shadow-md: 0 2px 6px rgba(23, 45, 87, 0.06),
    0 16px 40px rgba(23, 45, 87, 0.09);
  --shadow-panel: 0 2px 8px rgba(23, 45, 87, 0.08),
    0 40px 90px -24px rgba(23, 45, 87, 0.35);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Display weight is 400, not 600. This is the single largest visual
   difference between this page and a templated one. */
h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  hyphens: none;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--dark :focus-visible,
.hero :focus-visible,
.statement :focus-visible {
  outline-color: var(--accent);
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Every numeral is mono with tabular figures. INR values, doses and dates are
   tabular data and must align. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Anchor targets clear the fixed bar. */
section[id] {
  scroll-margin-top: 72px;
}

.section {
  padding-block: var(--section-y);
}

.section--tint {
  background: var(--surface-tint);
}

.section--dark {
  background: var(--navy-deep);
  color: var(--on-dark-quiet);
}

.section--dark h2,
.section--dark h3 {
  color: var(--on-dark);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--r-btn) 0;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   4. Type scale

   Sizes below are set from measurement, not taste:
     WHOOP  H1 120px/400/-0.03em  H2 100px/400  section H3 32px/600
     Oura   H1 110px/300/-0.05em  section H3 80px/300
     Levels H1 102px/500/-0.05em  H2  56px/500  H3 44.8px/500
   Scaled down for a 1280px container and a longer, more clinical headline.
   -------------------------------------------------------------------------- */

.display {
  font-size: clamp(2.75rem, 6.6vw, 5.5rem);
  /* 44px to 88px */
  line-height: 0.94;
  letter-spacing: -0.042em;
  font-weight: 400;
}

.h2 {
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  /* 34px to 56px */
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 400;
}

/* Levels sets its lede at 20px/32px. Copied exactly; it is the most readable
   lede on any of the three. */
.lede {
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 46ch;
}

.body-copy {
  max-width: 58ch;
  color: var(--body);
}

/* Stacked section header. Never a split header: headline on top, body
   directly beneath, both left aligned to the same edge. */
.lede-block {
  max-width: 58ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.lede-block .lede {
  margin-top: 1rem;
}

.lede-block .body-copy {
  margin-top: 1rem;
  /* Optical alignment against the lede above it, not a shared rhythm unit.
     Each .eyebrow nudge in this file corrects a different element/weight
     and is independent of this value. */
  margin-left: 3.5px;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink-text);
  margin-bottom: 1.5rem;
  margin-left: 0;
}

.section--dark .eyebrow {
  color: var(--accent);
}

.hero .eyebrow {
  color: var(--accent);
  /* Optical alignment against the hero display type below it. */
  margin-left: 6.5px;
}

sup {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
  font-family: var(--font-mono);
  color: var(--accent-ink-text);
  margin-left: 0.12em;
}

.section--dark sup,
.hero sup,
.statement sup {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Buttons

   Levels' button anatomy, measured: 8px radius, 48 to 52px tall, 14 to 16px
   at weight 600, sentence case, 14px/28px padding. Solid ink primary, white
   with a hairline as secondary. Not a pill; the squarer shape reads precise.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  /* CTA labels never wrap */
  min-height: 52px;
  padding: 0.875rem 1.75rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.12s var(--ease), box-shadow 0.25s var(--ease),
    color 0.25s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  min-height: 42px;
  padding: 0.5rem 1.15rem;
  font-size: 0.9375rem;
}

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--navy);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.btn--ghost:hover {
  border-color: var(--ink);
}

.btn--on-dark {
  background: #fff;
  color: var(--ink-deep);
}

.btn--on-dark:hover {
  background: #e3f6ee;
}

.btn--on-dark-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}

.btn--on-dark-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   6. Navigation

   Levels' nav, measured: 73px, fixed, translucent near-black at 0.85 alpha
   with backdrop-filter: blur(8px). It sits over the dark hero and stays
   legible without a solid bar. Same approach here, inverted once the hero
   has scrolled past.
   -------------------------------------------------------------------------- */

.nav {
  /* Fixed rather than sticky, so the bar floats over the photographic hero
     the way it does on all three references. The hero is therefore a full
     100dvh and starts at y=0 with the nav height added as padding. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  /* cap: 80px */
  background: rgba(8, 12, 20, 0.74);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}

.nav .brand__product {
  color: #fff;
}

.nav .brand__parent {
  color: rgba(255, 255, 255, 0.62);
}

.nav .nav__links a {
  color: rgba(255, 255, 255, 0.78);
}

.nav .nav__links a:hover {
  color: #fff;
}

.nav .btn--primary {
  background: #fff;
  color: var(--ink-deep);
}

.nav .btn--primary:hover {
  background: #e3f6ee;
}

.nav .nav__toggle {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

/* Past the hero the page is light, so the bar inverts to match. */
.nav[data-stuck="true"] {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--hairline);
}

.nav[data-stuck="true"] .brand__product {
  color: var(--ink);
}

.nav[data-stuck="true"] .brand__parent {
  color: var(--body-quiet);
}

.nav[data-stuck="true"] .nav__links a {
  color: var(--body);
}

.nav[data-stuck="true"] .nav__links a:hover {
  color: var(--ink);
}

.nav[data-stuck="true"] .btn--primary {
  background: var(--ink);
  color: #fff;
}

.nav[data-stuck="true"] .btn--primary:hover {
  background: var(--navy);
}

.nav[data-stuck="true"] .nav__toggle {
  border-color: var(--hairline-strong);
  color: var(--ink);
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--ink-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav[data-stuck="true"] {
    background: #fff;
  }
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__product {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.035em;
}

.brand__parent {
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--body-quiet);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 2rem);
}

.nav__links a {
  font-size: 0.9375rem;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-btn);
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  font-size: 0.875rem;
}

@media (max-width: 1040px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__actions .btn {
    display: none;
  }
}

.nav__drawer {
  display: none;
  border-bottom: 1px solid var(--hairline);
  background: #fff;
  padding: 1rem var(--gutter) 1.5rem;
}

.nav__drawer[data-open="true"] {
  display: block;
}

.nav__drawer a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--body);
}

.nav__drawer .btn {
  margin-top: 1.35rem;
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. Photography

   None of the three references filter their images: they commission a single
   shoot and the colour temperature agrees by default. Licensed stock does
   not, so a light unifying grade is applied to every photograph on the page.
   Deliberately light. The earlier build pushed this far enough that skin
   tones went blue, which is worse than an unmatched photo.
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-sink);
}

.photo>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.82) contrast(1.05);
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #12325f;
  mix-blend-mode: color;
  opacity: 0.18;
  pointer-events: none;
}

.photo--rounded {
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   8. Hero

   Four text elements, one CTA, nothing else. The photograph is darkened
   hard: Levels runs its hero image at roughly 20% of its own brightness so
   the subject reads as texture rather than as content. That is what makes
   the type sit cleanly without a heavy flat overlay.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: calc(72px + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #172d57 0%, #1c3d75 55%, #254d8a 100%);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 44%;
  filter: saturate(0.95) contrast(1.02) brightness(0.98);
  transform-origin: 70% 45%;
}

/* Luminous directional scrim. Replaced dark black mask with a soft brand tint gradient */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(97deg,
      rgba(23, 45, 87, 0.76) 0%,
      rgba(23, 45, 87, 0.58) 36%,
      rgba(23, 45, 87, 0.32) 65%,
      rgba(23, 45, 87, 0.15) 100%),
    linear-gradient(180deg,
      rgba(23, 45, 87, 0.45) 0%,
      transparent 30%,
      transparent 70%,
      rgba(23, 45, 87, 0.5) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  max-width: 62rem;
}

.hero .display {
  color: #fff;
  margin-bottom: 1.75rem;
}

.hero .lede {
  color: #cfd8e5;
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   9. Trust band. Hairline divided, not cards.
   -------------------------------------------------------------------------- */

.trust {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.trust__item {
  padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
  border-right: 1px solid var(--hairline);
}

.trust__item:first-child {
  padding-left: 0;
}

.trust__item:last-child {
  border-right: 0;
  padding-right: 0;
}

.trust__item h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

.trust__item p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .trust__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .trust__item {
    border-right: 0;
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   10. Indications marquee. Real clinical content. Exactly one on the page.
   -------------------------------------------------------------------------- */

.marquee-band {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  overflow: hidden;
}

.marquee-band__label {
  display: block;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-quiet);
  margin-bottom: 1.25rem;
}

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 2.75rem;
  padding-right: 2.75rem;
  align-items: center;
  white-space: nowrap;
  animation: marquee 46s linear infinite;
}

/* Automatically pause rotation on hover, resume on mouse leave */
.marquee:hover .marquee__track,
.marquee-band:hover .marquee__track {
  animation-play-state: paused;
}

.marquee[data-paused="true"] .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

.marquee__item {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 2.75rem;
}

.marquee__item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-mid);
  opacity: 0.55;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. Stat rail

   AliveCor and WHOOP both set the numeral huge and the label small beside
   it, on a hairline, with no card. Numerals are mono at weight 300 so the
   scale reads as data rather than as shouting.
   -------------------------------------------------------------------------- */

.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.rail__item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-strong);
}

.rail__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-start;
}

.rail__value sup {
  font-size: 0.28em;
  font-weight: 400;
  line-height: 1;
  vertical-align: top;
  margin-left: 0.18rem;
  margin-top: 0.15rem;
  color: var(--accent-ink-text);
}

.rail__label {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body);
  max-width: 26ch;
}

@media (max-width: 900px) {
  .rail {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .rail {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12. The app. Pill nav + description left, phone mockup right.

   The phone is a dark BEZEL on a light section, which is not a theme flip.
   All three references put dark cards on light pages; none of them invert a
   whole section mid-scroll.
   -------------------------------------------------------------------------- */

.signal__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

@media (max-width: 980px) {
  .signal__grid {
    grid-template-columns: 1fr;
  }
}

.signal__head {
  margin-bottom: 1.5rem;
}

.signal__head .h2 {
  font-family: var(--font-sans);
  font-size: clamp(2.125rem, 4.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.signal__head .lede {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--body-quiet);
  margin: 0;
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   12a. Pill nav + description stack
   -------------------------------------------------------------------------- */

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.demo-tab {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--body-quiet);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.demo-tab:hover {
  border-color: var(--navy-soft);
  color: var(--ink);
}

.demo-tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.demo-desc-stack {
  position: relative;
}

.demo-desc {
  display: none;
}

.demo-desc.is-active {
  display: block;
  animation: descIn 0.35s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .demo-desc.is-active {
    animation: none;
  }
}

@keyframes descIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.demo-desc__title {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.demo-desc__body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 44ch;
  margin: 0;
}

/* Feature callout list inside each tab panel. Same visual language as the
   bullet lists in "Who It Serves" (.aud__item ul): accent-tinted dot, compact
   line-height, slightly smaller than body text. */
.demo-features {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.demo-features li {
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body);
}

.demo-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-ink-text);
  box-shadow: 0 0 0 2px rgba(10, 125, 96, 0.15);
}

/* Inline stat callout. A single oversized mono numeral + a short label,
   matching the stat rail language from the Challenge section but scaled
   down for a secondary role inside a tab panel. */
.demo-stat {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.demo-stat__value {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.demo-stat__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--body-quiet);
  max-width: 28ch;
}

/* --------------------------------------------------------------------------
   13. Phone mockup

   A visual recreation, not the production app. Screens toggle via
   .phone__page.is-active; the graphs screen's chart card reuses the dark
   panel language kept below for the ecosystem diagram.
   -------------------------------------------------------------------------- */

.phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

.phone__bezel {
  position: relative;
  background: linear-gradient(165deg, #1b2a44, var(--ink-deeper));
  border-radius: 46px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-panel);
}

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.5;
  /* The status bar sits on the screen's own background, not on white, so the
     chassis takes the active screen's colour. */
  background: #f7f9fb;
  border-radius: 36px;
  overflow: hidden;
  /* The phone's interior matches the real WarfaRef app's own type (iOS
     system font), not the marketing site's Switzer. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

/* Dynamic Island. Measured off the simulator captures: 87 x 25 CSS px at
   this scale, 10px from the top, centred. */
.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 87px;
  height: 25px;
  background: #000;
  border-radius: var(--r-pill);
  z-index: 5;
}

/* Home indicator, sized to iOS (~98 x 4 at this scale). It lives in the tab
   bar's safe-area padding rather than on top of the labels. */
.phone__home-indicator {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 4px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: var(--r-pill);
  z-index: 20;
  pointer-events: none;
}

.phone__statusbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 44px tall overall, matching the real status-bar band. Insets measured at
     ~30 left / ~25 right. */
  padding: 17px 25px 10px 29px;
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #000;
  background: transparent;
  position: relative;
  z-index: 2;
}

.phone__glyphs {
  display: flex;
  align-items: center;
  gap: 3.5px;
  color: #000;
}

.phone__glyph {
  display: block;
}

.phone__pages {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.phone__page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 14px 14px;
  /* The app's own tight leading. Inheriting the marketing page's body
     line-height inflates every row and card by ~17%. */
  line-height: 1.25;
  /* Screens scroll, but a desktop scrollbar inside a phone mockup breaks the
     illusion instantly. iOS overlays its indicator; here we show nothing. */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
  background: #f8fafc;
}

/* Screen backgrounds, sampled per screen from the reference captures. Data
   Entry is the odd one out: it is noticeably bluer than the other four. */
.phone__screen:has(.phone__page[data-screen="entry"].is-active) {
  background: #e6f3ff;
}

.phone__screen:has(.phone__page[data-screen="graphs"].is-active),
.phone__screen:has(.phone__page[data-screen="chat"].is-active),
.phone__screen:has(.phone__page[data-screen="settings"].is-active) {
  background: #f0f4f8;
}

.phone__page[data-screen="home"] {
  background: #f7f9fb;
}

.phone__page[data-screen="entry"] {
  background: #e6f3ff;
}

.phone__page[data-screen="graphs"],
.phone__page[data-screen="chat"],
.phone__page[data-screen="settings"] {
  background: #f0f4f8;
}

.phone__page::-webkit-scrollbar {
  display: none;
}

.phone__page.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .phone__page {
    transition: none;
  }
}

/* The real bar is ~61 CSS px tall: icons and labels in the top ~40, then a
   ~21px home-indicator safe area. Nothing overlaps. No hairline on top —
   the white against the screen tint is the only separation. */
.phone__tabbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 4px 22px;
  background: #fff;
}

.phone__tabbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.phone__tabbtn.is-active {
  color: #0a2342;
}

/* The real tab bar swaps outline glyphs for filled ones on the active tab
   rather than just recolouring them. */
.phone__tabbtn .pv-ico--fill,
.phone__tabbtn.is-active .pv-ico--line {
  display: none;
}

.phone__tabbtn.is-active .pv-ico--fill {
  display: block;
}

.phone__caption {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--body-quiet);
}

/* --------------------------------------------------------------------------
   13a. Phone screen content
   -------------------------------------------------------------------------- */

/* Screen furniture ------------------------------------------------------- */

/* Each screen is a flex column that scrolls. Without this, a screen taller
   than the viewport (Settings) compresses its cards instead of overflowing,
   which silently eats whole rows. The chat thread is the one child that is
   meant to absorb slack. */
.phone__page > *:not(.pv-chat__thread) {
  flex-shrink: 0;
}

/* iOS large title. 34pt on device -> 23.7px at the mockup's 0.697 scale. */
.pv-title {
  margin: 2px 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1e293b;
}

.pv-section-label {
  margin: 14px 0 6px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #64748b;
}

.pv-card {
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Icon tiles. Home uses the larger 33px tile, Settings the 25px one. */
.pv-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  border-radius: 8px;
}

.pv-tile--sm {
  width: 25px;
  height: 25px;
  border-radius: 7px;
}

.pv-tile--indigo { background: #eef2ff; color: #0a2342; }
.pv-tile--sky    { background: #f0f9ff; color: #0369a1; }
.pv-tile--amber  { background: #fef3c7; color: #f59e0b; }
.pv-tile--slate  { background: #f1f5f9; color: #0a2342; }
.pv-tile--rose   { background: #fef2f2; color: #ef4444; }
.pv-tile--purple { background: #f5f3ff; color: #8b5cf6; }
.pv-tile--gold   { background: #fffbeb; color: #f59e0b; }
.pv-tile--green  { background: #ecfdf5; color: #10b981; }
.pv-tile--blue   { background: #eef2ff; color: #6366f1; }
.pv-tile--pink   { background: #fdf2f8; color: #ec4899; }
.pv-tile--cyan   { background: #ecfeff; color: #06b6d4; }
.pv-tile--info   { background: #eff6ff; color: #0a2342; }

/* Status pill — good / danger. Both states verified in the references. */
.pv-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
  white-space: nowrap;
}

.pv-pill i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentcolor;
}

.pv-pill--good   { background: #dcfce7; border: 1px solid #86efac; color: #16a34a; }
.pv-pill--danger { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; }

/* Home -------------------------------------------------------------------- */

.pv-home__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 12px;
}

/* The real app shows the patient's own photo here. A marketing page should
   not ship a real person's face, so this is an abstract stand-in at the same
   size and with the same navy ring. */
.pv-avatar {
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 1.5px solid #0284c7;
  background: #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv-greeting {
  font-size: 0.5625rem;
  font-weight: 500;
  color: #64748b;
}

.pv-name {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e293b;
}

.pv-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 31px;
  height: 31px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff;
  color: #0a2342;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* Health Questionnaire row */
.pv-qcard {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 10px;
}

.pv-qcard__body { flex: 1; min-width: 0; }

.pv-qcard__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1e293b;
}

.pv-qcard__sub {
  margin-top: 1px;
  font-size: 0.5625rem;
  color: #64748b;
}

.pv-h2 {
  margin: 14px 0 8px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e293b;
}

/* Latest INR */
.pv-inr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
}

.pv-inr__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
}

.pv-inr__body { flex: 1; min-width: 0; }

.pv-inr__label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.pv-inr__value {
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #1e293b;
}

/* Stat pair */
.pv-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
}

.pv-stat { padding: 12px 10px; }

.pv-stat__label {
  margin-top: 12px;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #64748b;
}

.pv-stat__value {
  margin-top: 2px;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1e293b;
}

.pv-stat__sub {
  margin-top: 2px;
  font-size: 0.5rem;
  color: #94a3b8;
}

/* Daily Health Tip */
.pv-tip { padding: 11px 10px 12px; margin-top: 12px; }

.pv-tip__head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pv-tip__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1e293b;
}

.pv-tip__body {
  margin-top: 9px;
  font-size: 0.5625rem;
  line-height: 1.55;
  color: #475569;
}

/* Data Entry -------------------------------------------------------------- */

.pv-entry__title {
  margin: 4px 0 12px;
  text-align: center;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c3a70;
}

.pv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.pv-btn--import { background: #1c3a70; }
.pv-btn--submit { background: #74c365; margin-top: 14px; }

.pv-entry-card {
  margin-top: 14px;
  padding: 12px 11px 14px;
  border-radius: 8px;
  background: #0a2342;
}

.pv-entry-card__label {
  font-size: 0.625rem;
  font-weight: 400;
  color: #fff;
}

/* Empty in the reference — the field carries no placeholder text. */
.pv-entry-card__input {
  height: 21px;
  margin-top: 7px;
  border-radius: 5px;
  background: #fff;
}

/* Statistics -------------------------------------------------------------- */

.pv-datepill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  margin: 0 auto 9px;
  padding: 6px 13px;
  border-radius: 9px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #1c3a70;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pv-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pv-segment span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 2px;
  border-radius: 9px;
  font-size: 0.5625rem;
  font-weight: 400;
  color: #000;
}

.pv-segment span.is-active {
  background: #0a2342;
  color: #fff;
  font-weight: 700;
}

.pv-timeframe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 9px auto 0;
  padding: 7px 15px;
  border-radius: 8px;
  background: #0a2342;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
}

.pv-graph-card {
  margin-top: 10px;
  padding: 11px 10px 8px;
}

.pv-graph-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #1c3a70;
}

.pv-graph-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.pv-graph-card__value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1c3a70;
}

.pv-chart { display: block; width: 100%; margin-top: 6px; }

.pv-chart__grid {
  stroke: #bbf7d0;
  stroke-width: 0.6;
  stroke-dasharray: 3 3;
}

.pv-chart__area { fill: #dcfce7; }

.pv-chart__line {
  fill: none;
  stroke: #16a34a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.pv-chart__dot { fill: #16a34a; }

.pv-chart__label {
  fill: #333;
  font-size: 6px;
  font-family: inherit;
}

.pv-export {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
  font-size: 0.6875rem;
  color: #007aff;
}

/* Chat -------------------------------------------------------------------- */

.pv-chat__title {
  margin: 4px 0 10px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1e293b;
}

/* Anchored to the bottom: the real screen opens scrolled to the newest
   message, so the thread sits against the composer, not the title. */
.pv-chat__thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pv-bubble {
  max-width: 80%;
  padding: 7px 9px 5px;
  border-radius: 8px;
}

.pv-bubble p {
  font-size: 0.625rem;
  line-height: 1.35;
  color: #fff;
}

.pv-bubble__time {
  display: block;
  margin-top: 2px;
  font-size: 0.4375rem;
  color: rgba(255, 255, 255, 0.7);
}

.pv-bubble--in {
  align-self: flex-start;
  background: #1c3a70;
}

.pv-bubble--out {
  align-self: flex-end;
  background: #74c365;
}

.pv-chat__input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 5px 5px 5px 10px;
  border-radius: 999px;
  background: #fff;
  color: #94a3b8;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.pv-chat__input span {
  flex: 1;
  font-size: 0.625rem;
  color: #94a3b8;
}

.pv-chat__send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #a0aec0;
}

/* Settings ---------------------------------------------------------------- */

.pv-list {
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pv-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid #f1f5f9;
}

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

.pv-row__body { flex: 1; min-width: 0; }

.pv-row__title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #1e293b;
}

.pv-row__sub {
  margin-top: 1px;
  font-size: 0.5625rem;
  color: #94a3b8;
}

.pv-row__chev {
  flex-shrink: 0;
  color: #c9cdd2;
}

.pv-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 31px;
  margin-top: 16px;
  border-radius: 8px;
  background: #fef2f2;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ef4444;
}

.pv-version {
  margin: 9px 0 4px;
  text-align: center;
  font-size: 0.5625rem;
  color: #94a3b8;
}

/* --------------------------------------------------------------------------
   14. Dark data panel (reused by the ecosystem diagram)
   -------------------------------------------------------------------------- */

.panel__title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-quiet);
}

/* The only status dot on the page. It carries real state: whether the latest
   reading sits inside the therapeutic window. */
.panel__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(16, 210, 154, 0.10);
  border: 1px solid rgba(16, 210, 154, 0.24);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
}

.panel__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}


/* --------------------------------------------------------------------------
   14. Ecosystem diagram. Light-mode system diagram: a dot-grid surface,
   elevated node cards, and connector pills that name the artifact moving
   between systems rather than an unlabelled animated line. Modelled on
   how real payments-infrastructure diagrams (e.g. Increase) show a data
   flow, adapted to the page's light register instead of copying it dark.
   -------------------------------------------------------------------------- */

#ecosystem {
  padding-block: clamp(2.5rem, 4.4vw, 3.75rem);
}

#ecosystem .lede-block {
  margin-bottom: 1.5rem;
}

.eco__panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-panel);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 1px 2px rgba(23, 45, 87, 0.04), 0 20px 48px -20px rgba(23, 45, 87, 0.22);
  overflow: hidden;
}

.eco__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--hairline-strong);
}

.eco__head .panel__title {
  color: var(--body-quiet);
}

.eco__head .panel__status {
  color: var(--accent-ink-text);
  background: rgba(16, 210, 154, 0.10);
  border-color: rgba(16, 210, 154, 0.28);
}

.eco__head .panel__status i {
  background: var(--accent-ink-text);
}

.eco__stage {
  position: relative;
  padding: 1.75rem 1.5rem;
  background-color: #eef1f3;
  background-image: radial-gradient(circle, rgba(23, 45, 87, 0.16) 1px, transparent 1px);
  background-size: 20px 20px;
}

.eco-mobile {
  display: none;
}

/* Row of three nodes, fixed-width so the return-path verticals below can
   line up under node centers using the same pixel offsets. */
.eco-row {
  display: flex;
  align-items: center;
}

.eco-slot {
  flex: 1;
  min-width: 48px;
  height: 2px;
  position: relative;
}

.eco-node {
  width: 176px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 45, 87, 0.07);
  padding: 1rem 0.85rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.eco-node:hover {
  border-color: var(--navy-soft);
}

.eco-node--key {
  background: #f2faf7;
  border-color: rgba(11, 138, 106, 0.34);
}

.eco-node--key:hover {
  border-color: var(--accent-ink);
}

.eco-node__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 auto 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  border: 1px solid var(--hairline-strong);
}

.eco-node--key .eco-node__icon {
  background: #e2f5ed;
  border-color: rgba(11, 138, 106, 0.3);
}

.eco-node--key .eco-node__icon svg * {
  stroke: var(--accent-ink);
}

.eco-node__label {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.eco-node__sub {
  font-size: 0.71875rem;
  color: var(--body-quiet);
  margin-top: 0.25rem;
}

.eco-ehr {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 45, 87, 0.07);
  padding: 0.65rem 1.1rem;
  transition: border-color 0.3s ease;
}

.eco-ehr:hover {
  border-color: var(--navy-soft);
}

.eco-ehr__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  border: 1px solid var(--hairline-strong);
  flex-shrink: 0;
}

.eco-ehr__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  width: 128px;
  justify-content: center;
  box-sizing: border-box;
}

.eco-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background: var(--accent-mid);
}

.eco-pill--return i {
  background: #7c93b8;
}

.eco-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.eco-line__seg {
  flex: 1;
  min-width: 10px;
  height: 0;
  border-top: 1.5px solid var(--hairline-strong);
  position: relative;
}

.eco-line__seg--dashed {
  border-top-style: dashed;
}

.eco-line__pill {
  flex-shrink: 0;
  line-height: 0;
}

.eco-arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--accent-mid);
  transform: translateY(-50%);
}

.eco-arrow--right {
  right: -1px;
}

.eco-arrow--left {
  left: -1px;
  transform: translateY(-50%) rotate(180deg);
}

.eco-arrow--return {
  border-left-color: #7c93b8;
}

.eco-return {
  position: relative;
  padding: 0 88px;
  margin-top: 2rem;
}

.eco-vertical {
  position: absolute;
  top: -2rem;
  height: calc(50% + 2rem);
  width: 0;
  border-left: 1.5px dashed var(--hairline-strong);
}

.eco-vertical--left {
  left: 88px;
}

.eco-vertical--right {
  right: calc(88px - 1.5px);
}

.eco-vertical__arrow {
  position: absolute;
  top: -1px;
  left: -4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #7c93b8;
}

.eco-return__row {
  display: flex;
  align-items: center;
}

.eco-return__row .eco-line__seg {
  border-top: 1.5px dashed var(--hairline-strong);
}

.eco__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 1.25rem 1.5rem 1.2rem;
  font-size: 0.75rem;
  color: var(--body-quiet);
}

.eco__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.eco__legend em {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-mid);
}

.eco__legend em.is-static {
  background: #7c93b8;
}

/* Vertical stack below the breakpoint where three fixed-width nodes plus
   two connectors no longer fit without cramping. Mirrors the desktop
   loop node-for-node rather than truncating it or forcing horizontal
   scroll. */
@media (max-width: 900px) {
  .eco-desktop {
    display: none;
  }

  .eco-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .eco-mobile .eco-node,
  .eco-mobile .eco-ehr {
    width: 100%;
    max-width: 220px;
  }

  .eco-mobile__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0;
  }

  .eco-mobile__connector-line {
    width: 0;
    height: 16px;
    border-left: 1.5px solid var(--hairline-strong);
  }

  .eco-mobile__connector-line--dashed {
    border-left-style: dashed;
  }

  .eco-mobile__connector-line--arrow {
    position: relative;
  }

  .eco-mobile__connector-line--arrow::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--accent-mid);
  }

  .eco-mobile__connector-line--return.eco-mobile__connector-line--arrow::after {
    border-top-color: #7c93b8;
  }

  .eco-mobile .eco-pill {
    margin: 0.3rem 0;
  }
}

/* --------------------------------------------------------------------------
   15. Steps. Four on a shared rail, no numbering.
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.step {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-strong);
  position: relative;
}

/* A small mark on the rail marks the sequence without labelling it. */
.step::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-mid);
}

.step h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

.step p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   16. Statement. Full-bleed photograph carrying the headline directly.
   -------------------------------------------------------------------------- */

.statement {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(28rem, 62vw, 44rem);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #172d57 0%, #1c3d75 50%, #265090 100%);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.statement__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  isolation: isolate;
}

.statement__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 52%;
  filter: saturate(0.95) contrast(1.02) brightness(0.98);
}

.statement__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #172d57;
  mix-blend-mode: color;
  opacity: 0.08;
}

.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
      rgba(23, 45, 87, 0.15) 0%,
      rgba(23, 45, 87, 0.38) 42%,
      rgba(23, 45, 87, 0.65) 100%);
  pointer-events: none;
}

.statement__inner {
  position: relative;
}

.statement__inner h2 {
  color: #fff;
  font-size: clamp(1.875rem, 3.7vw, 3rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.038em;
  max-width: 22ch;
}

.statement__inner p {
  margin-top: 1.5rem;
  color: #e2e8f0;
  font-size: 1.0625rem;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   17. Capability rank
   -------------------------------------------------------------------------- */

.rank-section {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.rank {
  --rank-inset: calc(max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) - 4px);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(17rem, 25vw, 23rem);
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rank-inset);
  padding-inline: var(--rank-inset);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.rank::-webkit-scrollbar {
  display: none;
}

.rank__card {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}

.rank__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02) brightness(0.98);
  transition: transform 0.7s var(--ease);
}

.rank__card:hover img {
  transform: scale(1.04);
}

/* Soft, lightened scrim: gradient bottom pass only for text readability */
.rank__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(23, 45, 87, 0.45) 0%,
      rgba(23, 45, 87, 0.08) 35%,
      rgba(23, 45, 87, 0.25) 60%,
      rgba(23, 45, 87, 0.82) 100%);
  pointer-events: none;
}

.rank__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.rank__body h3 {
  color: #fff;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.032em;
  max-width: 14ch;
}

.rank__body p {
  color: #d8dfe9;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 30ch;
}

.rank__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.rank__btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  border-radius: var(--r-btn);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

.rank__btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.rank__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 700px) {
  .rank {
    grid-auto-columns: minmax(0, 17rem);
  }
}

/* --------------------------------------------------------------------------
   18. Audiences. Asymmetric: one lead case, two stacked beside it.
   -------------------------------------------------------------------------- */

#benefits {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.aud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 3.5vw, 2.5rem);
  align-items: stretch;
}

.aud__photo-wrap {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  min-height: 100%;
}

.aud__photo {
  height: 100%;
  width: 100%;
}

.aud__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aud__stack {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.aud__item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-strong);
}

.aud__item:first-child {
  padding-top: 0;
  border-top: none;
}

.aud h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

.aud__claim {
  color: var(--ink);
  font-size: 1.0625rem;
  margin-bottom: 1.25rem;
}

.aud ul {
  display: grid;
  gap: 0.7rem;
}

.aud li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body);
}

.aud li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent-mid);
}

@media (max-width: 900px) {
  .aud {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   19. Research
   -------------------------------------------------------------------------- */

#research .eyebrow {
  /* Optical alignment against the h2 below it in this section's narrower column. */
  margin-left: 3px;
}

.innov__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: stretch;
}

.innov__grid>div:first-child {
  height: 100%;
}

.innov__grid .photo {
  height: 100%;
  width: 100%;
}

.innov__grid .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.credentials {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.credential {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline);
}

.credential__k {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body-quiet);
  padding-top: 0.35rem;
}

.credential h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.credential p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.safeguards {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface-tint-2);
  border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
}

.safeguards>h3 {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body-quiet);
  margin-bottom: 1.5rem;
}

.safeguards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.safeguards h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.safeguards p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body);
}

@media (max-width: 980px) {
  .innov__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .safeguards__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .credential {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   20. Closing CTA (Lightened per user request)
   -------------------------------------------------------------------------- */

.section--cta-light {
  background: linear-gradient(135deg, #f0f6fd 0%, #e5effa 50%, #ecf6f1 100%);
  color: var(--body);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.section--cta-light h2 {
  color: var(--navy);
}

.cta__inner {
  max-width: 44rem;
}

.cta__inner p {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  color: var(--body);
  max-width: 52ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.btn--salve-primary {
  background: var(--navy);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn--salve-primary:hover {
  background: #0e1b34;
  box-shadow: var(--shadow-md);
}

.btn--salve-ghost {
  background: #ffffff;
  color: var(--navy);
  border: 1px solid var(--navy);
}

.btn--salve-ghost:hover {
  background: var(--surface-tint-2);
}

/* --------------------------------------------------------------------------
   21. Partners. Logo + name lockups
   -------------------------------------------------------------------------- */

.partners {
  background: var(--surface);
  padding-block: var(--section-y);
}

.partners__label {
  display: block;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-quiet);
  margin-bottom: 2.25rem;
}

.partners__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  row-gap: 2rem;
}

.partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.partners__mark {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--body-quiet);
  text-align: center;
}

.partners__item img {
  max-height: 44px;
  width: auto;
  filter: grayscale(0.75) opacity(0.85);
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.partners__item--tall img {
  max-height: 60px;
}

.partners__item--sm img {
  max-height: 32px;
}

.partners__item:hover img {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .partners__grid {
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   22. Footer (Stripe-inspired condensed redesign)
   -------------------------------------------------------------------------- */

.footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding-top: var(--section-y);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.footer__brand-col {
  padding-right: clamp(0rem, 2vw, 1.5rem);
}

.footer__blurb {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 32ch;
  color: var(--body-quiet);
}

.footer h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.footer li {
  margin-bottom: 0.45rem;
}

.footer li a {
  font-size: 0.875rem;
  color: var(--body-quiet);
  transition: color 0.15s var(--ease);
}

.footer li a:hover {
  color: var(--ink);
}

.footer__references {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
}

.ref-item {
  font-size: 0.71875rem;
  line-height: 1.45;
  color: var(--body-quiet);
  opacity: 0.85;
}

.ref-item sup {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.2em;
}

.footer__bottom {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.8125rem;
  color: var(--body-quiet);
}

.footer__bottom-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.footer__divider {
  opacity: 0.4;
  font-size: 0.65rem;
}

.footer__disclaimer {
  font-size: 0.78125rem;
  opacity: 0.9;
}

.footer__bottom-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer__region {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78125rem;
  color: var(--body-quiet);
  font-weight: 500;
  transition: color 0.15s var(--ease);
  cursor: pointer;
}

.footer__region:hover {
  color: var(--ink);
}

@media (max-width: 820px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__references {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   22. Scroll reveal

   One IntersectionObserver drives every entrance. Transform and opacity
   only, cascaded by an index custom property.
   -------------------------------------------------------------------------- */

.reveal,
[data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.is-revealed,
[data-animate].is-revealed {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   23. Reduced motion. Everything collapses to static.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  [data-animate] {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
  }

  .marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .motion-toggle {
    display: none;
  }

  .hero__media img {
    animation: none;
    transform: none;
  }

  .draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .pop {
    opacity: 1;
    transform: none;
  }

  .rank__card:hover img {
    transform: none;
  }
}