/* Preserve approved desktop geometry; adapt content groups below its usable rail. */
@media (max-width: 1399px) {
  .page.products-page .page-head { grid-template-columns: minmax(0,7fr) minmax(0,5fr); column-gap: clamp(32px,4vw,56px); }
  .page.products-page .page-head h1 { font-size: clamp(40px,4.75vw,64px); }
  .page.products-page .page-head > .product-intro { font-size: 20px; line-height: 30px; }
  /* The product view and its magnified detail form one composed figure. */
  .products-page .observer-showcase { display: block; position: relative; padding-bottom: clamp(24px,3.2vw,44px); }
  .products-page .observer-figure { position: relative; width: 80%; }
  .products-page .observer-detail { position: absolute; width: 55%; right: 0; bottom: 16px; }
  .products-page .product-secondary { gap: 48px; }
  .products-page .product-secondary-stage { position: relative; padding-bottom: 32px; }
  .products-page .product-secondary-detail { position: absolute; width: 26%; right: 0; bottom: 0; }
  .page.governance-page .page-head { width: var(--rail); }
  .page.governance-page .page-head h1 { font-size: clamp(40px,4.2vw,56px); white-space: normal; }
  .page.governance-page .page-head > p { position: static; transform: none; width: min(100%,736px); margin: 24px auto 0; }
  .governance-page .governance-seals { gap: 24px; }
  .governance-page .credential-mark { height: 144px; margin-bottom: 24px; }
  .governance-page .credential-mark img { width: 128px; height: 128px; }
  .governance-page .governance-dialogue-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 40px; align-items: center; }
  .governance-page .governance-document { align-self: center; aspect-ratio: 4/3; }
  .governance-page #governance-dialogue .governance-records > li:not(.governance-consensus-row),
  .governance-page .governance-consensus { grid-template-columns: 136px minmax(0,1fr) 24px; gap: 16px; }
  .governance-page #governance-dialogue .governance-records h3 { font-size: 22px; line-height: 30px; }
  .governance-page #governance-dialogue .governance-records p { font-size: 18px; line-height: 28px; }
  .governance-page #governance-dialogue .governance-records h3 small { top: 0; font-size: 15px; line-height: 24px; }
  .governance-page #governance-dialogue .governance-hub-row h3 > span { white-space: normal; }
}
@media (max-width: 1055px) {
  .page.products-page .page-head { gap: 24px 32px; }
  .page.products-page .page-head h1 { font-size: clamp(36px,4.6vw,48px); }
  .page.products-page .page-head > .product-name { font-size: 25px; line-height: 34px; }
  .products-page .product-secondary { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 32px; }
  .products-page .product-secondary h2 { font-size: 32px; line-height: 42px; }
  .products-page .product-secondary-copy > p { font-size: 18px; line-height: 28px; }
  .products-page .product-detection-metrics { gap: 24px; }
  .products-page .product-detection-metrics dt { font-size: 15px; line-height: 24px; }
  .products-page .product-detection-metrics dd { font-size: 28px; line-height: 36px; }
  .governance-page .governance-dialogue-layout { gap: 32px; }
  .governance-page .governance-seal h3 { font-size: 22px; line-height: 30px; }
  .governance-page .governance-seal p { font-size: 16px; line-height: 26px; }
}
@media (max-width: 833px) {
  /* Keep supporting illustrations complete and compact beside the reading sequence. */
  .products-page .product-secondary { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .products-page .product-secondary-copy { order: -1; max-width: 640px; }
  .products-page .product-secondary-copy > p { max-width: none; }
  .products-page .product-secondary-stage { width: 100%; max-width: 720px; margin-inline: auto; }
  .governance-page .governance-dialogue-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .governance-page .governance-document { width: min(100%,400px); justify-self: center; }
  .governance-page #governance-dialogue .governance-records > li:not(.governance-consensus-row),
  .governance-page .governance-consensus { grid-template-columns: 176px minmax(0,1fr) 24px; gap: 24px; }
  .governance-page #governance-dialogue .governance-records h3 { font-size: 24px; line-height: 32px; }
  .governance-page #governance-dialogue .governance-records p { font-size: 20px; line-height: 30px; }
}
@media (max-width: 767px) {
  .page.products-page .page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 40px; }
  .page.products-page .page-head > .product-name { font-size: 24px; line-height: 32px; }
  .page.products-page .page-head h1 { font-size: clamp(36px,6.4vw,48px); line-height: 1.25; }
  .page.products-page .page-head > .product-intro { font-size: 18px; line-height: 28px; max-width: 40em; }
  .products-page .observer-figure { width: 80%; border-radius: 8px; }
  .products-page .observer-detail { width: 55%; bottom: 12px; border-radius: 8px; }
  .products-page .product-secondary-crop { border-radius: 8px; }
  .products-page .product-secondary-stage { padding-bottom: 24px; }
  .products-page .product-secondary h2 { font-size: 30px; line-height: 40px; }
  .products-page .chapter { padding-block: 40px; }
  .products-page #products-capabilities { padding-top: 48px; }
  .page.products-page .section-heading h2 { font-size: 30px; line-height: 1.35; }
  .page.governance-page .page-head,
  .page.about-page .page-head { padding-block: 40px; }
  .page.governance-page .page-head h1,
  .page.about-page .page-head h1 { font-size: clamp(34px,6.4vw,46px); line-height: 1.3; }
  .page.governance-page .page-head > p,
  .page.about-page .page-head > p { font-size: 20px; line-height: 30px; margin-top: 20px; }
  .governance-page .page-head > p > span,
  .about-page .page-head > p > span { display: inline; }
  .page.governance-page .section-heading h2 { font-size: 30px; line-height: 1.35; }
  .governance-page #governance-independence { padding-block: 48px; }
}
@media (max-width: 599px) {
  .page.governance-page .page-head > p,
  .page.about-page .page-head > p { font-size: 18px; line-height: 28px; }
  .page.governance-page .chapter,
  .page.about-page .chapter { padding-block: 40px; }
  .governance-page .governance-document { width: min(100%,360px); }
  .governance-page .governance-dialogue-layout { gap: 24px; }
  .governance-page #governance-dialogue .section-heading { margin-bottom: 24px; }
  .governance-page #governance-dialogue .governance-records > li:not(.governance-consensus-row),
  .governance-page .governance-consensus { grid-template-columns: 112px minmax(0,1fr) 20px; gap: 16px; }
  .governance-page .governance-records > li { padding-block: 24px; }
  .governance-page .governance-records > .governance-consensus-row { padding: 0; }
  .governance-page .governance-consensus { width: calc(100% + 16px); margin-inline: -8px; padding: 24px 8px; }
  .governance-page .governance-consensus-arrow { width: 20px; height: 20px; }
  .governance-page #governance-dialogue .governance-records h3 { font-size: 22px; line-height: 30px; }
  .governance-page #governance-dialogue .governance-records h3 small { font-size: 14px; line-height: 22px; margin-top: 4px; }
  .governance-page #governance-dialogue .governance-hub-row h3 > span { display: inline; }
  .governance-page #governance-dialogue .governance-records p { font-size: 18px; line-height: 28px; }
}
@media (max-width: 389px) {
  .page.products-page .page-head h1 { font-size: 34px; }
  .governance-page #governance-dialogue .governance-records > li:not(.governance-consensus-row),
  .governance-page .governance-consensus { grid-template-columns: 96px minmax(0,1fr) 20px; gap: 12px; }
  .governance-page #governance-dialogue .governance-records h3 { font-size: 19px; line-height: 28px; }
}

