/* Comphya homepage redesign proposal (v2) — Figma direction, July 2026.
   Type: Hanken Grotesk behind --sans (one-line swap to Apercu if licensed).
   Palette rule from client: no black anywhere — ink is deep navy. */

:root {
  --sans: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ink SCALE, not a single near-black. Nothing here is black or neutral grey —
     every step keeps a blue cast so type reads as ink, never as #000. */
  --ink-950: #1f2d3d;   /* deepest step — for type over the hero's mid-tones */
  --ink-900: #2e4257;   /* display + headings */
  --ink-700: #46586b;   /* body copy */
  --ink-500: #6d8296;   /* captions, muted */
  --ink: var(--ink-900);
  --ink-soft: var(--ink-700);

  --cyan: #35b3d8;
  --cyan-deep: #1d84a8;
  --band-blue: #17708f;      /* deep teal — carries white type at 5.35:1 */
  /* --cyan-deep is a 4.27:1 accent — fine for shapes, fails AA as small text.
     Anything that renders as a GLYPH on a light surface uses this instead. */
  --accent-ink: #17708f;
  --band-blue-top: #3cb4d8;  /* hero's final stop; the band fades FROM this */
  --paper: #f2f7fa;
  --card: #ffffff;
  --line: #d5e3ea;
  --navy: #1f2d3d;
  --navy-foot: #263749;
  --on-navy: #dce7ef;
  --on-navy-dim: #9fb3c4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The nav is sticky at 72px, so an un-offset anchor target scrolls to a point
   hidden behind it. Every in-page target needs to clear it. */
:target, [id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: #fdfefe;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }

p { margin: 0; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- Nav ---------- */

.v2-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 254, 254, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(213, 227, 234, 0.6);
}

.v2-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.v2-nav__logo img { height: 34.5px; width: auto; display: block; }

.v2-nav__links {
  display: flex;
  gap: 36px;
  align-items: center;
}

.v2-nav__links a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.v2-nav__links a:hover { color: var(--cyan-deep); }

.v2-nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.v2-nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Preview build: every off-page link is unwired so the client can only view the
   homepage direction. Keeps the exact visual — only the navigation is removed. */
[data-preview-off] { cursor: default; }

/* ---------- Hero ---------- */

/* ONE continuous eased ramp, top of the hero to the band colour.
   The old 4-stop linear gradient broke its rate of change at every stop — at the
   38% stop it jumped 4x (0.53 -> 2.2 units per 1%) and the eye read that as a
   bright line across the middle. These stops follow smoothstep (3t²-2t³), so the
   rate eases in and out and there is no kink anywhere to catch the eye.
   It finishes ON --band-blue so .v2-intro can be flat with no seam.
   NEVER replace this with a short linear gradient. */
.v2-hero {
  position: relative;
  background: linear-gradient(180deg,
    #fdfefe 0%,
    #f7fafb 10%,
    #e5eff3 20%,
    #cbdfe6 30%,
    #acccd7 40%,
    #8ab7c7 50%,
    #68a2b6 60%,
    #498fa7 70%,
    #2f7f9b 80%,
    #1d7492 90%,
    #17708f 100%);
  overflow: hidden;
}

/* The band washes UP over the model's lower half so the cutout's bottom edge
   never shows — the figure dissolves into the blue instead of ending on a line.
   Sits above the photo (z-index 2); the copy is lifted clear of it below. */
/* Full-height and `background: inherit`, so this is a pixel-identical copy of the
   hero's own gradient sitting on top of the model. Over the background it is
   therefore invisible by definition — it cannot band, because it is painting the
   exact colour already there. Only the MASK varies, easing him out toward the
   base. The old version was a second, differently-shaped gradient starting
   abruptly at 56%, which added its own line across the middle. */
.v2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 46%, rgba(0,0,0,0.028) 51%, rgba(0,0,0,0.104) 56%,
    rgba(0,0,0,0.216) 61%, rgba(0,0,0,0.352) 66%, rgba(0,0,0,0.5) 71%,
    rgba(0,0,0,0.648) 76%, rgba(0,0,0,0.784) 81%, rgba(0,0,0,0.896) 86%,
    rgba(0,0,0,0.972) 91%, rgba(0,0,0,1) 96%);
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 46%, rgba(0,0,0,0.028) 51%, rgba(0,0,0,0.104) 56%,
    rgba(0,0,0,0.216) 61%, rgba(0,0,0,0.352) 66%, rgba(0,0,0,0.5) 71%,
    rgba(0,0,0,0.648) 76%, rgba(0,0,0,0.784) 81%, rgba(0,0,0,0.896) 86%,
    rgba(0,0,0,0.972) 91%, rgba(0,0,0,1) 96%);
  pointer-events: none;
  z-index: 2;
}

