/* Inter only, self-hosted, the full variable range (V31 pass 2). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Metric-matched local fallback: text set in it wraps the same way Inter will, so the
   swap does not move the layout. Ratios measured in Chromium. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 106.1%;
  ascent-override: 91.3%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}
:root {
  --ink: #003562;
  --text: color-mix(in oklab, var(--social) 86%, #fff);
  --muted: color-mix(in oklab, var(--social) 70%, #fff);
  --paper: #fff;
  --wash: #f5f7fb;
  --accent: #a54891;
  --accent-2: #2784a0;
  --teal: #2784a0;
  --line: color-mix(in oklab, var(--social) 13%, transparent);
  --wave: linear-gradient(135deg, #a54891 0%, #927ac1 38%, #2784a0 72%, #003562 100%);
  --sans: "Inter", "Inter Fallback", system-ui, sans-serif;
  /* Legacy rules that still ask for a serif or mono face render in Inter. */
  --serif: var(--sans);
  --mono: var(--sans);
  /* The home's container (lovable-v30/src/styles.css --container): 76rem wide with a fluid
     gutter (about 22px on a phone, 64px at most), so the shell never moves between pages. */
  --wrap: var(--container);

  /* Brand and V31 pass 2 tokens: the same values as lovable-v30/src/styles.css. */
  --bio: #2784a0;
  --psycho: #927ac1;
  --social: #003562;
  --border-med: color-mix(in oklab, var(--social) 16%, transparent);
  --ink-2: color-mix(in oklab, var(--social) 86%, #fff);
  --ink-mute: color-mix(in oklab, var(--social) 70%, #fff);
  --ink-soft: color-mix(in oklab, var(--social) 60%, #fff);
  --gap-line: color-mix(in oklab, var(--social) 26%, transparent);
  --gap-node: color-mix(in oklab, var(--social) 38%, transparent);
  --record-line: linear-gradient(
    90deg,
    var(--accent),
    var(--psycho) 38%,
    var(--bio) 72%,
    var(--social)
  );
  --record-line-v: linear-gradient(
    180deg,
    var(--accent),
    var(--psycho) 38%,
    var(--bio) 72%,
    var(--social)
  );
  --rule: color-mix(in oklab, var(--social) 12%, transparent);
  --rule-strong: color-mix(in oklab, var(--social) 22%, transparent);
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --container: min(76rem, 100% - 2 * var(--gutter));
  --section-y: clamp(4rem, 2.5rem + 5vw, 7rem);
  --shadow-xs: 0 1px 0 color-mix(in oklab, var(--social) 5%, transparent);
  --shadow-frame:
    0 0 0 1px rgb(0 53 98 / 0.06), 0 2px 4px rgb(0 53 98 / 0.04),
    0 24px 48px -16px rgb(0 53 98 / 0.14), 0 64px 96px -48px rgb(0 53 98 / 0.14);
  --r-btn: 10px;
  --r-card: 16px;
  --r-frame: 20px;
  --r-plate: 24px;
  --fs-display-1: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);
  --fs-display-2: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
  --fs-display-3: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --fs-figure: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-standfirst: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-lede: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-note: 0.8125rem;
  --fs-label: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
/* One focus ring site-wide. */
:focus-visible {
  outline: 2px solid #a54891;
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.skip-link:focus {
  top: 16px;
}
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
.mono,
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* The kicker: magenta Inter label. */
.rail-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a54891;
}
/* Two-tone display type: the continuation in the 60% ink (display sizes only). No gradient. */
.grad {
  color: var(--ink-soft);
}
.serif {
  font-family: var(--serif);
}
.fine {
  max-width: 850px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.lede {
  max-width: 44ch;
  margin: 26px 0 0;
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
}
.section {
  padding: clamp(88px, 11vw, 160px) 0;
}
/* V6 (Erez, 2026-09-30): no divider lines between sections; the wash ground and the spacing
   mark the change. */
.section-wash {
  background: var(--wash);
}
.section-title {
  max-width: 900px;
  margin: 12px 0 0;
  color: var(--ink);
  font: 620 var(--fs-display-3) / 1.1 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.rail {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 34px;
}
.rail-label {
  padding-top: 12px;
}
.reveal {
  opacity: 1;
  transform: none;
}
.motion .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.motion .reveal.in {
  opacity: 1;
  transform: none;
}

/* Navigation: the home header's exact geometry (lovable-v30/src/styles/pass2-hero.css): 64px,
   solid white, the hairline just below the box and the 2px wave line on top; the lockup, the links
   and the call to action sit on the home's container, so nothing moves between pages. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  background: #fff;
  box-shadow: 0 1px 0 var(--rule);
}
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--wave);
}
.nav-inner {
  width: var(--wrap);
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* The BEACON / EQUANIMITY AI lockup (the same as the home header). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 0 auto;
  color: var(--ink);
  text-decoration: none;
}
.brand img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-sub {
  margin-top: 0.25rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.nav-links {
  display: none;
  flex: none;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink-mute);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}
/* Buttons: flat navy, radius 10px, no drop shadow; hover changes colour plus a 1px lift. */
.nav-cta,
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.btn:hover,
.nav-cta:hover {
  transform: translateY(-1px);
  background: var(--ink);
  background: color-mix(in oklab, var(--ink) 86%, var(--bio));
}
.btn.ghost {
  color: var(--ink);
  border-color: var(--border-med);
  background: #fff;
  box-shadow: none;
}
.btn.ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: #fff;
}
.btn.light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.btn.light:hover {
  color: var(--ink);
  background: #fff;
}
/* The home's breakpoints: the call to action from 40rem, the links from 64rem, the menu button
   below 64rem (after the call to action, as on the home). */
.site-nav .nav-cta {
  display: none;
  flex: none;
  white-space: nowrap;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 0.875rem;
  border: 1px solid var(--border-med);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: 600 0.8125rem/1.6 var(--sans);
  cursor: pointer;
}
.nav-toggle:hover {
  border-color: var(--ink);
}
@media (min-width: 40rem) {
  .site-nav .nav-cta {
    display: inline-flex;
    margin-left: auto;
  }
  .nav-toggle {
    margin-left: 0;
  }
}
@media (min-width: 64rem) and (max-width: 71.99rem) {
  .nav-inner {
    gap: 0.75rem;
  }
  .nav-links {
    gap: 1rem;
  }
  .site-nav .nav-cta {
    padding-inline: 0.875rem;
  }
}
@media (min-width: 80rem) {
  .nav-links {
    gap: 1.375rem;
  }
}
@media (min-width: 64rem) {
  .nav-links {
    display: flex;
  }
  .site-nav .nav-cta {
    margin-left: 0.5rem;
  }
  .nav-toggle {
    display: none;
  }
}
/* The menu drops down under the header, on the page's gutter, as on the home. */
.mobile-nav {
  display: none;
}
@media (max-width: 63.99rem) {
  .mobile-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 0.25rem var(--gutter) 1.25rem;
    border-top: 1px solid var(--rule);
    background: #fff;
    box-shadow:
      0 2px 4px color-mix(in oklab, var(--social) 4%, transparent),
      0 18px 54px -18px color-mix(in oklab, var(--social) 18%, transparent);
  }
  .mobile-nav.open {
    display: grid;
    align-content: start;
  }
  .mobile-nav a {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font: 600 1rem/1.6 var(--sans);
    text-decoration: none;
  }
  .mobile-nav a:hover {
    color: var(--accent);
  }
  .mobile-nav .mobile-nav-cta {
    min-height: 48px;
    margin-top: 1.25rem;
    padding: 0.75rem 1.35rem;
    border: 1px solid var(--ink);
    color: #fff;
    font: 600 0.9375rem/1.25 var(--sans);
  }
  .mobile-nav .mobile-nav-cta:hover {
    color: #fff;
  }
}

/* Month rail and hero */
.month-band {
  position: sticky;
  top: 74px;
  z-index: 90;
  height: 44px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.month-inner {
  width: var(--wrap);
  height: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 118px 1fr 196px;
  align-items: center;
  gap: 18px;
}
.month-label {
  color: #526079;
  font: 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.month-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  height: 12px;
}
.month-track i {
  border-left: 1px solid rgba(0, 53, 98, 0.14);
}
.month-track i:first-child {
  border-left-color: #a54891;
  box-shadow: inset 1px 0 #2784a0;
}
.month-track i:last-of-type {
  border-right: 1px solid rgba(0, 53, 98, 0.14);
}
.month-cursor {
  position: absolute;
  left: 0;
  top: -3px;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(165, 72, 145, 0.55);
  transform: translateX(-1px);
}
.home-hero {
  position: relative;
  min-height: calc(100svh - 118px);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
#month-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.94;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.91) 41%,
    rgba(255, 255, 255, 0.18) 78%,
    rgba(255, 255, 255, 0.36) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 82px 0;
}
.home-hero h1 {
  max-width: 1030px;
  margin: 0;
  color: var(--ink);
  font: 400 clamp(56px, 7.6vw, 116px)/0.98 var(--serif);
  letter-spacing: -0.028em;
}
/* The static H1 is display-2: Inter 620, left-aligned, at most 18ch. */
.page-hero h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font: 620 var(--fs-display-2) / 1.05 var(--sans);
  letter-spacing: -0.03em;
  text-align: left;
  text-wrap: balance;
}
.home-hero h1 em {
  display: block;
  padding-bottom: 0.1em;
  font-weight: 300;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 40px 0 0;
  color: #58657c;
  font: 10px var(--mono);
  text-transform: uppercase;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.legend .visit {
  background: var(--wave);
}
.legend .sleep {
  background: var(--accent-2);
}
.legend .checkin {
  background: var(--accent);
}
.micro-proof {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.trust-strip {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.trust-inner {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  align-items: center;
}
.trust-inner span {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20px 26px;
  border-right: 1px solid var(--line);
  color: #536078;
  font-size: 13px;
}
.trust-inner span:first-child {
  padding-left: 0;
}
.trust-inner span:last-child {
  border-right: 0;
}

/* Formerly dark brand sections: now a wash ground with navy text (no navy fills anywhere). */
.dark {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--wash);
}
.dark .wrap {
  position: relative;
  z-index: 1;
}
.manifesto {
  padding: clamp(110px, 15vw, 220px) 0;
}
.manifesto-copy {
  max-width: 1030px;
}
.manifesto p {
  margin: 0 0 18px;
  font: 300 clamp(40px, 6.2vw, 88px)/1.08 var(--serif);
  letter-spacing: -0.022em;
}
.manifesto strong {
  font-weight: 500;
}
.manifesto .signature {
  margin: 50px 0 0;
  color: var(--muted);
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Story */
.story {
  padding: clamp(90px, 12vw, 170px) 0;
}
.story-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(430px, 1.2fr);
  gap: clamp(48px, 8vw, 120px);
}
.story-steps {
  padding: 5vh 0 40vh;
}
.story-step {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  transition: transform 0.8s ease;
}
.story-step.active {
  transform: translateX(8px);
}
.story-step b {
  color: #a54891;
  font: 11px var(--mono);
  letter-spacing: 0.12em;
}
.story-step h3 {
  max-width: 580px;
  margin: 15px 0 0;
  color: #607089;
  font: 400 clamp(34px, 4vw, 58px)/1.08 var(--serif);
  letter-spacing: -0.018em;
  transition: color 0.8s ease;
}
.story-step.active h3 {
  color: var(--ink);
}
.story-stage {
  position: sticky;
  top: 152px;
  height: min(70vh, 680px);
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #fff, #eef3fa);
  box-shadow: 0 35px 80px rgba(0, 53, 98, 0.1);
}
.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 1s ease,
    transform 1s ease;
}
.scene.active {
  opacity: 1;
  transform: scale(1);
}
.scene-phone {
  width: 190px;
  height: 360px;
  padding: 34px 20px;
  border: 7px solid var(--ink);
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(0, 53, 98, 0.18);
}
.scene-phone::before {
  content: "";
  display: block;
  width: 48px;
  height: 6px;
  margin: -20px auto 38px;
  border-radius: 6px;
  background: var(--ink);
}
.scene-line {
  height: 10px;
  margin: 14px 0;
  border-radius: 8px;
  background: #dce5f1;
}
.scene-line:nth-child(2n) {
  width: 72%;
}
.scene-pulse {
  width: 80px;
  height: 80px;
  margin: 42px auto;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow:
    0 0 0 20px rgba(165, 72, 145, 0.05),
    0 0 0 40px rgba(0, 53, 98, 0.04);
  animation: pulse 6s ease-in-out infinite;
}
.scene-orbit {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid var(--line);
  border-radius: 50%;
  animation: rotate 28s linear infinite;
}
.scene-orbit i {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 53, 98, 0.1);
}
.scene-orbit i:nth-child(1) {
  left: 50%;
  top: 0;
}
.scene-orbit i:nth-child(2) {
  right: 0;
  top: 50%;
}
.scene-orbit i:nth-child(3) {
  left: 50%;
  bottom: 0;
}
.scene-orbit i:nth-child(4) {
  left: 0;
  top: 50%;
}
.scene-checks {
  width: 70%;
}
.scene-checks div {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 53, 98, 0.08);
}
.scene-checks i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
}
.scene-checks div:nth-child(2) i,
.scene-checks div:nth-child(3) i {
  background: var(--accent-2);
  box-shadow: inset 0 0 0 5px #fff;
}

