@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap");

:root {
  color-scheme: light;
  /* Inter for reading and UI; Montserrat retained for headings and brand voice. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Montserrat, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --primary-blue: #013D7C;
  --secondary-blue: #31699A;
  --accent-blue: #5B84C4;
  --highlight-yellow: #F5C32C;
  --dark-neutral: #4A5973;
  --light-neutral: #E5E9F0;
  --ink: #013D7C;
  --paper: #ffffff;
  --soft-paper: color-mix(in srgb, var(--light-neutral) 38%, #ffffff);
  --line: rgba(74, 89, 115, 0.18);
  --shadow: 0 22px 58px rgba(1, 61, 124, 0.12);
  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-space: clamp(3.75rem, 7vw, 6.25rem);
  --content-max: 1180px;
  /* --- Type scale -------------------------------------------------------
     Seven steps, all derived. Do not introduce one-off font sizes; if a
     size is missing from this list, the design is what needs changing.  */
  --type-eyebrow: 0.6875rem;    /* 11px  uppercase labels        */
  --type-meta: 0.75rem;         /* 12px  timestamps, read times  */
  --type-disclaimer: 0.75rem;   /* 12px  regulatory footnotes    */
  --type-nav: 0.8125rem;        /* 13px  navigation              */
  --type-button: 0.8125rem;     /* 13px  buttons                 */
  --type-body-small: 0.875rem;  /* 14px  secondary copy          */
  --type-body: 1rem;            /* 16px  body copy               */
  --type-lead: 1.0625rem;       /* 17px  intro / lead paragraphs */
  --type-h3: 1.0625rem;         /* 17px  card + item headings    */
  --type-h2: clamp(1.75rem, 2.6vw, 2.25rem);   /* 28 -> 36px     */
  --type-h1: clamp(2.25rem, 4.2vw, 3.25rem);   /* 36 -> 52px     */
  --type-feature-callout: clamp(1.75rem, 2.6vw, 2.25rem);

  --header-anchor-offset: 88px;

  /* --- Leading ---------------------------------------------------------- */
  --leading-body: 1.6;
  --leading-small: 1.5;
  --leading-label: 1.3;
  --leading-meta: 1.35;
  --leading-disclaimer: 1.45;
  --leading-heading: 1.08;      /* display sizes only */
  --leading-title: 1.2;

  /* --- Weight ----------------------------------------------------------
     Body sits at 400. Nothing on this site needs 800.                    */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-label: 600;
  --weight-heading: 700;

  /* --- Optical tracking -------------------------------------------------
     Large type tightens, uppercase micro-type opens up.                  */
  --track-display: -0.022em;
  --track-heading: -0.018em;
  --track-title: -0.01em;
  --track-body: 0;
  --track-label: 0.11em;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-anchor-offset);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  overflow-x: hidden;
  font-weight: var(--weight-body);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

code {
  background: rgba(245, 195, 44, 0.15);
  border: 1px solid rgba(245, 195, 44, 0.35);
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.92em;
  padding: 0.08rem 0.3rem;
}

.site-header {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid rgba(74, 89, 115, 0.14);
  box-shadow: 0 12px 32px rgba(1, 61, 124, 0.06);
  display: flex;
  justify-content: space-between;
  min-height: 88px;
  padding: 0 var(--page-gutter);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
}

.brand {
  align-items: center;
  display: inline-flex;
  max-width: min(350px, 56vw);
}

.brand img {
  height: auto;
  max-height: 64px;
  object-fit: contain;
  width: 100%;
}

.site-nav {
  align-items: center;
  display: flex;
  gap: clamp(0.7rem, 1.7vw, 1.35rem);
  color: var(--dark-neutral);
  font-size: var(--type-nav);
  font-weight: 600;
  line-height: 1;
}

.site-nav a {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 0.44rem 0.14rem;
  position: relative;
  transition: color 180ms ease;
  white-space: nowrap;
  z-index: 0;
}

.site-nav a[href="index.html"] {
  min-width: 3.1rem;
}

.site-nav a[href="team.html"] {
  min-width: 2.6rem;
}

.site-nav a[href="news.html"] {
  min-width: 6.5rem;
}

.site-nav a::after {
  background: var(--highlight-yellow);
  border-radius: 999px;
  bottom: 0.08rem;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
  width: 24px;
}

.site-nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.site-nav a:hover {
  color: var(--primary-blue);
}

.site-nav a[aria-current="page"] {
  color: var(--primary-blue);
}

.site-nav a[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}

.site-nav .nav-cta {
  background: var(--highlight-yellow);
  border-radius: 5px;
  color: var(--ink);
  font-size: var(--type-button);
  font-weight: var(--weight-label);
  justify-content: center;
  margin-left: 0;
  min-height: 46px;
  min-width: 8.25rem;
  padding: 10px 20px;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.site-nav .nav-cta::after {
  display: none;
}

.site-nav .nav-cta:hover {
  background: color-mix(in srgb, var(--highlight-yellow) 88%, #ffffff);
  box-shadow: 0 9px 22px rgba(1, 61, 124, 0.1);
  transform: translateY(-1px);
}

.nav-toggle {
  align-items: center;
  appearance: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.nav-toggle span {
  background: var(--primary-blue);
  border-radius: 999px;
  display: block;
  height: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
  width: 20px;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.hero {
  align-items: center;
  background: var(--primary-blue);
  display: flex;
  justify-content: flex-start;
  isolation: isolate;
  min-height: calc(75vh - 66px);
  min-height: calc(75svh - 66px);
  overflow: hidden;
  padding: clamp(72px, 8vh, 100px) var(--page-gutter) clamp(56px, 6vh, 80px);
  position: relative;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(1, 61, 124, 0.96) 0%, rgba(1, 61, 124, 0.88) 42%, rgba(1, 61, 124, 0.58) 72%, rgba(1, 61, 124, 0.34) 100%),
    linear-gradient(180deg, rgba(1, 61, 124, 0.08), rgba(1, 61, 124, 0.28));
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.hero__video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: 50% 58%;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.hero__copy {
  display: grid;
  gap: 20px;
  max-width: 560px;
  position: relative;
  width: min(100%, 560px);
  z-index: 2;
}

.eyebrow {
  color: var(--secondary-blue);
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-style: normal;
  font-weight: var(--weight-label);
  letter-spacing: 0;
  line-height: var(--leading-label);
  margin: 0 0 0.95rem;
  text-transform: uppercase;
}

.eyebrow::after {
  background: var(--highlight-yellow);
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.7rem;
  width: 58px;
}

.eyebrow--gold {
  color: var(--highlight-yellow);
}

.hero .eyebrow {
  color: var(--highlight-yellow);
}

.hero__eyebrow {
  display: inline-block;
  font-size: clamp(1.08rem, 1.35vw, 1.32rem);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0;
}

.hero__eyebrow::after {
  height: 3px;
  margin-top: 0.82rem;
  width: 72px;
}

.hero h1,
.page-hero h1,
.article-hero h1,
.section h2 {
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  overflow-wrap: break-word;
}

.section h2 {
  color: var(--primary-blue);
}

.hero h1 {
  color: #ffffff;
}

.hero h1 {
  font-size: 48px;
  max-width: 620px;
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.hero__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: var(--weight-body);
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0;
}

.disclaimer {
  color: color-mix(in srgb, var(--dark-neutral) 82%, #ffffff);
  font-size: var(--type-disclaimer);
  font-weight: 600;
  line-height: var(--leading-disclaimer);
  margin: 0;
}

.hero__disclaimer {
  color: rgba(255, 255, 255, 0.66);
  margin-top: 0;
}

.button,
.site-footer__button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-style: normal;
  font-weight: var(--weight-label);
  justify-content: center;
  min-height: 46px;
  padding: 0 1.08rem;
  line-height: 1;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.button--primary,
.site-footer__button {
  background: var(--highlight-yellow);
  color: var(--ink);
}

.button--primary:hover,
.site-footer__button:hover {
  background: color-mix(in srgb, var(--highlight-yellow) 88%, #ffffff);
  box-shadow: 0 12px 24px rgba(1, 61, 124, 0.13);
  transform: translateY(-1px);
}

.button--secondary {
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
}

.button--secondary:hover {
  background: rgba(1, 61, 124, 0.06);
  border-color: var(--secondary-blue);
  transform: translateY(-1px);
}

.button--light {
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
}

.hero .button--secondary {
  border-color: rgba(255, 255, 255, 0.82);
  color: #ffffff;
}

.hero .button--secondary:hover,
.section--blue .button--light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
}

.section {
  padding: var(--section-space) var(--page-gutter);
}

.section__inner {
  margin: 0 auto;
  max-width: 1180px;
  width: min(100%, 1180px);
}

.section h2 {
  font-size: var(--type-h2);
  line-height: var(--leading-heading);
  max-width: 760px;
}

.section p:not(.eyebrow) {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
}

.page-hero {
  background: var(--primary-blue);
  color: #ffffff;
  border-bottom: 1px solid rgba(229, 233, 240, 0.16);
  padding: clamp(2.85rem, 5.2vw, 4.15rem) var(--page-gutter) clamp(2.55rem, 4.6vw, 3.65rem);
}

.page-hero__inner {
  display: grid;
  gap: 1rem;
}

.page-hero .eyebrow {
  color: var(--highlight-yellow);
}

.page-hero h1 {
  color: #ffffff;
  font-size: clamp(2.15rem, 4.35vw, 3rem);
  line-height: var(--leading-heading);
  max-width: 900px;
}

.page-hero p:last-child {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
  max-width: 720px;
}

.team-hero {
  padding: clamp(2.85rem, 5.2vw, 4.15rem) var(--page-gutter) clamp(2.55rem, 4.6vw, 3.65rem);
}

.team-hero .page-hero__inner {
  gap: 1rem;
}

.team-hero h1 {
  font-size: clamp(2.15rem, 4.35vw, 3rem);
  max-width: 900px;
}

.team-hero p:last-child {
  max-width: 680px;
}

.feature-strip {
  background: #F4F6FA;
  border-bottom: 1px solid #E2E8F0;
  border-top: 1px solid #E2E8F0;
  color: var(--ink);
  margin-top: 0;
  padding: 36px var(--page-gutter);
  position: static;
  z-index: auto;
}

.feature-strip__inner {
  align-items: center;
  display: block;
  margin: 0 auto;
  max-width: 1180px;
  min-width: 0;
  width: min(100%, 1180px);
}

.feature-strip__heading {
  display: grid;
  gap: 0.58rem;
  max-width: 270px;
  padding-bottom: 0;
}

.feature-strip__heading .eyebrow {
  color: var(--highlight-yellow);
  font-size: var(--type-eyebrow);
  line-height: var(--leading-label);
  margin: 0;
  max-width: none;
}

.feature-strip__heading .eyebrow::after {
  height: 2px;
  margin-top: 0.58rem;
  width: 58px;
}

.feature-strip__heading h2 {
  color: var(--primary-blue);
  font-size: clamp(1.42rem, 2vw, 1.72rem);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: 0.08rem 0 0;
  text-wrap: balance;
}

.feature-strip__subhead {
  color: var(--dark-neutral);
  font-size: 0.88rem;
  line-height: 1.42;
  margin: 0;
  max-width: 29ch;
}

.feature-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  overflow: visible;
  width: 100%;
}

.feature-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(6, 1fr);
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.feature-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 112px;
  justify-content: center;
  min-height: 0;
  padding: 0 12px;
  text-align: center;
}

.feature-item:first-child {
  border-left: 0;
}

.feature-item:last-child {
  border-right: 0;
}

.feature-item:hover {
  box-shadow: none;
  transform: none;
}

.feature-item__icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--primary-blue);
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  padding-right: 0;
  width: 32px;
}

.feature-item__icon svg {
  display: block;
  fill: none;
  height: 32px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 32px;
}

.feature-item h3 {
  color: #4A5568;
  display: grid;
  font-size: 13px;
  font-weight: var(--weight-heading);
  gap: 0.24rem;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
  max-width: none;
  min-width: 0;
  text-align: center;
  width: 100%;
}

.feature-item__label {
  display: block;
  font-size: clamp(11px, 0.86vw, 13px);
  line-height: 1.25;
  min-width: 0;
  white-space: nowrap;
}

.feature-item h3 small {
  color: #4A5568;
  display: block;
  font-size: clamp(11px, 0.86vw, 13px);
  font-weight: var(--weight-body);
  line-height: 1.25;
  margin: 0 auto;
  max-width: 22ch;
  min-width: 0;
  white-space: nowrap;
}

.text-link {
  color: var(--primary-blue);
  display: inline-flex;
  font-size: var(--type-button);
  font-weight: var(--weight-label);
  margin-top: 1.4rem;
  position: relative;
  transition: color 180ms ease;
}

.text-link::after {
  background: var(--highlight-yellow);
  bottom: -0.35rem;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transition: transform 180ms ease;
  width: 100%;
}

.text-link:hover {
  color: var(--accent-blue);
}

.text-link:hover::after {
  transform: translateY(-1px);
}

.ecosystem-section {
  background: var(--soft-paper);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 5.4vw, 4.25rem) var(--page-gutter);
}

