/* ==========================================================================
   Product page components only. Everything shared lives in site.css.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Even 6/6 split. The render sits in a square Mist frame; the studio render
   has its own grey background, so the frame uses object-fit: cover, not
   contain (see chrome.md note 2). */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.hero h1 { max-width: none; }
.hero__actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.hero__media .frame { max-width: 560px; margin-inline: auto; }

@media (max-width: 800px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero__media { order: -1; }

}
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* --- How it works: the pinned sequence --------------------------------------
   The page's centrepiece and its one theme switch. The frame you are looking
   at is the step you are reading, so the motion is the content, not decoration.
   Frame and step alternate in the markup: at mobile that is the reading order
   already, and at desktop the frames all take the same grid area in column one
   and pin there while the steps scroll through column three. One picture per
   step serves both, and no scroll listener is involved. */
.seq {
  /* The tallest section on the site, and all of it is below the fold. */
  content-visibility: auto;
  contain-intrinsic-size: auto 2800px;
  background: #0b1020;
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--space-section);
}
.seq h2,
.seq h3 { color: #fff; }
/* The dark section runs wider than the light ones so the renders can be
   large enough to read at arm length. */
.seq .shell { max-width: 1360px; }
.seq__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.seq__grid { display: grid; }
.seq__frame { display: block; margin-bottom: 1.25rem; }
.seq__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: #060912;
}
.seq__step { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.seq__step h3 { margin-bottom: 0.5rem; }
.seq__step p { color: rgba(255, 255, 255, 0.72); max-width: 46ch; }
.seq__rail { display: none; }

@media (min-width: 1024px) {
  /* Renders, then the 2px rail, then the steps. */
  .seq__grid {
    grid-template-columns: minmax(0, 1.15fr) 2px minmax(0, 0.85fr);
    grid-template-rows: repeat(6, auto);
  }
  /* All six renders share one grid area and hold still while roughly four
     viewports of steps go past. */
  .seq__frame {
    grid-area: 1 / 1 / 7 / 2;
    position: sticky;
    top: 0;
    height: 100dvh;
    margin: 0 clamp(2rem, 5vw, 4rem) 0 0;
    opacity: 0;
    scale: 1.02;
    transition: opacity 500ms var(--ease), scale 500ms var(--ease);
    will-change: opacity;
  }
  .seq__frame[data-active] { opacity: 1; scale: 1; }
  .seq__frame img { position: absolute; top: 50%; translate: 0 -50%; }

  .seq__rail {
    display: block;
    grid-area: 1 / 2 / 7 / 3;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
  }
  .seq__rail-fill {
    display: block;
    width: 100%;
    height: var(--seq-progress, 16.67%);
    border-radius: 2px;
    background: var(--teal);
    transition: height 500ms var(--ease);
  }

  .seq__step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60dvh;
    padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
  }
  /* The step is the only text on screen, so it is bigger than an h3. */
  .seq__step h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .seq__step p { font-size: 1.0625rem; max-width: 36ch; }
  /* Inactive steps recede but stay above 4.5:1 on this background. */
  .seq__step h3,
  .seq__step p {
    color: rgba(255, 255, 255, 0.55);
    transition: color 400ms var(--ease);
  }
  .seq__step[data-active] h3 { color: #fff; }
  .seq__step[data-active] p { color: rgba(255, 255, 255, 0.82); }
}

/* --- Two things it does: feature tiles --------------------------------------
   Paper tiles, hairline border, a single rule above the spec group (never one
   per row). */
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.tile__body { color: var(--ink-2); max-width: 42ch; }
.tile__specs {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.tile__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.tile__spec dt { color: var(--ink-2); font-size: 0.875rem; }
.tile__spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--ink);
  text-align: right;
  flex: none;
}
/* Affordance: the tiles lift and their picture pushes in a little. */
@media (hover: hover) {
  .tile { transition: translate 320ms var(--ease), box-shadow 320ms var(--ease); }
  .tile:hover { translate: 0 -4px; box-shadow: var(--shadow); }
  .js .tile:hover .frame img { scale: 1.03; transition-duration: 320ms; }
}
@media (max-width: 800px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* --- What a clinician sees: the live monitor device screen ------------------
   A device screen inside a light page. Local tokens map to what
   live-monitor.js sets from JS. */
.live {
  --dev-bg: #0b1020;
  --dev-track: #060912;
  --dev-ink: #f2f7fa;
  --dev-ink-2: #94a3af;
  --dev-rule: rgba(242, 247, 250, 0.14);
  --dev-rule-strong: rgba(242, 247, 250, 0.28);
  --current: var(--teal);
  --spark: var(--gold);
  --alert: #b42318;

  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--dev-rule);
  border-radius: var(--radius);
  background: var(--dev-bg);
  color: var(--dev-ink);
}
.live__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.live__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dev-ink-2);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--current);
  border-radius: var(--radius-pill);
  transition: background var(--t) var(--ease);
}
.status-pill[data-status="watch"] { background: var(--spark); }
.status-pill[data-status="alert"] { background: var(--alert); color: var(--dev-ink); }

