/* ==========================================================================
   Statista Healthcare PROMs Intelligence · Pre-launch landing page
   Desktop: Figma 3864:3313 (1440). Mobile: Figma 3912:18396 (375).
   Breakpoints: 1240 (data stage stacks), 1100 (tablet), 900, 768 (mobile layout), 480
   ========================================================================== */

/* Open Sans, self-hosted (variable font, latin + latin-ext), no request to Google */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/open-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("assets/fonts/open-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("assets/fonts/open-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --blue-50: #eef5fd;
  --blue-100: #e5f1ff;
  --blue-200: #96cafa;
  --blue-300: #66aff9;
  --blue-500: #0666e5;
  --blue-600: #0055aa;
  --blue-700: #093b7f;
  --blue-900: #001327;
  --green-100: #cff0d6;
  --green-300: #7ed892;
  --green-400: #57c773;
  --green-500: #2ab343;
  --green-600: #229e3a;
  --green-700: #188231;
  --green-800: #126028;
  --green-900: #0a3d1b;
  --yellow-400: #ffd600;
  --bluegray-50: #f5f8fb;
  --bluegray-100: #e8f0f4;
  --bluegray-200: #c7d6dd;
  --bluegray-500: #7b94a3;
  --bluegray-600: #455f7c;
  --gray-200: #e5e5e5;
  --gray-300: #c4c4c4;
  --gray-700: #474747;

  --surface: #fff;
  --surface-muted: var(--bluegray-50);
  --surface-strong: var(--blue-900);
  --on-surface: var(--bluegray-600);
  --on-surface-strong: #0f2741;
  --outline: var(--gray-300);
  --outline-muted: var(--gray-200);

  --font: "Open Sans", Arial, sans-serif;
  --container: 1184px;
  --gutter: 24px;
  --radius-xl: 16px;
  --radius-m: 4px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t: 0.55s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: #fff; color: var(--blue-700); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* ---------- Type ---------- */
.overline { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; color: var(--blue-700); }
.overline--ruled { display: flex; flex-direction: column; gap: 12px; }
.overline--ruled::after { content: ""; height: 1px; margin-bottom: -1px; background: var(--outline-muted); }
.overline--center { text-align: center; }
.h3 { font-size: 28px; line-height: 34px; font-weight: 300; color: var(--on-surface-strong); }
.copy { display: flex; flex-direction: column; gap: 12px; }
.copy--strong { color: var(--on-surface-strong); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--radius-pill);
  font: 600 14px/22px var(--font); white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background-color 0.3s, border-color 0.3s;
}
/* the button colour: Green/300 with Green/900 text, 9.6:1 */
.btn--light { background: var(--green-300); color: var(--green-900); }
.btn--light:hover { background: var(--green-400); }
.btn--light:focus-visible { outline-color: var(--green-300); }
.btn--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--green-300); }
.btn--outline:hover { background: rgba(126, 216, 146, 0.16); }
.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--surface-strong); border-bottom: 1px solid #fff; color: #fff; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 71px; }
.brand { display: flex; align-items: center; gap: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-header__end { display: flex; align-items: center; gap: 16px; }
/* Statista Healthcare | powered by ICHOM, 40 px before the buttons */
.partners { display: flex; align-items: flex-end; gap: 12px; margin-right: 24px; }
.partners__rule { align-self: center; width: 1px; height: 24px; background: rgba(255, 255, 255, 0.5); }
.powered { display: flex; align-items: flex-end; gap: 12px; font-size: 11px; line-height: 16px; white-space: nowrap; }
.powered img { width: 75px; height: auto; }
.hdr-statista { width: 74px; height: 27px; object-fit: contain; }
/* the ICHOM file carries a tagline below the logo; only the top 61 % of it is shown */
.ichom { display: block; overflow: hidden; flex: none; }
.ichom img { width: 100%; height: auto; max-width: none; }
.ichom--hdr { width: 75px; height: 19px; }
.ichom--trust { width: 48px; height: 12px; }
.logo-link { display: block; flex: none; border-radius: var(--radius-m); transition: opacity 0.2s; }
.logo-link:hover { opacity: 0.8; }
.logo-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* header CTA: hidden while the hero is in view, slides in once it is scrolled past.
   Without JS it simply stays visible. The negative margin cancels the flex gap while collapsed. */
.js .hdr-cta { max-width: 0; margin-right: -16px; padding-inline: 0; opacity: 0; visibility: hidden; overflow: hidden;
  transition: max-width 0.45s var(--ease), margin-right 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.3s, visibility 0s 0.45s; }
.js .hdr-cta.is-visible { max-width: 220px; margin-right: 0; padding-inline: 16px; opacity: 1; visibility: visible;
  transition: max-width 0.45s var(--ease), margin-right 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.3s 0.15s, visibility 0s; }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  display: flex; flex-direction: column; min-width: 220px; padding: 8px;
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 2px 6px rgba(0, 19, 39, 0.06), 0 24px 48px rgba(0, 19, 39, 0.16);
}
.menu__panel a { padding: 8px 12px; border-radius: var(--radius-pill); color: var(--on-surface-strong); font-size: 14px; line-height: 22px; font-weight: 600; text-decoration: none; }
.menu__panel a:hover { background: var(--surface-muted); }