.ecosystem-section__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.ecosystem-block {
  display: grid;
  gap: clamp(1.35rem, 2.6vw, 2rem);
}

.ecosystem-block--partners {
  border-top: 1px solid var(--line);
  padding-top: clamp(2.4rem, 4.8vw, 3.55rem);
}

.ecosystem-section__heading {
  display: grid;
  gap: 0.85rem;
  max-width: 760px;
}

.ecosystem-section__heading h2 {
  color: var(--primary-blue);
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  max-width: 720px;
}

.ecosystem-section__heading p:last-child {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
  max-width: 680px;
}

.logo-grid {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.logo-grid article {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.12);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: clamp(128px, 11vw, 148px);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.logo-grid article:hover {
  border-color: rgba(1, 61, 124, 0.22);
  box-shadow: 0 12px 28px rgba(1, 61, 124, 0.06);
}

.logo-grid img {
  filter: saturate(0.9) contrast(1.02);
  max-height: 68px;
  max-width: min(220px, 100%);
  object-fit: contain;
  width: 100%;
}

.logo-grid img[src*="aif"],
.logo-grid img[src*="boston-childrens-hospital"],
.logo-grid img[src*="goodwin"],
.logo-grid img[src*="launchpad-venture-group"],
.logo-grid img[src*="next-phase"] {
  max-height: 82px;
  max-width: min(154px, 78%);
}

.clinical-use {
  background:
    radial-gradient(circle at 78% 24%, rgba(91, 132, 196, 0.34), rgba(91, 132, 196, 0) 34%),
    linear-gradient(135deg, var(--primary-blue) 0%, #0a4f8d 100%);
  color: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr);
  min-height: 500px;
}

.clinical-use__media {
  min-height: 500px;
  overflow: hidden;
  position: relative;
}

.clinical-use__media::after {
  background: linear-gradient(90deg, rgba(1, 61, 124, 0) 0%, rgba(1, 61, 124, 0.28) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.clinical-use__media img {
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  width: 100%;
}

.clinical-use__copy {
  align-content: center;
  display: grid;
  justify-items: start;
  padding: clamp(3.15rem, 5.8vw, 4.85rem) var(--page-gutter);
}

.clinical-use__copy h2 {
  color: #ffffff;
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  max-width: 590px;
}

.clinical-use__copy p:last-child {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 1.2rem 0 0;
  max-width: 590px;
}

.explainer-section {
  background: #ffffff;
  border: 0;
  padding: clamp(3rem, 5vw, 4.5rem) var(--page-gutter);
}

.explainer-section__inner {
  align-items: center;
  display: grid;
  grid-template-areas: "copy media";
  grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  margin: 0 auto;
  max-width: 1180px;
  min-width: 0;
  width: min(100%, 1180px);
}

.explainer-section__copy {
  align-content: center;
  background: #ffffff;
  display: grid;
  grid-area: copy;
  justify-items: start;
  padding: 0;
  text-align: left;
}

.explainer-section__accent {
  background: var(--highlight-yellow);
  display: block;
  height: 2px;
  margin: 0 0 24px;
  width: 40px;
}

.explainer-section__copy h2 {
  color: var(--primary-blue);
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  max-width: 590px;
  text-align: left;
}

.explainer-section__copy p:last-child {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 1.2rem 0 0;
  max-width: 590px;
  text-align: left;
}

.explainer-video {
  align-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 250, 0.82)),
    #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.16);
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(1, 61, 124, 0.12);
  display: grid;
  gap: 10px;
  grid-area: media;
  grid-template-rows: auto auto;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: clamp(0.7rem, 1.3vw, 1rem);
  width: 100%;
}

.explainer-video video {
  aspect-ratio: 16 / 9;
  background: transparent;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.explainer-video .video-player-shell {
  aspect-ratio: 16 / 9;
  background: transparent;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  height: auto;
  overflow: hidden;
  width: 100%;
}

.explainer-video .video-disclaimer {
  background: transparent;
  color: #9CA3AF;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 0;
  padding: 0 0.1rem;
  text-align: left;
}

.video-player-shell {
  background: var(--primary-blue);
  display: grid;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.video-player-shell video {
  grid-area: 1 / 1;
}

.video-play-overlay {
  align-items: center;
  appearance: none;
  background:
    linear-gradient(180deg, rgba(1, 24, 48, 0.18), rgba(1, 24, 48, 0.48)),
    rgba(1, 24, 48, 0.26);
  border: 0;
  cursor: pointer;
  display: flex;
  grid-area: 1 / 1;
  inset: 0;
  justify-content: center;
  opacity: 1;
  padding: 0;
  position: absolute;
  transition: opacity 220ms ease, visibility 220ms ease;
  visibility: visible;
  z-index: 2;
}

.video-player-shell.is-playing .video-play-overlay {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.video-player-shell.is-loading .video-play-overlay {
  cursor: wait;
}

.video-player-shell.is-loading .video-play-overlay::after {
  color: #ffffff;
  content: "Loading video\2026";
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 7.5rem;
  position: absolute;
  text-transform: uppercase;
}

.video-player-shell.is-loading .video-play-overlay__icon {
  animation: video-loading-spin 900ms linear infinite;
  background: transparent;
  border: 4px solid rgba(255, 255, 255, 0.38);
  border-top-color: #ffffff;
  box-shadow: none;
}

.video-player-shell.is-loading .video-play-overlay__icon::before {
  display: none;
}

@keyframes video-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.video-play-overlay__icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  box-shadow:
    0 18px 42px rgba(1, 24, 48, 0.24),
    0 0 0 10px rgba(255, 255, 255, 0.14);
  display: flex;
  height: clamp(58px, 7vw, 82px);
  justify-content: center;
  transform: scale(1);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  width: clamp(58px, 7vw, 82px);
}

.video-play-overlay__icon::before {
  border-bottom: clamp(10px, 1.3vw, 15px) solid transparent;
  border-left: clamp(16px, 1.9vw, 24px) solid var(--primary-blue);
  border-top: clamp(10px, 1.3vw, 15px) solid transparent;
  content: "";
  display: block;
  margin-left: 5px;
}

.video-play-overlay:hover .video-play-overlay__icon,
.video-play-overlay:focus-visible .video-play-overlay__icon {
  background: #ffffff;
  box-shadow:
    0 22px 50px rgba(1, 24, 48, 0.28),
    0 0 0 12px rgba(255, 255, 255, 0.18);
  transform: scale(1.04);
}

.video-play-overlay:focus-visible {
  outline: 3px solid var(--highlight-yellow);
  outline-offset: -6px;
}

.video-disclaimer {
  background: #ffffff;
  color: color-mix(in srgb, var(--dark-neutral) 88%, var(--primary-blue));
  padding: 0.7rem 0.85rem;
}

.section__heading {
  display: grid;
  gap: 1rem;
  max-width: 920px;
}

.section__heading p:last-child {
  max-width: 720px;
}

.action-section {
  background: #ffffff;
  border-top: 1px solid rgba(74, 89, 115, 0.12);
  padding: clamp(3rem, 5vw, 4.5rem) var(--page-gutter);
}

.action-section__inner {
  align-items: center;
  display: grid;
  grid-template-areas: "copy media";
  grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  margin: 0 auto;
  max-width: 1180px;
  width: min(100%, 1180px);
}

.action-section__heading {
  align-content: center;
  background: #ffffff;
  display: grid;
  gap: 1.05rem;
  grid-area: copy;
  justify-items: start;
  margin: 0;
  max-width: none;
  padding: 0;
  text-align: left;
}

.action-section__heading .eyebrow {
  margin: 0;
}

.action-section__heading h2 {
  color: var(--primary-blue);
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  max-width: 590px;
  text-align: left;
}

.action-section__heading p:last-child {
  color: var(--dark-neutral);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  font-weight: var(--weight-body);
  line-height: 1.72;
  margin: 0;
  max-width: 58ch;
}

.action-showcase {
  align-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 250, 0.82)),
    #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.16);
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(1, 61, 124, 0.12);
  display: grid;
  grid-area: media;
  margin: 0;
  max-width: none;
  overflow: hidden;
  padding: clamp(0.7rem, 1.3vw, 1rem);
  width: 100%;
}

.action-showcase__video {
  align-content: center;
  background: transparent;
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.action-showcase__video video {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 52% 50%;
  width: 100%;
}

.action-showcase__video .video-player-shell {
  aspect-ratio: 16 / 9;
  background: transparent;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  height: auto;
  overflow: hidden;
  width: 100%;
}

.action-section .action-showcase .video-disclaimer {
  background: transparent;
  color: #9CA3AF;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 0;
  padding: 0 0.1rem;
  text-align: left;
}

.section--blue {
  background: var(--primary-blue);
  color: #ffffff;
}

.section--blue h2,
.section--blue p {
  color: #ffffff;
}

.demo-section {
  background:
    radial-gradient(circle at 82% 20%, rgba(91, 132, 196, 0.32), rgba(91, 132, 196, 0) 34%),
    linear-gradient(135deg, var(--primary-blue) 0%, #0a4f8d 100%);
  color: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
  min-height: 540px;
}

.demo-media {
  min-height: 540px;
  overflow: hidden;
  position: relative;
}

.demo-media::after {
  background:
    linear-gradient(90deg, rgba(1, 61, 124, 0) 0%, rgba(1, 61, 124, 0.24) 100%),
    linear-gradient(180deg, rgba(1, 61, 124, 0) 58%, rgba(1, 61, 124, 0.22) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.demo-media img {
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
  width: 100%;
}

.demo-layout {
  align-content: center;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  justify-items: start;
  padding: clamp(3.15rem, 5.8vw, 4.85rem) var(--page-gutter);
}

.demo-copy {
  max-width: 680px;
}

.demo-copy h2 {
  color: #ffffff;
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
}

.demo-copy p:not(.eyebrow):not(.disclaimer) {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin-top: 1.1rem;
  max-width: 680px;
}

.demo-copy .demo-disclaimer {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--type-disclaimer);
  font-weight: 600;
  line-height: var(--leading-disclaimer);
  margin-top: 0.75rem;
  max-width: none;
}

.demo-form-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 240ms ease, opacity 200ms ease;
}

.demo-form-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.demo-form {
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(229, 233, 240, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.form-field {
  display: grid;
  gap: 0.45rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field--website {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.form-field label {
  color: #ffffff;
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  appearance: none;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(229, 233, 240, 0.9);
  border-radius: 5px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-style: normal;
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

.form-field textarea {
  min-height: 118px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--highlight-yellow);
  box-shadow: 0 0 0 3px rgba(245, 195, 44, 0.18);
  outline: 0;
}

.demo-form__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  grid-column: 1 / -1;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.demo-form__footer p {
  color: rgba(229, 233, 240, 0.82);
  font-size: var(--type-body-small);
  line-height: var(--leading-small);
  margin: 0;
}

.demo-form__footer .button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.demo-form__footer p.is-success {
  color: #d8f5df;
}

.demo-form__footer p.is-error {
  color: #ffd9d9;
}

.split-section {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}

.split-section__body p {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  max-width: 680px;
}

.about-section {
  background: #ffffff;
  padding-block: clamp(3rem, 5.4vw, 4.65rem);
}

.about-section__inner {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.about-section .section__heading {
  gap: 0.95rem;
  max-width: 620px;
}

.about-section .section__heading h2 {
  font-size: var(--type-h2);
  line-height: var(--leading-heading);
  max-width: 600px;
}

.about-section__body {
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.8), rgba(255, 255, 255, 0));
  border-left: 2px solid rgba(245, 195, 44, 0.72);
  display: grid;
  gap: 0.95rem;
  padding: 0.15rem 0 0.2rem clamp(1.2rem, 3vw, 2.2rem);
}

.about-section__body p {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
}

.team-banner {
  background:
    linear-gradient(135deg, rgba(1, 61, 124, 0.98), rgba(24, 83, 132, 0.96)),
    var(--primary-blue);
  border-bottom: 1px solid rgba(229, 233, 240, 0.16);
  color: #ffffff;
  padding: clamp(1.65rem, 3.4vw, 2.45rem) var(--page-gutter);
}

.team-banner__inner {
  display: grid;
  gap: 0.78rem;
}

.team-banner .eyebrow {
  margin: 0;
}

.team-banner h1 {
  color: #ffffff;
  font-size: clamp(1.85rem, 3.05vw, 2.6rem);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  max-width: 980px;
}

.team-section {
  background: #ffffff;
}

.team-section--page {
  padding-block: clamp(3rem, 5.4vw, 4.4rem);
}

.board-section {
  background: var(--soft-paper);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5.4vw, 4.4rem);
}

.team-heading {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
  max-width: 760px;
  text-align: left;
}

.team-heading .eyebrow::after {
  margin-left: 0;
  margin-right: 0;
}

.team-section--page .team-heading h2,
.board-section .team-heading h2 {
  font-size: var(--type-h2);
  max-width: 700px;
}

.team-heading p:not(.eyebrow) {
  color: var(--dark-neutral);
  max-width: 620px;
}

.team-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.65rem, 3vw, 2.35rem);
  max-width: none;
}

.team-section--page .team-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

.team-section--page .team-card__photo {
  width: min(100%, 9.6rem);
}

.team-card {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.14);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(1, 61, 124, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  position: relative;
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.team-card::before {
  content: none;
}

.team-card:hover {
  border-color: rgba(1, 61, 124, 0.22);
  box-shadow: 0 18px 42px rgba(1, 61, 124, 0.08);
}

.team-card__photo {
  background:
    linear-gradient(135deg, rgba(1, 61, 124, 0.08), rgba(91, 132, 196, 0.12)),
    var(--light-neutral);
  aspect-ratio: 1 / 1;
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(1, 61, 124, 0.12);
  margin: 0 auto;
  overflow: hidden;
  width: min(100%, 8.25rem);
}

.team-card__photo img {
  height: 100%;
  filter: saturate(0.9) contrast(1.04);
  object-fit: cover;
  object-position: 50% 24%;
  width: 100%;
}

.team-card:hover .team-card__photo img {
  filter: saturate(0.94) contrast(1.05);
}

.team-card__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 0 0;
  text-align: center;
}

.team-card__body h3 {
  color: var(--primary-blue);
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-title);
  margin: 0 0 0.55rem;
}

.team-card__body p {
  color: var(--ink);
  font-size: var(--type-body-small);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  line-height: var(--leading-meta);
  margin: 0 0 0.32rem;
}

.team-card__body span {
  color: var(--dark-neutral);
  display: block;
  font-size: var(--type-body-small);
  font-weight: var(--weight-body);
  line-height: var(--leading-small);
}

.board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

.board-card {
  box-shadow: 0 14px 34px rgba(1, 61, 124, 0.05);
}

.board-card::before {
  background: rgba(1, 61, 124, 0.72);
  height: 2px;
}

.board-card .team-card__photo {
  aspect-ratio: 1 / 1;
  width: min(100%, 9.6rem);
}

.board-card .team-card__body {
  padding: 1rem 0 0;
}

.board-card .team-card__body h3 {
  font-size: var(--type-h3);
  line-height: var(--leading-title);
  margin-bottom: 0.52rem;
}

.board-card .team-card__body p {
  font-size: var(--type-body-small);
  margin-bottom: 0.34rem;
}

.board-card .team-card__body span {
  font-size: var(--type-body-small);
  line-height: var(--leading-small);
}

.news-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border-top: 1px solid rgba(74, 89, 115, 0.12);
  padding-block: clamp(3.4rem, 6vw, 5rem);
}

.news-preview {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
}

.news-preview__heading {
  display: grid;
  gap: 1.05rem;
  max-width: 520px;
  position: sticky;
  top: 6.5rem;
}

.news-preview__heading h2 {
  font-size: var(--type-h2);
  margin: 0;
}

.news-preview__heading p:not(.eyebrow) {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
}

.news-preview__heading .text-link {
  justify-self: start;
  margin-top: 0.25rem;
}

.news-preview__list {
  display: grid;
  min-width: 0;
}

.news-preview__all-link {
  justify-self: start;
  margin-top: 24px;
}

.news-card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-card-grid--preview {
  gap: 0;
  grid-template-columns: 1fr;
  max-width: none;
}

.news-card {
  background: #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(1, 61, 124, 0.06);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.news-card-grid--preview .news-card {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 16px;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-height: 0;
  padding: 20px 0;
}

.news-card-grid--preview .news-card + .news-card {
  border-top: 1px solid #E2E8F0;
}

.news-card:hover {
  border-color: rgba(1, 61, 124, 0.24);
  box-shadow: 0 22px 52px rgba(1, 61, 124, 0.1);
  transform: translateY(-2px);
}

.news-card-grid--preview .news-card:hover {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  transform: none;
}

.news-card img {
  aspect-ratio: 16 / 9.5;
  background: var(--light-neutral);
  object-fit: cover;
  transition: transform 220ms ease;
  width: 100%;
}

.news-card-grid--preview .news-card img {
  aspect-ratio: auto;
  border-radius: 6px;
  flex-shrink: 0;
  height: 88px;
  min-height: 0;
  object-fit: cover;
  width: 88px;
}

.news-card:hover img {
  transform: scale(1.02);
}

.news-card__body {
  display: grid;
  gap: 0.68rem;
  padding: clamp(1.05rem, 2vw, 1.35rem);
}

.news-card-grid--preview .news-card__body {
  align-content: center;
  gap: 0;
  padding: 0;
}

.news-card-grid--preview .news-card__meta {
  color: #9CA3AF !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px;
}

.news-card__meta {
  color: var(--secondary-blue) !important;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-meta) !important;
  font-weight: var(--weight-label) !important;
  gap: 0.65rem;
  letter-spacing: 0;
  line-height: var(--leading-meta) !important;
  text-transform: uppercase;
}

