/* ==========================================================================
   Oculabs.com — shared stylesheet
   Single brand typeface: Europa. Design tokens + reusable components.
   ========================================================================== */

/* ----- Fonts ----- */
@font-face {
  font-family: "Europa";
  src: url("assets/fonts/Europa-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Europa";
  src: url("assets/fonts/Europa-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Europa";
  src: url("assets/fonts/Europa-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ----- Design tokens ----- */
:root {
  /* Brand */
  --blue: #3778c2;
  --blue-dark: #2c609b;
  --teal: #03a990;
  --teal-cyan: #40b8e2;
  --ink: #150734;      /* headings, dark sections */
  --ink-deep: #0e0522; /* deepest, footer */

  /* Text */
  --text: #231e20;
  --text-body: #4e5a66;
  --text-strong: #3b3c3f;
  --muted: #96979a;
  --muted-2: #6e6f71;

  /* Light-on-dark */
  --on-dark-blue: #99bae0;
  --on-dark-link: #c4c3d4;

  /* Surfaces */
  --white: #fff;
  --panel: #f7fafd;
  --chip: #f4f7fb;
  --tint-blue: #eaf1fb;
  --border-blue: #d4e4f7;
  --tint-teal: #e6f7f5;
  --border-teal: #b3e8e1;

  /* Status */
  --status-ready: #03a990;
  --status-review: #ff613d;
  --status-not: #e9435e;
  --warning: #ffc600;

  /* Lines */
  --hairline: #e9eaed;

  /* Radii */
  --r-card: 16px;
  --r-card-sm: 14px;
  --r-input: 10px;
  --r-pill: 100px;
  --r-device: 36px;

  /* Shadow */
  --shadow-card: 0 20px 56px rgba(21, 7, 52, 0.14);
  --shadow-hero: 0 24px 64px rgba(21, 7, 52, 0.16);

  /* Layout */
  --maxw: 1200px;
  --nav-h: 66px;

  --font: "Europa", "Helvetica Neue", Arial, sans-serif;
}

/* ----- Reset / base ----- */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (not hidden) keeps position:sticky working on the nav while still
     preventing any horizontal scroll from decorative off-canvas elements */
  overflow-x: clip;
}
img {
  max-width: 100%;
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--blue-dark);
}
::selection {
  background: var(--border-blue);
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid rgba(55, 120, 194, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----- Keyframes ----- */
@keyframes ocpulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.62);
  }
}
@keyframes ocfade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ocfloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
@keyframes ocbreathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.72;
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
}