/* ==========================================================================
   Hero (Figma 4003:3795)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(176.99deg, #001327 8.97%, #093b7f 21.09%, #093b7f 62.06%, #e5f1ff 104.68%);
  color: #fff;
}
.dots-crop { position: relative; flex: none; overflow: hidden; opacity: 0.28; }
.dots-crop img { position: absolute; max-width: none; height: auto; }

/* Watercolour, placed on the 1440 px Figma frame and centred. One sprite sheet (aquarell.jpg)
   and one cloud sheet (wash-cloud.jpg); each .aq shows a crop of it, like the Figma image fills. */
.aq { position: absolute; overflow: hidden; pointer-events: none; }
.aq img { position: absolute; max-width: none; }
.hero__deco, .why__deco { position: absolute; top: 0; bottom: 0; left: 50%; width: 1440px; margin-left: -720px; pointer-events: none; }
/* Full width, proportional: 1440 x 358 in Figma, so its height grows with the viewport */
.hero__duktus { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1440 / 358; overflow: hidden; background: #fff; mix-blend-mode: color-burn; opacity: 0.3; pointer-events: none; }
.hero__duktus img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; }
.hero__duktus::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.aq--h1, .aq--h2, .aq--h3 { mix-blend-mode: multiply; }
.aq--h1 { left: 1253px; bottom: 133px; width: 166px; height: 162px; opacity: 0.2; }
.aq--h2 { left: 757px; bottom: 0; width: 255px; height: 249px; opacity: 0.2; }
.aq--h3 { left: 0; bottom: 53px; width: 316px; height: 309px; opacity: 0.2; }
.aq--h1 img, .aq--h2 img, .aq--h3 img { left: -341.33%; top: -15%; width: 682.67%; height: 465.45%; }

/* Two rows on desktop: intro | sign-up card, a rule, countdown | trust notes */
.hero__inner { position: relative; padding-top: 68px; padding-bottom: 28px; }
.hero__grid {
  display: grid; grid-template-columns: 584px 484px; justify-content: space-between; align-items: start;
  grid-template-areas: "intro aside" "rule rule" "count trust";
}
.hero__intro { grid-area: intro; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 66px; padding-left: 2px; }
.hero__aside { grid-area: aside; width: 483px; margin-left: 1px; }
.hero__rule { grid-area: rule; height: 1px; margin: 76px 0 23px; border: 0; background: rgba(255, 255, 255, 0.25); }
.countdown { grid-area: count; }
.trust { grid-area: trust; }

.tag { padding: 1px 6px; border: 1px solid var(--bluegray-500); border-radius: var(--radius-m); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--bluegray-100); }
.hero h1 { font-size: 44px; line-height: 56px; font-weight: 300; }

.countdown__label { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; }
.countdown__tiles { display: grid; grid-template-columns: repeat(4, 134px); gap: 16px; margin-top: 16px; }
.tile {
  display: flex; flex-direction: column; align-items: center; padding: 8px 0;
  background: var(--blue-700); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-xl);
  text-align: center;
}
.tile__num { font-size: 28px; line-height: 35px; font-weight: 300; font-variant-numeric: tabular-nums; }
.tile__unit { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; }

.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trust__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; line-height: 22px; font-weight: 700; }
.trust__text { font-size: 11px; line-height: 16px; }