.section .news-card-grid--preview .news-card__meta {
  margin: 0 0 6px;
}

.news-card h2,
.news-card h3 {
  color: var(--primary-blue);
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-title);
  margin: 0;
}

.news-card-grid--preview .news-card h3 {
  color: var(--primary-blue);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  max-width: none;
}

.news-hero h1 {
  max-width: 900px;
}

.featured-update-section {
  background: #ffffff;
  padding-block: clamp(3rem, 5.4vw, 4.35rem);
}

.featured-update {
  background: #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(1, 61, 124, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  overflow: hidden;
}

.featured-update__media {
  background: var(--light-neutral);
  overflow: hidden;
}

.featured-update__media img {
  aspect-ratio: 16 / 9;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.featured-update:hover .featured-update__media img {
  transform: none;
}

.featured-update__body {
  align-content: center;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.35rem, 2.6vw, 2rem);
}

.featured-update__body .eyebrow {
  margin-bottom: 0.15rem;
}

.featured-update__body h2 {
  color: var(--primary-blue);
  font-size: clamp(1.85rem, 3.4vw, 2.45rem);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
}

.featured-update__body > p:not(.eyebrow, .update-card__category) {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
  max-width: 56ch;
}

.featured-update__body .button {
  justify-self: start;
  margin-top: 0.25rem;
}

.updates-section {
  background: var(--soft-paper);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5.4vw, 4.35rem);
}