.section {
  padding: clamp(64px, 7vw, 104px) clamp(24px, 5vw, 64px);
  background: var(--white);
}
.section--panel {
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.section--dark {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.section--band {
  padding: clamp(52px, 5vw, 72px) clamp(24px, 5vw, 64px);
}

/* ----- Grids ----- */
.grid {
  display: grid;
  gap: 20px;
}
.grid--2 {
  grid-template-columns: 1fr 1fr;
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.grid--gap16 {
  gap: 16px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(20px, 4vw, 64px);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.nav__brand img {
  height: 22px;
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-strong);
  background: none;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav__link:hover {
  background: var(--chip);
  color: var(--ink);
}
.nav__link.is-active {
  background: var(--chip);
  color: var(--ink);
  font-weight: 700;
}
/* Hamburger toggle — injected by app.js, shown only on narrow viewports */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: pointer;
}
.nav__toggle:hover {
  background: var(--chip);
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle-bars {
  position: relative;
}
.nav__toggle-bars::before {
  position: absolute;
  left: 0;
  top: -6px;
}
.nav__toggle-bars::after {
  position: absolute;
  left: 0;
  top: 6px;
}
.nav.is-open .nav__toggle-bars {
  background: transparent;
}
.nav.is-open .nav__toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav.is-open .nav__toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
}
.btn-primary {
  font-size: 15px;
  color: #fff;
  background: var(--blue);
  padding: 14px 28px;
  box-shadow: 0 4px 16px rgba(55, 120, 194, 0.28);
}
.btn-primary:hover {
  background: var(--blue-dark);
  color: #fff;
}
.btn-secondary {
  font-size: 15px;
  color: var(--blue);
  background: #fff;
  padding: 14px 26px;
  border: 1.5px solid var(--border-blue);
}
.btn-secondary:hover {
  border-color: var(--blue);
  background: var(--panel);
}
/* Nav "Request a demo" pill (smaller) */
.btn-nav {
  margin-left: 10px;
  font-size: 13px;
  color: #fff;
  background: var(--blue);
  padding: 10px 20px;
  box-shadow: 0 1px 3px rgba(55, 120, 194, 0.35);
}
.btn-nav:hover {
  background: var(--blue-dark);
  color: #fff;
}
/* On-blue CTA band button */
.btn-onblue {
  font-size: 15px;
  color: var(--blue);
  background: #fff;
  padding: 15px 32px;
  box-shadow: 0 4px 16px rgba(21, 7, 52, 0.18);
}
.btn-onblue:hover {
  background: var(--panel);
  color: var(--blue);
}
/* Teal button on dark */
.btn-teal {
  font-size: 15px;
  color: var(--ink);
  background: var(--teal-cyan);
  padding: 14px 28px;
}
.btn-teal:hover {
  background: #fff;
  color: var(--ink);
}
/* Text link button (inline "Explore →") */
.link-arrow {
  align-self: flex-start;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.link-arrow:hover {
  color: var(--blue-dark);
}
.link-arrow--teal {
  color: var(--teal-cyan);
}
.link-arrow--teal:hover {
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.eyebrow--teal {
  color: var(--teal);
}
.eyebrow--cyan {
  color: var(--teal-cyan);
}
/* eyebrow with a leading pulsing dot */
.eyebrow--dot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.16em;
}
.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  animation: ocpulse 2.2s infinite;
}

h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.h1 {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.h1--sm {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.h2--sm {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.h2--band {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}
.body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0;
}
.text-blue {
  color: var(--blue);
}
.text-ink {
  color: var(--ink);
}
.max-680 {
  max-width: 680px;
}
.max-660 {
  max-width: 660px;
}
.max-640 {
  max-width: 640px;
}
.max-560 {
  max-width: 560px;
}

/* ==========================================================================
   Cards / pills / chips
   ========================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 30px;
}
.card--sm {
  border-radius: var(--r-card-sm);
  padding: 22px;
}
.card--panel {
  background: var(--panel);
}
.card--dark {
  background: var(--ink);
  border-color: var(--ink);
}
.card h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
.card--dark h3 {
  color: #fff;
}
.card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.card--dark p {
  color: var(--on-dark-blue);
}
.card--flex {
  display: flex;
  flex-direction: column;
}
.card--flex p {
  flex: 1;
  margin-bottom: 18px;
}

/* numbered label */
.num {
  font-family: var(--font);
  font-size: 13px;
  color: var(--on-dark-blue);
  margin-bottom: 20px;
}
.num--cyan {
  color: var(--teal-cyan);
}

/* geometric icon tile */
.icon-tile {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--tint-blue);
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.icon-tile--dark {
  background: rgba(64, 184, 226, 0.16);
}
.icon-square {
  width: 18px;
  height: 18px;
  border: 3px solid var(--blue);
  border-radius: 5px;
}
.icon-circle {
  width: 18px;
  height: 18px;
  border: 3px solid var(--blue);
  border-radius: 50%;
}
.icon-circle--cyan {
  width: 16px;
  height: 16px;
  border-color: var(--teal-cyan);
  box-shadow: 0 0 0 4px rgba(64, 184, 226, 0.18);
}

/* pills / chips */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-strong);
  background: var(--chip);
  border: 1px solid var(--hairline);
  padding: 6px 13px;
  border-radius: var(--r-pill);
}
.pill--teal {
  color: var(--teal);
  background: var(--tint-teal);
  border-color: var(--border-teal);
}
.pill--blue {
  color: var(--blue);
  background: var(--tint-blue);
  border-color: var(--border-blue);
  font-size: 12px;
  padding: 5px 12px;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-row--10 {
  gap: 10px;
}
/* Taxonomy pills read a touch lighter than the default strong-body pill (matches
   the prototype's #5A5B5D), without changing the shared .pill used elsewhere. */
.pill-row--tax .pill {
  color: #5a5b5d;
}

/* ==========================================================================
   Browser frame / device / terminal
   ========================================================================== */
.browser {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.browser--hero {
  box-shadow: var(--shadow-hero);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--chip);
  border-bottom: 1px solid var(--hairline);
}
.browser__url {
  margin-left: 10px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
}
.browser img {
  width: 100%;
  display: block;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot--red {
  background: var(--status-not);
}
.dot--yellow {
  background: var(--warning);
}
.dot--green {
  background: var(--teal);
}

/* phone device */
.device {
  width: 260px;
  background: var(--ink);
  border-radius: var(--r-device);
  padding: 10px;
  box-shadow: 0 24px 64px rgba(21, 7, 52, 0.24);
}
.device__screen {
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
}
.device__screen img {
  width: 100%;
  display: block;
}

/* terminal (dark console) */
.term {
  background: var(--ink-deep);
  border: 1px solid rgba(64, 184, 226, 0.2);
  border-radius: var(--r-card);
  overflow: hidden;
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.term__bar .dot {
  width: 9px;
  height: 9px;
}
.term__title {
  margin-left: 8px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted-2);
}
.term__body {
  padding: 22px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.85;
}
.term__body--lg {
  padding: 24px;
  line-height: 1.9;
}
.term__cmd {
  color: var(--teal-cyan);
}
.term__muted {
  color: var(--muted-2);
}
.term__out {
  color: var(--hairline);
}
.term__ok {
  color: var(--teal);
}
.term__hint {
  color: var(--on-dark-blue);
}
.mt6 {
  margin-top: 6px;
}
.mt12 {
  margin-top: 12px;
}
.mt14 {
  margin-top: 14px;
}

/* ==========================================================================
   Decorative ambient rings / dots
   ========================================================================== */
.ring-motif {
  position: absolute;
  width: 104px;
  height: 104px;
  pointer-events: none;
  opacity: 0.85;
}
.ring-motif__ring {
  position: absolute;
  inset: 0;
  border: 9px solid #c9ddf5;
  border-radius: 50%;
  animation: ocbreathe 7s ease-in-out infinite;
}
.ring-motif__dot {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  background: var(--blue);
  border-radius: 50%;
  animation: ocpulse 2.6s ease-in-out infinite;
}
.ring-big {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: ocbreathe 10s ease-in-out infinite;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 64px) clamp(40px, 4vw, 64px);
  background: radial-gradient(120% 130% at 88% -10%, #eaf1fb 0%, #f7fafd 42%, #fff 78%);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.hero__ring {
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  border: 70px solid var(--tint-blue);
  opacity: 0.55;
}
.hero__motif {
  top: 100px;
  right: 120px;
}
.hero__grid {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__col {
  min-width: 0;
}
.hero__eyebrow {
  margin-bottom: 22px;
}
.hero h1 {
  margin: 0 0 20px;
}
.hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 520px;
  margin: 0 0 30px;
}
.hero__media {
  min-width: 0;
  position: relative;
}
.hero__chip {
  position: absolute;
  left: -18px;
  bottom: 26px;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: 0 12px 32px rgba(21, 7, 52, 0.28);
  animation: ocfloat 5.5s ease-in-out infinite;
  font-family: var(--font);
}
.hero__chip-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--teal-cyan);
  margin-bottom: 3px;
}
.hero__chip-text {
  font-size: 12px;
  color: var(--hairline);
}

/* Secondary page headers (Platform / About / Contact) */
.page-hero {
  padding: clamp(52px, 6vw, 88px) clamp(24px, 5vw, 64px) clamp(40px, 4vw, 56px);
  background: radial-gradient(120% 130% at 12% -10%, #eaf1fb 0%, #f7fafd 46%, #fff 82%);
  border-bottom: 1px solid var(--hairline);
}
.page-hero--right {
  background: radial-gradient(120% 130% at 88% -10%, #eaf1fb 0%, #f7fafd 46%, #fff 82%);
  padding: clamp(56px, 6vw, 96px) clamp(24px, 5vw, 64px) clamp(44px, 4vw, 64px);
}
.page-hero--center {
  background: radial-gradient(120% 130% at 50% -20%, #eaf1fb 0%, #f7fafd 50%, #fff 85%);
  padding: clamp(56px, 6vw, 88px) clamp(24px, 5vw, 64px);
}
.page-hero h1 {
  margin: 0 0 18px;
  max-width: 840px;
}
.page-hero .lead {
  max-width: 640px;
}

/* section intro block */
.section__head {
  max-width: 820px;
}
.section__head h2 {
  margin: 0 0 18px;
}

/* ==========================================================================
   THE SHIFT (compare)
   ========================================================================== */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
.compare__card {
  border-radius: var(--r-card);
  padding: 30px;
}
.compare__card--neg {
  background: #fff8f9;
  border: 1px solid rgba(233, 67, 94, 0.16);
}
.compare__card--pos {
  background: var(--tint-teal);
  border: 1px solid rgba(3, 169, 144, 0.22);
}
.compare__label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.compare__card--neg .compare__label {
  color: var(--status-not);
}
.compare__card--pos .compare__label {
  color: var(--teal);
}
.compare__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.compare__item {
  display: flex;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
}
.compare__card--neg .compare__item {
  color: #5a5b5d;
}
.compare__card--pos .compare__item {
  color: var(--text-strong);
}
.compare__mark {
  flex-shrink: 0;
}
.compare__card--neg .compare__mark {
  color: var(--status-not);
}
.compare__card--pos .compare__mark {
  color: var(--teal);
}

/* ==========================================================================
   Checklist (showcase / provider+patient)
   ========================================================================== */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.check__mark {
  color: var(--teal);
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}
.check__text {
  font-size: 15px;
  color: var(--text-strong);
  line-height: 1.5;
}
.check__text strong {
  color: var(--ink);
  font-weight: 700;
}

/* split (image + copy) sections */
.split {
  display: grid;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.split--showcase {
  grid-template-columns: 0.9fr 1.1fr;
}
.split--5050 {
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
}
.split__col {
  min-width: 0;
}
.split__col h2 {
  margin: 0 0 16px;
}

/* ==========================================================================
   MCP / dark section pieces
   ========================================================================== */
.dark-ring--tl {
  top: -160px;
  left: -120px;
  width: 460px;
  height: 460px;
  border: 64px solid rgba(64, 184, 226, 0.09);
  animation: ocbreathe 12s ease-in-out infinite;
}
.dark-ring--br {
  bottom: -160px;
  right: -120px;
  width: 460px;
  height: 460px;
  border: 64px solid rgba(64, 184, 226, 0.08);
  animation: ocbreathe 13s ease-in-out infinite;
}
.dark__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
}
.dark__inner h2 {
  color: #fff;
  margin: 0 0 16px;
}
.dark__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--on-dark-blue);
  margin: 0 0 44px;
  max-width: 660px;
}
.mcp-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: stretch;
}
.mcp-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-dark-soft {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-card);
  padding: 24px;
  flex: 1;
}
.card-dark-soft--sm {
  border-radius: var(--r-card-sm);
  padding: 22px;
}
.card-dark-soft--accent {
  background: rgba(64, 184, 226, 0.1);
  border-color: rgba(64, 184, 226, 0.35);
}
.card-dark-soft h3 {
  color: #fff;
  margin: 0 0 8px;
}
.card-dark-soft--sm h3 {
  font-size: 16px;
}
.card-dark-soft p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-blue);
  margin: 0;
}
.card-dark-soft--sm p {
  font-size: 13px;
  line-height: 1.55;
}
.card-dark-soft--accent p {
  color: #c9e6f3;
}
.kicker {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--teal-cyan);
  margin-bottom: 12px;
}
.kicker--tools {
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.mcp-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.dark-cta {
  margin-top: 28px;
}

/* ==========================================================================
   Three pillars
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pillars h2 {
  margin: 0 0 40px;
  max-width: 640px;
}

/* video frame */
.video-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(64, 184, 226, 0.25);
}
.video-frame video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: cover;
}