/* Teaser tab above the card: 24 px narrower on the left, the card overlaps its lower 24 px */
.teaser { height: 128px; margin: 0 29px 0 24px; padding: 12px 16px; background: var(--surface-strong); border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: #fff; }
.teaser__kicker { font-size: 11px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; color: var(--blue-50); }
.teaser__line { --lh: 28px; max-width: 398px; font-size: 20px; line-height: var(--lh); font-weight: 600; }
.teaser__line em { font-style: italic; color: var(--blue-200); }
/* light blue words rotate upwards: rely on. / compare against. / use to improve. */
.rotator { display: inline-block; height: var(--lh); overflow: hidden; vertical-align: top; }
.rotator__list { display: flex; flex-direction: column; animation: rotate-words 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.rotator__list em { display: block; height: var(--lh); white-space: nowrap; }
@keyframes rotate-words {
  0%, 27%  { transform: translateY(0); }
  33%, 60% { transform: translateY(calc(var(--lh) * -1)); }
  67%, 93% { transform: translateY(calc(var(--lh) * -2)); }
  100%     { transform: translateY(calc(var(--lh) * -3)); }
}

.signup { position: relative; margin-top: -24px; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--surface); border-radius: var(--radius-xl); color: var(--on-surface); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { padding: 1px 6px; border: 1px solid var(--green-800); border-radius: var(--radius-m); font-size: 11px; line-height: 16px; color: var(--green-800); }
.signup__intro { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 22px; }
.signup__title { font-size: 28px; line-height: 34px; font-weight: 300; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 69px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--outline-muted); border-radius: var(--radius-xl); font-size: 14px; line-height: 22px; color: var(--on-surface); }
.stat__num { font-size: 44px; line-height: 56px; font-weight: 300; }

/* ==========================================================================
   Content sections
   ========================================================================== */
.section { padding: 96px 0; }
.split { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 40px; }

.why { position: relative; overflow: hidden; }
.why .container { position: relative; }
.stats-note { position: absolute; left: 0; right: 0; top: 16px; padding-inline: var(--gutter); font-size: 14px; line-height: 22px; text-align: center; }
.aq--w1 { left: 165px; top: 479px; width: 244px; height: 246px; opacity: 0.23; }
.aq--w1 img { left: -356.02%; top: -15.6%; width: 711.11%; height: 469.72%; }
.aq--w2 { left: 16px; top: 440px; width: 280px; height: 243px; opacity: 0.12; mix-blend-mode: multiply; }
.aq--w2 img { left: -448.57%; top: 0; width: 548.57%; height: 421.4%; }
.split--why { justify-content: flex-start; gap: 117px; }
.why__lead { flex: 0 1 484px; display: flex; flex-direction: column; gap: 40px; }
.why__list { flex: 0 1 484px; display: flex; flex-direction: column; gap: 24px; padding-left: 24px; list-style: disc; }
.why__list b { display: block; font-weight: 700; }

/* Maturity chart (Figma 4232:9561): schematic, built in HTML so it scales down to mobile.
   Columns 117 / 125 / 155 / 49 of the 484 px card; bar widths are Figma px, set as --w. */
.mchart { position: relative; padding-bottom: 28px; background: #fff; border: 1px solid var(--outline-muted); border-radius: var(--radius-xl); overflow: hidden; }
.mchart__title { padding: 14px 16px 15px; border-bottom: 1px solid var(--outline-muted); font-size: 14px; line-height: 22px; text-align: center; }
.mchart__grid { display: grid; grid-template-columns: 117fr 125fr 155fr 49fr; row-gap: 7.4px; align-items: start; padding: 10px 15px 0 23px; }
.mchart__head { font-size: 11px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; text-align: center; white-space: nowrap; }
.mchart__head:first-child { text-align: left; }
.mchart__param { width: calc(var(--w) / 117 * 100%); height: 8px; border-radius: 11px; background: var(--gray-200); }
.mchart__bar {
  position: relative; isolation: isolate; justify-self: center; overflow: hidden;
  height: 16px; border-radius: 4px; background: #fff;
  font-size: 11px; line-height: 16px; font-weight: 700; color: #fff; text-align: center;
}
.mchart__bar--peer { width: calc(var(--w) / 125 * 100%); --c: var(--blue-300); }
.mchart__bar--top { width: calc(var(--w) / 155 * 100%); --c: var(--green-300); }
/* watercolour grain under the colour, as in Figma (cloud at ~23 %, colour multiplied on top) */
.mchart__bar::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/wash-cloud.jpg") 30% 80% / 520px auto; opacity: 0.23; }
.mchart__bar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); mix-blend-mode: multiply; }
.mchart__bar:nth-of-type(4n+2)::before { background-position: 60% 70%; }
.mchart__bar:nth-of-type(4n+3)::before { background-position: 10% 90%; }
.mchart__you { justify-self: center; width: 16px; height: 16px; position: relative; }
.mchart__you.is-yes { background: url("assets/icon-check-green.svg") center / 16px no-repeat; }
.mchart__you:not(.is-yes)::after { content: ""; position: absolute; left: 4.5px; top: 7.5px; width: 7px; height: 1px; background: #000; }

.how { background: var(--surface-muted); }
.how .split { margin-top: 32px; gap: 16px; }
.how__copy { flex: 0 0 384px; display: flex; flex-direction: column; gap: 40px; }
.how__body { display: flex; flex-direction: column; gap: 24px; }
.how__list { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; list-style: disc; font-weight: 700; color: var(--on-surface-strong); }
.how__img { flex: 0 1 780px; min-width: 0; width: 780px; }

/* ---------- Animated role graphic (Figma hc_how-it-works_grafik) ----------
   A 780 × 468 stage; --u is one Figma pixel at the current width (container query unit),
   so the layered graphic scales exactly like the old image. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.howfx { container-type: inline-size; position: relative; aspect-ratio: 780 / 468; overflow: hidden; background: var(--surface-muted); }
.howfx__stage { --u: calc(100cqw / 780); position: absolute; left: 0; top: 0; width: calc(780 * var(--u)); height: calc(468 * var(--u)); color: var(--on-surface); }
.hx { position: absolute; display: block; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin: 0; }
p.hx { width: auto; height: auto; white-space: nowrap; }
.crop { overflow: hidden; }
.crop img { position: absolute; max-width: none; }
.howfx img { display: block; }

.fx-photo { overflow: hidden; background: #fff; mix-blend-mode: multiply; opacity: var(--o); }
.fx-white { background: #fff; }
.fx-spot { mix-blend-mode: multiply; opacity: 0.64; }
.fx-ring { mix-blend-mode: multiply; }
.fx-ring img { width: 100%; height: 100%; transform: scaleY(-1); }
/* the ring draws itself: a conic mask sweeps once around */
.fx-ring { -webkit-mask-image: conic-gradient(from 200deg, #000 var(--sweep), transparent 0); mask-image: conic-gradient(from 200deg, #000 var(--sweep), transparent 0); }
.fx-line, .fx-drift, .fx-blob { mix-blend-mode: multiply; }
.fx-blob { opacity: 0.28; transform: rotate(105deg); }
.fx-faintmap { mix-blend-mode: multiply; opacity: 0.38; }
.fx-map img, .fx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-map svg { overflow: visible; }
.fx-bubble { fill: #7d66dd; opacity: 0.56; transform-box: fill-box; transform-origin: center; }
.fx-pin { fill: #7d66dd; }
.fx-ping { fill: none; stroke: #7d66dd; stroke-width: 0.8; transform-box: fill-box; transform-origin: center; opacity: 0; }

.fx-card { background: rgba(255, 255, 255, 0.9); border: calc(1 * var(--u)) solid var(--outline-muted); border-radius: calc(16 * var(--u)); overflow: hidden; transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.fx-card--country { border-radius: calc(8 * var(--u)); }
.fx-t { font-size: calc(8 * var(--u)); line-height: calc(16 * var(--u)); }
.fx-t--title, .fx-t--country { font-size: calc(11 * var(--u)); font-style: italic; }
.fx-t--val { font-weight: 700; color: var(--bluegray-500); translate: -100% 0; font-variant-numeric: tabular-nums; }
.fx-row b { display: inline-block; min-width: calc(14 * var(--u)); margin-right: calc(4 * var(--u)); text-align: right; color: var(--bluegray-600); font-variant-numeric: tabular-nums; }
.fx-t--head { font-weight: 700; }
.fx-t--small { white-space: normal !important; width: calc(var(--w) * var(--u)) !important; }
.fx-instr { background: #f2f2f2; }
.fx-track { background: #f2f2f2; border-radius: calc(11 * var(--u)); }
.fx-track--plot { border-radius: calc(8 * var(--u)); }
.fx-bar { background: var(--blue-500); opacity: 0.5; border-radius: calc(11 * var(--u)); transform-origin: left center; }
.fx-mark { background: var(--green-500); opacity: 0.6; border-radius: calc(11 * var(--u)); }
.fx-dot { border-radius: 50%; background: rgba(6, 102, 229, 0.25); }
.fx-label { font-size: calc(11 * var(--u)); line-height: calc(22 * var(--u)); }
.fx-pct { font-size: calc(16 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 700; opacity: 0.8; translate: -100% 0; font-variant-numeric: tabular-nums; }

/* idle life: watercolour drifts, case-mix dots float, the Brazil pin pings */
.fx-drift { animation: fx-drift 9s ease-in-out var(--f, 0s) infinite alternate; }
.fx-dot { animation: fx-float 3.2s ease-in-out var(--f, 0s) infinite alternate; }
.fx-ping { animation: fx-ping 2.6s ease-out 2.4s infinite; }
@keyframes fx-drift { from { translate: 0 0; scale: 1; } to { translate: calc(3 * var(--u)) calc(-4 * var(--u)); scale: 1.06; } }
@keyframes fx-float { from { translate: 0 calc(-1.2 * var(--u)); } to { translate: 0 calc(1.2 * var(--u)); } }
@keyframes fx-ping { 0% { scale: 1; opacity: 0.7; } 80%, 100% { scale: 3.2; opacity: 0; } }
.howfx:hover .fx-card { translate: 0 calc(-3 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 19, 39, 0.1); }

/* entrance, only with JS: everything waits until the graphic scrolls into view (.is-in) */
.js .howfx .fx-photo { opacity: 0; translate: 0 calc(18 * var(--u)); transition: opacity 1s var(--ease) var(--d), translate 1.1s var(--ease) var(--d); }
.js .howfx.is-in .fx-photo { opacity: var(--o); translate: 0 0; }
.js .howfx .fx-line { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease) var(--d); }
.js .howfx.is-in .fx-line { clip-path: inset(0); }
.js .howfx .fx-label { opacity: 0; translate: calc(-6 * var(--u)) 0; transition: opacity 0.6s var(--ease) var(--d), translate 0.6s var(--ease) var(--d); }
.js .howfx.is-in .fx-label { opacity: 1; translate: 0 0; }
.js .howfx .fx-ring { --sweep: 0deg; transition: --sweep 1.4s cubic-bezier(0.45, 0, 0.2, 1) var(--d); }
.js .howfx.is-in .fx-ring { --sweep: 360deg; }
.js .howfx .fx-card { opacity: 0; transform: translateY(calc(14 * var(--u))); transition: opacity 0.7s var(--ease) var(--d), transform 0.8s var(--ease) var(--d), translate 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.js .howfx.is-in .fx-card { opacity: 1; transform: none; }
.js .howfx .fx-bar { transform: scaleX(0); transition: transform 1.1s var(--ease) var(--d); }
.js .howfx.is-in .fx-bar { transform: none; }
.js .howfx .fx-mark { transform: translateX(calc(var(--m) * var(--u))); opacity: 0; transition: transform 1.1s var(--ease) var(--d), opacity 0.3s var(--d); }
.js .howfx.is-in .fx-mark { transform: none; opacity: 0.6; }
.js .howfx .fx-dot { scale: 0; transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d); }
.js .howfx.is-in .fx-dot { scale: 1; }
.js .howfx .fx-map { opacity: 0; transition: opacity 0.9s var(--ease) var(--d); }
.js .howfx.is-in .fx-map { opacity: 1; }
.js .howfx .fx-bubble { scale: 0; transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d); }
.js .howfx.is-in .fx-bubble { scale: 1; }

/* ---------- The data (Figma 4123:4909) ---------- */
.data { padding: 96px 0 40px; }
.stage { position: relative; height: 690px; margin-top: 40px; }
.data__head { position: absolute; left: 50%; top: 0; width: 584px; margin-left: -292px; display: grid; gap: 16px; text-align: center; }
.band { position: absolute; top: 303px; height: 316px; left: 50%; width: 100vw; margin-left: -50vw; }
/* Watercolour wash behind "The data" and the closing banner: the cloud at 20 %, a torn white
   edge along the top, the whole thing tinted Bluegray/50 (multiply), as in Figma */
.wash { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.wash__cloud { position: absolute; left: 50%; top: -467.58px; width: max(1449.44px, 100.7%); height: 966.29px; max-width: none; transform: translateX(-50%); object-fit: cover; opacity: 0.2; }
.wash__edge { position: absolute; left: -1px; top: -464.75px; width: calc(100% + 2px); height: 525.14px; max-width: none; }
.wash__tint { position: absolute; left: 0; right: 0; top: -13.29%; bottom: -30.06%; background: var(--surface-muted); mix-blend-mode: multiply; }
.charts { position: absolute; right: 0; top: 279px; width: 784px; display: grid; grid-template-columns: repeat(2, 384px); gap: 15px 16px; }
.chart { height: 192px; border: 1px solid var(--outline-muted); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.chart h3 { height: 47px; padding: 12px 16px 0; border-bottom: 1px solid var(--outline-muted); font-size: 14px; line-height: 22px; font-weight: 400; color: var(--on-surface); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart--emr h3 { text-align: left; padding-left: 87px; }
.chart svg { display: block; width: 100%; height: auto; }
.m-muted { fill: var(--gray-300); }
.m-track { fill: var(--surface-muted); }
.m-blue { fill: var(--blue-500); }
.m-green { fill: var(--green-500); }
.m-label { fill: var(--gray-200); }
.m-blue-light { fill: var(--blue-300); }
.m-green-light { fill: #57c773; } /* HC Green/400 */
.donut__tex { mix-blend-mode: multiply; opacity: 0.35; }
.bar { transform-box: fill-box; transform-origin: left center; transition: transform var(--t) var(--ease); }
.slide { transition: transform var(--t) var(--ease); }
.seg { fill: none; transition: stroke-dasharray var(--t) var(--ease), stroke-dashoffset var(--t) var(--ease); }

.dd { position: absolute; z-index: 2; width: 240px; padding: 16px; background: #fff; border-radius: 20px; box-shadow: 0 2px 6px rgba(0, 19, 39, 0.06), 0 24px 48px rgba(0, 19, 39, 0.16); }
.dd--country { left: 0; top: 123px; }
.dd--specialty { left: 200px; top: 230px; z-index: 3; }
.dd__label { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; color: var(--on-surface); }
.dd__field { margin-top: 8px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 2px solid var(--blue-500); border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700); font-size: 14px; line-height: 22px; font-weight: 600; }
.dd__field .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-500); flex: none; }
.dd__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd__field svg { width: 16px; height: 16px; flex: none; }
.dd__list { margin-top: 10px; outline: none; border-radius: 12px; }
.dd__list:focus-visible { box-shadow: 0 0 0 2px var(--blue-600); }
.opt { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 14px; line-height: 22px; color: var(--on-surface-strong); white-space: nowrap; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.opt__radio { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bluegray-200); transition: box-shadow 0.25s; }
.opt.is-preview { background: var(--surface-muted); }
.opt.is-selected { color: var(--blue-700); font-weight: 600; }
.opt.is-selected .opt__radio { box-shadow: inset 0 0 0 4px var(--blue-500); background: #fff; }
.opt.is-selected.is-preview { background: var(--blue-50); }
.footnote { position: absolute; left: -1px; top: 644px; width: 397px; font-size: 11px; line-height: 16px; }
.rule { margin: 80px 0 0; height: 1px; border: 0; background: var(--outline-muted); }

/* ---------- What the survey asks ---------- */
.survey { padding: 40px 0 96px; }
.survey__title { text-align: center; }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; }
.card { display: flex; flex-direction: column; gap: 12px; min-height: 418px; padding: 24px; border: 1px solid var(--outline-muted); border-radius: var(--radius-xl); font-size: 14px; line-height: 22px; }
.card__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-size: 16px; line-height: 24px; font-weight: 700; }
.card h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--on-surface); }
.js .cards--reveal .card { opacity: 0; transform: translateY(48px); }
.js .cards--reveal.is-in .card { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
/* left to right: card 01 starts, card 05 comes last */
.js .cards--reveal.is-in .card:nth-child(1) { transition-delay: 0s; }
.js .cards--reveal.is-in .card:nth-child(2) { transition-delay: 0.1s; }
.js .cards--reveal.is-in .card:nth-child(3) { transition-delay: 0.2s; }
.js .cards--reveal.is-in .card:nth-child(4) { transition-delay: 0.3s; }
.js .cards--reveal.is-in .card:nth-child(5) { transition-delay: 0.4s; }
.card__foot { margin-top: auto; padding-top: 12px; border-top: 2px solid var(--green-100); font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; line-height: 20px; }

/* ---------- The pre-launch (Figma 4016:6443) ---------- */
.conf { position: relative; overflow: hidden; min-height: 604px; padding: 96px 0; background: var(--surface-strong); color: #fff; }
.conf__dots { position: absolute; left: 0; top: 320px; width: 733px; height: 423px; display: flex; mix-blend-mode: lighten; pointer-events: none; }
.conf__dots .dots-crop { width: 100%; height: 100%; opacity: 0.25; transform: rotate(180deg); }
.conf__dots img { width: 116.82%; height: 101.26%; left: -3.68%; top: -4.78%; }
.conf .container { position: relative; }
.conf .overline { color: var(--blue-50); }
.conf .overline--ruled::after { background: var(--gray-700); }
.conf__row { display: flex; align-items: center; gap: 116px; margin-top: 16px; }
.conf__copy { flex: 0 1 484px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.conf__copy .h3 { color: #fff; margin-bottom: 16px; }
.facts { flex: 0 1 584px; display: flex; flex-direction: column; gap: 16px; }
.fact { display: flex; flex-direction: column; gap: 12px; }
.fact:not(:last-child) { padding-bottom: 12px; border-bottom: 1px solid var(--gray-700); }
.fact dt { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; color: var(--blue-50); }
.fact dd { font-size: 20px; line-height: 28px; font-weight: 300; }

/* ---------- FAQ ---------- */
.faq { padding: 96px 0 80px; background: var(--surface-muted); }
.faq__overline { text-align: center; color: var(--blue-600); }
.faq__head { max-width: 786px; margin: 0 auto; }
.faq__title { margin-top: 40px; text-align: center; }
.faq__list { max-width: 786px; margin: 40px auto 0; background: #fff; border: 1px solid var(--outline-muted); border-radius: var(--radius-xl); overflow: hidden; }
.faq__item + .faq__item { border-top: 1px solid var(--outline-muted); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--on-surface); }
.faq__item summary::after { content: ""; flex: none; width: 24px; height: 24px; background: url("assets/icon-caret-down-24.svg") center / 24px no-repeat; transition: transform 0.3s; }
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item[open] summary { border-bottom: 1px solid var(--outline-muted); }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__answer { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.faq__answer ul { list-style: disc; padding-left: 24px; }
.faq__answer strong { font-weight: 700; }
.faq__answer a { overflow-wrap: anywhere; }

/* ---------- Closing banner (Figma 4243:15885) ---------- */
.closing { position: relative; padding: 54px 0; }
.closing__wash { position: absolute; inset: 0; }
.closing .container { position: relative; }
.banner { position: relative; overflow: hidden; min-height: 208px; padding: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xl); background: var(--surface-strong); color: #fff; text-align: center; }
.banner__dots { position: absolute; top: 17px; width: 350px; height: 169px; display: flex; mix-blend-mode: lighten; pointer-events: none; }
.banner__dots--left { left: 0; }
.banner__dots--right { right: 0; }
.banner__dots .dots-crop { width: 100%; height: 100%; }
/* left field is rotated 180°, the right group is the whole left group rotated again, so its dots sit upright */
.banner__dots--left .dots-crop { transform: rotate(180deg); }
.banner__dots img { width: 177.81%; height: 184.85%; left: -68.34%; top: -45.3%; }
.banner__fade { position: absolute; top: 18px; width: 214px; height: 173px; background: linear-gradient(to right, rgba(0, 19, 39, 0), #001327 63.94%, #001327); pointer-events: none; }
.banner__fade--left { left: 136px; }
.banner__fade--right { right: 136px; transform: scaleX(-1); }
.banner__content { position: relative; max-width: 485px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.banner h2 { font-size: 28px; line-height: 34px; font-weight: 300; }
.banner h2 b { font-weight: 700; }
.banner p { margin-top: 4px; }

/* ---------- Footer (Figma 4391:8772) ---------- */
.site-footer { background: var(--surface-strong); color: var(--bluegray-100); }
.site-footer__links { background: var(--blue-700); }
.site-footer__links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; padding-block: 28px; font-size: 14px; line-height: 24px; font-weight: 600; }
.site-footer .site-footer__links a { color: #fff; text-decoration: none; }
.site-footer .site-footer__links a:hover { text-decoration: underline; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: calc(708px + 2 * var(--gutter)); padding-block: 24px; font-size: 11px; line-height: 16px; text-align: center; }
.site-footer__line { white-space: pre-wrap; }
.site-footer__line img { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --t: 0.01s; }
  .js .cards--reveal .card { opacity: 1; transform: none; }
  .js .hdr-cta, .js .hdr-cta.is-visible { transition: none; }
  .rotator__list { animation: none; }
  .fx-drift, .fx-dot, .fx-ping { animation: none; }
  .js .howfx * { transition: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* the data stage overlaps by design; below 1240 px it stacks */
@media (max-width: 1240px) {
  .stage { height: auto; display: flex; flex-direction: column; }
  .data__head, .band, .charts, .dd, .footnote { position: relative; left: auto; top: auto; right: auto; margin: 0; width: auto; }
  .band { display: none; }
  .data__head { max-width: 584px; margin-inline: auto; }
  .dds { order: 1; margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .charts { order: 2; margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footnote { order: 3; margin-top: 12px; }
  .chart { height: auto; }
  .chart--emr h3 { text-align: center; padding-left: 16px; }
}

@media (max-width: 1100px) {
  .partners { display: none; }
  .hero__inner { padding-top: 56px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "count" "rule" "trust" "aside"; }
  .hero__intro { max-width: 640px; margin-top: 0; padding-left: 0; }
  .hero__aside { max-width: 483px; width: auto; margin: 48px 0 0; }
  .countdown { margin-top: 56px; max-width: 584px; }
  .countdown__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__rule { margin: 24px 0; }
  .trust { max-width: 584px; }
  .stats { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
  .split--why { gap: 48px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { min-height: 0; }
  .split, .conf__row { gap: 48px; }
}

@media (max-width: 900px) {
  .split, .conf__row { flex-direction: column; align-items: stretch; }
  .why__lead, .why__list, .how__copy, .how__img, .conf__copy, .facts { flex: none; width: 100%; }
  .conf { min-height: 0; padding-bottom: 240px; }
  .conf__dots { top: auto; bottom: -180px; }
}

/* ---------- Mobile layout (Figma 3912:18396, 375 px) ---------- */
@media (max-width: 768px) {
  :root { --gutter: 16px; }
  .section, .data { padding-top: 80px; }
  .section { padding-bottom: 80px; }

  /* header: logo, name on two lines, round menu button */
  .site-header__inner { gap: 16px; }
  .brand { white-space: normal; max-width: 220px; line-height: 24px; }
  .hdr-cta { display: none; }
  .menu summary { width: 40px; padding: 0; }
  .menu__label { display: none; }

  .hero__inner { padding-top: 40px; padding-bottom: 0; }
  .hero h1 { font-size: 36px; line-height: 44px; }
  .countdown { margin-top: 72px; }
  .countdown__label { max-width: 330px; }
  .countdown__tiles { gap: 16px; }
  .u-long { display: none; }
  .hero__rule { margin: 16px 0; }
  .hero__aside { max-width: none; margin-top: 72px; }
  .teaser { height: auto; margin: 0; padding-bottom: 40px; }
  .teaser__line { --lh: 24px; font-size: 16px; }
  .signup__title { font-size: 20px; line-height: 28px; }

  /* stats become one card with rows: number left, text right */
  .stats { grid-template-columns: 1fr; gap: 0; margin-top: 16px; background: #fff; border-radius: var(--radius-xl); overflow: hidden; }
  .stat { flex-direction: row; align-items: center; gap: 16px; border: 0; border-radius: 0; }
  .stat + .stat { border-top: 1px solid var(--outline-muted); }
  .stat__num { flex: 0 0 75px; font-size: 28px; line-height: 34px; }
  .hero { padding-bottom: 16px; }
  .stats-note { position: static; margin-bottom: 64px; padding: 0 var(--gutter); }
  .why { padding-top: 16px; }

  .split--why { gap: 40px; }
  .why__lead { gap: 24px; }
  .mchart__grid { padding: 10px 12px 0 12px; grid-template-columns: 76fr 82fr 104fr 30fr; }
  .mchart__param { width: calc(var(--w) / 117 * 70%); }
  .mchart__head { font-size: 10px; letter-spacing: 0; }

  .how .split { gap: 24px; }
  .how__copy { padding-bottom: 16px; }
  .how__img { max-width: 343px; margin-inline: auto; }
  /* mobile shows role 1 only, as in Figma 4247:18666: a 252 × 415 window on the stage */
  .howfx { aspect-ratio: 252 / 415; }
  .howfx__stage { --u: calc(100cqw / 252); left: calc(-30 * var(--u)); top: calc(-30 * var(--u)); }

  /* The data: dropdowns overlap, the donut sits behind them, as in Figma 4205:9533 */
  .stage {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "play" "foot";
  }
  .data__head { grid-area: head; }
  .charts, .dds, .band { grid-area: play; order: 0; }
  .charts { display: block; margin: 66px 0 0; width: 512px; max-width: none; pointer-events: none; }
  .chart { display: none; border: 0; background: none; }
  .chart--emr { display: block; }
  .chart--emr h3, .chart--emr .m-label { display: none; }
  .band { display: block; margin: 280px 0 0 calc(50% - 50vw); width: 100vw; height: 315px; }
  .dds { position: relative; display: block; margin-top: 122px; z-index: 1; }
  .dd { width: 240px; }
  .dd--specialty { position: absolute; left: auto; right: 0; top: 116px; width: 204px; }
  .footnote { grid-area: foot; order: 0; margin-top: 48px; }

  .survey { padding-bottom: 80px; }
  .cards { grid-template-columns: 1fr; }

  .conf { padding: 80px 0; }
  .conf__dots { display: none; }
  .conf__row { gap: 72px; }
  .fact:last-child { padding-bottom: 12px; border-bottom: 1px solid var(--gray-700); }

  .faq { padding: 80px 0 64px; }
  .faq__list { margin-top: 40px; }

  .closing { padding: 16px 0 36px; }
  .banner { min-height: 429px; padding: 64px 24px; }
  .banner h2 b { display: block; }
  .banner__dots--left { top: auto; bottom: 0; left: -150px; }
  .banner__fade--left { top: auto; bottom: -4px; left: -14px; }
  .banner__dots--right { top: 0; right: -150px; }
  .banner__fade--right { top: 0; right: -14px; }

  .site-footer__links ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-block: 40px; }
  .site-footer__inner { gap: 8px; padding-block: 24px 32px; }
}

@media (max-width: 480px) {
  .tile__num { font-size: 28px; line-height: 35px; }
  .trust { gap: 24px; }
}

@media (max-width: 374px) {
  .countdown__tiles { gap: 8px; }
  .dd--specialty { width: 190px; }
}