.updates-section__header {
  align-items: flex-end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.update-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.update-filter {
  appearance: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(74, 89, 115, 0.18);
  border-radius: 999px;
  color: var(--dark-neutral);
  cursor: pointer;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  line-height: 1;
  min-height: 36px;
  padding: 0 0.85rem;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.update-filter:hover,
.update-filter.is-active {
  background: #ffffff;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.updates-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.update-card {
  background: #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.14);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(1, 61, 124, 0.05);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.update-card:hover {
  border-color: rgba(1, 61, 124, 0.22);
  box-shadow: 0 18px 42px rgba(1, 61, 124, 0.08);
}

.update-card[hidden] {
  display: none;
}

.update-card__image {
  background: var(--light-neutral);
  border-bottom: 1px solid rgba(74, 89, 115, 0.12);
  overflow: hidden;
}

.update-card__image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.update-card:hover .update-card__image img {
  transform: none;
}

.update-card--text {
  border-top: 1px solid rgba(74, 89, 115, 0.14);
  grid-template-rows: auto 1fr;
}

.update-card__body {
  display: grid;
  gap: 0.65rem;
  grid-template-rows: auto auto 1fr auto;
  padding: clamp(1rem, 1.8vw, 1.25rem);
}

.update-card--text .update-card__body {
  min-height: 100%;
}

.update-card__category {
  color: var(--secondary-blue) !important;
  font-size: var(--type-meta) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: 0;
  line-height: var(--leading-meta) !important;
  margin: 0;
  text-transform: uppercase;
}

.update-card h3 {
  color: var(--primary-blue);
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-title);
  margin: 0;
}

.update-card__body > p:not(.update-card__category, .update-card__meta) {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
}

.update-card__meta {
  align-items: center;
  color: var(--dark-neutral);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  gap: 0.45rem;
  letter-spacing: 0;
  line-height: var(--leading-meta);
  margin: 0;
  text-transform: uppercase;
}

.update-card__meta span + span::before {
  color: rgba(74, 89, 115, 0.42);
  content: "/";
  margin-right: 0.45rem;
}

.news-cta {
  padding-block: clamp(3rem, 5.4vw, 4.25rem);
}

/* ==========================================================================
   CLIENT REVIEW — minimal homepage edits
   Appended 2026-07-31. These overrides intentionally preserve the approved
   homepage structure while tightening its footprint and improving the hero.
   ========================================================================== */

.hero {
  min-height: clamp(480px, 62svh, 620px);
  padding-block: clamp(42px, 5.5vh, 64px) clamp(38px, 5vh, 58px);
}

.hero__video {
  left: auto;
  object-position: 54% 56%;
  right: 0;
  width: 86%;
}

.hero__copy {
  max-width: 620px;
  width: min(100%, 620px);
}

.hero__lead {
  margin-top: 1rem;
}

.hero__actions {
  margin-top: 1.45rem;
}

.hero .button {
  min-height: 46px;
}

.hero__disclaimer {
  margin-top: 1.1rem;
}

.problem-section {
  padding: clamp(2.5rem, 4vw, 3.5rem) var(--page-gutter);
}

.problem-section__copy {
  gap: 0.6rem;
  margin-top: clamp(1rem, 1.8vw, 1.35rem);
}

.problem-section__copy p {
  line-height: 1.52;
}

.clinical-use,
.clinical-use__media {
  min-height: 440px;
}

.explainer-section,
.action-section {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.explainer-section__inner,
.action-section__inner {
  max-width: 1040px;
}

.explainer-section__copy,
.action-section__heading {
  margin-bottom: clamp(1.2rem, 2vw, 1.65rem);
}

.feature-strip {
  padding: clamp(2.4rem, 4vw, 3.35rem) var(--page-gutter);
}

.feature-strip__inner {
  gap: clamp(1.25rem, 2vw, 1.7rem);
}

.feature-grid {
  gap: clamp(0.8rem, 1.5vw, 1.35rem);
}

.feature-item {
  gap: 0.7rem;
}

.feature-strip__footnote {
  padding-top: 1rem;
}

.news-section {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 640px) {
  .hero {
    min-height: clamp(560px, 72svh, 620px);
    padding-block: 2.3rem 2.1rem;
  }

  .hero__video {
    left: 0;
    object-position: 62% 54%;
    right: auto;
    width: 100%;
  }

  .hero__copy {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 9.2vw, 2.8rem);
  }

  .hero__lead {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .hero__actions {
    margin-top: 1.25rem;
  }

  .hero .button {
    min-height: 44px;
  }

  .hero__disclaimer {
    margin-top: 0.9rem;
  }

  .problem-section {
    padding-block: 2.75rem;
  }

  .problem-section__copy {
    margin-top: 1rem;
  }

  .clinical-use,
  .clinical-use__media {
    min-height: 0;
  }

  .feature-strip {
    padding-block: 2.75rem;
  }

  .feature-grid {
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

.news-cta__inner {
  align-items: center;
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: space-between;
}

.news-cta h2 {
  color: #ffffff;
  max-width: 680px;
}

.news-cta p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body);
  max-width: 580px;
  margin-top: 1rem;
}

.article-page {
  background: #ffffff;
}

.article-hero {
  background: var(--primary-blue);
  color: #ffffff;
  padding: clamp(3.5rem, 6.8vw, 5.35rem) var(--page-gutter) clamp(2.8rem, 5.4vw, 4.15rem);
}

.article-hero__inner {
  display: grid;
  gap: 1rem;
}

.article-back {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-button);
  font-weight: var(--weight-label);
  justify-self: start;
  margin-bottom: 0.3rem;
  transition: color 180ms ease;
}

.article-back:hover {
  color: var(--highlight-yellow);
}

.article-hero .eyebrow {
  color: var(--highlight-yellow);
}

.article-hero h1 {
  color: #ffffff;
  font-size: var(--type-h1);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin: 0;
  max-width: 980px;
}

.article-hero .update-card__meta {
  color: rgba(255, 255, 255, 0.76);
}

.article-featured-image {
  margin-block: clamp(2rem, 4vw, 3rem) 0;
  width: min(calc(100% - (var(--page-gutter) * 2)), 1180px);
}

.article-featured-image img {
  aspect-ratio: 3 / 2;
  background: #ffffff;
  border: 1px solid rgba(74, 89, 115, 0.14);
  border-radius: 8px;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.article-page__body {
  display: grid;
  gap: 1.2rem;
  max-width: 820px;
  padding-block: clamp(2rem, 4.6vw, 3.5rem);
  width: min(calc(100% - (var(--page-gutter) * 2)), 820px);
}

.article-page__body p {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
}

.article-page__body h2 {
  color: var(--primary-blue);
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
  margin: 1.1rem 0 0;
}

.article-page__body a {
  color: var(--primary-blue);
  font-weight: var(--weight-label);
  text-decoration: underline;
  text-decoration-color: var(--highlight-yellow);
  text-underline-offset: 0.18em;
}

.related-updates {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(3rem, 5vw, 4rem);
  max-width: 820px;
  padding-top: 1.5rem;
  width: min(calc(100% - (var(--page-gutter) * 2)), 820px);
}

.related-update-card {
  background: var(--soft-paper);
  border: 1px solid rgba(74, 89, 115, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.related-update-card:hover {
  border-color: rgba(1, 61, 124, 0.22);
  box-shadow: 0 18px 42px rgba(1, 61, 124, 0.08);
  transform: translateY(-2px);
}

.related-update-card span {
  color: var(--secondary-blue);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  line-height: var(--leading-meta);
  text-transform: uppercase;
}

.related-update-card strong {
  color: var(--primary-blue);
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.site-footer {
  background:
    radial-gradient(circle at 92% 0%, rgba(91, 132, 196, 0.18), rgba(91, 132, 196, 0) 34%),
    var(--primary-blue);
  border-top: 1px solid rgba(229, 233, 240, 0.18);
  color: var(--light-neutral);
  padding: clamp(3rem, 5vw, 4.25rem) var(--page-gutter) 1.65rem;
}

.site-footer__inner {
  margin: 0 auto;
  max-width: var(--content-max);
}

.site-footer__grid {
  align-items: start;
  display: grid;
  gap: clamp(1.75rem, 3.2vw, 3rem);
  grid-template-columns: minmax(280px, 1.55fr) repeat(3, minmax(112px, 0.62fr));
}

.site-footer__brand {
  display: grid;
  gap: 1rem;
  max-width: 380px;
}

.site-footer__logo {
  align-items: center;
  display: inline-flex;
  margin-bottom: 0.15rem;
  width: min(190px, 100%);
}

.site-footer__logo img {
  display: block;
  height: auto;
  width: 100%;
}

.site-footer__brand p,
.site-footer__cta p,
.site-footer__bottom p {
  margin: 0;
}

.site-footer__brand p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body-small);
  font-weight: var(--weight-body);
  line-height: 1.65;
  max-width: 34ch;
}

.site-footer__nav {
  align-content: start;
  display: grid;
  gap: 0.68rem;
}

.site-footer__nav h2 {
  color: #ffffff;
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  line-height: var(--leading-meta);
  margin: 0 0 0.28rem;
  text-transform: uppercase;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.76);
  transition: color 180ms ease;
}

.site-footer a:hover {
  color: var(--highlight-yellow);
}

.site-footer__nav a {
  font-size: var(--type-body-small);
  font-weight: var(--weight-body);
  line-height: var(--leading-small);
  width: fit-content;
}

.site-footer__button {
  color: var(--ink) !important;
}

.site-footer__cta {
  align-content: start;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  display: grid;
  gap: 0.7rem;
  justify-items: stretch;
  padding: 1.15rem;
  text-align: left;
}

.site-footer__cta p {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--type-body-small);
  font-weight: var(--weight-body);
  line-height: var(--leading-small);
}

.site-footer__bottom {
  align-items: center;
  border-top: 1px solid rgba(229, 233, 240, 0.18);
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(2.35rem, 4vw, 3.25rem);
  padding-top: 1.25rem;
}

.site-footer__bottom p,
.site-footer__bottom a {
  font-size: var(--type-meta);
  font-weight: var(--weight-body);
  line-height: var(--leading-small);
}

@media (max-width: 1100px) {
  :root {
    --type-h1: 3.7rem;
    --type-feature-callout: 3.4rem;
    --type-h2: 2.4rem;
  }

  .feature-item h3 {
    font-size: 0.82rem;
  }

  .feature-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .feature-strip__inner {
    grid-template-columns: 1fr;
  }

  .feature-strip__heading {
    max-width: 420px;
  }

  .feature-strip__heading .eyebrow {
    max-width: none;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-section--page .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
  }

  .board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__grid {
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(120px, 1fr));
  }

  .site-footer__cta {
    grid-column: 1 / -1;
    grid-template-columns: minmax(180px, 0.32fr) 1fr;
    justify-items: stretch;
    max-width: none;
    padding: 1rem;
  }

  .site-footer__cta p {
    align-self: center;
  }

  .featured-update {
    grid-template-columns: 1fr;
  }

  .updates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  :root {
    --page-gutter: clamp(1.25rem, 6vw, 3rem);
    --section-space: clamp(3.5rem, 8vw, 5rem);
  }

  .hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 58%, rgba(255, 255, 255, 0.54) 100%),
      url("../../public/images/ccs-hero-device.jpg") 62% bottom / cover no-repeat;
    min-height: calc(75vh - 66px);
    min-height: calc(75svh - 66px);
    padding-block: clamp(72px, 8vh, 100px) clamp(56px, 6vh, 80px);
  }

  .feature-strip {
    background: #F4F6FA;
    border-bottom: 1px solid #E2E8F0;
    border-top: 1px solid #E2E8F0;
    margin-top: 0;
    padding: 36px var(--page-gutter);
    z-index: auto;
  }

  .demo-section,
  .split-section,
  .about-section__inner,
  .news-preview,
  .action-section__inner,
  .action-section__heading,
  .explainer-section__inner,
  .clinical-use {
    grid-template-columns: 1fr;
  }

  .news-preview__heading {
    max-width: 680px;
    position: static;
  }

  .action-showcase {
    grid-template-columns: 1fr;
  }

  .explainer-section,
  .action-section,
  .explainer-section__inner,
  .action-section__inner {
    min-height: 0;
  }

  .explainer-section,
  .action-section {
    padding-block: clamp(2.75rem, 7vw, 3.75rem);
  }

  .explainer-section__inner,
  .action-section__inner {
    gap: 1.45rem;
  }

  .explainer-section__inner {
    grid-template-areas:
      "copy"
      "media";
  }

  .action-section__inner {
    grid-template-areas:
      "copy"
      "media";
  }

  .explainer-video,
  .action-showcase,
  .action-showcase__video {
    min-height: 0;
  }

  .explainer-video {
    padding: clamp(0.65rem, 1.8vw, 0.9rem);
  }

  .action-showcase {
    min-height: 0;
    padding: clamp(0.65rem, 1.8vw, 0.9rem);
  }

  .action-showcase__video {
    min-height: 0;
  }

  .feature-strip__inner {
    grid-template-columns: 1fr;
  }

  .feature-strip__heading {
    max-width: 680px;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-item:nth-child(3) {
    border-right: 0;
  }

  .feature-item:nth-child(even) {
    border-right: 0;
  }

  .feature-item:nth-child(n + 3) {
    border-top: 0;
  }

  .feature-item:last-child {
    border-right: 0;
    grid-column: auto;
  }

  .about-section__body {
    border-left: 0;
    border-top: 2px solid rgba(245, 195, 44, 0.72);
    padding-left: 0;
    padding-top: 1.25rem;
  }

  .demo-section {
    min-height: 0;
  }

  .demo-media {
    min-height: 420px;
  }

  .demo-layout {
    padding-block: 3.5rem;
  }

  .clinical-use {
    min-height: 0;
  }

  .clinical-use__media {
    min-height: 420px;
  }

  .clinical-use__copy {
    padding-block: 3.5rem;
  }

  .explainer-section__copy,
  .action-section__heading {
    padding: 0;
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand,
  .site-footer__cta {
    grid-column: 1 / -1;
  }

  .site-footer__brand {
    max-width: 36rem;
  }

  .updates-section__header,
  .news-cta__inner {
    align-items: start;
    flex-direction: column;
  }

  .update-filters {
    justify-content: flex-start;
  }

  .article-featured-image img {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 1.25rem;
    --section-space: 3.25rem;
    --header-anchor-offset: 85px;
    --type-h1: 2.45rem;
    --type-feature-callout: 2.75rem;
    --type-h2: 2.05rem;
    --type-h3: 1.05rem;
  }

  .site-header {
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    min-height: 0;
    max-width: 100vw;
    overflow: visible;
    padding-block: 0.95rem;
    width: 100vw;
  }

  .brand {
    max-width: min(250px, calc(100vw - 6.5rem));
  }

  .brand img {
    max-height: 54px;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    z-index: 12;
  }

  .site-nav {
    background: #ffffff;
    border: 1px solid rgba(216, 222, 232, 0.95);
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(1, 61, 124, 0.14);
    flex-direction: column;
    gap: 0;
    left: var(--page-gutter);
    max-height: calc(100vh - 100px);
    opacity: 0;
    overflow: hidden;
    padding: 0.45rem;
    pointer-events: none;
    position: absolute;
    right: var(--page-gutter);
    top: calc(100% - 0.3rem);
    transform: translateY(-0.35rem);
    transition: opacity 180ms ease, transform 180ms ease;
    visibility: hidden;
    white-space: normal;
    width: auto;
    z-index: 11;
  }

  .site-header.is-nav-open .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .site-nav a {
    border: 0;
    border-radius: 6px;
    color: var(--primary-blue);
    padding: 0.9rem 0.95rem;
    width: 100%;
  }

  .site-nav .nav-cta {
    border-radius: 6px;
    margin-top: 0;
    padding: 10px 20px;
    text-align: center;
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a[aria-current="page"] {
    color: var(--primary-blue);
  }

  .site-footer {
    padding-bottom: 1.35rem;
    padding-top: 2.75rem;
  }

  .site-footer__grid {
    column-gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: 34rem;
  }

  .site-footer__nav[aria-label="Legal links"] {
    column-gap: 1.5rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, max-content);
  }

  .site-footer__nav[aria-label="Legal links"] h2 {
    grid-column: 1 / -1;
  }

  .site-footer__cta {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    order: 2;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 2.25rem;
    padding-top: 1.1rem;
  }

  .feature-strip {
    padding-block: 36px;
  }

  .feature-strip__heading {
    gap: 0.68rem;
  }

  .feature-strip__heading h2 {
    font-size: 1.8rem;
  }

  .feature-strip__subhead {
    font-size: 0.94rem;
    line-height: 1.58;
    max-width: 34ch;
  }

  .feature-item {
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 0.8rem;
    padding: 0 12px;
    text-align: center;
  }

  .feature-item h3 {
    color: #4A5568;
    font-weight: 700;
    min-width: 0;
    text-align: center;
  }

  .feature-item__label,
  .feature-item h3 small {
    color: #4A5568;
    font-size: clamp(11px, 2.85vw, 13px);
    line-height: 1.25;
  }

  .feature-item__icon {
    height: 32px;
    width: 32px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-item,
  .feature-item:nth-child(even),
  .feature-item:last-child {
    border-right: 0;
  }

  .feature-item:nth-child(n + 2) {
    border-top: 0;
  }

  .feature-item:last-child {
    grid-column: auto;
  }

  .hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.96) 55%, rgba(229, 233, 240, 0.78) 100%),
      url("../../public/images/ccs-hero-device.jpg") 74% bottom / auto 58% no-repeat;
    min-height: calc(75vh - 63px);
    min-height: calc(75svh - 63px);
    padding-block: 82px 58px;
    max-width: 100vw;
    overflow: hidden;
  }

  .hero__copy {
    max-width: calc(100vw - (var(--page-gutter) * 2));
    width: calc(100vw - (var(--page-gutter) * 2));
  }

  .eyebrow {
    font-size: var(--type-eyebrow);
    line-height: var(--leading-label);
  }

  .eyebrow::after {
    margin-top: 0.65rem;
    width: 56px;
  }

  .hero__eyebrow {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0;
    max-width: 28ch;
  }

  .hero__eyebrow::after {
    height: 3px;
    margin-top: 0.72rem;
    width: 64px;
  }

  .hero h1 {
    font-size: 32px;
    line-height: var(--leading-heading);
    max-width: 100%;
  }

  .hero h1 span:last-child {
    max-width: none;
  }

  .hero__lead {
    font-size: 16px;
    line-height: 1.65;
    max-width: 480px;
    width: auto;
  }

  .hero__actions {
    gap: 0.75rem;
    margin-top: 0;
  }

  .button,
  .site-footer__button {
    min-height: 46px;
  }

  .hero__actions,
  .button,
  .site-footer__button {
    width: 100%;
  }

  .section h2 {
    font-size: var(--type-h2);
    line-height: var(--leading-heading);
  }

  .action-section__heading h2 {
    font-size: 20px;
    line-height: 1.65;
  }

  .section p:not(.eyebrow) {
    font-size: var(--type-body);
  }

  .page-hero {
    padding-block: 3rem 2.65rem;
  }

  .team-hero {
    padding-block: 3rem 2.65rem;
  }

  .page-hero h1 {
    font-size: var(--type-h1);
    line-height: var(--leading-heading);
  }

  .explainer-section__copy h2 {
    max-width: none;
  }

  .news-card-grid {
    grid-template-columns: 1fr;
  }

  .featured-update-section,
  .updates-section,
  .news-cta {
    padding-block: 3rem;
  }

  .featured-update__body {
    padding: 1.2rem;
  }

  .updates-grid {
    grid-template-columns: 1fr;
  }

  .update-filters {
    gap: 0.45rem;
    width: 100%;
  }

  .update-filter {
    flex: 1 1 calc(50% - 0.45rem);
    min-width: 0;
    padding-inline: 0.75rem;
    text-align: center;
  }

  .news-cta__inner .button {
    width: 100%;
  }

  .article-hero {
    padding-block: 3rem 2.65rem;
  }

  .article-hero h1 {
    font-size: var(--type-h1);
  }

  .article-page__body p {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .ecosystem-section__heading {
    align-items: start;
    display: grid;
    gap: 1rem;
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-grid article {
    min-height: 118px;
    padding: 1.05rem;
  }

  .logo-grid:not(.logo-grid--partners) article:last-child {
    grid-column: 1 / -1;
  }

  .logo-grid img {
    max-height: 58px;
    max-width: min(176px, 100%);
  }

  .logo-grid img[src*="aif"],
  .logo-grid img[src*="boston-childrens-hospital"],
  .logo-grid img[src*="goodwin"],
  .logo-grid img[src*="launchpad-venture-group"],
  .logo-grid img[src*="next-phase"] {
    max-height: 70px;
    max-width: min(126px, 86%);
  }

  .news-card-grid--preview .news-card {
    gap: 16px;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 0;
  }

  .news-card-grid--preview .news-card__body {
    padding: 0;
  }

  .news-card-grid--preview .news-card h3 {
    max-width: none;
  }

  .clinical-use__media {
    min-height: 320px;
  }

  .explainer-video,
  .action-showcase,
  .action-showcase__video {
    min-height: 0;
  }

  .explainer-video {
    min-height: 0;
    padding: 0.65rem;
  }

  .action-showcase,
  .action-showcase__video {
    min-height: 0;
    padding: 0.65rem;
  }

  .action-showcase__video {
    padding: 0;
  }

  .clinical-use__media img {
    object-position: 64% 50%;
  }

  .demo-media {
    min-height: 320px;
  }

  .demo-media img {
    object-position: 56% 54%;
  }

  .demo-layout {
    padding: 2.75rem var(--page-gutter) 3.25rem;
  }

  .clinical-use__copy {
    padding: 2.55rem var(--page-gutter) 2.85rem;
  }

  .explainer-section__copy,
  .action-section__heading {
    padding: 0;
  }

  .clinical-use__copy h2 {
    font-size: clamp(1.7rem, 8vw, 1.92rem);
    line-height: 1.12;
  }

  .explainer-section__copy h2 {
    font-size: clamp(1.7rem, 8vw, 1.92rem);
    line-height: 1.12;
  }

  .action-section__heading h2 {
    font-size: clamp(1.7rem, 8vw, 1.92rem);
    line-height: 1.12;
  }

  .clinical-use__copy p:last-child {
    font-size: 0.95rem;
    line-height: 1.58;
    margin-top: 1rem;
    max-width: 36ch;
  }

  .section__heading {
    gap: 1rem;
  }

  .action-section__heading p:last-child {
    font-size: var(--type-body);
    max-width: 34ch;
  }

  .demo-copy h2 {
    font-size: var(--type-h2);
    line-height: var(--leading-heading);
  }

  .team-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 2rem;
    max-width: none;
  }

  .team-section--page .team-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .team-card {
    display: flex;
    grid-template-columns: none;
  }

  .team-card__photo {
    aspect-ratio: 1 / 1;
    min-height: 0;
    width: min(10.5rem, 62vw);
  }

  .board-card .team-card__photo {
    width: min(10.5rem, 62vw);
  }

  .team-card__body {
    min-height: 0;
    padding: 0.9rem 0 0;
    text-align: center;
  }

  .team-card__body h3 {
    font-size: var(--type-h3);
    margin-bottom: 0.55rem;
  }

  .team-card__body p,
  .team-card__body span {
    font-size: var(--type-body-small);
  }

  .demo-form {
    grid-template-columns: 1fr;
  }

  .section-actions,
  .section-actions .button {
    width: 100%;
  }

  .demo-copy p {
    max-width: 34ch;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 28px;
  }
}