/* ==========================================================================
   Modules grid / decision support (Platform)
   ========================================================================== */
.module-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card-sm);
  padding: 22px;
}
.module-card__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  color: var(--blue);
  margin-bottom: 6px;
}
.module-card__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}
.module-card--ext {
  background: var(--tint-blue);
  border: 1px dashed var(--on-dark-blue);
}
.module-card--ext .module-card__title {
  font-size: 13px;
  letter-spacing: 0.06em;
}
.note-teal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--teal);
  background: var(--tint-teal);
  border: 1px solid var(--border-teal);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 28px;
}

/* decision-support steps */
.step-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card-sm);
  padding: 26px;
  border-top: 3px solid var(--blue);
}
.step-card--teal {
  border-top-color: var(--teal);
}
.step-card__label {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.step-card--teal .step-card__label {
  color: var(--teal);
}
.step-card h3 {
  font-size: 18px;
  margin: 0 0 6px;
}
.step-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.status-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.status-pill--not {
  color: var(--status-not);
  background: rgba(233, 67, 94, 0.09);
}
.status-pill--review {
  color: var(--status-review);
  background: rgba(255, 97, 61, 0.1);
}
.status-pill--ready {
  color: var(--teal);
  background: var(--tint-teal);
}

/* ==========================================================================
   Who we serve
   ========================================================================== */
.serve-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 32px;
}
.serve-card h3 {
  font-size: 21px;
  margin: 0 0 10px;
}
.serve-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 18px;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.band--blue {
  background: var(--blue);
}
.band--dark {
  background: var(--ink);
}
.band h2 {
  color: #fff;
  margin: 0 0 8px;
  max-width: 520px;
}
.band__sub {
  font-size: 16px;
  margin: 0;
  max-width: 480px;
}
.band--blue .band__sub {
  color: rgba(255, 255, 255, 0.82);
}
.band--dark .band__sub {
  color: var(--on-dark-blue);
}

