:root { color-scheme: light; --navy: #0b2e53; --teal: #007a88; --muted: #5c7188; --line: #d6e6ea; font-family: Arial, Helvetica, sans-serif; color: var(--navy); background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
.wrap { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
a { color: inherit; }
img { display: block; height: auto; }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 88px; border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.header-mark { width: 34px; }
.header-wordmark { width: 122px; }
.site-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: .8125rem; }
.site-nav a { min-height: 44px; display: flex; align-items: center; color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-nav a[href]:hover, .site-nav a[aria-current="page"] { color: var(--teal); }
.site-nav a[aria-disabled="true"] { cursor: default; }
.utilities { display: flex; gap: 8px; margin-left: 18px; }
button { width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; color: var(--navy); border: 0; background: transparent; }
button:first-child { color: var(--teal); }
button:disabled { opacity: 1; cursor: default; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu { display: none; cursor: pointer; }
.mobile-navigation { position: absolute; z-index: 4; top: calc(100% - 1px); left: 0; right: 0; padding: 12px 24px 20px; border: 1px solid var(--line); border-radius: 0 0 14px 14px; background: white; box-shadow: 0 18px 40px #0b2e5314; }
.mobile-navigation a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.mobile-navigation a[href]:hover, .mobile-navigation a[aria-current="page"] { color: var(--teal); }
.mobile-navigation a:last-child { border-bottom: 0; }
[hidden] { display: none !important; }
main { flex: 1; display: flex; align-items: center; }
.hero { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: 80px; padding: 92px 8px 104px; }
h1 { font-size: clamp(2.5rem, 3.4vw, 3.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 26px; }
.description { max-width: 650px; font-size: 1.25rem; line-height: 1.6; color: var(--muted); margin: 0; }
.support { color: var(--teal); font-size: 1.125rem; line-height: 1.5; margin: 32px 0 0; }
.hero-mark { width: 100%; max-width: 230px; }
.footer { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); padding-block: 24px; }
.footer-identity { display: flex; align-items: center; min-height: 44px; }
.footer img { width: 100px; }
.footer nav { display: flex; flex-wrap: wrap; column-gap: 28px; }
.footer nav a { display: flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--muted); text-decoration: none; cursor: default; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 2px; }
.skip-link { position: absolute; left: 24px; top: -80px; padding: 12px; background: white; z-index: 1; }
.skip-link:focus { top: 12px; }
@media (max-width: 960px) {
  .site-nav { display: none; }
  .menu { display: grid; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 48px); }
  .header { min-height: 72px; }
  .header-wordmark, .profile { display: none; }
  .header-mark { width: 30px; }
  .utilities { gap: 4px; margin-right: -10px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 32px 0 42px; }
  main { align-items: flex-start; }
  .hero-mark { grid-row: 1; width: 112px; justify-self: center; }
  h1 { font-size: 2.5rem; max-width: 260px; margin-bottom: 24px; }
  .description { font-size: 1rem; line-height: 1.6; }
  .support { font-size: 1rem; margin-top: 24px; }
  .footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 16px 0 20px; }
  .footer nav { column-gap: 22px; row-gap: 0; }
}