@media (max-width: 380px) {
  :root {
    --type-h1: 2rem;
    --type-feature-callout: 2.35rem;
    --type-h2: 1.75rem;
    --type-button: 0.86rem;
  }

  .hero h1 {
    font-size: 24px;
  }

  .clinical-use__media {
    min-height: 280px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-item {
    flex-direction: column;
    justify-content: center;
    padding: 0 8px;
    text-align: center;
  }

  .feature-item h3 {
    text-align: center;
  }

  .feature-item__label,
  .feature-item h3 small {
    font-size: clamp(9.5px, 2.8vw, 12px);
  }

  .feature-item__icon {
    height: 32px;
    width: 32px;
  }

  .feature-item,
  .feature-item:nth-child(3),
  .feature-item:nth-child(even) {
    border-right: 0;
  }

  .feature-item:nth-child(n + 2) {
    border-top: 0;
  }

  .feature-item:last-child {
    grid-column: auto;
  }

  .team-card {
    grid-template-columns: 96px 1fr;
  }
}

@media (max-width: 340px) {
  .hero h1 {
    font-size: 22px;
  }
}

/* Homepage storyboard revision */
.hero__copy {
  max-width: 690px;
  width: min(100%, 690px);
}

.hero h1 {
  font-size: clamp(3rem, 5.4vw, 5.1rem);
  max-width: 720px;
  text-wrap: balance;
}

.hero__lead {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  max-width: 680px;
}

.problem-section {
  background: #ffffff;
  padding: clamp(4.5rem, 8vw, 7.5rem) var(--page-gutter);
}

.problem-section__inner {
  display: grid;
  justify-items: start;
}

.problem-section h2 {
  color: var(--primary-blue);
  font-size: clamp(2.25rem, 4.3vw, 4rem);
  font-weight: var(--weight-heading);
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 920px;
  text-wrap: balance;
}

.problem-section__copy {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 850px;
}

.problem-section__copy p {
  color: var(--dark-neutral);
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.65;
}

.problem-section__copy p:last-child {
  color: var(--primary-blue);
  font-weight: 800;
}

.explainer-section {
  background: #f4f6fa;
}

.explainer-section__inner {
  display: block;
  max-width: 1180px;
}

.explainer-section__copy {
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}

.explainer-section__copy h2 {
  font-size: clamp(2.1rem, 4vw, 3.8rem);
  max-width: 920px;
}

.explainer-video {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.explainer-video .video-player-shell {
  border-radius: 10px;
}

.feature-strip {
  background: #ffffff;
  border: 0;
  padding: clamp(4rem, 7vw, 6rem) var(--page-gutter);
}

.feature-strip__inner {
  display: grid;
  gap: clamp(1.8rem, 3vw, 2.6rem);
}

.feature-strip__inner > h2 {
  color: var(--primary-blue);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--weight-heading);
  letter-spacing: -0.025em;
  line-height: 1.06;
}

.feature-grid {
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-item {
  align-items: flex-start;
  gap: 1rem;
  height: auto;
  justify-content: flex-start;
  padding: 0;
  text-align: left;
}

.feature-item h3 {
  color: var(--primary-blue);
  gap: 0.5rem;
  text-align: left;
}

.feature-item__label,
.feature-item h3 small {
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  line-height: 1.35;
  margin: 0;
  white-space: normal;
}

.feature-item h3 small {
  color: var(--dark-neutral);
  max-width: 24ch;
}

.feature-strip__footnote {
  border-top: 1px solid var(--line);
  color: var(--primary-blue);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 800;
  padding-top: 1.4rem;
}

.action-section {
  background: #f4f6fa;
}

@media (max-width: 920px) {
  .explainer-section__inner {
    display: block;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.25rem;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: calc(86svh - 72px);
  }

  .hero h1 {
    font-size: clamp(2.5rem, 13vw, 3.6rem);
    line-height: 0.98;
  }

  .hero__actions .button {
    width: 100%;
  }

  .problem-section {
    padding-block: 4rem;
  }

  .problem-section h2 {
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-item {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    text-align: left;
  }

  .feature-item h3,
  .feature-item__label,
  .feature-item h3 small {
    text-align: left;
  }
}

/* ==========================================================================
   Polish pass — additive utilities, accessibility, and motion/print handling
   Appended 2026-07-28. Nothing above this line was modified.
   ========================================================================== */

/* Skip link — first tabbable element, visible only on focus. */
.skip-link {
  background: var(--primary-blue);
  border-radius: 0 0 6px 0;
  color: #ffffff;
  font-size: var(--type-button);
  font-weight: var(--weight-label);
  left: 0;
  padding: 0.85rem 1.2rem;
  position: absolute;
  top: 0;
  transform: translateY(-120%);
  transition: transform 160ms ease;
  z-index: 100;
}

.skip-link:focus-visible {
  outline: 3px solid var(--highlight-yellow);
  outline-offset: 2px;
  transform: translateY(0);
}

/* Screen-reader-only text that still contributes to the accessible name. */
.visually-hidden {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* main is programmatically focusable for the skip link; suppress the ring. */
main:focus {
  outline: none;
}

/* Consistent, visible keyboard focus across every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--highlight-yellow);
  outline-offset: 2px;
}

.hero a:focus-visible,
.clinical-use a:focus-visible,
.demo-section a:focus-visible,
.demo-section button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--highlight-yellow);
}

/* Form field required/optional affordances. */
.form-field__req {
  border: 0;
  color: var(--highlight-yellow);
  cursor: help;
  text-decoration: none;
}

.form-field__opt {
  color: rgba(255, 255, 255, 0.62);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: none;
}

/* News meta line now carries a <time> element. */
.news-card__meta time {
  font: inherit;
}

/* Footer social link + closing disclaimer. */
.site-footer__social {
  align-items: center;
  align-self: start;
  border: 1px solid rgba(229, 233, 240, 0.32);
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--type-button);
  font-weight: var(--weight-label);
  justify-content: center;
  margin-top: 0;
  min-height: 38px;
  padding: 0 0.9rem;
  transition: background 180ms ease, border-color 180ms ease;
  width: fit-content;
}

.site-footer__social:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.62);
}

.site-footer__disclaimer {
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--type-disclaimer);
  line-height: var(--leading-disclaimer);
  margin: 0.9rem 0 0;
  max-width: 92ch;
}

