:root {
  color: #10253c;
  background: #f5f8f7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: #f5f8f7; }
a { color: #087c9e; text-underline-offset: 3px; }
a:hover { color: #075b77; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #08a9cf;
  outline-offset: 3px;
  border-radius: 4px;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1160px;
  min-height: 76px;
  margin: 0 auto;
  padding: 16px 28px;
}

.content-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #10253c;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
}

.lane-mark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 31px;
  height: 31px;
  padding: 7px 6px;
  border-radius: 9px;
  background: #10253c;
  transform: rotate(-4deg);
}

.lane-mark i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: skewX(-20deg);
}

.lane-mark i:nth-child(2) { width: 72%; margin-left: auto; background: #71d8d0; }

.content-nav, .content-footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 20px;
}

.content-nav a, .content-footer-nav a {
  color: #415c6e;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.content-nav a:hover, .content-footer-nav a:hover { color: #087c9e; }
.content-nav a:last-child { color: #087e78; }

.content-main {
  width: min(1030px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 112px;
}

.content-hero {
  max-width: 790px;
  margin-bottom: 48px;
}

.content-kicker {
  margin: 0 0 16px;
  color: #087c9e;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.content-hero h1 {
  max-width: 820px;
  margin: 0;
  color: #10253c;
  font-size: clamp(42px, 7vw, 76px);
  letter-spacing: -.065em;
  line-height: .99;
}

.content-lead {
  max-width: 720px;
  margin: 25px 0 0;
  color: #536a7c;
  font-size: 18px;
  line-height: 1.7;
}

.content-updated {
  margin: 21px 0 0;
  color: #71818d;
  font-size: 12px;
  font-weight: 700;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 42px;
}

.content-card {
  padding: 27px;
  border-top: 3px solid #94d6d3;
  background: #fffdf8;
  box-shadow: 0 13px 40px rgba(16, 50, 69, .06);
}

.content-card h2, .content-card h3 { margin: 0 0 10px; color: #10253c; letter-spacing: -.035em; }
.content-card h2 { font-size: 23px; }
.content-card h3 { font-size: 17px; }
.content-card p { margin: 0; color: #536a7c; font-size: 14px; line-height: 1.72; }

.content-article {
  padding: clamp(27px, 5vw, 56px);
  border: 1px solid rgba(16, 37, 60, .08);
  border-radius: 22px;
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 20px 65px rgba(16, 50, 69, .07);
}

.content-article > section { padding: 31px 0; border-top: 1px solid #d8e4e5; }
.content-article > section:first-child { padding-top: 0; border-top: 0; }
.content-article h2 { margin: 0 0 12px; color: #10253c; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.045em; line-height: 1.12; }
.content-article h3 { margin: 22px 0 8px; color: #10253c; font-size: 18px; letter-spacing: -.025em; }
.content-article p, .content-article li { color: #536a7c; font-size: 15px; line-height: 1.78; }
.content-article p { margin: 0; }
.content-article p + p { margin-top: 15px; }
.content-article ul, .content-article ol { display: grid; gap: 9px; margin: 13px 0 0; padding-left: 23px; }
.content-article li::marker { color: #159795; font-weight: 800; }
.content-article strong { color: #304d60; }
.content-article blockquote { margin: 21px 0; padding: 17px 21px; border-left: 3px solid #ff775f; background: #fff1ec; color: #674e49; font-size: 14px; line-height: 1.7; }
.content-article dl { display: grid; gap: 13px; margin: 15px 0 0; }
.content-article dt { color: #087e78; font-size: 13px; font-weight: 850; }
.content-article dd { margin: 3px 0 0; color: #536a7c; font-size: 14px; line-height: 1.7; }

.content-callout {
  margin: 27px 0;
  padding: 20px 22px;
  border: 1px solid #c8e7e4;
  border-radius: 13px;
  background: #edf9f7;
}

.content-callout h2, .content-callout h3 { margin-top: 0; }
.content-callout p { font-size: 14px; }

.content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 31px;
}

.content-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #10253c;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.content-button:hover { background: #087c9e; color: #fff; }
.content-button.secondary { border: 1px solid #bfd0d3; background: #fff; color: #365469; }
.content-button.secondary:hover { border-color: #7daeb6; background: #f1f8f7; color: #087c9e; }

.content-source-list { margin-top: 15px !important; }
.content-source-list a { font-weight: 700; }

.content-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 30px;
  align-items: center;
  padding: 36px max(22px, calc((100vw - 1160px) / 2));
  background: #0d293f;
  color: #a9c1ce;
}

.content-footer .content-brand { color: #fff; }
.content-footer-nav { grid-column: 1 / -1; }
.content-footer-nav a { color: #c3e9ea; }
.content-footer-nav a:hover { color: #fff; }
.content-footer p { grid-column: 1; margin: 0; font-size: 12px; line-height: 1.65; }
.content-footer p a { color: #c3e9ea; font-weight: 750; }
.content-footer-note { grid-column: 2; grid-row: 2; max-width: 250px; margin: 0; color: #a9c1ce; font-size: 11px; line-height: 1.55; }

.fallback-header, .fallback-content, .fallback-footer { font-family: inherit; }
.fallback-header { display: flex; justify-content: space-between; gap: 24px; max-width: 1160px; margin: 0 auto; padding: 20px 28px; }
.fallback-header nav, .fallback-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.fallback-header a, .fallback-actions a, .fallback-footer a { font-size: 13px; font-weight: 750; }
.fallback-brand { color: #10253c; font-size: 19px !important; font-weight: 850 !important; text-decoration: none; }
.fallback-content { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 90px; }
.fallback-kicker { color: #087c9e; font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.fallback-content h1 { max-width: 760px; margin: 13px 0 20px; color: #10253c; font-size: clamp(40px, 7vw, 70px); letter-spacing: -.06em; line-height: 1; }
.fallback-lead { max-width: 760px; color: #536a7c; font-size: 18px; line-height: 1.7; }
.fallback-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 38px 0; }
.fallback-grid section { padding: 24px; background: #fffdf8; border-top: 3px solid #94d6d3; box-shadow: 0 13px 40px rgba(16, 50, 69, .06); }
.fallback-grid h2 { margin: 0 0 10px; font-size: 19px; }
.fallback-grid p { margin: 0; color: #536a7c; font-size: 14px; line-height: 1.7; }
.fallback-actions a { padding: 10px 14px; border-radius: 9px; background: #10253c; color: #fff; text-decoration: none; }
.fallback-actions a:hover { background: #087c9e; color: #fff; }
.fallback-footer { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 30px max(22px, calc((100vw - 1160px) / 2)); background: #0d293f; color: #a9c1ce; font-size: 12px; }
.fallback-footer a { color: #c3e9ea; }

@media (max-width: 760px) {
  .content-header { align-items: flex-start; flex-direction: column; padding: 18px 20px; }
  .content-nav { gap: 8px 14px; }
  .content-main { width: min(100% - 28px, 1030px); padding: 48px 0 78px; }
  .content-hero { margin-bottom: 31px; }
  .content-hero h1 { font-size: clamp(39px, 13vw, 60px); }
  .content-lead { font-size: 16px; }
  .content-grid, .fallback-grid { grid-template-columns: 1fr; }
  .content-article { padding: 25px 20px; border-radius: 17px; }
  .content-article > section { padding: 25px 0; }
  .content-article p, .content-article li { font-size: 14px; }
  .content-footer { grid-template-columns: 1fr; padding: 30px 20px; }
  .content-footer-nav, .content-footer p, .content-footer-note { grid-column: 1; grid-row: auto; }
  .content-footer-note { max-width: none; }
  .fallback-header { align-items: flex-start; flex-direction: column; padding: 18px 20px; }
  .fallback-content { width: min(100% - 28px, 900px); padding: 48px 0 65px; }
  .fallback-content h1 { font-size: clamp(39px, 13vw, 60px); }
  .fallback-lead { font-size: 16px; }
  .fallback-footer { padding: 25px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