.live__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.live__gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.live__gauge { width: 100%; max-width: 260px; aspect-ratio: 1; }
.live__gauge-bg { fill: var(--dev-track); }
.live__gauge-ring { fill: none; stroke: var(--dev-rule); stroke-width: 1; }
.live__gauge-axis { stroke: var(--dev-rule-strong); stroke-width: 1; }
.live__gauge-dot { fill: var(--current); stroke: var(--dev-ink); stroke-width: 2; transition: fill var(--t) var(--ease); }
.live__gauge-label { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em; fill: var(--dev-ink-2); }

.live__ring-wrap { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.live__ring { position: relative; width: 116px; height: 116px; flex: none; }
.live__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.live__ring-track { fill: none; stroke: var(--dev-rule); stroke-width: 10; }
.live__ring-fill { fill: none; stroke: var(--current); stroke-width: 10; stroke-linecap: round; transition: stroke var(--t) var(--ease); }
.live__ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--dev-ink);
}
.live__ring-desc { color: var(--dev-ink-2); max-width: 26ch; font-size: 0.9375rem; }
.live__ring-desc-label { margin-bottom: 0.25rem; }

.live__meters { display: flex; flex-direction: column; gap: 0.75rem; }
.live__meter { display: grid; grid-template-columns: minmax(0, 1fr) 6ch; align-items: center; gap: 0.75rem; }
.live__meter-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dev-ink-2);
  margin-bottom: 0.375rem;
}
.live__meter-track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--dev-track); overflow: hidden; }
.live__meter-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--current); transition: background var(--t) var(--ease); }
.live__meter-value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: right;
  color: var(--dev-ink);
  font-variant-numeric: tabular-nums;
}

.live__sim {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dev-ink-2);
}
.live__sim::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dev-ink-2); }
/* Reduced motion only: a button that starts the simulation on request. */
.live__play {
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  font: 600 0.875rem/1 var(--font-body);
  color: var(--dev-ink);
  background: transparent;
  cursor: pointer;
}
.live__play:hover,
.live__play:focus-visible { background: #fff; color: #0B1020; }


@media (max-width: 800px) {
  .live__grid { grid-template-columns: minmax(0, 1fr); }
  .live__ring-wrap { justify-content: flex-start; }
}
/* The gauge is what to look at first here, so it arrives a beat later. */
@media (prefers-reduced-motion: no-preference) {
  .js .live.reveal .live__gauge-wrap {
    opacity: 0;
    transition: opacity 600ms var(--ease) 200ms;
  }
  .js .live.reveal.is-in .live__gauge-wrap { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .live__gauge-dot, .live__meter-fill { transition: none; }
  .live .live__gauge-wrap { opacity: 1 !important; }
}

/* --- The assessment protocol: clustered trials + definition grid ------------
   Three clusters instead of one long six-row list; one hairline above the
   whole group, not one per row. */
.protocol__band { display: none; }
@media (min-width: 1024px) {
  .protocol__band {
    display: block;
    height: 220px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  .protocol__band img { object-position: center 60%; }
}

.protocol__clusters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.cluster__title { margin-bottom: 1rem; }
.cluster__trials { display: flex; flex-direction: column; gap: 0.75rem; }
.cluster__trial {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.cluster__trial span:first-child { color: var(--ink-2); font-size: 0.9375rem; }
.cluster__trial b {
  font-weight: 500;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--ink);
  flex: none;
}
@media (max-width: 800px) {
  .protocol__clusters { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.protocol__scored { margin-top: clamp(3rem, 6vw, 4.5rem); }
.protocol__scored > .eyebrow { display: block; margin-bottom: 0.75rem; }
.protocol__scored > .lede-metrics {
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.defs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
}
.defs__item { min-width: 0; }
.defs__item dt { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.defs__item dd { margin: 0.375rem 0 0; color: var(--ink-2); max-width: 42ch; }
/* Seven items in a two-column grid leave the last one alone with an empty
   cell beside it. Let it span both tracks but cap its own width to one
   column's measure, so it reads as the same size as its neighbours. */
.defs__item:last-child { grid-column: 1 / -1; max-width: 42ch; }
@media (max-width: 800px) {
  .defs { grid-template-columns: minmax(0, 1fr); }
}

/* --- Closing CTA -------------------------------------------------------- */
.cta { --flow: 1rem; }
.cta p { max-width: 46ch; color: var(--ink-2); }
.cta .btn { margin-top: 0.5rem; }
/* The callout keeps its own stacking order above the spark watermark. */
.cta > :not(.spark) { position: relative; z-index: 1; }