/* Long-form legal pages (privacy, terms). */
.legal-page {
  background: #ffffff;
  padding: clamp(3rem, 5.4vw, 4.5rem) var(--page-gutter);
}

.legal-page__inner {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 auto;
  max-width: 780px;
  width: min(100%, 780px);
}

.legal-page__updated {
  color: var(--dark-neutral);
  font-size: var(--type-body-small);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.legal-page section {
  display: grid;
  gap: 0.85rem;
}

.legal-page h2 {
  color: var(--primary-blue);
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
  margin: 0;
}

.legal-page p,
.legal-page li {
  color: var(--dark-neutral);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  margin: 0;
}

.legal-page ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.15rem;
}

.legal-page a:not(.button) {
  color: var(--primary-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(245, 195, 44, 0.9);
  text-underline-offset: 3px;
}

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .hero__video {
    display: none;
  }

  .hero {
    background-image:
      linear-gradient(90deg, rgba(1, 61, 124, 0.96) 0%, rgba(1, 61, 124, 0.62) 100%),
      url("../../public/images/ccs-hero-device.jpg");
    background-position: 50% 58%;
    background-size: cover;
  }
}

/* Printable version: drop chrome, expose link targets. */
@media print {
  .site-header,
  .nav-toggle,
  .site-nav,
  .skip-link,
  .hero__video,
  .video-play-overlay,
  .demo-form-panel,
  .site-footer__cta {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  .hero,
  .clinical-use,
  .demo-section,
  .page-hero {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .hero h1,
  .hero__lead,
  .clinical-use__copy h2,
  .clinical-use__copy p,
  .demo-copy h2,
  .demo-copy p {
    color: #000000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  section {
    break-inside: avoid;
  }
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM — normalization pass
   Appended 2026-07-28.

   The sheet above accumulated ~25 ad-hoc font sizes that bypassed the design
   tokens, which left the page with an inverted hierarchy (h2 at 56-64px
   against an h1 at 52px), ExtraBold headings, Medium body copy, and
   letter-spacing: 0 on uppercase micro-labels.

   This block routes every one of those declarations back through the scale
   defined in :root. It is deliberately last in the cascade. When adding new
   type, use the tokens — do not add another one-off here.
   ========================================================================== */

/* --- Font assignment ------------------------------------------------------
   Montserrat carries headings and brand voice. Inter handles everything
   meant to be read or clicked.                                            */
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
}

h1,
h2,
h3,
.hero h1,
.page-hero h1,
.article-hero h1,
.team-banner h1,
.section h2,
.site-footer__nav h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
}

/* --- Display: h1 ---------------------------------------------------------- */
.hero h1,
.page-hero h1,
.team-hero h1,
.article-hero h1,
.team-banner h1 {
  font-size: var(--type-h1);
  letter-spacing: var(--track-display);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* --- Section headings: h2 -------------------------------------------------
   Every h2 on the site now resolves to one size. Previously five different
   sections each declared their own, three of which outran the h1.        */
.section h2,
.problem-section h2,
.clinical-use__copy h2,
.explainer-section__copy h2,
.action-section__heading h2,
.ecosystem-section__heading h2,
.featured-update__body h2,
.demo-copy h2,
.news-cta h2,
.feature-strip__heading h2,
.feature-strip__inner > h2 {
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* --- Card and item headings: h3 ------------------------------------------- */
.feature-item h3,
.team-card__body h3,
.news-card h3,
.news-card-grid--preview .news-card h3,
.update-card h3,
.legal-page h2 {
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-title);
  line-height: var(--leading-title);
}

.feature-item__label {
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-title);
}

.feature-item h3 small,
.feature-strip__subhead {
  font-size: var(--type-body-small);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
  line-height: var(--leading-small);
}

/* --- Lead paragraphs ------------------------------------------------------
   One lead size, used wherever a section opens with an intro paragraph.  */
.hero__lead,
.problem-section__copy p,
.action-section__heading p:last-child {
  font-size: var(--type-lead);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* The problem section's closing line is the emotional beat — it earns
   emphasis through weight and colour, not through another size step.     */
.problem-section__copy p:last-child {
  font-weight: var(--weight-label);
}

.feature-strip__footnote {
  font-size: var(--type-body-small);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-body);
}

/* --- Body copy ------------------------------------------------------------ */
p,
li {
  text-wrap: pretty;
}

.section p:not(.eyebrow),
.clinical-use__copy p:last-child,
.explainer-section__copy p:last-child,
.ecosystem-section__heading p:last-child,
.demo-copy p:not(.eyebrow):not(.disclaimer),
.page-hero p:last-child,
.split-section__body p,
.about-section__body p {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
  line-height: var(--leading-body);
}

/* --- Uppercase micro-labels ----------------------------------------------
   Uppercase at 11px is unreadable without positive tracking. This was the
   most visible unforced error in the original sheet.                     */
.eyebrow,
.hero__eyebrow,
.update-card__category,
.form-field label,
.site-footer__nav h2,
.legal-page__updated {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.hero__eyebrow {
  font-size: var(--type-eyebrow);
}

/* --- Meta: dates, read times, disclaimers -------------------------------- */
.news-card__meta,
.update-card__meta,
.related-update-card span {
  font-size: var(--type-meta);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-body);
  line-height: var(--leading-meta);
  font-variant-numeric: tabular-nums;
}

.disclaimer,
.video-disclaimer,
.explainer-video .video-disclaimer,
.action-section .action-showcase .video-disclaimer,
.demo-copy .demo-disclaimer,
.site-footer__disclaimer {
  font-size: var(--type-disclaimer);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
  line-height: var(--leading-disclaimer);
}

/* --- Interactive: nav, buttons, links ------------------------------------ */
.site-nav,
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--type-nav);
  font-weight: var(--weight-medium);
  letter-spacing: 0.005em;
}