/* Hero stays on the SAME 1180 container as the nav so the copy's right edge
   lines up with the nav's. The model is bigger than its track and bleeds left
   out of the container instead of stealing width from the copy.
   --fig-track is what the grid reserves; --fig-w is his true size. */
.v2-hero .container {
  /* 559 is chosen so the bleed lands him at exactly the x he was locked at. */
  --fig-track: 559px;
  --fig-w: 697px;
  display: grid;
  grid-template-columns: minmax(0, var(--fig-track)) 1fr;
  gap: 40px;
  align-items: end;
}

/* At this breakpoint --fig-w (697) overflows --fig-track (559) by 138px, so a
   40px gap isn't enough — his raised arm lands on top of the tagline. Once
   the viewport is wide enough that the copy column has room to spare, widen
   the gap well past that 138px so the figure clears the text with margin
   to spare. */
@media (min-width: 1201px) {
  .v2-hero .container { gap: 180px; }
}

/* Top margin is deliberately tight — client wants his head to just reach the
   nav without ever being cropped by it. */
/* Width is set HERE, not on the img, and justify-self keeps the box from
   stretching to the track. The masked wash below uses mask-size:100% 100%, so
   any difference between this box and the image scales the mask off his
   silhouette and paints a rim along the edge. Keep them identical. */
/* No horizontal bleed: the wheelchair photo's replaced the original's left-edge
   Figma anchor, and at viewport widths where the container has no free space
   outside it (below ~1236px), a negative left margin here pushed the figure
   past x:0 and .v2-hero's overflow:hidden clipped it. Flush with the
   container's own padding is the widest he can go without ever cropping. */
.v2-hero__figure {
  position: relative;
  width: var(--fig-w);
  justify-self: start;
  /* Negative top: the image carries transparent headroom, so a positive
     margin still left a visible gap. This lands his hair ~10px under the nav. */
  margin: -12px 0 0 0;
  align-self: end;
  line-height: 0;
}

.v2-hero__figure img {
  display: block;
  width: 100%;
  /* Runs past the hero floor so the lower edge is cropped rather than ending on
     a hard line — the blue wash finishes him off, same as the original. */
  margin-bottom: -110px;
  filter: saturate(1.08);
}

/* The original's blue wash, masked to his silhouette so the tint lands only on
   him and never spills onto the light field. Lifted from site/index.html. */
.v2-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0 0 -110px 0;
  pointer-events: none;
  background: linear-gradient(rgba(116, 185, 255, 0), rgba(116, 185, 255, 0.09));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 50%;
  -webkit-mask-image: url('images/hero couple.webp');
  mask-image: url('images/hero couple.webp');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Client ask: copy block flush to the right edge, text left-aligned inside it,
   so the ragged edge faces the model and the hard edge holds the container. */
/* Top-anchored, not centred: the headline's first line is set to land on the
   model's eye line (~234px at a 1496 viewport). Centring pushed the block low
   enough that the CTAs sat on the gradient's mid-tones, where nothing reaches
   4.5:1 — neither dark nor light ink. */
.v2-hero__copy {
  /* Scales with the model so the headline keeps meeting his eye line at
     every breakpoint; a fixed value drifts down the ramp as he shrinks. */
  padding: calc(var(--fig-w) * 0.231) 0 56px;
  align-self: start;
  /* Deepest ink step: over the hero's mid-tones --ink-900 only reaches 4.3:1. */
  color: var(--ink-950);
  display: grid;
  justify-items: end;
  /* Figma: every line ends flush on the right, ragged left. */
  text-align: right;
  /* Above the blue wash so the copy stays crisp while the photo goes under it. */
  position: relative;
  z-index: 3;
}