/* Machines and cards */
.machines,
.cards,
.metric-grid,
.package-grid,
.plans,
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 58px;
}
.machine,
.card,
.metric,
.package,
.plan,
.team-card {
  position: relative;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.machine {
  min-height: 390px;
  display: flex;
  flex-direction: column;
}
.machine h3,
.card h3,
.package h3,
.plan h2 {
  margin: auto 0 0;
  color: var(--ink);
  font: 400 26px/1.25 var(--serif);
}
.machine-demo {
  min-height: 210px;
  display: grid;
  align-content: center;
}
.mini-compass {
  width: 180px;
  margin: auto;

}

.quote {
  max-width: 1050px;
  margin: 0;
  color: var(--ink);
  font: 300 clamp(44px, 6.2vw, 84px)/1.06 var(--serif);
  letter-spacing: -0.022em;
}
.quote-attr {
  margin: 28px 0 0;
  color: var(--muted);
  font: 11px var(--mono);
  text-transform: uppercase;
}
.metric strong {
  display: block;
  color: var(--ink);
  font: 400 clamp(54px, 6vw, 88px)/1 var(--serif);
}
.metric span {
  color: var(--muted);
  font-size: 13px;
}
.package {
  display: flex;
  min-height: 275px;
  flex-direction: column;
  text-decoration: none;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.package:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0, 53, 98, 0.1);
}
.package .eyebrow {
  color: var(--accent-2);
}
.package p {
  color: var(--muted);
}
.package .arrow {
  margin-top: auto;
  color: var(--ink);
  font: 11px var(--mono);
  text-transform: uppercase;
}
/* Inner pages */
.page-hero {
  padding: clamp(95px, 12vw, 170px) 0 90px;
}
.domains {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
  margin-top: 65px;
}
.domain-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 22px 0;
}
.domain-row b {
  color: var(--ink);
  font: 500 24px var(--serif);
}
.domain-row span {
  color: var(--muted);
}
.compass-shell {
  padding: 45px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 32px 80px rgba(0, 53, 98, 0.08);
}
.compass-shape-a {
  animation: compass-fade 8s ease-in-out infinite alternate;
}
.cards .card {
  min-height: 250px;
}
.card p {
  color: var(--muted);
}
/* The answers: light cards with spacing between them, no rules (V6). On a wash ground the cards
   are white; on white they take the wash. */
.faq {
  display: grid;
  gap: 0.625rem;
  margin-top: 54px;
}
.faq details {
  padding: 1.125rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--wash);
}
:is(.section-wash, .dark) .faq details {
  background: #fff;
}
.faq summary {
  cursor: pointer;
  color: var(--ink);
  font: 500 clamp(20px, 2vw, 27px) var(--serif);
}
.faq p {
  max-width: 820px;
  color: var(--muted);
}