.nav-cta,
.button,
.site-footer__button,
.text-link,
.site-footer__social {
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-weight: var(--weight-label);
  letter-spacing: 0.005em;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
}

/* --- Measure --------------------------------------------------------------
   Cap line length. Body text running the full 1180px container was a large
   part of why the page read as unstructured.                             */
.hero__lead {
  max-width: 46ch;
}

.problem-section__copy p,
.section p:not(.eyebrow),
.clinical-use__copy p:last-child,
.explainer-section__copy p:last-child,
.demo-copy p:not(.eyebrow):not(.disclaimer),
.page-hero p:last-child {
  max-width: 68ch;
}

/* --- Responsive -----------------------------------------------------------
   --type-h1 and --type-h2 already clamp down on narrow viewports, so the
   original per-breakpoint size overrides are redundant and conflicting.
   These re-assert the tokens at each breakpoint the old sheet targeted.  */
@media (max-width: 1100px) {
  .feature-item h3 {
    font-size: var(--type-h3);
  }
}

@media (max-width: 920px) {
  .feature-strip__heading h2,
  .feature-strip__inner > h2 {
    font-size: var(--type-h2);
  }
}

@media (max-width: 640px) {
  .hero h1,
  .page-hero h1,
  .team-hero h1,
  .team-banner h1 {
    font-size: var(--type-h1);
    line-height: 1.1;
  }

  .section h2,
  .problem-section h2,
  .clinical-use__copy h2,
  .explainer-section__copy h2,
  .action-section__heading h2,
  .feature-strip__heading h2,
  .feature-strip__inner > h2 {
    font-size: var(--type-h2);
  }

  .hero__eyebrow {
    font-size: var(--type-eyebrow);
  }

  .hero__lead,
  .problem-section__copy p {
    font-size: var(--type-body);
  }

  .clinical-use__copy p:last-child {
    font-size: var(--type-body);
  }

  .feature-item h3 {
    font-size: var(--type-h3);
    font-weight: var(--weight-heading);
  }

  .feature-item h3 small {
    font-size: var(--type-body-small);
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: var(--type-h1);
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: var(--type-h1);
  }

  .feature-item h3 small {
    font-size: var(--type-body-small);
  }
}

@media (max-width: 340px) {
  .hero h1 {
    font-size: var(--type-h1);
  }
}

/* --- Stragglers -----------------------------------------------------------
   Four declarations the pass above missed, caught by cascade audit. The
   9.5px label on very narrow screens was below legible minimum.          */
.news-card-grid--preview .news-card__meta {
  font-size: var(--type-meta) !important;
}

@media (max-width: 640px) {
  .feature-item__label {
    font-size: var(--type-h3);
  }

  .feature-strip__subhead {
    font-size: var(--type-body-small);
  }
}

@media (max-width: 380px) {
  .feature-item__label {
    font-size: var(--type-body-small);
  }
}

/* ==========================================================================
   HERO — visual rebuild
   Appended 2026-07-28 after on-screen audit.

   Four problems observed in the rendered page:
     1. The overlay ran 0.96 -> 0.88 -> 0.58 alpha across the full width, so
        the device photograph was almost entirely erased. The hero read as a
        flat blue band with a ghost behind it.
     2. The h1 shared --type-h1 with the interior page headers. A hero needs
        its own display step or it reads as just another section.
     3. Uniform 20px gap between title, deck, buttons and disclaimer — no
        vertical rhythm, so the block read as one undifferentiated slab.
     4. Height was 75svh minus header, landing near 580px. Too short to
        register as a hero on a laptop.
   ========================================================================== */

:root {
  /* Display step, above --type-h1. Hero only. */
  --type-display: clamp(2.75rem, 5.4vw, 4.25rem);   /* 44 -> 68px */
}

.hero {
  min-height: clamp(560px, 88svh, 880px);
  padding-block: clamp(64px, 9vh, 112px) clamp(56px, 8vh, 96px);
}

/* Let the footage read. The scrim is now weighted to the left third only,
   clearing almost entirely by 70% so the device is actually visible, with a
   vertical vignette to seat the sticky header and the section edge below. */
.hero::before {
  background:
    linear-gradient(
      100deg,
      rgba(1, 30, 62, 0.93) 0%,
      rgba(1, 42, 86, 0.86) 26%,
      rgba(1, 52, 106, 0.60) 48%,
      rgba(1, 61, 124, 0.26) 70%,
      rgba(1, 61, 124, 0.10) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 24, 48, 0.34) 0%,
      rgba(1, 24, 48, 0.04) 34%,
      rgba(1, 24, 48, 0.06) 62%,
      rgba(1, 24, 48, 0.40) 100%
    );
}

.hero__video {
  filter: saturate(1.06) contrast(1.04);
  object-position: 56% 52%;
}

/* --- Vertical rhythm ------------------------------------------------------
   Explicit intervals instead of a single uniform gap. The jump before the
   buttons is what separates "reading" from "acting".                     */
.hero__copy {
  display: block;
  max-width: 660px;
  width: min(100%, 660px);
}

.hero .eyebrow {
  margin: 0 0 1.15rem;
}

.hero h1 {
  font-size: var(--type-display);
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.hero__lead {
  color: rgba(255, 255, 255, 0.84);
  margin: 1.35rem 0 0;
  max-width: 54ch;
}

.hero__actions {
  gap: 0.75rem;
  margin-top: 2.15rem;
}

/* Hero buttons carry more weight than interior ones. */
.hero .button {
  min-height: 52px;
  padding: 0 1.6rem;
}

.hero .button--secondary {
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.06);
}

.hero__disclaimer {
  margin-top: 1.75rem;
  max-width: 60ch;
}

@media (max-width: 900px) {
  .hero::before {
    background:
      linear-gradient(
        100deg,
        rgba(1, 30, 62, 0.94) 0%,
        rgba(1, 42, 86, 0.88) 42%,
        rgba(1, 52, 106, 0.72) 72%,
        rgba(1, 61, 124, 0.52) 100%
      ),
      linear-gradient(180deg, rgba(1, 24, 48, 0.30), rgba(1, 24, 48, 0.44));
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: clamp(520px, 82svh, 700px);
  }

  .hero h1 {
    font-size: clamp(2.25rem, 10vw, 3rem);
    max-width: none;
  }

  .hero__lead {
    margin-top: 1.1rem;
  }

  .hero__actions {
    margin-top: 1.75rem;
  }
}

/* ==========================================================================
   TOKEN OVERRIDE — reclaim the scale from the legacy breakpoint blocks
   Appended 2026-07-28 after measuring computed styles in-browser.

   The original sheet redefined the type tokens inside three media queries
   (max-width 1100 / 640 / 380), e.g. `--type-h2: 2.4rem` at 1100px. Those
   silently defeated the clamp() scale for every viewport under 1100px —
   which is most laptops. Measured: h2 rendering at 38.4px instead of 28px.

   Media queries carry no extra specificity, so this plain :root at the end
   of the sheet wins on source order at every breakpoint. The clamp() values
   already handle responsive scaling, making the legacy blocks redundant.
   ========================================================================== */
:root {
  --type-h1: clamp(2.25rem, 4.2vw, 3.25rem);              /* 36 -> 52px */
  --type-h2: clamp(1.75rem, 2.6vw, 2.25rem);              /* 28 -> 36px */
  --type-h3: 1.0625rem;                                   /* 17px       */
  --type-button: 0.8125rem;                               /* 13px       */
  --type-feature-callout: clamp(1.75rem, 2.6vw, 2.25rem);
  --type-display: clamp(2.75rem, 5.4vw, 4.25rem);         /* 44 -> 68px */
}

/* The heading block sat on an opaque white panel inside a #f4f6fa section,
   which rendered as a stray white rectangle behind the copy. */
.action-section__heading,
.explainer-section__copy {
  background: transparent;
}

/* ==========================================================================
   CORRECTIONS — round two, from measured in-browser values
   ========================================================================== */

/* --type-h2 was pinned to its 28px floor on every laptop: 2.6vw only reaches
   the 36px ceiling at a 1385px viewport, so 1280-1440 screens all sat at the
   minimum. Re-expressed as an intercept + slope so the ramp actually runs
   across the common range (28px at 640 -> 36px at 1400). */
:root {
  --type-h2: clamp(1.75rem, 1.33rem + 1.05vw, 2.25rem);
  --type-feature-callout: clamp(1.75rem, 1.33rem + 1.05vw, 2.25rem);
}

/* The disclaimer broke to two lines mid-phrase directly under the buttons.
   It fits on one line inside the 660px copy column. */
.hero__disclaimer {
  max-width: none;
}

