:root {
  color-scheme: light;
  --navy: #0B1F3B;
  --coral: #B8676F;
  --coral-deep: #B45560;
  --blush: #F3E4E5;
  --cream: #F6F2EE;
  --rule: #E2DBD0;
  --rule-soft: #EFEAE1;
  --ink: #18202B;
  --ink-soft: #4A5462;
  --ink-mute: #8A9099;
  --max: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #FFFFFF; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 17px; line-height: 1.65;
  color: #18202B; background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--coral); }

.nav {
  position: sticky; top: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule); z-index: 50;
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-weight: 700; font-size: 18px; color: var(--navy); letter-spacing: -0.015em; }
.brand span { color: var(--coral); }
.nav-links { display: flex; align-items: center; }
.nav-link + .nav-link { margin-left: 28px; }
.nav-link { color: var(--navy); font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-cta {
  background: var(--navy); color: #fff !important;
  padding: 9px 18px; border-radius: 100px; font-weight: 600; font-size: 14px;
}
.nav-cta:hover { background: var(--coral); }

.page-head {
  background: var(--cream); border-bottom: 1px solid var(--rule);
  padding: 58px 32px 44px;
}
.page-head-inner { max-width: 760px; margin: 0 auto; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral-deep); margin-bottom: 14px;
}
h1 {
  font-size: clamp(32px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.03em;
  font-weight: 800; color: var(--navy); margin: 0 0 14px;
}
.lede { font-size: 18px; color: var(--ink-soft); margin: 0; max-width: 60ch; }
.meta { font-size: 14px; color: var(--ink-mute); margin-top: 18px; }

.content { max-width: 760px; margin: 0 auto; padding: 48px 32px 80px; }
.content h2 {
  font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700;
  color: var(--navy); margin: 44px 0 12px; padding-top: 8px;
}
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 26px 0 8px; }
.content p { margin: 0 0 14px; color: var(--ink); }
.content ul { padding-left: 22px; margin: 0 0 16px; }
.content li { margin-bottom: 7px; }
.content li::marker { color: var(--coral); }
.callout {
  background: var(--blush); border: 1px solid #EDC9CD; border-radius: 14px;
  padding: 20px 24px; margin: 24px 0;
}
.callout p { margin: 0; color: var(--ink); }
.callout strong { color: var(--navy); }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: 26px 26px; margin: 0 0 18px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 10px 0 24px; }
.btn {
  display: inline-block; background: var(--navy); color: #fff !important;
  padding: 13px 26px; border-radius: 100px; font-weight: 600; font-size: 15px;
}
.btn:hover { background: var(--coral); }
.toc { background: var(--cream); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 24px 14px; margin-bottom: 36px; }
.toc strong { display: block; color: var(--navy); margin-bottom: 8px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; font-size: 15px; }
.toc li { margin-bottom: 5px; break-inside: avoid; }
table { width: 100%; border-collapse: collapse; margin: 10px 0 24px; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { color: var(--navy); font-weight: 700; background: var(--cream); }

.footer {
  border-top: 1px solid var(--rule); background: #fff;
  padding: 30px 32px; text-align: center; font-size: 14px; color: var(--ink-mute);
}
.footer a { color: var(--ink-soft); font-weight: 500; }
.footer-links { max-width: 1140px; margin: 0 auto 18px; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; font-size: 13.5px; }
.footer-love { margin-top: 8px; font-size: 13px; }
.footer-love .heart { color: var(--coral); }

@media (max-width: 680px) {
  .nav-inner { flex-wrap: wrap; row-gap: 11px; }
  .brand { order: 1; } .nav-cta { order: 2; margin-left: auto; }
  .nav-links { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--rule); padding-top: 11px; }
  .grid { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
}
@media (max-width: 520px) {
  .nav-inner { padding: 14px 20px; }
  .page-head { padding: 42px 20px 34px; }
  .content { padding: 36px 20px 64px; }
}
@media (prefers-color-scheme: dark) {
  html, body { background: #FFFFFF !important; color: #18202B !important; }
  .page-head, .toc { background: #F6F2EE !important; }
  .card, .footer { background: #FFFFFF !important; }
  h1, .content h2, .content h3, .brand, .nav-link { color: #0B1F3B !important; }
  .content p, .content li { color: #18202B !important; }
  .nav-cta, .btn { color: #ffffff !important; }
}