/* About: the illustration and explanation stay one reading unit. */
@media (max-width: 1399px) {
  .page.about-page .about-overview { grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(32px,4vw,48px); }
  .about-page .about-illustration { position: relative; height: auto; aspect-ratio: 13/10; }
  .about-page .about-trio { position: absolute; inset: 0; width: 100%; height: 100%; }
  :is(.about-page,.governance-page) .about-action { grid-template-columns: 200px minmax(0,1fr) max-content; gap: 32px; }
  :is(.about-page,.governance-page) .about-action > * { min-width: 0; }
  :is(.about-page,.governance-page) .about-action-label svg { flex: 0 0 24px; }
}
@media (max-width: 1055px) {
  .about-page .about-prose h2 { font-size: 32px; line-height: 42px; }
  :is(.about-page,.governance-page) .about-action { grid-template-columns: minmax(0,1fr) max-content; gap: 8px 32px; align-items: start; }
  :is(.about-page,.governance-page) .about-action h2 { grid-column: 1; grid-row: 1; font-size: 30px; line-height: 40px; }
  :is(.about-page,.governance-page) .about-action p { grid-column: 1; grid-row: 2; }
  :is(.about-page,.governance-page) .about-action-label { grid-column: 2; grid-row: 1/3; align-self: center; }
}
@media (min-width: 672px) and (max-width: 833px) {
  .page.about-page .about-overview { grid-template-columns: minmax(0,4fr) minmax(0,5fr); gap: 24px; }
}
@media (max-width: 767px) {
  .about-page .about-prose h2 { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
}
@media (max-width: 671px) {
  .page.about-page .about-overview { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .about-page .about-prose { display: contents; }
  .about-page .about-prose h2 { grid-row: 1; margin: 0; }
  .about-page .about-illustration { grid-row: 2; width: min(100%,320px); aspect-ratio: 1; justify-self: center; margin: 4px 0; }
  .about-page .about-prose > p { margin: 0; }
  .about-page .about-prose > p + p { margin-top: 0; }
  :is(.about-page,.governance-page) .about-action { grid-template-columns: minmax(0,1fr); gap: 12px; width: 100%; margin-inline: 0; padding: 24px 0; }
  :is(.about-page,.governance-page) .about-action:before { inset-inline: -8px; }
  :is(.about-page,.governance-page) .about-action h2 { grid-column: 1; grid-row: 1; font-size: 28px; line-height: 36px; }
  :is(.about-page,.governance-page) .about-action p { grid-column: 1; grid-row: 2; font-size: 18px; line-height: 28px; }
  :is(.about-page,.governance-page) .about-action-label { grid-column: 1; grid-row: 3; justify-content: flex-start; justify-self: start; font-size: 17px; line-height: 26px; }
}
@media (max-width: 599px) {
  .about-page .about-prose p { font-size: 18px; line-height: 28px; }
}