.plans {
  align-items: stretch;
}
.plan {
  display: flex;
  min-height: 650px;
  flex-direction: column;
}
.plan h2 { margin: 0; }
.plan.featured {
  border-color: var(--accent);
  box-shadow: inset 0 4px var(--accent);
}
.plan-tag {
  color: var(--accent-2);
  font: 10px var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.price {
  margin: 22px 0;
}
.price b {
  display: block;
  color: var(--ink);
  font: 400 53px/1 var(--serif);
}
.price span {
  color: var(--muted);
  font-size: 12px;
}
.plan ul {
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}
.plan li {
  position: relative;
  padding: 8px 0 8px 22px;
  color: #55627a;
  font-size: 14px;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.plan .btn {
  margin-top: auto;
}

.scheduler {
  margin-top: 65px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--wash);
  box-shadow: 0 25px 70px rgba(0, 53, 98, 0.08);
}
.scheduler iframe {
  width: 100%;
  height: 760px;
  border: 0;
  border-radius: 16px;
  background: #fff;
}
.contact-form {
  display: grid;
  gap: 18px;
}
.form-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: grid;
  gap: 7px;
}
.field label {
  color: var(--ink);
  font: 500 11px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #cfd7e6;
  border-radius: 9px;
  color: var(--text);
  background: #fff;
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.form-status {
  display: none;
  padding: 16px;
  border-radius: 10px;
}
.form-status.success {
  color: #175d42;
  background: #eefaf5;
}
.form-status.error {
  color: #8a2d3c;
  background: #fff0f2;
}
.signal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 46px;
}
.signal {
  padding: 22px;
  border-radius: 16px;
  background: var(--wash);
  border: 1px solid var(--line);
}
.signal b {
  display: block;
  color: var(--ink);
  font: 500 20px var(--serif);
}
.steps {
  counter-reset: steps;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 55px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step {
  counter-increment: steps;
  padding: 30px;
  background: #fff;
}
.step::before {
  content: "0" counter(steps);
  color: var(--accent);
  font: 11px var(--mono);
}
.step h3 {
  color: var(--ink);
  font: 400 23px/1.25 var(--serif);
}
.step p {
  color: var(--muted);
  font-size: 14px;
}
.evidence-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.study-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.study-numbers div {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.study-numbers strong {
  display: block;
  font: 300 56px var(--serif);
}
.team-grid {
  grid-template-columns: repeat(2, 1fr);
}
.team-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
}
.team-card img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
}

/* Footer: the home footer's exact geometry (lovable-v30/src/styles/pass2-decision.css): white,
   the record line ending in a navy dot, the home's grid, type and line height. V6 (Erez item
   13): no hairlines, above the footer or above the copyright line, as on the home page. */
.footer {
  display: flow-root; /* keeps the record line's -2px margin from collapsing through (no top rule) */
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  view-timeline: --p3-foot block;
}
/* The record ends here: a 3px wave stroke with a soft glow, then the navy dot with its halo. */
.footer-end {
  position: relative;
  width: var(--wrap);
  height: 3px;
  margin: -2px auto 0;
}
.footer-end::before {
  content: "";
  position: absolute;
  inset: 0 6px 0 0;
  border-radius: 3px;
  background: var(--record-line);
  box-shadow: 0 0 14px -3px color-mix(in oklab, var(--psycho) 55%, transparent);
  transform-origin: left center;
}
.footer-end::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--social) 11%, transparent);
}
/* Drawn once as the footer arrives (scroll-driven, as on the home); complete when paused, under
   reduced motion or without support. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="paused"]) .footer-end::before {
      animation: p3-draw-x linear both;
      animation-timeline: --p3-foot;
      animation-range: entry 0% entry 55%;
    }
    html:not([data-motion="paused"]) .footer-end::after {
      animation: p3-pop linear both;
      animation-timeline: --p3-foot;
      animation-range: entry 45% entry 65%;
    }
  }
}
@keyframes p3-draw-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes p3-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
.footer-main {
  width: var(--wrap);
  margin: auto;
  padding: 2.75rem 0 1.75rem;
  display: grid;
  gap: 2rem 4rem;
}
@media (min-width: 64rem) {
  .footer-main {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}
/* The footer brand links only where it is drawn, not across the whole column (as on the home). */
.footer-brand .brand {
  display: flex;
  width: fit-content;
}
.footer-tag {
  max-width: 34ch;
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
/* Three columns at every width, as on the home ("Cookie preferences" may take two lines). */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 40rem) {
  .footer-links {
    gap: 2rem;
  }
}
.footer-links > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-links h3 {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font: 600 0.75rem/1.6 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-links a,
.footer-links button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: none;
  font: 500 0.875rem/1.6 var(--sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.footer-links a:hover,
.footer-links button:hover {
  color: var(--accent);
}
/* Touch screens: 44px tap targets (as on the home). */
@media (max-width: 39.99rem), (pointer: coarse) {
  .footer-links a,
  .footer-links button,
  .footer-brand .brand {
    min-height: 44px;
  }
}
.footer-bottom {
  width: var(--wrap);
  margin: auto;
  padding: 0.5rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
@media (max-width: 39.99rem) {
  .footer-main {
    padding: 2.25rem 0 1.5rem;
  }
}
/* The motion toggle (WCAG 2.2.2), text variant in the footer; shell.js drives it. */
.motion-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  color: var(--text);
  background: none;
  font: 600 0.8125rem/1.6 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.motion-toggle:hover {
  color: var(--accent);
}
.motion-toggle:disabled {
  cursor: default;
  opacity: 0.55;
}
.motion-toggle svg {
  width: 14px;
  height: 14px;
}
.motion-toggle .icon-play,
.motion-toggle[aria-pressed="true"] .icon-pause {
  display: none;
}
.motion-toggle[aria-pressed="true"] .icon-play {
  display: inline;
}
/* The consent banner: white, both choices with equal weight. */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 20px;
  max-width: 980px;
  margin: auto;
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--border-med);
  border-radius: 16px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 18px 50px -18px rgba(0, 53, 98, 0.3);
}
.cookie-banner p {
  flex: 1;
  margin: 0;
  font-size: 13px;
}
.cookie-actions {
  display: flex;
  gap: 8px;
}
.cookie-actions button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.cookie-actions button:hover {
  background: var(--wash);
}
/* The phone call-to-action bar (not on /get-started, /patients, /privacy or /terms). */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 14px;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
}
.sticky-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--wave);
}
.sticky-cta .btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
}
.sticky-cta-ask {
  display: inline-flex;
  flex: none;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 39.99rem) {
  .sticky-cta[data-show] {
    display: flex;
  }
  body:has(.sticky-cta) main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
  }
  /* Where main ends in a section, the bar's room moves into that section, so its ground runs
     down to the footer instead of leaving a white strip under it. */
  body:has(.sticky-cta) main:has(> section:last-child) {
    padding-bottom: 0;
  }
  body:has(.sticky-cta) main > section:last-child {
    padding-bottom: calc(var(--section-y) + 56px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}
body:has(#cc-banner[style*="flex"]) .sticky-cta {
  display: none;
}

@keyframes pulse {
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 30px rgba(165, 72, 145, 0.04),
      0 0 0 60px rgba(0, 53, 98, 0.025);
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 980px) {
  .story-layout {
    grid-template-columns: 1fr;
  }
  .story-stage {
    top: 140px;
    height: 48vh;
    order: -1;
  }
  .story-steps {
    padding: 0;
  }
  .story-step {
    min-height: 38vh;
  }
  .machines,
  .metric-grid,
  .package-grid,
  .plans {
    grid-template-columns: 1fr;
  }
  .plan {
    min-height: auto;
  }
  .domains,
  .evidence-band {
    grid-template-columns: 1fr;
  }
  .signal-grid,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 660px) {
  .month-band {
    top: 66px;
    height: 40px;
  }
  .month-inner {
    grid-template-columns: 86px 1fr;
    gap: 10px;
  }
  .month-label {
    font-size: 8px;
  }
  .month-label:last-child {
    display: none;
  }
  .home-hero {
    min-height: calc(100svh - 106px);
  }
  .home-hero h1 {
    font-size: clamp(49px, 15vw, 68px);
  }
  .home-hero .lede {
    max-width: 88%;
  }
  .hero-veil {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.78)
    );
  }
  .trust-inner {
    grid-template-columns: 1fr;
  }
  .trust-inner span {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rail-label {
    padding-top: 0;
  }
  .manifesto p {
    font-size: 43px;
  }
  .story-stage {
    height: 430px;
    border-radius: 18px;
  }
  .scene-phone {
    transform: scale(0.82);
  }
  .scene-orbit {
    width: 230px;
    height: 230px;
  }
  .cards,
  .team-grid {
    grid-template-columns: 1fr;
  }
  .signal-grid,
  .steps,
  .study-numbers {
    grid-template-columns: 1fr;
  }
  .form-two {
    grid-template-columns: 1fr;
  }
  .scheduler {
    padding: 5px;
    border-radius: 14px;
  }
  .scheduler iframe {
    height: 690px;
  }
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 8px;
    padding: 10px 12px;
    align-items: stretch;
    flex-direction: column;
  }
  .cookie-actions button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .motion .reveal {
    opacity: 1;
    transform: none;
  }
  .story-step {
    opacity: 1;
  }
}