/* No artificial cap — a narrow measure wraps into short lines whose ragged
   edge falls well short of the box, which kills the flush-right read. */
.v2-hero__copy h1 {
  /* 48px, not 54: at 54 "Pioneering Implantable" cannot fit the 525px column and
     breaks after the first word. Balance then evens the four lines so no single
     word is left stranded on the last one. */
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 100%;
  margin: 0;
  text-wrap: balance;
}

/* One line, per the Pages doc — the parallel construction IS the device, so
   splitting it into two stacked blocks killed the beat. Lighter than the
   headline on purpose: a tagline earns emphasis from air, not size. */
.v2-hero__taglines {
  margin-top: 40px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.5;
}

/* If this wraps, the break should fall between the two sentences, not
   inside the second one — keep "Restoring sexual health." as one unit. */
.v2-hero__nowrap { white-space: nowrap; }

.v2-hero__ctas {
  margin-top: 44px;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.v2-btn {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--ink-950);
  color: var(--ink-950);
  /* Secondary = OUTLINED, not a second solid. Fully transparent it reads 4.46:1
     over the gradient — a hair under the bar — so it carries the lightest veil
     that clears it. At 0.55 it looked like a filled button and flattened the
     primary/secondary hierarchy; 0.25 keeps the outline reading. */
  background: rgba(253, 254, 254, 0.25);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

/* Both buttons hover the SAME way: intensify their own fill, lift 1px, identical
   shadow. Previously the outline inverted to dark while the solid lightened —
   opposite directions — and only the solid carried a shadow. */
.v2-btn:hover {
  background: #fdfefe;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(31, 45, 61, 0.55);
}

/* Border matches the fill, or it reads as a darker ring around the button. */
.v2-btn--solid {
  background: var(--ink-950);
  border-color: var(--ink-950);
  color: #eef7fb;
}

.v2-btn--solid:hover {
  background: #3d5670;
  border-color: #3d5670;
  color: #eef7fb;
}

/* ---------- Intro band (copy + video) ---------- */

/* Fades FROM the hero's exact final stop into the deep teal across the top
   padding, so there is no seam against the locked hero and the copy still lands
   on solid teal. A flat mid-cyan vibrates against any ink; deep teal + white is
   5.35:1 and reads clean. */
.v2-intro {
  /* Flat --band-blue, no ramp of its own. The hero above now EASES all the way
     into this exact colour and arrives with its rate at zero, so the two meet
     with no step and no kink. A ramp here would re-introduce the "solid at the
     bottom with a fade above it" look. */
  background: var(--band-blue);
  color: #f4fbfd;
  padding: 88px 0;
}

.v2-intro .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.v2-intro__copy {
  display: grid;
  gap: 22px;
  font-size: 18.5px;
  line-height: 1.65;
  max-width: 54ch;
}

/* Facade video player — same pattern as the current homepage build */
.v2-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(31, 45, 61, 0.28);
}

.v2-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.v2-video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.v2-video__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 45, 61, 0.05), rgba(31, 45, 61, 0.25));
  transition: background 0.25s ease;
}

.v2-video__play:hover::before { background: rgba(31, 45, 61, 0.12); }

.v2-video__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(253, 254, 254, 0.94);
  box-shadow: 0 8px 22px rgba(31, 45, 61, 0.35);
  transition: transform 0.2s ease;
}

.v2-video__btn::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 22px solid var(--cyan-deep);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.v2-video__play:hover .v2-video__btn { transform: translate(-50%, -50%) scale(1.06); }

/* ---------- Supporters ---------- */

.v2-supporters {
  background: var(--paper);
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.v2-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* Endless logo loop. The track holds TWO identical sets, so translating it
   exactly -50% lands set 2 where set 1 began and the restart is invisible.
   Edges are masked so logos fade out rather than clipping on a hard line. */
.v2-marquee {
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.v2-marquee__track {
  display: flex;
  width: max-content;
}

.v2-marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px);
}

