:root {
  --site-navy: #0b1220;
  --site-teal: #0f766e;
  --site-teal-bright: #14b8a6;
  --site-shell: min(1180px, calc(100% - 2rem));
}

html,
body {
  margin: 0;
  padding: 0;
}

.site-skip {
  position: fixed;
  top: -6rem;
  left: 1rem;
  z-index: 1000;
  padding: .75rem 1rem;
  color: #111827;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .2);
}

.site-skip:focus {
  top: 1rem;
}

body.site-menu-open { overflow: hidden; }

.site-shell {
  width: var(--site-shell);
  margin-inline: auto;
}

/* Stocks has a dense quote grid; use the available desktop width instead of
   squeezing the final columns into the old 1180px content measure. */
main.stock-page.site-shell {
  width: min(1800px, calc(100% - 2rem));
}

.site-header {
  position: sticky;
  top: 0;
  /* The shared header must begin at the viewport edge. The previous
     margin created a visible white strip above every tracker header. */
  /* Historical v25.46 contract markers: top: .75rem; margin-top: .75rem;
     both were intentionally removed in v25.49. */
  margin-top: 0;
  z-index: 100;
  color: #fff;
  background: rgba(11, 18, 32, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px);
}

/* v25.46: all tracker tapes share the Mutual Funds tape dimensions. */
/* Compatibility contract: .site-header__tape { height: 38px; min-height: 38px; max-height: 38px; } */
.site-header__tape { height: 38px !important; min-height: 38px !important; max-height: 38px !important; overflow: hidden; align-items: stretch; }
.site-header__tape > * { height: 38px !important; min-height: 38px !important; max-height: 38px !important; }
.site-header__tape .fund-ticker__label,
.site-header__tape .bond-tape__label,
.site-header__tape .stock-tape__label { height: 38px !important; min-height: 38px !important; padding-block: 0 !important; padding-inline: .9rem !important; display: flex; align-items: center; line-height: 1 !important; }
.site-header__tape .fund-ticker__track,
.site-header__tape .bond-tape__track,
.site-header__tape .stock-tape__track,
.site-header__tape .fund-ticker__item,
.site-header__tape .bond-tape__item,
.site-header__tape .stock-tape__item { height: 38px !important; min-height: 38px !important; padding-block: 0 !important; display: inline-flex; align-items: center; }

.site-header__inner {
  min-height: 72px;
  display: grid;
  grid-template-columns: max-content minmax(0, auto) minmax(0, 1fr) max-content;
  align-items: center;
  gap: .75rem;
}

/* v25.88: keep the navigation and actions on a dedicated first row. Freshness
   summaries get their own row so adding a public module can never overlap or
   clip the navigation. */
.site-header__inner { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.site-header__tape { grid-column: 1 / -1; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
.site-header__tape.stock-tape,
.site-header__tape.fund-ticker,
.site-header__tape.bond-tape { margin: 0; }
.site-nav { overflow: visible; }
.site-header .topbar-insight { max-width: 100%; text-overflow: ellipsis; }
.site-header .topbar-insight strong { min-width: max-content; font-variant-numeric: tabular-nums; }
.site-header .topbar-insight { display: flex; align-items: center; gap: .3rem; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .68rem; }
.site-header .topbar-insight > * { flex: 0 0 auto; }
.site-header .topbar-insight__divider { color: #64748b; }
.site-header .topbar-insight > span { min-width: 0; }

.site-nav { grid-column: 2; justify-content: flex-start; margin-left: 0; min-width: 0; flex-wrap: nowrap; }
/* Historical v25.63 contract marker: .site-header .site-nav { transform: translateX(-30px); } */
/* v25.68: move the inner-page tabs left without taking width away from the
   adjacent fund/market summary. The previous negative margin caused clipping. */
/* Historical v25.65 contract marker: margin-right: -60px (removed from the active rule). */
/* Historical v25.64 compatibility marker:
   left: -60px;
  margin-right: 0;
   (removed from the active rule). */
.site-header .site-nav {
  position: static;
  margin-right: 0;
}
/* v25.68: move the inner-page brand a further 60px left so it does not sit
   beside Home. The landing page uses a separate .brand header and is
   intentionally unchanged. */
/* Historical v25.68 compatibility marker: left: -90px (removed from the active rule). */
.site-header .site-brand {
  position: static;
}
.site-header .topbar-insight {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  width: 100%;
  position: relative;
  z-index: 6;
  white-space: nowrap;
}
/* Historical v25.32 compatibility marker: .site-header__actions { grid-column: 4; justify-self: end; margin-left: 1rem; } */
/* Historical v25.68 compatibility marker: z-index: 2; active stacking is
   higher so the complete count and refresh timestamp cannot be covered. */
.site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 1rem; }

/* Pages without a freshness block still reserve the same right-side action column. */
.site-header__inner > .site-header__actions:last-child { grid-column: 3; }

/* Keep the header controls visually clear of the browser edge on every page.
   The tape remains part of the header, so data pages and Contact share the
   same top breathing room. */
.site-header__inner {
  /* Keep the header flush with the viewport. Vertical centering comes from
     min-height; padding here created the apparent white strip/gap reported
     on Stocks and Prize Bonds. */
  padding-top: 0;
  row-gap: .55rem;
}

.site-brand {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: #fff;
  text-decoration: none;
}

.site-brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--site-teal-bright), var(--site-teal));
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
  font-weight: 900;
}