/* Progressive enhancement: content and navigation survive without JavaScript. */
.contact-form fieldset { display: grid; gap: 18px; border: 0; padding: 0; margin: 0; min-width: 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
html:not(.js) .scene:first-child { opacity: 1; transform: none; }
html:not(.js) canvas { display: none; }
.month-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.js .month-fallback { display: none; }
@keyframes compass-fade { 50% { opacity: .65; } }
/* Without JavaScript the menu is simply open, in the flow under the header (as on the home). */
@media (max-width: 63.99rem) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .mobile-nav { position: relative; top: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; max-height: none; box-shadow: none; }
  html:not(.js) .mobile-nav .mobile-nav-cta { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .story-layout { display: block; }
  .story-stage { position: relative; top: auto; height: 400px; }
  .story-step { min-height: 0; padding: 32px 0; }
  .story-step h3 { font-size: 32px; color: var(--ink); }
}

/* ---- Hero field, visit marker ---- */
.home-hero {
  --gutter: calc((100vw - var(--wrap)) / 2);
  isolation: isolate;
}
#month-field {
  opacity: 1;
}
.hero-veil {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.2) 0,
      rgba(255, 255, 255, 0.2) calc(var(--gutter) * 0.72),
      rgba(255, 255, 255, 0.94) calc(var(--gutter) + 28px),
      rgba(255, 255, 255, 0.93) 44%,
      rgba(255, 255, 255, 0.5) 66%,
      rgba(255, 255, 255, 0) 88%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85) 0,
      rgba(255, 255, 255, 0) 12%,
      rgba(255, 255, 255, 0) 86%,
      rgba(255, 255, 255, 0.9) 100%
    );
}
.visit-marker {
  --visit-size: 14px;
  position: absolute;
  z-index: 2;
  width: var(--visit-size);
  height: var(--visit-size);
  margin: calc(var(--visit-size) / -2) 0 0 calc(var(--visit-size) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 38%, transparent 40%),
    conic-gradient(from 210deg, #a54891, #927ac1, #2784a0, #a54891);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 22px 4px rgba(165, 72, 145, 0.45);
  pointer-events: none;
}
.visit-marker[hidden] {
  display: none;
}
.visit-marker::before,
.visit-marker::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1.5px solid rgba(146, 122, 193, 0.8);
  border-radius: 50%;
  opacity: 0;
}
/* One ripple on arrival, never a loop: a repeating ping from a fixed point reads as a live signal. */
.motion .visit-marker::before,
.motion .visit-marker::after {
  animation: visit-ripple 8s cubic-bezier(0.2, 0.6, 0.3, 1) 1 forwards;
  animation-delay: 1.4s;
}
.motion .visit-marker::after {
  animation-delay: 3s;
}
@keyframes visit-ripple {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(7);
  }
}
.legend .visit {
  background: conic-gradient(from 210deg, #a54891, #927ac1, #2784a0, #a54891);
  box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 1px rgba(146, 122, 193, 0.7);
}
.month-track i.past {
  border-left-color: rgba(165, 72, 145, 0.55);
}
.motion .home-hero h1,
.motion .home-hero .lede,
.motion .home-hero .hero-actions,
.motion .home-hero .legend {
  animation: hero-rise 1.6s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.motion .home-hero .lede {
  animation-delay: 0.25s;
}
.motion .home-hero .hero-actions {
  animation-delay: 0.45s;
}
.motion .home-hero .legend {
  animation-delay: 0.7s;
}
/* Opacity stays at 1 so the headline is paintable on the first frame (LCP). */
@keyframes hero-rise {
  from {
    transform: translateY(22px);
  }
  to {
    transform: none;
  }
}

.manifesto .reveal:nth-child(2) {
  transition-delay: 0.35s;
}
.manifesto .reveal:nth-child(3) {
  transition-delay: 0.7s;
}
.manifesto .reveal:nth-child(4) {
  transition-delay: 1.1s;
}

/* ---- Storyboard scenes ---- */
.story-on .story-step h3 {
  color: #66738c;
}
.story-on .story-step.active h3 {
  color: var(--ink);
}
.scene svg {
  width: 84%;
  height: auto;
  overflow: visible;
}
.scene-view {
  grid-template-columns: 1fr 1fr;
  gap: 4%;
  padding: 0 7%;
}
.scene-view svg {
  width: 100%;
}
.scene-view .mini-compass {
  width: 100%;
}
.stage-dots {
  position: absolute;
  z-index: 2;
  right: 22px;
  top: 20px;
  display: flex;
  gap: 6px;
}
.stage-dots i {
  width: 18px;
  height: 2px;
  background: rgba(0, 53, 98, 0.16);
  transition: background 0.6s ease;
}
.stage-dots i.active {
  background: var(--accent);
}
html:not(.js) .stage-dots {
  display: none;
}
.a-tap {
  transform-box: fill-box;
  transform-origin: center;
  animation: a-tap 6s ease-out infinite;
}
.a-tick {
  stroke-dasharray: 32;
  animation: a-tick 6s ease-out infinite;
}
.a-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: a-rise 5s cubic-bezier(0.3, 0.8, 0.3, 1) infinite alternate;
}
.a-stream {
  animation: a-stream 3s linear infinite;
}
.a-chip {
  animation: a-pick 6s ease-in-out infinite;
}
.a-row {
  animation: a-row 7s ease-in-out infinite;
}
.a-flag {
  animation: a-flag 7s ease-in-out infinite;
}
.a-draw {
  stroke-dasharray: 189;
  animation: a-draw 8s ease-in-out infinite alternate;
}
@keyframes a-tap {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.4);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes a-tick {
  0%,
  64% {
    stroke-dashoffset: 32;
  }
  78%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes a-rise {
  from {
    transform: scaleY(0.18);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes a-stream {
  to {
    stroke-dashoffset: -16;
  }
}
@keyframes a-pick {
  0%,
  45% {
    fill: #fff;
    stroke: #d5dcea;
  }
  55%,
  100% {
    fill: #a54891;
    stroke: #a54891;
  }
}
@keyframes a-row {
  0%,
  55% {
    fill: #f1f4fa;
  }
  65%,
  100% {
    fill: #fbeef7;
  }
}
@keyframes a-flag {
  0%,
  55% {
    opacity: 0;
  }
  65%,
  100% {
    opacity: 1;
  }
}
@keyframes a-draw {
  from {
    stroke-dashoffset: 189;
  }
  to {
    stroke-dashoffset: 30;
  }
}

/* ---- Operating system machines ---- */
.machine {
  overflow: hidden;
  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease;
}
.machine:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0, 53, 98, 0.09);
}
.machine::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--wave);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.2, 0.75, 0.25, 1) 0.3s;
}
.machine.in::before,
html:not(.motion) .machine::before {
  transform: scaleX(1);
}
.machine-demo svg {
  width: 100%;
  height: auto;
}
.machine-compass {
  width: min(330px, 94%);
  margin: auto;
}
.machines .reveal:nth-child(2),
.metric-grid .reveal:nth-child(2),
.package-grid .reveal:nth-child(2) {
  transition-delay: 0.18s;
}
.machines .reveal:nth-child(3),
.metric-grid .reveal:nth-child(3),
.package-grid .reveal:nth-child(3) {
  transition-delay: 0.36s;
}
.os-row {
  animation: os-row 11s ease-in-out infinite;
}
.os-ck {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: os-ck 11s ease-in-out infinite;
}
.os-line {
  animation: os-line 9s ease-in-out infinite;
}
.os-total {
  transform-box: fill-box;
  transform-origin: left;
  animation: os-total 9s ease-in-out infinite;
}
@keyframes os-row {
  0%,
  10% {
    opacity: 0.35;
  }
  30%,
  100% {
    opacity: 1;
  }
}
@keyframes os-ck {
  0%,
  25% {
    stroke-dashoffset: 24;
  }
  45%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes os-line {
  0%,
  15% {
    opacity: 0;
    transform: translateX(-8px);
  }
  40%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes os-total {
  0%,
  60% {
    transform: scaleX(0);
  }
  90%,
  100% {
    transform: scaleX(1);
  }
}
.metric strong {
  font-variant-numeric: tabular-nums;
}
.package .arrow {
  transition: letter-spacing 0.5s ease;
}
.package:hover .arrow {
  letter-spacing: 0.06em;
}

/* ---- Small screens: the stage pins, the four steps scroll past it ---- */
@media (max-width: 980px) {
  .story-on .story-layout {
    display: flex;
    flex-direction: column;
  }
  .story-on .story-stage {
    position: sticky;
    top: 118px;
    z-index: 5;
    order: -1;
    align-self: stretch;
    width: 100%;
    height: min(40svh, 330px);
    margin-top: 28px;
    box-shadow:
      0 -30px 0 16px #fff,
      0 0 0 16px #fff,
      0 30px 50px rgba(0, 53, 98, 0.1);
  }
  .story-on .story-step {
    min-height: 46svh;
    padding: 0;
    justify-content: center;
  }
  .story-on .story-steps {
    padding: 6svh 0 10svh;
  }
  .scene svg {
    width: auto;
    height: 86%;
    max-width: 90%;
  }
  .scene-view svg,
  .scene-view .mini-compass {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 660px) {
  .story-on .story-stage {
    top: 106px;
  }
  .hero-veil {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.15) 0,
        rgba(255, 255, 255, 0.15) 12px,
        rgba(255, 255, 255, 0.8) 22px,
        rgba(255, 255, 255, 0.72) 60%,
        rgba(255, 255, 255, 0.4) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.85) 0,
        rgba(255, 255, 255, 0) 10%,
        rgba(255, 255, 255, 0) 88%,
        rgba(255, 255, 255, 0.9) 100%
      );
  }
}
@media (max-width: 660px) {
  .page-hero h1 {
    overflow-wrap: break-word;
  }
}