.v2-marquee img {
  height: 44px;
  width: auto;
  flex: none;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.v2-marquee img:hover { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .v2-marquee__track { animation: v2-marquee-scroll 42s linear infinite; }
  .v2-marquee:hover .v2-marquee__track { animation-play-state: paused; }
}

@keyframes v2-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Section scaffolding ---------- */

.v2-section { padding: 96px 0; }

.v2-section__head { text-align: center; max-width: 640px; margin: 0 auto; }

.v2-section__head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
}

.v2-section__head .sub {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 18px;
}

/* ---------- Understanding Neurogenic ED (4 steps) ---------- */

.v2-steps { background: var(--paper); }

.v2-steps__grid {
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.v2-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 26px 28px;
  position: relative;
}

/* Progress rail: each step carries a top edge in brand cyan so the four read as
   a sequence rather than four unrelated cards. */
.v2-step::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: var(--cyan);
}

.v2-step__num {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.v2-step h3 {
  margin: 14px 0 12px;
  font-size: 19px;
  font-weight: 600;
}

.v2-step p:last-child {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ---------- Three pillars (Clinical Development / Patients / Future) ---------- */

.v2-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.v2-pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 32px;
}

.v2-pillar h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.v2-pillar .v2-checklist { margin-top: 0; }

.v2-pillar .v2-checklist li {
  font-size: 16px;
  padding-left: 30px;
}

/* ---------- Patient Journey ---------- */
/* Background/text pulled from the footer per spec: --navy-foot / --on-navy. */

.v2-journey {
  background: var(--navy-foot);
  color: var(--on-navy);
}

.v2-journey .v2-section__head h2 { color: var(--on-navy); }

.v2-journey__timeline {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: flex;
  position: relative;
}

.v2-journey__timeline::before {
  content: '';
  position: absolute;
  top: 10px;
  left: calc(12.5% - 1px);
  right: calc(12.5% - 1px);
  height: 2px;
  background: rgba(220, 231, 239, 0.25);
}

.v2-journey__timeline li {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0 12px;
}

.v2-journey__dot {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(53, 179, 216, 0.22);
  position: relative;
}

.v2-journey__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--on-navy);
}

.v2-journey__copy {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-navy-dim);
}

/* Traveling pulse: a second dot that visits each stop in turn, holding to
   pulse at each one. Two independent animations — v2-journey-travel moves it
   (position + the fade in/out at the loop seam) while v2-journey-pulse runs
   continuously underneath so the glow keeps beating regardless of where the
   travel animation currently has it parked. Sits in v2-journey__timeline-wrap
   rather than as a child of the <ol> itself, since <span> isn't valid inside
   <ol> and browsers will hoist it out, breaking the positioning. */
.v2-journey__timeline-wrap { position: relative; }

.v2-journey__pulse {
  position: absolute;
  top: 0;
  left: 12.5%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  opacity: 0;
}

.v2-journey__pulse-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .v2-journey__pulse { animation: v2-journey-travel 15s ease-in-out infinite; }
  .v2-journey__pulse-dot { animation: v2-journey-pulse 1.1s ease-in-out infinite; }
}

/* left/opacity only — 4 stops at 12.5/37.5/62.5/87.5%, matching the 4
   timeline dots. 0.6s to fade in, 3s holding at each stop, 0.6s to travel
   between stops, 0.6s to fade out at the end before the loop resets. */
@keyframes v2-journey-travel {
  0%   { left: 12.5%; opacity: 0; }
  4%   { left: 12.5%; opacity: 1; }
  24%  { left: 12.5%; opacity: 1; }
  28%  { left: 37.5%; opacity: 1; }
  48%  { left: 37.5%; opacity: 1; }
  52%  { left: 62.5%; opacity: 1; }
  72%  { left: 62.5%; opacity: 1; }
  76%  { left: 87.5%; opacity: 1; }
  96%  { left: 87.5%; opacity: 1; }
  100% { left: 87.5%; opacity: 0; }
}

@keyframes v2-journey-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); transform: scale(1); }
  50% { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0); transform: scale(1.2); }
}

