@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/manrope-latin-variable.woff2") format("woff2"); }

:root { --navy:#0b202f; --navy-2:#10293a; --navy-3:#173b52; --teal:#1aa493; --mint:#55caaa; --paper:#fbfaf7; --muted:#aabfc5; --line:rgba(186,216,224,.18); --shadow:0 28px 80px rgba(11,32,47,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 72% 4%, rgba(26,164,147,.14), transparent 25rem),var(--navy); color:#edf5f6; font:17px/1.68 "Atkinson Hyperlegible",system-ui,sans-serif; }
a { color:var(--mint); }
a:hover { color:#9de3d1; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:30; padding:12px 18px; border-radius:12px; background:#fff; color:var(--navy); font-weight:800; }
.skip-link:focus { top:18px; }
.offer { padding:9px 18px; background:#f8edd7; color:#72521a; text-align:center; font-size:12px; font-weight:700; }
.site-nav { min-height:88px; width:min(1280px,calc(100% - 48px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.brand img { width:40px; height:40px; object-fit:contain; }
.brand span { display:grid; line-height:.9; letter-spacing:.09em; }
.brand strong { color:var(--mint); font:800 17px/1 "Manrope",sans-serif; }
.brand small { color:#d9e7e9; font:700 9px/1 "Manrope",sans-serif; letter-spacing:.16em; margin-top:4px; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { color:#e8f2f4; font-weight:800; font-size:14px; text-decoration:none; }
.nav-links .nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; padding:12px 19px; border:0; border-radius:14px; background:var(--teal); color:#fff; font-weight:800; text-decoration:none; box-shadow:0 12px 28px rgba(26,164,147,.22); transition:transform .18s ease,background .18s ease; }
.nav-links .nav-cta:hover,.button:hover { background:#148575; color:#fff; transform:translateY(-2px); }
.article-shell { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:80px 0 90px; display:grid; grid-template-columns:minmax(0,760px) 280px; justify-content:center; gap:58px; }
.article-head { margin-bottom:42px; }
.breadcrumb { color:#b7c9ce; font-size:14px; font-weight:800; }
.article-head h1,.article-body h2,.article-body h3 { color:#fff; font-family:"Manrope","Atkinson Hyperlegible",sans-serif; }
.article-head h1 { margin:18px 0; font-size:clamp(40px,6vw,64px); line-height:1.04; letter-spacing:-.055em; }
.dek { max-width:680px; margin:0; color:#b7c9ce; font-size:20px; }
.article-meta { margin-top:20px; color:#91a8ae; font-size:13px; }
.article-body h2 { margin:50px 0 14px; font-size:32px; line-height:1.16; letter-spacing:-.035em; }
.article-body h3 { margin:30px 0 8px; font-size:23px; }
.article-body p,.article-body li { max-width:68ch; color:#d7e4e7; }
.article-body li + li { margin-top:9px; }
.takeaway,.example { margin:30px 0; padding:24px 26px; border:1px solid rgba(85,202,170,.3); border-radius:20px; background:rgba(85,202,170,.14); color:#def4ee; }
.takeaway strong,.example strong { color:#fff; }
.formula,.checklist,.aside-card { border:1px solid var(--line); border-radius:22px; background:rgba(23,59,82,.8); box-shadow:var(--shadow); }
.formula { margin:28px 0; padding:24px; }
.formula div { display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid rgba(186,216,224,.14); color:#dbe8eb; }
.formula div:last-child { border:0; color:var(--mint); font-weight:900; }
.checklist { padding:24px 24px 24px 48px; }
.article-cta { margin-top:52px; padding:32px; border:1px solid rgba(85,202,170,.44); border-radius:26px; background:linear-gradient(135deg,#17465b,#123448); }
.article-cta h2 { margin:0 0 10px; }
.article-cta p { margin:0 0 22px; }
.article-cta-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.article-cta .play-button { display:inline-flex; }
.article-cta .play-button img { display:block; width:auto; height:48px; }
.sources { margin-top:42px; padding-top:26px; border-top:1px solid var(--line); font-size:14px; }
.sources h2 { margin-top:0; font-size:23px; }
.disclaimer,.sources .disclaimer { color:var(--muted); font-size:13px; }
.article-aside { position:sticky; top:24px; align-self:start; }
.aside-card { padding:22px; }
.aside-card strong { display:block; margin-bottom:10px; color:#fff; font:800 20px/1.2 "Manrope",sans-serif; }
.aside-card a { display:block; padding:7px 0; color:var(--mint); font-size:14px; font-weight:800; text-decoration:none; }
.site-footer { border-top:1px solid rgba(186,216,224,.12); background:#081a27; }
.footer-inner { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:30px 0; display:flex; justify-content:space-between; gap:20px; color:#9bb0b6; font-size:12px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.footer-links a { color:#c9dadd; font-weight:800; text-decoration:none; }
@media (max-width:880px) { .article-shell { grid-template-columns:1fr; } .article-aside { position:static; } }
@media (max-width:620px) { .offer { font-size:11px; } .site-nav { min-height:72px; width:calc(100% - 28px); } .nav-links > a:not(.nav-cta) { display:none; } .article-shell { width:calc(100% - 28px); padding:54px 0 70px; } .article-head h1 { font-size:44px; } .article-body h2 { font-size:29px; } .article-cta-actions { align-items:flex-start; flex-direction:column; } .footer-inner { width:calc(100% - 28px); flex-direction:column; text-align:center; } .footer-links { justify-content:center; } }