/* Legacy display rules pin the largest optical size (written for the retired display
   face; harmless in Inter). The static H1 and section titles follow the V31 type scale. */
.home-hero h1,
.manifesto p,
.quote,
.story-step h3,
.metric strong,
.price b {
  font-variation-settings: "opsz" 144;
}
@media (max-width: 660px) {
  .home-hero h1 {
    font-size: clamp(50px, 15.4vw, 70px);
  }
  .hero-content {
    padding: 44px 0 48px;
  }
}

/* ==========================================================================
   Round 2: one signal language across every scale
   ========================================================================== */
.nav-links a,
.footer-links a,
.fine a,
.lede a,
.legacy-page main a,
.legacy-page .pr-wrap a,
.legacy-page .legal-wrap a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    background-size 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.35s ease;
}
.nav-links a:hover,
.footer-links a:hover,
.fine a:hover,
.lede a:hover,
.legacy-page main a:hover,
.legacy-page .pr-wrap a:hover,
.legacy-page .legal-wrap a:hover {
  background-size: 100% 1px;
  text-decoration: none;
}

.page-patients .section {
  padding-top: clamp(90px, 11vw, 150px);
  padding-bottom: clamp(90px, 11vw, 150px);
}
.page-patients .step p,
.page-patients .faq p {
  font-size: 16px;
  line-height: 1.78;
}