@media (max-width: 680px) {
  /* The mobile timeline runs top-to-bottom with variable row heights (text
     wraps differently per item), so there's no reliable CSS-only vertical
     position to travel between. Simplest correct behavior: no traveling
     pulse here, just the static dots. */
  .v2-journey__pulse { display: none; }
}

.v2-journey__cards {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.v2-journey__card {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
}

.v2-journey__card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.v2-journey__card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 680px) {
  .v2-journey__timeline {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }

  .v2-journey__timeline::before {
    top: 0;
    bottom: 0;
    left: 10px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .v2-journey__timeline li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
    padding: 0;
    width: 100%;
  }

  .v2-journey__dot { margin: 2px 0 0; flex-shrink: 0; }
}

/* ---------- Mission / Vision ---------- */

.v2-mv {
  background: var(--paper);
  padding: 88px 0;
  border-top: 1px solid var(--line);
}

.v2-mv__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}

.v2-mv__label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 18px;
}

.v2-mv__body {
  font-size: 21px;
  line-height: 1.55;
  max-width: 34ch;
}

/* ---------- Understanding CaverSTIM (tabs) ---------- */

.v2-tabs__bar {
  margin: 48px auto 0;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.v2-tab {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 14px 4px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

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

.v2-tab.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent-ink);
}

.v2-panel { display: none; padding-top: 56px; }

.v2-panel.active { display: block; }

.v2-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.v2-panel h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  max-width: 24ch;
}

.v2-panel__copy { display: grid; gap: 18px; }

.v2-panel__copy p { color: var(--ink-soft); line-height: 1.7; }

.v2-device-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px;
  display: flex;
  justify-content: center;
}

.v2-device-card img { max-height: 340px; width: auto; }

.v2-bullets {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

/* Technology tab: header + copy, then the labeled diagram, then the bullets —
   all full container width, stacked, rather than the two-column .v2-panel__grid
   the other tabs use. */
.v2-panel--tech .v2-panel__copy h3 { max-width: none; }

.v2-panel--tech__image {
  margin: 36px 0;
}

.v2-panel--tech__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}


.v2-bullets li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.v2-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.v2-panel--video .v2-video {
  max-width: 780px;
  margin: 0 auto;
}

.v2-components {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.v2-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
}

.v2-card h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.v2-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }

.v2-panel__intro {
  text-align: center;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 auto;
}

/* ---------- How it works ---------- */

.v2-how { background: var(--paper); }

.v2-how__box {
  margin: 52px auto 0;
  max-width: 880px;
  background: var(--band-blue);
  color: #f4fbfd;
  border-radius: 14px;
  padding: 44px 48px;
}

.v2-how__box h3 { font-size: 24px; font-weight: 500; margin-bottom: 24px; }

.v2-how__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
}

.v2-how__list li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.55;
}

.v2-how__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4fbfd;
}

.v2-how__box .closing {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 251, 253, 0.35);
  font-size: 16px;
  color: #e6f5fa;
}

.v2-how .v2-components { max-width: 1020px; margin-left: auto; margin-right: auto; }