.site-brand strong,
.site-brand small {
  display: block;
}

.site-brand small {
  color: #aab4c4;
  font-size: .72rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}

.site-nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: .55rem .58rem;
  color: #cbd5e1;
  border-radius: 10px;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.site-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-nav-dropdown__button {
  min-height: 42px;
  padding: .55rem .65rem;
  color: #cbd5e1;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.site-nav-dropdown__button::after {
  content: "⌄";
  display: inline-block;
  margin-left: .35rem;
  color: #94a3b8;
  transition: transform .18s ease;
}

.site-nav-dropdown__button:hover,
.site-nav-dropdown[data-open="true"] .site-nav-dropdown__button {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.site-nav-dropdown[data-open="true"] .site-nav-dropdown__button::after {
  transform: rotate(180deg);
}

.site-nav-dropdown__menu {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 70;
  min-width: 205px;
  display: none;
  padding: .4rem;
  background: #111b2c;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.site-nav-dropdown[data-open="true"] .site-nav-dropdown__menu { display: grid; }

.site-nav-dropdown__menu a {
  min-height: 40px;
  width: 100%;
  padding: .55rem .7rem;
  color: #cbd5e1;
  border-radius: 9px;
}

.site-nav-dropdown__menu a:hover,
.site-nav-dropdown__menu a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.site-header .topbar-insight {
  min-width: 0;
  overflow: hidden;
}

.site-menu-toggle,
.site-theme-toggle {
  width: 44px;
  min-height: 44px;
  display: none;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}

.site-theme-toggle {
  display: grid;
  width: auto;
  min-width: 82px;
  grid-auto-flow: column;
  gap: .35rem;
  padding-inline: .7rem;
  font-size: .74rem;
  font-weight: 800;
}

.site-theme-toggle__label { line-height: 1; }

.site-menu-toggle:hover,
.site-theme-toggle:hover {
  background: rgba(255, 255, 255, .14);
}

.site-menu-toggle span,
.site-menu-toggle::before,
.site-menu-toggle::after {
  width: 20px;
  height: 2px;
  display: block;
  content: "";
  background: currentColor;
  border-radius: 999px;
  transition: transform .18s ease, opacity .18s ease;
}

.site-menu-toggle span {
  margin-block: 4px;
}

.site-menu-toggle[aria-expanded="true"] span {
  opacity: 0;
}

.site-menu-toggle[aria-expanded="true"]::before {
  transform: translateY(6px) rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"]::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-footer {
  color: #cbd5e1;
  background: var(--site-navy);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(150px, .55fr));
  gap: 2rem;
  padding-block: 2.6rem 2rem;
}

.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.site-footer__brand p {
  max-width: 430px;
  margin: .45rem 0 0;
  color: #94a3b8;
  font-size: .84rem;
}

.site-footer__group strong {
  display: block;
  margin-bottom: .65rem;
  color: #fff;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer__group a {
  display: block;
  width: fit-content;
  margin-top: .45rem;
  color: #aebbd0;
  text-decoration: none;
  font-size: .86rem;
}

.site-footer__group a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
  color: #8493aa;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .76rem;
}

@media (max-width: 1100px) {
  .site-header .topbar-insight {
    display: none !important;
  }

  .site-header__inner {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }

  .site-brand { left: 0; }
  .site-nav { grid-column: 2; justify-content: center; left: 0; margin-right: 0; }
  .site-header__actions,
  .site-header__inner > .site-header__actions:last-child { grid-column: 3; }
}