.page-research .study-numbers strong {
  font-variant-numeric: tabular-nums;
}
.page-research .evidence-band {
  position: relative;
}
.page-research .study-numbers div {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.wave-phrase {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.wave-phrase svg {
  position: absolute;
  left: -2%;
  top: 91%;
  width: 104%;
  height: 15px;
  overflow: visible;
}
.wave-phrase path {
  fill: none;
  stroke: url("#manifest-wave");
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
}
.wave-phrase.drawn path {
  animation: wave-draw 2.1s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
@keyframes wave-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.scene {
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scene.active {
  transform: translateY(0) scale(1);
}
.scene:not(.active) * {
  animation-play-state: paused !important;
}
.scene.active.restart * {
  animation-play-state: running;
}
.a-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: data-rise 4.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes data-rise {
  0%,
  12% {
    transform: scaleY(0.04);
    opacity: 0.2;
  }
  34%,
  84% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.04);
    opacity: 0.2;
  }
}
.machine:focus-visible {
  transform: translateY(-4px);
}

.package.lead,
.plan.featured {
  position: relative;
  overflow: hidden;
}
.package.lead::before,
.plan.featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 3px;
  background: var(--wave);
}
.package.lead {
  transform: translateY(-8px);
  border-color: rgba(0, 53, 98, 0.28);
  background: linear-gradient(145deg, rgba(39, 132, 160, 0.075), #fff 42%);
  box-shadow: 0 28px 64px rgba(0, 53, 98, 0.1);
}
.package.lead:hover .arrow {
  letter-spacing: 0.12em;
}

.package,
.plan,
.card,
.team-card,
.machine {
  position: relative;
  isolation: isolate;
}
.package > *,
.plan > *,
.card > *,
.team-card > *,
.machine > * {
  position: relative;
  z-index: 2;
}

/* Pricing is the composition: the cards carry the visual weight. */
.page-pricing .page-hero {
  padding-bottom: 110px;
}
.page-pricing .plans {
  gap: 18px;
  margin-top: 34px;
}
.page-pricing .plan {
  min-height: 0;
  padding: 30px;
  border-radius: 22px;
}
.page-pricing .plan-tag { color: var(--accent); }
.page-pricing .plan.featured {
  border-color: rgba(0, 53, 98, 0.28);
  background: linear-gradient(150deg, rgba(39, 132, 160, 0.09), rgba(165, 72, 145, 0.025) 45%, #fff 75%);
  box-shadow: 0 26px 70px rgba(0, 53, 98, 0.11);
}
/* An open answer keeps its card ground (V6: the tinted open state is gone with the rules). */
.faq summary {
  position: relative;
  padding-right: 54px;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq summary::after {
  transform: rotate(90deg);
}
.faq details[open] summary::before {
  transform: rotate(45deg);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
}

/* Scheduler: the ring invites, the calendar remains the first task. */
.page-get-started .scheduler {
  position: relative;
  overflow: hidden;
}
.scheduler-skeleton {
  pointer-events: none;
  position: absolute;
  inset: 72px 12px 12px;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 34px;
  border-radius: 16px;
  background: #fff;
  transition:
    opacity 0.75s ease,
    visibility 0.75s ease;
}
.scheduler-skeleton i {
  display: block;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f1f4fa 20%, #e7f5fb 48%, #f4edf5 72%, #f1f4fa 100%);
  background-size: 220% 100%;
  animation: skeleton-sweep 2.8s ease-in-out infinite;
}
.scheduler-skeleton i:first-child {
  width: 42%;
}
.scheduler-skeleton i:nth-child(3) {
  width: 82%;
}
.scheduler-skeleton.loaded {
  visibility: hidden;
  opacity: 0;
}
/* The sweep stops once the calendar has loaded (frozen, not reset, so the fade-out holds still);
   until then it rests off screen as a [data-p3-motion] block (shell.js). */
.scheduler-skeleton.loaded i {
  animation-play-state: paused;
}
html:not(.js) .scheduler-skeleton {
  display: none;
}
@keyframes skeleton-sweep {
  50% {
    background-position: -120% 0;
  }
}
/* The team page lets real faces be the visual system. */
.page-team .team-grid {
  gap: 28px;
}
.page-team .team-card {
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 68px rgba(0, 53, 98, 0.08);
}
/* Portraits in full colour, always, with no hover or keyboard reveal. */
.page-team .team-card img {
  object-position: center 25%;
  width: 100%;
  height: clamp(330px, 36vw, 470px);
  border-radius: 0;
}

/* Legacy pages: new shell and editorial rhythm, original content untouched. */
.legacy-page {
  color: var(--text);
  background: #fff;
  font-family: var(--sans);
}
.legacy-page .skip-nav {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 10px 16px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}
.legacy-page .skip-nav:focus {
  top: 12px;
}
.legacy-page .page-header {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 12vw, 160px) max(24px, calc((100vw - 1200px) / 2)) 72px;
  border: 0;
  text-align: left;
  background: var(--wash);
}
.legacy-page .page-header::before {
  height: 2px;
  background: var(--wave);
}
.legacy-page .page-header-inner {
  max-width: 860px;
  margin: 0;
}
.legacy-page .page-header .kicker {
  color: #a54891;
  font: 600 12px var(--sans);
  letter-spacing: 0.1em;
}
/* The static H1 on the legacy pages is display-2 too. */
.legacy-page .page-header h1 {
  max-width: 18ch;
  margin: 12px 0 0;
  color: var(--ink);
  font: 620 var(--fs-display-2) / 1.05 var(--sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.legacy-page .page-header p,
.legacy-page .page-header .meta {
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--muted);
  font: 400 16px/1.75 var(--sans);
}
.legacy-news .container {
  width: var(--wrap);
  max-width: none;
  padding: 0;
}
.legacy-news .section {
  padding: clamp(80px, 9vw, 130px) 0;
}
.legacy-news .featured {
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(0, 53, 98, 0.16);
}
.legacy-news .featured h2,
.legacy-news .news-headline,
.legacy-news .newsletter-section h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
}
.legacy-news .news-item {
  border-radius: 18px;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.55s ease;
}
.legacy-news .news-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(0, 53, 98, 0.1);
}
.legacy-press .pr-wrap,
.legacy-legal .legal-wrap {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(70px, 8vw, 112px) 24px clamp(95px, 11vw, 150px);
}
.legacy-press .pr-wrap > p,
.legacy-legal .legal-section p,
.legacy-legal .legal-section li {
  font-size: 16px;
  line-height: 1.8;
}
.legacy-press .pr-wrap h2,
.legacy-press .pr-wrap h3,
.legacy-legal .legal-wrap h2,
.legacy-legal .legal-wrap h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
}
.legacy-press .pr-wrap h2,
.legacy-legal .legal-section h2 {
  margin-top: 62px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
}
.legacy-press .pr-quote,
.legacy-legal .highlight-box,
.legacy-legal .sms-box,
.legacy-legal .cap-box,
.legacy-legal .contact-block {
  border-radius: 18px;
}
.legacy-legal .legal-toc {
  padding: 30px 34px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--wash);
}
.legacy-404 .main {
  min-height: 68svh;
  padding: 110px 24px;
}
.legacy-404 .code,
.legacy-404 .title {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
}
.legacy-404 .code {
  letter-spacing: -0.08em;
}