/* The news preview heading column was too narrow for its own headline —
   "Updates, milestones, and upcoming conversations." broke to four lines,
   and text-wrap: balance made it worse by orphaning "Updates," on line one.
   Widen the column and let it wrap naturally.

   Scoped above 920px: unscoped, this defeated the max-width:920px rule that
   collapses the preview to a single column, so the 320px floor plus the
   second column overflowed every phone viewport horizontally. */
@media (min-width: 921px) {
  .news-preview {
    grid-template-columns: minmax(320px, 0.68fr) minmax(0, 1fr);
  }
}

.news-preview__heading h2 {
  max-width: 18ch;
  text-wrap: pretty;
}

/* ==========================================================================
   BOARD FEEDBACK — round one (Alex Yang PDF + client email)
   Appended 2026-07-29.

   Display-layer changes only. Every string of client-supplied copy is
   untouched; what changes here is hierarchy, measure, and emphasis.
   ========================================================================== */

/* --- Hero: three actions --------------------------------------------------
   Two ways to watch the device work, then the conversion action. The two
   video links are peers and read as a pair; "Request Demo" carries the gold
   so there is exactly one primary target in the viewport (the header CTA
   is the same action, so it reinforces rather than competes).             */
.hero__actions .button--secondary {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  /* The legacy rule stretches every hero button to 100%, which turns three
     actions into a wall. Let the two video links share a row and give the
     primary its own full-width line. */
  .hero__actions .button {
    flex: 1 1 auto;
    padding: 0 1rem;
    width: auto;
  }

  .hero__actions .button--primary {
    flex-basis: 100%;
  }
}

/* --- The Challenge: the closing beat --------------------------------------
   Alex's PDF sets "you're chasing." in brand gold. As text on white that
   lands at ~1.9:1 contrast — unreadable, and a WCAG failure on the line the
   section exists to deliver. Same emphasis, delivered as a gold underline:
   the gold becomes the graphic accent, the words stay navy and legible, and
   it rhymes with the gold eyebrow rules already used across the site.

   Anchored to the text baseline rather than the line box — this paragraph
   runs at 1.65 leading, so a background-based marker wash floats away from
   the words it is meant to mark.                                         */
.problem-section__accent {
  text-decoration-color: var(--highlight-yellow);
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.18em;
}

/* --- In Tissue: match the animation section -------------------------------
   The section was a two-column split, which left the demonstration video at
   roughly half the width of the animation video directly above it — two
   videos of the same importance at two different sizes. Stack it the way
   the animation section already stacks: heading, then full-measure video. */
.action-section__inner {
  display: block;
  max-width: 1180px;
}

.action-section__heading {
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}

/* Measure only — the size comes from the unified h2 rule above. (An earlier
   pass here copied .explainer-section__copy's old font-size, which that same
   unified rule had already superseded; it made this one heading 51px against
   35px everywhere else on the page.) */
.action-section__heading h2 {
  max-width: 920px;
}

.action-section__heading p:last-child {
  max-width: 62ch;
}

/* Frame comes off for the same reason it came off the animation video: at
   full measure the video is the object, not something sitting on a card. */
.action-showcase {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.action-showcase__video .video-player-shell {
  border-radius: 10px;
}

/* --- Capability descriptions ----------------------------------------------
   Two-sentence descriptions need a slightly wider measure than the old
   fragments, or every column wraps to four ragged lines.                  */
.feature-item h3 small {
  max-width: 27ch;
}

/* --- Team page: section rhythm --------------------------------------------
   .board-section and .ecosystem-section both resolved to --soft-paper, so
   "Meet the Board" and the investor/partner logos ran together as one grey
   block — the only page on the site without the white/grey alternation the
   homepage and news page both use. The 1px top border was doing all the
   separating work, on a page that is otherwise 4,600px of scrolling.       */
.ecosystem-section {
  background: #ffffff;
}

/* ==========================================================================
   NEWS IMAGERY — one ratio, one treatment
   Appended 2026-07-29.

   Two problems were compounding.

   1. THE BUG. Every rule below declared `aspect-ratio` alongside `width:100%`
      but never `height:auto`. That works only while the <img> carries no
      height attribute. Once intrinsic width/height attributes were added
      (needed to stop the layout shifting as photos load), the attribute
      became the used height and the aspect-ratio was ignored outright — the
      three update cards rendered at 0.75, 0.75 and 0.36 against an intended
      1.78. `height:auto` is the missing half of that pattern.

   2. THE RATIO. The grid asked for 16/9 while every asset in the news set is
      natively 3:2 — 740x490, 740x493, 1536x1024. So each one was being
      centre-cropped to reach a shape none of them had. Standardising on 3:2
      means the images display exactly as they were authored: no crop, no
      subject drifting out of frame, and uniform card heights for free.
   ========================================================================== */
.update-card__image img,
.news-card img,
.featured-update__media img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* The featured card is the exception by design: its media column fills the
   full height of the body beside it, so it stays a fill rather than a ratio.
   min-height keeps it from collapsing if the body copy is ever shortened. */
.featured-update__media img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* One surface treatment across every news image. The set mixes photography
   with a product render on white; without a hairline the render has no edge
   and floats off the card. */
.update-card__image,
.featured-update__media,
.news-card > img {
  background: var(--soft-paper);
}

/* Homepage preview thumbnails were 88px squares cropping a 3:2 source — the
   hardest crop anywhere on the site, on the smallest image. At 3:2 they show
   the whole frame and match the ratio used on the news page itself. */
.news-card-grid--preview .news-card {
  grid-template-columns: 108px minmax(0, 1fr);
}

.news-card-grid--preview .news-card img {
  aspect-ratio: 3 / 2;
  height: auto;
  width: 108px;
}

/* --- Team + board: LinkedIn ------------------------------------------------
   A quiet outline mark at rest so it never competes with the face or the
   name, filling to navy on hover and keyboard focus.

   margin-top:auto pins the icon to the bottom of the card body, so every
   icon in a row lands on the same line however long the affiliation above
   it runs; the padding on the affiliation guarantees a minimum gap in the
   one card per row that has no slack left to distribute.                  */
.team-card__body {
  flex: 1 1 auto;
}

.team-card__body > span {
  padding-bottom: 0.95rem;
}

.team-card__linkedin {
  align-items: center;
  align-self: center;
  border: 1px solid rgba(74, 89, 115, 0.22);
  border-radius: 50%;
  color: var(--secondary-blue);
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  margin-top: auto;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  width: 32px;
}

.team-card__linkedin svg {
  fill: currentColor;
  height: 15px;
  width: 15px;
}

.team-card__linkedin:hover,
.team-card__linkedin:focus-visible {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #ffffff;
}

/* --- Interior page heroes -------------------------------------------------
   Team and News opened on a flat fill of --primary-blue while every other
   navy surface on the site (the demo section, the news CTA) carries a
   gradient with a soft highlight. Next to the homepage's video hero they
   read as unfinished rather than as a quieter tier.

   Deliberately NOT touching the h1 size. Interior pages sit at --type-h1
   (52px) against the homepage's --type-display (68px), and that gap is the
   type system working as intended — the fix is depth and presence, not
   scale. Same gradient language as .demo-section, plus enough vertical room
   that the block reads as a hero rather than a coloured strip.           */
.page-hero {
  background:
    radial-gradient(circle at 84% 16%, rgba(91, 132, 196, 0.30), rgba(91, 132, 196, 0) 38%),
    linear-gradient(135deg, var(--primary-blue) 0%, #0a4f8d 100%);
  padding-block: clamp(3.6rem, 6.4vw, 5.4rem) clamp(3.2rem, 5.6vw, 4.6rem);
}

.page-hero__inner {
  gap: 1.15rem;
}

/* The supporting line is the quietest thing in a navy block — it needs to
   hold its own without competing with the h1 above it. */
.page-hero p:last-child {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 56ch;
}

.page-hero .eyebrow {
  margin-bottom: 0;
}

/* --- Closing CTA ----------------------------------------------------------
   The CTA and the footer were both flat --primary-blue with a 14%-opacity
   hairline between them, so they merged into one ~600px navy slab at the
   bottom of both interior pages — the same failure as the board/ecosystem
   pair further up this page.

   Rather than recolour it, this settles the rule the site was already half
   using: navy content blocks (hero, demo, CTA) carry the gradient; the flat
   navy is reserved for the footer. The footer then reads as chrome, and the
   CTA reads as the last piece of content.                                 */
.news-cta {
  background:
    radial-gradient(circle at 88% 22%, rgba(91, 132, 196, 0.28), rgba(91, 132, 196, 0) 40%),
    linear-gradient(135deg, var(--primary-blue) 0%, #0a4f8d 100%);
}

/* ========================================================================== 
   JEFF REVIEW — hero clarity, brand scale, and seven-investor balance
   Appended 2026-08-03.

   Keep these review-sensitive values together. The hero wash can be tuned
   independently of the reel, while the localized fade keeps the copy legible
   without putting a blue veil over the product on the right side.
   ========================================================================== */

:root {
  --hero-wash-deep: rgba(1, 25, 52, 1);
  --hero-wash-copy: rgba(1, 36, 74, 0.78);
  --hero-wash-fade: rgba(1, 45, 91, 0.28);
}

.hero::before {
  background:
    linear-gradient(
      100deg,
      var(--hero-wash-deep) 0%,
      var(--hero-wash-deep) 18%,
      var(--hero-wash-copy) 40%,
      var(--hero-wash-fade) 64%,
      rgba(1, 45, 91, 0.08) 84%,
      rgba(1, 45, 91, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 20, 42, 0.20) 0%,
      rgba(1, 20, 42, 0.02) 46%,
      rgba(1, 20, 42, 0.20) 100%
    );
}

/* Jeff asked for a modestly larger wordmark, not a taller navigation bar. */
.brand img {
  max-height: 70px;
}

/* Seven approved investors read as an intentional 4 + 3 arrangement. */
.logo-grid:not(.logo-grid--partners) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.logo-grid:not(.logo-grid--partners) article {
  grid-column: span 3;
}

.logo-grid:not(.logo-grid--partners) article:nth-last-child(-n + 3) {
  grid-column: span 4;
}

@media (max-width: 760px) {
  :root {
    --hero-wash-deep: rgba(1, 25, 52, 0.92);
    --hero-wash-copy: rgba(1, 36, 74, 0.82);
    --hero-wash-fade: rgba(1, 45, 91, 0.46);
  }

  .hero::before {
    background:
      linear-gradient(
        180deg,
        var(--hero-wash-deep) 0%,
        var(--hero-wash-copy) 58%,
        var(--hero-wash-fade) 100%
      );
  }

  .brand img {
    max-height: 58px;
  }

  .logo-grid:not(.logo-grid--partners) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-grid:not(.logo-grid--partners) article,
  .logo-grid:not(.logo-grid--partners) article:nth-last-child(-n + 3) {
    grid-column: auto;
  }

  .logo-grid:not(.logo-grid--partners) article:last-child {
    grid-column: 1 / -1;
  }
}