/* Preview Health — Home */

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }

/* Two-column rows: mono label on the left, content on the right */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem); padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 7.5rem)); margin-top: calc(-1 * var(--header-h)); background: var(--hero-bg); }

.hero-content {
  display: grid;
  gap: 1.75rem;
  justify-items: start;
  max-width: 980px;
}

.hero-title {
  /* sized so "measured in higher resolution" always fits on one line */
  font-size: min(4.75rem, calc((100vw - 2 * var(--gutter)) / 15.5));
  color: var(--headline-muted);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.045em;
}
.hero-title-line { white-space: nowrap; }
.hero-title em { font-style: normal; font-weight: 500; color: var(--signature); }

.hero-subtitle {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 44ch;
}

.hero-cta { margin-top: 0.5rem; }

/* ---------- Vision ---------- */
.vision { background: var(--vision-bg); min-height: 100svh; display: flex; align-items: center; }
.vision-inner { display: grid; gap: 1.75rem; justify-items: start; }
.vision-text {
  font-size: calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 20.5);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.vision-text .nowrap { white-space: normal; display: inline; }
@media (max-width: 760px) {
  .vision-text { font-size: clamp(2.1rem, 1.3rem + 4vw, 2.9rem); }
}

/* ---------- Creating ---------- */
.creating-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.creating-note {
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  max-width: 54ch;
}
.creating-text { display: grid; gap: 1.5rem; justify-items: start; min-width: 0; }
.creating-text { container-type: inline-size; width: 100%; }
.creating-title { font-size: min(var(--fs-h2), 6.6cqi); }
.creating-title .nowrap { white-space: nowrap; }
.creating-title em { font-style: normal; font-weight: 500; color: var(--signature); }
.creating-subtext { font-size: var(--fs-body-lg); color: var(--ink-2); }
@media (min-width: 1100px) { .creating-subtext .ml { display: block; white-space: nowrap; } }

.creating-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  background: transparent;
}

@media (max-width: 860px) {
  .creating-inner { grid-template-columns: 1fr; }
  .creating-visual { aspect-ratio: 4 / 3; }
}

/* Measure / Interpret / Act loop */
.loop-diagram { width: 100%; height: 100%; display: block; }

.loop-arc { fill: none; stroke: var(--ink-3); stroke-width: 1.75; }
.loop-arc-dotted { stroke: var(--ink-3); opacity: 0.6; stroke-dasharray: 2.5 7; animation: loopFlow 3.6s linear infinite; }
@keyframes loopFlow { to { stroke-dashoffset: -38; } }

.loop-arrow path { fill: var(--ink-3); }

.loop-dot { fill: var(--ink); }
.loop-node-open { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }

.loop-label { font-size: 14px; fill: var(--ink-2); }
.loop-label-top { fill: var(--ink); font-weight: 500; }

/* ---------- Discovery / Clinical ---------- */
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.discovery-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) + 6px);
}

.discovery-image {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  background:
    radial-gradient(circle, var(--line-strong) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--bg);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.discovery-image::after {
  content: 'Image placeholder';
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
}

/* Card order: audience, sentence, then the visual.
   Rows are a subgrid, so both cards line up row for row. */
.discovery-audience { order: 1; }
.discovery-text { order: 2; color: var(--ink-2); font-size: var(--fs-body-lg); font-weight: 400; margin-top: 0.75rem; }
.discovery-card > .discovery-image { order: 3; margin: 1.5rem 0 0; }

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

/* ---------- Team logos ---------- */
.team-logos-head { display: grid; gap: 1.5rem; justify-items: start; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.team-logos-heading { font-size: min(2.25rem, calc((100vw - 2 * var(--gutter)) / 33)); white-space: nowrap; }
@media (max-width: 760px) { .team-logos-heading { font-size: var(--fs-h2); white-space: normal; } }

.logo-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 128px;
  padding: 1.5rem 1rem;
  color: var(--ink-2);
  border-left: 1px solid var(--line);
  transition: color 0.25s var(--ease);
  line-height: 1.05;
  text-align: left;
}
.logo-mark:first-child { border-left: 0; }
.logo-mark:hover { color: var(--ink); }

@media (max-width: 960px) {
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logo-mark { border-bottom: 1px solid var(--line); }
  .logo-mark:nth-child(3n + 1) { border-left: 0; }
  .logo-mark:nth-child(n + 4) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-mark { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 104px; }
  .logo-mark:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .logo-mark:nth-child(odd) { border-left: 0; }
  .logo-mark:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* ---------- Early access ---------- */
.early-access-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-lg);
  background: var(--vision-bg);
  overflow: hidden;
  transition: background-color 0.3s var(--ease);
}
.early-access-card.is-success { background: var(--vision-bg); }
.early-access-card.is-success .early-access-copy { display: none; }

.early-access-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(3rem, 2rem + 6vw, 6rem) clamp(1.75rem, 1rem + 2.5vw, 3rem);
  color: var(--ink);
}
.early-access-card.is-success .early-access-success { display: flex; }
.success-icon { width: 48px; height: 48px; color: var(--signature); flex-shrink: 0; }
.early-access-success-text { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.015em; max-width: 30ch; }