.v2-how .v2-card { background: #fdfefe; }

/* ---------- Clinical evidence ---------- */

.v2-clinical {
  background: var(--navy);
  color: var(--on-navy);
  padding: 96px 0;
}

.v2-clinical .v2-eyebrow { color: #7fc6de; text-align: left; }

.v2-clinical h2 {
  margin-top: 18px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 500;
  color: #f4fbfd;
  max-width: 24ch;
}

.v2-clinical .sub {
  margin-top: 16px;
  font-size: 18px;
  color: var(--on-navy-dim);
  max-width: 56ch;
}

.v2-evidence {
  margin-top: 48px;
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  padding: 40px 44px;
  box-shadow: 0 24px 48px rgba(15, 23, 33, 0.35);
}

.v2-evidence h3 { font-size: 22px; font-weight: 600; }

.v2-evidence h3 span { font-weight: 400; color: var(--ink-soft); }

.v2-checklist {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.v2-checklist li {
  position: relative;
  padding-left: 34px;
  font-size: 17.5px;
  line-height: 1.5;
}

.v2-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--accent-ink);
}

.v2-evidence .footnote {
  margin-top: 26px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

/* Neither the Figma nor the live site has a real footer — both stop at a logo,
   one sentence and a copyright. This is built from their own contact page so
   every address, email and link here is the client's real data. */
.v2-footer {
  background: var(--navy-foot);
  color: var(--on-navy-dim);
  padding: 80px 0 40px;
}

.v2-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

.v2-footer__logo img { height: 34px; width: auto; }

.v2-footer__desc {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.7;
}

.v2-footer__head {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7fc6de;
  margin: 0 0 18px;
}

.v2-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.v2-footer__col a {
  color: var(--on-navy);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s ease;
}

.v2-footer__col a:hover { color: #fdfefe; }

.v2-footer__col address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
}

.v2-footer__mail {
  display: inline-block;
  margin-top: 16px;
  border-bottom: 1px solid rgba(159, 179, 196, 0.45);
  padding-bottom: 2px;
}

.v2-footer__mail:hover { border-bottom-color: #fdfefe; }

.v2-footer__rule {
  margin: 56px 0 0;
  border: 0;
  border-top: 1px solid rgba(159, 179, 196, 0.22);
}

.v2-footer__legal {
  margin-top: 24px;
  font-size: 14px;
}

/* ---------- Reveal motion (motion-safe) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .v2-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .v2-reveal.in { opacity: 1; transform: none; }
}

/* ---------- Tablet / narrow desktop ---------- */

/* Below ~1200 the container narrows but the model doesn't, so the bleed starts
   eating his left arm and starves the copy. Scale both variables together. */
@media (max-width: 1200px) {
  .v2-hero .container { --fig-track: 430px; --fig-w: 545px; }
}

@media (max-width: 1024px) {
  .v2-hero .container { --fig-track: 360px; --fig-w: 450px; }
  /* Four steps across gets too narrow to read here — go 2x2. */
  .v2-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-pillars__grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .v2-nav__links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fdfefe;
    border-bottom: 1px solid var(--line);
    display: none;
    padding: 8px 0 16px;
  }
  .v2-nav__links.open { display: flex; }
  .v2-nav__links a { padding: 12px 28px; width: 100%; }
  .v2-nav__burger { display: block; }
  .v2-nav.menu-open .v2-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .v2-nav.menu-open .v2-nav__burger span:nth-child(2) { opacity: 0; }
  .v2-nav.menu-open .v2-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .v2-hero .container { grid-template-columns: 1fr; gap: 0; }
  /* Single column — the flush-right desktop treatment has nothing to sit against,
     so the hero reverts to centred here. */
  .v2-hero__copy {
    padding: 56px 0 8px;
    order: -1;
    justify-items: center;
    text-align: center;
  }
  /* Reset the desktop bleed: no fixed width, no negative pull, no bottom crop. */
  .v2-hero__figure {
    width: auto;
    max-width: 330px;
    margin: 12px auto 0;
  }
  .v2-hero__figure img { margin-bottom: 0; }
  .v2-hero__figure::after { inset: 0; }
  .v2-hero__ctas { margin-bottom: 12px; justify-content: center; }

  .v2-intro { padding: 64px 0; }
  .v2-intro .container { grid-template-columns: 1fr; gap: 40px; }

  .v2-section { padding: 68px 0; }

  .v2-panel__grid { grid-template-columns: 1fr; gap: 36px; }

  .v2-components { grid-template-columns: 1fr; }

  .v2-how__box { padding: 32px 26px; }
  .v2-how__list { grid-template-columns: 1fr; }

  .v2-evidence { padding: 30px 24px; }

  .v2-steps__grid { grid-template-columns: 1fr; gap: 18px; }
  .v2-pillars__grid { grid-template-columns: 1fr; }
  .v2-mv { padding: 60px 0; }
  .v2-mv__grid { grid-template-columns: 1fr; gap: 36px; }
  .v2-mv__body { font-size: 19px; max-width: none; }

  .v2-footer { padding: 56px 0 32px; }
  .v2-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .v2-footer__desc { max-width: none; }
  .v2-footer__rule { margin-top: 40px; }

  }