/* The pages' own Google Fonts link requests Open Sans without a weight, which serves
   400 only — so the 700 wordmark rendered as browser-synthesised faux bold and did not
   match the hub. The hub loads real 400 and 700 faces via @fontsource. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* Mirrors the hub's AppBar and Footer (web/src/components/Layout.tsx). Hand-copied
   rather than shared, because these pages are static HTML with no React on them —
   so a change to the hub's real nav does NOT reach here.

   Font sizes are px, not rem: these pages load Bootstrap 3, which sets
   html{font-size:10px}, so every rem here would render at 62.5% of the hub's. */
.e360-appbar {
  background: #0c4a60;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 0 24px;
  font-family:
    'Open Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}
.e360-brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.e360-brand img {
  display: block;
  height: 44px;
  width: auto;
}
.e360-nav {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.e360-nav a,
.e360-footer a {
  color: inherit;
  text-decoration: none;
}
.e360-nav a {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02857em;
  padding: 6px 8px;
}
.e360-nav a:hover,
.e360-footer a:hover {
  text-decoration: underline;
}
.e360-footer {
  position: sticky;
  bottom: 0;
  background: #616161;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 16px;
  font-size: 14px;
  font-family:
    'Open Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}
.e360-footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.e360-copy {
  margin-left: auto;
}