@media (max-width: 980px) {
  .page-team .team-card img {
    height: clamp(300px, 48vw, 420px);
  }
}
@media (max-width: 660px) {
  .page-patients .steps {
    gap: 12px;
    background: transparent;
    border: 0;
  }
  .page-patients .step {
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  .package.lead {
    transform: none;
  }
  .page-pricing .plan {
    padding: 26px;
  }
  .scheduler-skeleton {
    padding: 20px;
  }
  .page-team .team-grid {
    grid-template-columns: 1fr;
  }
  .page-team .team-card img {
    height: min(116vw, 470px);
  }
  .legacy-page .page-header {
    padding: 88px 24px 58px;
  }
  .legacy-news .featured {
    padding: 30px;
  }
  .legacy-press .pr-wrap,
  .legacy-legal .legal-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Editorial compositions: generous type and a distinct signal object. */
.home-hero h1 { word-spacing: .045em; }
.page-clinicians .page-hero,
.page-research .page-hero,
.page-patients .page-hero {
  min-height: 680px;
  padding: 100px 0 110px;
}
.page-clinicians .page-hero .rail,
.page-research .page-hero .rail,
.page-patients .page-hero .rail,
.page-get-started .page-hero .rail {
  display: block;
}
.page-clinicians .page-hero .lede,
.page-research .page-hero .lede {
  max-width: 540px;
}
.page-patients .page-hero {
  padding-bottom: 175px;
}
.page-get-started .page-hero {
  padding-top: 90px;
}
.page-pricing .page-hero,
.page-team .page-hero {
  padding-top: 88px;
  padding-bottom: 70px;
}
.page-team .page-hero + .section {
  padding-top: 32px;
  background: linear-gradient(#fff 0, var(--wash) 220px);
}
.page-team .team-grid {
  margin-top: 0;
}
.legacy-404 .icon svg { margin-inline: auto; }

@media (max-width: 660px) {
  .page-clinicians .page-hero,
  .page-research .page-hero {
    padding: 68px 0 270px;
    min-height: 0;
  }
  .page-patients .page-hero { padding: 68px 0 145px; min-height: 0; }
  .page-get-started .page-hero { padding-top: 68px; }
  .page-pricing .page-hero,
  .page-team .page-hero { padding-top: 68px; }
  .page-team .page-hero { padding-bottom: 36px; }
  html:not(.js) .page-clinicians .page-hero,
  html:not(.js) .page-research .page-hero,
  html:not(.js) .page-patients .page-hero { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .wave-phrase path {
    stroke-dashoffset: 0;
  }
  .scheduler-skeleton i,
  .a-bar {
    animation: none !important;
  }
  .scene,
  .team-card img,
  .package,
  .plan,
  .card,
  .machine {
    transition-duration: 0.01ms !important;
  }
}

/* ---- The crossing: patient tracks meet the clinic's lanes ---- */
.crossing {
  --tag-w: 148px;
  --lane-top: 30%;
  --lane-h: 14%;
  margin-top: 56px;
}
.crossing-track {
  position: relative;
}
.motion .crossing-track {
  height: 235vh;
}
.crossing-pin {
  position: relative;
}
.motion .crossing-pin {
  position: sticky;
  top: 132px;
}
.crossing-stage {
  position: relative;
  height: clamp(330px, 52vh, 480px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 34px 80px rgba(0, 53, 98, 0.08);
  overflow: hidden;
}
.crossing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.crossing-tags {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: var(--tag-w);
  margin: 0;
  padding: 0;
  list-style: none;
}
.crossing-tags li {
  position: absolute;
  left: 22px;
  top: calc(var(--lane-top) + (var(--i) + 0.5) * var(--lane-h));
  transform: translateY(-50%);
  color: var(--muted);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.crossing-axis {
  position: absolute;
  z-index: 1;
  left: 22px;
  color: #66738c;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.crossing-axis::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-left: 9px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.5;
}
.crossing-axis-patient {
  top: 22px;
}
.crossing-axis-clinic {
  top: calc(var(--lane-top) - 0.5%);
}
.crossing-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}
.crossing-cap {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(19px, 1.7vw, 24px) / 1.28 var(--serif);
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.004em;
  transition: color 1.1s ease;
}
.crossing.is-active .crossing-cap {
  color: #5c6982;
}
.crossing.is-active .crossing-cap.on {
  color: var(--ink);
}
html:not(.js) .crossing-tags li::after {
  content: "";
  position: absolute;
  left: calc(var(--tag-w) - 22px);
  top: 50%;
  width: calc(100vw - var(--tag-w) - 140px);
  max-width: 900px;
  border-top: 1px solid var(--line);
}
@media (max-width: 980px) {
  .crossing {
    --tag-w: 122px;
  }
  .motion .crossing-pin {
    top: 122px;
  }
  .crossing-caps {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }
  .crossing-cap {
    font-size: 19px;
  }
}
@media (max-width: 660px) {
  .crossing {
    --tag-w: 100px;
    margin-top: 40px;
  }
  .motion .crossing-pin {
    top: 112px;
  }
  .crossing-stage {
    height: clamp(300px, 40svh, 360px);
    border-radius: 18px;
  }
  .crossing-tags li,
  .crossing-axis {
    left: 14px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .crossing-axis::after {
    display: none;
  }
  .crossing-cap {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crossing-track {
    height: auto;
  }
  .crossing-pin {
    position: relative;
    top: auto;
  }
}

/* ---- Flow: the river visual system ----
   The month is a river of fine strands. The veil is lighter so the river can
   pass behind the headline, and the small type carries its own soft halo. */
.home-hero {
  background:
    radial-gradient(900px 520px at 80% 48%, rgba(39, 132, 160, 0.16), transparent 70%),
    radial-gradient(640px 420px at 96% 78%, rgba(146, 122, 193, 0.13), transparent 70%);
}
.hero-veil {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0,
      rgba(255, 255, 255, 0.1) calc(var(--gutter) * 0.72),
      rgba(255, 255, 255, 0.47) calc(var(--gutter) + 28px),
      rgba(255, 255, 255, 0.46) 44%,
      rgba(255, 255, 255, 0.25) 66%,
      rgba(255, 255, 255, 0) 88%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5) 0,
      rgba(255, 255, 255, 0) 12%,
      rgba(255, 255, 255, 0) 86%,
      rgba(255, 255, 255, 0.55) 100%
    );
}
.home-hero .lede,
.home-hero .legend span {
  text-shadow:
    0 0 6px #fff,
    0 0 14px #fff,
    0 0 26px #fff,
    0 0 42px rgba(255, 255, 255, 0.9);
}
.home-hero .btn.ghost {
  background: #fff;
}
.home-hero h1 {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}
.legend i {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #2784a0;
}
.legend .sleep {
  background: #927ac1;
}
.legend .visit {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.legend .checkin {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #a54891;
  box-shadow: 0 0 8px rgba(165, 72, 145, 0.4);
}

.closing .btn.ghost {
  background: #fff;
}

/* The crossing stage carries the hero's atmosphere: a faint wash under the cloth. */
.crossing-stage {
  background:
    radial-gradient(760px 300px at 82% 18%, rgba(39, 132, 160, 0.09), transparent 70%),
    radial-gradient(680px 300px at 18% 96%, rgba(146, 122, 193, 0.08), transparent 70%),
    #fff;
}

/* The river arrives slowly. Only the start is declared, so each field settles on
   its own opacity. Reduced motion skips it. */
@keyframes flow-in {
  from {
    opacity: 0;
  }
}
.motion .flow-on {
  animation: flow-in 1.8s ease-out both;
}

/* Pause control (WCAG 2.2.2): html[data-motion=paused] (set by shell.js) pauses every animation. */
html[data-motion="paused"] *,
html[data-motion="paused"] *::before,
html[data-motion="paused"] *::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   V31 pass 3: the wave as material on the static pages. A hero field of fine
   gradient strands, soft conic halos, ripple rings, orbit rings, signal chips,
   sparks and the record node, drawn from the home's V31 visuals. White ground,
   no navy fills, no words. Loops run under html.motion only and freeze with the
   motion toggle (html[data-motion="paused"]); entrances are dropped when paused;
   under reduced motion or without support every piece is a finished still.
   shell.js marks a [data-p3-motion] block [data-p3-idle] while it is off screen.
   ========================================================================== */
:root {
  --bio-tint: color-mix(in oklab, var(--bio) 70%, #fff);
  --p3-chip-shadow:
    0 1px 2px rgb(0 53 98 / 0.06),
    0 16px 32px -18px rgb(0 53 98 / 0.34);
}
[data-p3-idle] *,
[data-p3-idle] *::before,
[data-p3-idle] *::after,
[data-p3-idle]::before,
[data-p3-idle]::after {
  animation-play-state: paused !important;
}

/* ---- The hero: its field sits behind, the text and the visual in front ---- */
.p3-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.p3-hero > .wrap {
  position: relative;
  z-index: 1;
}
@media (min-width: 64rem) {
  .p3-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5.5rem);
  }
}
@media (min-width: 80rem) {
  .p3-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
  }
}
@media (max-width: 63.99rem) {
  .p3-hero-grid > .p3-visual {
    width: min(100%, var(--p3-w-sm, 22rem));
    margin-top: clamp(2rem, 6vw, 3rem);
  }
}

/* The field: one band of strands (inline SVG, drawn once per page and reused with <use>) shown
   twice, the second flipped, drifting against each other so the moire slowly changes. It fades
   out under the text column. Inline paths are never a largest-paint candidate. */
.p3-field {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(80%, 34rem);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent var(--p3-mask-from, 42%), rgb(0 0 0 / 0.45) var(--p3-mask-mid, 60%), #000 var(--p3-mask-to, 78%));
  mask-image: linear-gradient(90deg, transparent var(--p3-mask-from, 42%), rgb(0 0 0 / 0.45) var(--p3-mask-mid, 60%), #000 var(--p3-mask-to, 78%));
}
.p3-field > .p3-strands {
  position: absolute;
  top: 0;
  left: -6%;
  width: 112%;
  max-width: none;
  height: 100%;
  opacity: 0.7;
}
.p3-field > .p3-strands-b {
  opacity: 0.45;
  transform: scaleY(-1);
}
@media (max-width: 63.99rem) {
  .p3-field {
    height: min(46%, 26rem);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%);
    mask-image: linear-gradient(180deg, transparent, #000 38%);
  }
}
/* The field and the visuals arrive just after the first paint, hidden (visibility) until their
   entrance starts, so the first frame carries the text and LCP stays on the headline. Not while
   motion is paused, not under reduced motion, not without JavaScript: then they are simply there. */
html.motion:not([data-motion="paused"]) .p3-field {
  animation: p3-in 1.8s ease 0.3s both;
}
html.motion:not([data-motion="paused"]) .p3-visual {
  animation: p3-in 1s ease 0.25s both;
}
html.motion .p3-field > .p3-strands {
  animation: p3-drift-a 19s ease-in-out infinite alternate;
}
html.motion .p3-field > .p3-strands-b {
  animation: p3-drift-b 19s ease-in-out infinite alternate;
}
@keyframes p3-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes p3-drift-a {
  from {
    transform: translate3d(-2.5%, -5px, 0) scaleY(0.93);
  }
  to {
    transform: translate3d(2.5%, 5px, 0) scaleY(1.06);
  }
}
@keyframes p3-drift-b {
  from {
    transform: translate3d(2.5%, 6px, 0) scaleY(-1.06);
  }
  to {
    transform: translate3d(-2.5%, -6px, 0) scaleY(-0.93);
  }
}

/* ---- The visual box: a fixed aspect, so nothing shifts while it paints ---- */
.p3-visual {
  position: relative;
  width: min(100%, var(--p3-w, 28rem));
  aspect-ratio: var(--p3-ar, 1);
  margin-inline: auto;
  pointer-events: none;
  user-select: none;
}
.p3-visual > .p3-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.p3-lines :is(line, path, circle) {
  vector-effect: non-scaling-stroke;
}

/* A soft conic glow behind a visual (the V31 halo), turning slowly. */
.p3-halo {
  position: absolute;
  inset: var(--p3-halo-inset, 14%);
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    color-mix(in oklab, var(--accent) 34%, transparent),
    color-mix(in oklab, var(--psycho) 34%, transparent),
    color-mix(in oklab, var(--bio-tint) 38%, transparent),
    color-mix(in oklab, var(--bio) 30%, transparent),
    color-mix(in oklab, var(--accent) 34%, transparent)
  );
  filter: blur(34px);
  opacity: 0.62;
}
html.motion .p3-halo {
  animation: p3-spin 32s linear infinite;
}
@keyframes p3-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Ripple rings from one point. Still: three quiet concentric rings. */
.p3-rings {
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  z-index: 1;
  width: var(--rs, 70%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.p3-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--psycho) 55%, transparent);
  border-radius: 50%;
  opacity: 0.34;
  transform: scale(0.62);
}
.p3-rings i:nth-child(2) {
  border-color: color-mix(in oklab, var(--bio-tint) 70%, transparent);
  opacity: 0.24;
  transform: scale(0.8);
}
.p3-rings i:nth-child(3) {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  opacity: 0.14;
  transform: scale(1);
}
html.motion .p3-rings i {
  animation: p3-ring 7.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
html.motion .p3-rings i:nth-child(2) {
  animation-delay: -2.5s;
}
html.motion .p3-rings i:nth-child(3) {
  animation-delay: -5s;
}
@keyframes p3-ring {
  0% {
    opacity: 0;
    transform: scale(0.42);
  }
  24% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* An orbit: a thin dashed gradient ring (SVG inside) that turns. */
.p3-orbit {
  position: absolute;
  inset: var(--p3-orbit-inset, 12%);
  z-index: 1;
}
.p3-orbit svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
html.motion .p3-orbit {
  animation: p3-spin 60s linear infinite;
}

/* A signal chip: a white tile with one line icon, floating a little. */
.p3-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  display: grid;
  width: var(--p3-chip, 3.25rem);
  height: var(--p3-chip, 3.25rem);
  margin: calc(var(--p3-chip, 3.25rem) / -2) 0 0 calc(var(--p3-chip, 3.25rem) / -2);
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 16px;
  color: var(--c, var(--bio));
  background: #fff;
  box-shadow:
    var(--p3-chip-shadow),
    0 10px 28px -12px color-mix(in oklab, var(--c, var(--bio)) 42%, transparent);
}
.p3-chip svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.motion .p3-chip {
  animation: p3-float 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes p3-float {
  50% {
    transform: translateY(-7px);
  }
}

/* A spark: a lit dot that travels from (--x, --y) by (--dx, --dy) of the box. Still: none. */
.p3-spark {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
}
.p3-spark::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--c, var(--psycho));
  box-shadow: 0 0 10px 2px color-mix(in oklab, var(--c, var(--psycho)) 55%, transparent);
}
html.motion .p3-spark {
  animation: p3-spark 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes p3-spark {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  18%,
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0));
  }
}

/* The Beacon core: a white orb with the mark, a turning gradient ring, a glow. */
.p3-core {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 3;
  display: grid;
  width: var(--p3-core, 34%);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff 34%, var(--wash) 84%);
  box-shadow:
    0 0 72px color-mix(in oklab, var(--psycho) 36%, transparent),
    0 30px 60px -32px color-mix(in oklab, var(--social) 52%, transparent),
    inset 0 1px #fff;
  transform: translate(-50%, -50%);
}
.p3-core img {
  width: 36%;
  height: auto;
  border-radius: 22%;
  box-shadow: 0 14px 28px -12px color-mix(in oklab, var(--bio-tint) 95%, transparent);
}
.p3-core-ring {
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--accent),
    var(--psycho) 30%,
    transparent 46%,
    var(--bio) 70%,
    var(--bio-tint) 86%,
    var(--accent)
  );
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0.9;
}
html.motion .p3-core-ring {
  animation: p3-spin 10s linear infinite;
}

