:root {
  --ink: #0D1B2A;
  --muted: #F4F8FB;
  --card: #132233;
  --aqua: #0A7EA4;
  --blue: #0A7EA4;
  --orange: #F4A716;
}

body {
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.brand, .btn, .badge, .pill, .tag, .read, .cta-mini {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.hero {
  background: linear-gradient(180deg, #0D1B2A 0%, #1A2E42 100%);
}

.hero .blob {
  background: radial-gradient(circle at 30% 30%, #0A7EA4, transparent 60%);
}

.hero .blob2 {
  background: radial-gradient(circle at 70% 70%, #F4A716, transparent 60%);
  opacity: .12;
}

.content-wrap,
.article-wrap .grid {
  align-items: start;
}

.content-wrap > article,
.article-wrap article {
  min-width: 0;
}

article h2 {
  color: #0D1B2A;
}

article h3 {
  color: #1A2E42;
}

article figure {
  margin: 24px 0;
}

article figure img,
article > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(13, 27, 42, .1);
}

article figcaption {
  margin-top: 8px;
  color: rgba(13, 27, 42, .7);
  font-size: 14px;
}

.protip {
  background: rgba(10, 126, 164, .10);
  border-color: rgba(10, 126, 164, .42);
}

.callout {
  background: #F4F8FB;
  border-color: rgba(10, 126, 164, .28);
}

.final,
.promo {
  background: #0D1B2A;
}

@media (max-width: 1100px) {
  .content-wrap,
  .article-wrap .grid {
    grid-template-columns: 1fr;
  }

  .content-wrap .toc,
  .content-wrap .rail,
  .article-wrap .sticky {
    position: static;
  }
}