/* ==========================================================================
   About
   ========================================================================== */
.about-why {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.about-why__col {
  min-width: 0;
}
.about-why__col h2 {
  margin: 0;
}
.about-why p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 16px;
}
.pullquote {
  border-left: 3px solid var(--blue);
  background: var(--panel);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin-top: 8px;
}
.pullquote p {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
}
.beliefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.belief-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 28px;
}
.belief-card .num {
  margin-bottom: 16px;
}
.belief-card h3 {
  font-size: 19px;
  margin: 0 0 8px;
}
.belief-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fact {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card-sm);
  padding: 22px;
}
.fact__label {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.fact__value {
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.3;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.contact-col {
  min-width: 0;
}
.contact-col h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-detail {
  display: flex;
  gap: 12px;
  align-items: center;
}
.contact-detail__icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: var(--r-input);
  background: var(--tint-blue);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-detail__icon .ic-circle {
  width: 12px;
  height: 12px;
  border: 3px solid var(--blue);
  border-radius: 50%;
}
.contact-detail__icon .ic-square {
  width: 12px;
  height: 12px;
  background: var(--blue);
  border-radius: 3px;
}
.contact-detail__label {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.contact-detail__value {
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
a.contact-detail__value {
  color: var(--blue);
}

.form-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 12px 40px rgba(21, 7, 52, 0.08);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.field {
  display: flex;
  flex-direction: column;
}
.field--full {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-input);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2396979A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(55, 120, 194, 0.12);
}
.form-note {
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 14px 0 0;
}
.form-error {
  font-family: var(--font);
  font-size: 13px;
  color: var(--status-not);
  margin: 12px 0 0;
  text-align: center;
}
.btn-block {
  width: 100%;
  padding: 15px;
}
.form-success {
  text-align: center;
  padding: 36px 12px;
  animation: ocfade 0.4s ease;
}
.form-success__check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tint-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--teal);
  font-size: 30px;
  font-weight: 700;
}
.form-success h2 {
  font-size: 22px;
  margin: 0 0 8px;
}
.form-success p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 auto;
  max-width: 400px;
}
[hidden] {
  display: none !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--ink-deep);
  padding: clamp(48px, 5vw, 72px) clamp(24px, 5vw, 64px) 32px;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__wordmark {
  height: 20px;
  display: block;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer__tagline {
  font-size: 14px;
  line-height: 1.65;
  color: #8b8aa0;
  margin: 0;
  max-width: 280px;
}
.footer__colhead {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__link {
  text-align: left;
  font-family: var(--font);
  font-size: 14px;
  color: var(--on-dark-link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.footer__link:hover {
  color: #fff;
}
.footer__static {
  font-family: var(--font);
  font-size: 14px;
  color: var(--on-dark-link);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
}
.footer__bottom span {
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted-2);
}

/* ==========================================================================
   Scroll-reveal
   Elements are hidden/animated by app.js via inline styles (progressive
   enhancement) so no-JS / reduced-motion users always see full content.
   ========================================================================== */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .mcp-grid {
    grid-template-columns: 1fr;
  }
  .mcp-cats {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--4,
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__media {
    order: 2;
  }
  .grid--2,
  .grid--3,
  .compare,
  .pillars,
  .beliefs,
  .split--showcase,
  .split--5050,
  .about-why,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  /* keep image below copy on the home showcase (image is 2nd in DOM already) */
  .band {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .hero__ring,
  .ring-motif {
    display: none;
  }
}

/* Mobile navigation: collapse the links + CTA into a toggle-able dropdown so
   they never overflow/clip the viewport (the row is ~600px min-content wide). */
@media (max-width: 768px) {
  .nav__toggle {
    display: inline-flex;
  }
  /* JS-enhanced: hidden dropdown that drops below the bar when open */
  .nav--enhanced .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px clamp(20px, 4vw, 64px) 16px;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 24px 48px rgba(21, 7, 52, 0.12);
  }
  .nav--enhanced.is-open .nav__links {
    display: flex;
  }
  .nav--enhanced .nav__link {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
  }
  .nav--enhanced .nav__links .btn-nav {
    width: 100%;
    margin: 6px 0 0;
    text-align: center;
  }
  /* No-JS fallback: let the row wrap so nothing is ever clipped off-screen */
  .nav:not(.nav--enhanced) .nav__links {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .grid--4,
  .facts,
  .mcp-cats {
    grid-template-columns: 1fr;
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
  .hero__chip {
    left: 8px;
  }
}

/* Focus ring: the shared blue outline is invisible on the blue CTA band and
   weak on dark sections — force a white ring there so keyboard focus stays
   visible on every surface (WCAG 2.4.7 / 1.4.11). */
.band--blue :focus,
.band--blue :focus-visible,
.section--dark :focus,
.section--dark :focus-visible,
.band--dark :focus,
.band--dark :focus-visible,
.footer :focus,
.footer :focus-visible {
  outline-color: #fff;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
  }
}

/* ==========================================================================
   Legal pages (Privacy Policy / Terms of Service)
   Long-form prose: constrained measure, clear h2/h3 hierarchy, linked TOC.
   ========================================================================== */
.legal__hero .legal__updated {
  font-size: 15px;
  color: var(--muted-2);
  margin-top: 4px;
}
.legal__body {
  padding-top: clamp(36px, 4vw, 52px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
.legal__container {
  max-width: 76ch;
  margin: 0 auto;
}

/* Table of contents (source TOC for terms, generated for privacy) */
.legal__toc {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 22px 26px 24px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.legal__toc-head {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.legal__toc ol,
.legal__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 28px;
}
.legal__toc li {
  font-size: 14px;
  line-height: 1.5;
}
.legal__toc a {
  color: var(--text-body);
}
.legal__toc a:hover {
  color: var(--blue);
}

/* Prose hierarchy */
.legal__body h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.22;
  margin: clamp(40px, 4vw, 56px) 0 14px;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.legal__body h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal__body h3 {
  font-size: 17px;
  color: var(--text-strong);
  margin: 30px 0 10px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.legal__body p,
.legal__body li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body);
}
.legal__body p {
  margin: 0 0 16px;
}
.legal__body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.legal__body li {
  margin: 0 0 8px;
}
.legal__body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.legal__body a:hover {
  color: var(--blue-dark);
}

/* Medical-disclaimer callout (Terms §28) */
.legal__callout--medical {
  margin: clamp(40px, 4vw, 56px) 0 0;
  padding: 2px 26px 10px;
  background: var(--tint-blue);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-card);
}
.legal__callout--medical h2 {
  border-top: none;
  padding-top: clamp(24px, 3vw, 32px);
  margin-top: 0;
}
.legal__emergency {
  margin: 6px 0 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-left: 4px solid var(--status-not);
  border-radius: var(--r-card-sm);
  color: var(--text) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

@media (max-width: 600px) {
  .legal__toc ol,
  .legal__toc ul {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Cookie-consent banner (injected by app.js on first visit)
   ========================================================================== */
.cookie-banner {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 16px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  animation: cookieUp 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cookie-banner__text {
  flex: 1 1 280px;
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-link);
}
.cookie-banner__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-banner .btn {
  font-size: 13px;
  padding: 10px 20px;
}
.cookie-banner__accept {
  color: #fff;
  background: var(--blue);
}
.cookie-banner__accept:hover {
  background: var(--blue-dark);
  color: #fff;
}
.cookie-banner__decline {
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.cookie-banner__decline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
@keyframes cookieUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__actions .btn {
    flex: 1;
  }
}