.early-access-copy {
  /* Heading and intro on the left, form on the right */
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  /* empty rows above and below centre the heading block against the form */
  grid-template-areas: ". form" "title form" "sub form" ". form";
  grid-template-rows: 1fr auto auto 1fr;
  gap: 0 clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  min-width: 0;
}
.early-access-title { grid-area: title; font-size: var(--fs-h2); }
.early-access-subtext { grid-area: sub; color: var(--ink-2); max-width: 36ch; margin-top: 1rem; }

.access-form { grid-area: form; display: grid; gap: 0.75rem; min-width: 0; }
@media (max-width: 860px) {
  .early-access-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "sub" "form"; grid-template-rows: auto; }
  .early-access-subtext { margin: 0.75rem 0 1.5rem; }
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-field input {
  width: 100%;
  height: 52px;
  padding: 0 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.95rem;
  appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field select {
  width: 100%;
  height: 52px;
  padding: 0 2.5rem 0 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field select:invalid { color: var(--ink-3); }
.form-field select option { color: var(--ink); background: var(--bg); }
.form-field select:hover { border-color: var(--line-strong); }
.form-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-field { position: relative; }
.select-field::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.form-field input::placeholder { color: var(--ink-3); }
.form-field input:hover { border-color: var(--line-strong); }
.form-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.submit-btn { justify-self: start; margin-top: 0.5rem; }

/* Spam trap field: off-screen for people, still visible to bots */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-consent { font-size: var(--fs-small); color: var(--ink-3); max-width: 46ch; }
.form-consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--signature); }

.form-status { font-size: var(--fs-small); }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--success); }
.form-status.is-error { color: var(--error); }

@media (max-width: 860px) {
  .early-access-card { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.hero-subtitle em { font-style: normal; font-weight: 500; color: var(--signature); }
.vision-text em { font-style: normal; font-weight: 500; color: var(--signature); }

/* Clinical illustration */
.discovery-image.has-visual { background: var(--bg); place-items: stretch; overflow: hidden; }
.discovery-image.has-visual::after { content: none; }
.clinical-chart { width: 100%; height: 100%; display: block; }
.clinical-chart .cc-pt-sharp { fill: var(--ink); fill-opacity: 0.75; }
.clinical-chart .cc-pt-hi { fill: var(--signature); }
.clinical-chart .cc-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; fill: var(--ink-2); }
.clinical-chart .cc-label-strong { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.clinical-chart .cc-label-preview { fill: var(--signature); }
.clinical-chart .cc-label-faint { fill: var(--ink-3); }
.discovery-inner { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
.discovery-audience {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--signature);
  margin: 0;
}
.clinical-chart .cc-link { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
.clinical-chart .cc-row-hi { fill: var(--accent-soft); }
.clinical-chart .cc-dot-muted { fill: var(--line-strong); }
.clinical-chart .cc-label-name { fill: var(--ink); }
.clinical-chart .cc-label-name.cc-label-preview { fill: var(--signature); font-weight: 700; }
.clinical-chart .cc-chip { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.clinical-chart .cc-chip-hi { fill: var(--signature); }
.clinical-chart .cc-label-chip-hi { fill: var(--signature-ink); font-weight: 500; }
.clinical-chart .cc-row-hi { stroke: var(--signature); stroke-opacity: 0.35; stroke-width: 1; }
.clinical-chart .cc-group { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.clinical-chart .cc-sep { stroke: var(--line); stroke-width: 1; }

/* Partner logo images */
.logo-mark img { display: block; height: auto; width: auto; max-height: 52px; max-width: 85%; object-fit: contain; }
@media (max-width: 560px) { .logo-mark img { max-height: 44px; } }
/* Logos are full colour artwork made for light backgrounds: give them a white tile in dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-mark img { background: #fff; padding: 8px 12px; border-radius: 8px; box-sizing: content-box; max-width: calc(85% - 24px); }
}
:root[data-theme="dark"] .logo-mark img { background: #fff; padding: 8px 12px; border-radius: 8px; box-sizing: content-box; max-width: calc(85% - 24px); }
.section.early-access { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.br-desk { display: none; }
@media (min-width: 861px) { .br-desk { display: inline; } }
.early-access-subtext em { font-style: normal; font-weight: 500; color: var(--signature); }
.clinical-chart .cc-label-accent { fill: var(--signature); font-weight: 500; }
.clinical-chart .cc-label-sub { fill: var(--headline-muted); }

/* ---------- Hero: full-bleed video, full-width headline ---------- */
.hero.hero--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  background: #0a0b10;
}
.hero.hero--video > .container { width: 100%; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 11, 16, 0.72) 0%, rgba(10, 11, 16, 0.38) 45%, rgba(10, 11, 16, 0.12) 100%),
    linear-gradient(to right, rgba(10, 11, 16, 0.35), rgba(10, 11, 16, 0) 70%);
}
.hero--video .hero-content { max-width: none; width: 100%; }
.hero--video .hero-title {
  /* headline spans the full content width of the container */
  font-size: calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 14.3);
  color: #ffffff;
  line-height: 0.98;
}
.hero--video .hero-title em,
.hero--video .hero-subtitle em { color: #d3b0ff; }
.hero--video .hero-subtitle { color: rgba(255, 255, 255, 0.86); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); max-width: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero-media { background: url(../assets/hero/hero-poster.jpg) center / cover; } }

@media (max-width: 560px) {
  .hero--video .hero-title { font-size: clamp(2.4rem, 1.2rem + 7vw, 3.2rem); line-height: 1.02; }
  .hero--video .hero-title-line { white-space: normal; }
}