/* Revision 09: retain the approved hero, restore the R7 panel, blend the scrollbar with the navy palette. */
html {
  scrollbar-color: #648a99 #081624;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}
/* Non-auto standard properties override WebKit thumb/track styling in Chromium.
   Use the richer native skin where supported, and the standard colors elsewhere. */
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; scrollbar-width: auto; }
  html::-webkit-scrollbar { width: 14px; height: 14px; background: #081624; }
  html::-webkit-scrollbar-track {
    background: #081624;
    border-left: 0;
    box-shadow: none;
  }
  html::-webkit-scrollbar-thumb {
    min-height: 52px;
    border: 2px solid #081624;
    border-radius: 5px;
    background: linear-gradient(180deg, #6e95a3, #547b8d);
    box-shadow: none;
  }
  html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #80abb6, #638fa0); }
  html::-webkit-scrollbar-thumb:active { background: #80abb6; }
  html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  html::-webkit-scrollbar-corner { background: #081624; }
}

/* Let the hero grow naturally instead of squeezing the enlarged copy into a viewport. */
.hero-content { padding-bottom: 96px; }
.hero-lead {
  max-width: 880px;
  margin: 36px 0 32px;
  color: #e2eaed;
  font-size: clamp(23px, 1.65vw, 28px);
  line-height: 1.75;
}
.hero .primary-link { width: 266px; height: 66px; font-size: 19px; }
.hero-portal-intro {
  width: min(1320px, 100%);
  margin-top: 72px;
  padding-top: 40px;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
}
.hero-portal-label { margin-bottom: 14px; font-size: 14px; letter-spacing: .14em; }
.hero-portal-copy h2 { font-size: clamp(28px, 2.2vw, 36px); line-height: 1.45; }
.hero-portal-copy > p:last-child {
  max-width: 42ch;
  margin-top: 16px;
  color: #c6d7dc;
  font-size: 20px;
  line-height: 1.75;
}
.hero-portal-stats > div {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 14px;
  padding: 8px 24px;
}
.hero-portal-stats dt { grid-row: 2; font-size: 16px; line-height: 1.5; word-break: keep-all; }
.hero-portal-stats dd { grid-row: 1; font-size: 54px; }

@media (max-width: 1100px) {
  .hero-portal-intro { grid-template-columns: 1fr; gap: 32px; margin-top: 60px; padding-top: 36px; }
  .hero-portal-copy { max-width: 700px; }
  .hero-portal-stats { width: min(650px, 100%); }
  .hero-portal-stats > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .hero-content { padding-bottom: 64px; }
  .hero-lead { max-width: 100%; margin: 28px 0; font-size: 20px; line-height: 1.75; }
  .hero .primary-link { width: 248px; height: 62px; font-size: 18px; }
  .hero-portal-intro { margin-top: 52px; padding-top: 32px; gap: 32px; }
  .hero-portal-label { font-size: 13px; margin-bottom: 12px; }
  .hero-portal-copy h2 { font-size: 26px; }
  .hero-portal-copy > p:last-child { margin-top: 14px; font-size: 18px; }
  .hero-portal-stats > div { padding: 0 12px; gap: 12px; }
  .hero-portal-stats dt { font-size: 14px; }
  .hero-portal-stats dd { font-size: 44px; }
}
@media (forced-colors: active) {
  html { scrollbar-color: auto; scrollbar-width: auto; }
  html::-webkit-scrollbar,
  html::-webkit-scrollbar-track { background: Canvas; border-color: CanvasText; box-shadow: none; }
  html::-webkit-scrollbar-thumb,
  html::-webkit-scrollbar-thumb:hover,
  html::-webkit-scrollbar-thumb:active { background: CanvasText; border-color: Canvas; box-shadow: none; }
}