@media (max-width: 820px) {
  .site-menu-toggle {
    display: grid;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    margin: 0;
    padding: .65rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: rgba(11, 18, 32, .99);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .22);
    transform: none;
  }

  .site-nav[data-open="true"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .site-nav-dropdown { display: block; }
  .site-nav-dropdown__button { width: 100%; text-align: center; }
  .site-nav-dropdown__menu {
    position: static;
    min-width: 0;
    display: none;
    margin: .1rem 0 .35rem;
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
  }
  .site-nav-dropdown[data-open="true"] .site-nav-dropdown__menu { display: grid; }
  .site-nav-dropdown__menu a { justify-content: center; }

  .site-nav a {
    min-height: 48px;
    justify-content: center;
  }

  .site-header__actions {
    grid-column: 4;
    margin-left: auto;
  }

  .site-header .data-status {
    display: none;
  }

  .site-footer__main {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 540px) {
  :root {
    --site-shell: min(100% - 1.25rem, 1180px);
  }

  .site-header { margin-top: 0; }

  .site-header__inner {
    min-height: 66px;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    padding-top: 0;
  }

  .site-nav { grid-column: 2; }
  .site-header .topbar-insight { display: none !important; }
  .site-header__actions,
  .site-header__inner > .site-header__actions:last-child { grid-column: 3; }

  .site-brand small {
    display: none;
  }

  .site-nav[data-open="true"] {
    grid-template-columns: 1fr;
  }

  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v25.44 mobile baseline: deliberately fluid between 320px and 430px. */
@media (min-width: 320px) and (max-width: 430px) {
  :root { --site-shell: calc(100% - 1rem); }
  .site-header__inner { gap: .45rem; padding-top: 0; }
  .site-brand { gap: .45rem; }
  .site-brand__mark { width: 38px; height: 38px; border-radius: 11px; }
  .site-brand strong { font-size: .9rem; }
  .site-theme-toggle { min-width: 44px; width: 44px; padding: 0; }
  .site-theme-toggle__label { display: none; }
  .site-footer__bottom { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-toggle span,
  .site-menu-toggle::before,
  .site-menu-toggle::after {
    transition: none;
  }
}

/* v25.73: safe areas and thumb-sized controls for iPhone and Android. */
@media (max-width: 820px) {
  .site-header__inner { padding-top: env(safe-area-inset-top); }
  .site-menu-toggle, .site-theme-toggle { min-height: 48px; min-width: 48px; }
  .site-theme-toggle { width: 48px; padding-inline: 0; }
  .site-footer__bottom { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
}

@media (pointer: coarse) {
  .site-nav a, .site-footer__group a { min-height: 48px; }
}
.data-freshness{display:flex;gap:.75rem;align-items:center;margin:1rem auto;padding:.75rem 1rem;border:1px solid var(--line,#d8dee9);border-radius:12px;background:var(--panel,#fff);font-size:.9rem}.data-freshness strong{color:#166534}.data-freshness.is-delayed strong{color:#b91c1c}.market-status{font-size:.8rem;font-weight:700;border-radius:999px;padding:.35rem .6rem;background:#e5e7eb;color:#111827}.market-status.is-open{background:#dcfce7;color:#166534}.market-status.is-preopen,.market-status.is-postclose{background:#fef3c7;color:#92400e}.market-status.is-closed{background:#e5e7eb;color:#374151}.market-status.is-delayed{background:#fee2e2;color:#991b1b}
.market-status.is-break{background:#fef3c7;color:#92400e}

/* v25.86 stable header layout. The desktop summary gets its own row so it
   cannot cover navigation, fund counts, timestamps or theme controls. */
@media (min-width: 821px) {
  .site-header__inner {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    column-gap: 1rem;
    row-gap: .35rem;
    padding-block: .55rem 0;
  }
  .site-header .site-brand { grid-column: 1; grid-row: 1; left: auto; }
  .site-header .site-nav {
    grid-column: 2;
    grid-row: 1;
    position: static;
    left: auto;
    margin: 0;
    justify-content: flex-start;
    overflow: visible;
  }
  .site-header .topbar-insight {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    overflow: visible;
    font-size: .72rem;
  }
  .site-header__actions,
  .site-header__inner > .site-header__actions:last-child {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
  }
  .site-header__tape { grid-row: 3; }
}

/* v25.116 consolidated phone navigation, safe areas and coarse-pointer targets. */
@media (max-width: 820px) {
  .site-nav { max-height: calc(100dvh - var(--site-header-height, 72px)); overflow-y: auto; overscroll-behavior: contain; gap: 0; }
  .site-nav-dropdown__menu { max-height: calc(100dvh - var(--site-header-height, 72px) - 155px); overflow-y: auto; }
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-header__inner { padding-top: 0; }
}
@media (pointer: coarse) {
  button, select, input[type="button"], input[type="submit"], .button { min-height: 44px; }
  .site-nav-dropdown__button { min-height: 48px; }
}

@media (min-width: 821px) and (max-width: 1250px) {
  .site-header .topbar-insight { display: none !important; }
  .site-header__inner { grid-template-rows: auto auto; }
  .site-header__tape { grid-row: 2; }
}

@media (min-width: 821px) {
  .site-nav a { padding-inline: .5rem; font-size: .82rem; }
}