/* The record node: a small conic ring with a white centre and a glow. */
.p3-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: var(--n, 12px);
  height: var(--n, 12px);
  margin: calc(var(--n, 12px) / -2) 0 0 calc(var(--n, 12px) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 34%, transparent 37%),
    conic-gradient(from 210deg, var(--accent), var(--psycho), var(--bio), var(--accent));
  box-shadow:
    0 0 0 3px #fff,
    0 0 20px 4px color-mix(in oklab, var(--accent) 38%, transparent);
}

/* A card's line icon: a small white tile in the corner (decorative, no words). */
.p3-icon {
  position: absolute;
  top: var(--p3-icon-inset, 1.5rem);
  right: var(--p3-icon-inset, 1.5rem);
  z-index: 3;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 14px;
  color: var(--c, var(--bio));
  background: #fff;
  box-shadow:
    var(--p3-chip-shadow),
    0 10px 24px -12px color-mix(in oklab, var(--c, var(--bio)) 42%, transparent);
}
.p3-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Forced colours: the decorative field and visuals step aside; the content stays. */
@media (forced-colors: active) {
  .p3-field,
  .p3-visual {
    display: none;
  }
}

/* Coherence pass: readable decisions and visible plan commitments. */
.plan-term { margin: 1rem 0; color: var(--ink, #003562); font-size: .8125rem; line-height: 1.55; }
.monitoring-terms { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid #dce3ed; border-radius: 18px; background: #fff; text-align: left; }
.monitoring-terms :is(h2,h3) { font-size: 1rem; line-height: 1.4; margin: 0 0 .7rem; }
.monitoring-terms p { font-size: .875rem; line-height: 1.6; margin: .6rem 0 0; max-width: 90ch; }
.compass-disclosure { font-size: .75rem; line-height: 1.5; color: #465568; margin: .8rem 0 0; }
@media(max-width:639px) {
 .site-nav { margin-bottom: var(--consent-space, 0px); }
 .cookie-banner { top:64px; bottom:auto; left:0; width:100%; transform:none; border-radius:0; margin:0; }
}

/* Shared synthetic Compass: geometry comes from the home export. */
.compass-shared { display:block; width:100%; height:auto; overflow:visible; }
.compass-shared .sector-bio { fill:color-mix(in oklab,var(--bio) 9%,transparent); }
.compass-shared .sector-psycho { fill:color-mix(in oklab,var(--psycho) 18%,transparent); }
.compass-shared .sector-social { fill:color-mix(in oklab,var(--social) 10%,transparent); }
.compass-shared .ring,.compass-shared .spoke { fill:none; stroke:color-mix(in oklab,var(--social) 22%,transparent); }
.compass-shared .shape-one { fill:none; stroke:var(--social); stroke-width:1.75; stroke-dasharray:5 5; }
.compass-shared .shape-two { fill:url(#compassFill); stroke:url(#compassStroke); stroke-width:3.5; stroke-linejoin:round; }
.compass-shared .shape-shadow { fill:color-mix(in oklab,var(--social) 18%,transparent); }
.compass-shared .axis-label { font:600 14px Inter,sans-serif; fill:var(--social); dominant-baseline:middle; paint-order:stroke; stroke:white; stroke-width:3px; stroke-linejoin:round; }
.compass-shared .centre-pill { fill:white; stroke:#dce3ed; }
.compass-shared .centre-label { font:700 9.5px Inter,sans-serif; fill:var(--social); dominant-baseline:middle; letter-spacing:.2em; }
.compass-shared-legend { display:flex; justify-content:center; gap:1.2rem; font-size:.75rem; }
.compass-shared-legend span::before { content:''; display:inline-block; width:16px; margin-right:6px; vertical-align:middle; border-top:2px dashed var(--social); }
.compass-shared-legend span:last-child::before { border-top:2px solid var(--psycho); }

/* Keep the phone action inside its 56px bar at narrow widths. */
.sticky-cta .btn { font-size:.75rem; line-height:1.35; padding:8px 10px; }
.sticky-cta-ask { font-size:.8125rem; }