:root { --ink:#102044; --muted:#596780; --line:#c9d9ea; --paper:#fff; --cloud:#eaf2fb; --blue:#0969da; --navy:#071c43; --aqua:#00c8ae; --aqua-deep:#007b70; --shadow:0 18px 42px rgba(12,35,78,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 7%,rgba(0,200,174,.13),transparent 27%),radial-gradient(circle at 8% 94%,rgba(9,105,218,.08),transparent 28%),linear-gradient(145deg,#eaf2fb 0%,#dbe8f7 47%,#e3f1ef 100%); color:var(--ink); font:16px/1.58 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--blue); }
.shell { max-width:1160px; margin:0 auto; padding:0 24px 58px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0 27px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); font-size:1.22rem; font-weight:850; letter-spacing:-.045em; text-decoration:none; }
.brandmark { width:41px; height:41px; object-fit:contain; filter:drop-shadow(0 7px 11px rgba(6,67,159,.17)); }
.nav { display:flex; gap:17px; color:#405b84; font-size:.9rem; }
.nav a { color:inherit; text-decoration:none; }
.nav a:hover { color:var(--blue); text-decoration:underline; }
.site-menu { position:relative; }
.site-menu summary { display:none; list-style:none; cursor:pointer; }
.site-menu summary::-webkit-details-marker { display:none; }
.site-nav { display:flex; align-items:center; gap:17px; color:#405b84; font-size:.9rem; }
.site-nav a { color:inherit; font-weight:720; text-decoration:none; }
.site-nav a:hover { color:var(--blue); text-decoration:underline; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.95fr); overflow:hidden; margin-bottom:28px; background:var(--navy); border-radius:26px; box-shadow:var(--shadow); }
.hero-copy { align-self:center; padding:clamp(30px,5vw,62px); color:#fff; }
.hero-copy .eyebrow { color:#72e7d7; }
.hero-copy h1 { margin:8px 0 15px; max-width:610px; color:#fff; font-size:clamp(2.05rem,4.6vw,3.8rem); line-height:1.03; letter-spacing:-.06em; }
.hero-copy p { max-width:570px; margin:0; color:#cbd8eb; font-size:1.08rem; }
.hero-image { min-height:365px; width:100%; height:100%; object-fit:cover; }
.eyebrow { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.guide-card { display:flex; flex-direction:column; min-height:255px; padding:23px; background:rgba(255,255,255,.96); border:1px solid rgba(193,211,233,.98); border-radius:21px; box-shadow:0 10px 28px rgba(12,35,78,.08); }
.guide-card .number { display:grid; place-items:center; width:31px; height:31px; margin-bottom:17px; border-radius:50%; color:var(--aqua-deep); background:#d8f8f1; font-size:.85rem; font-weight:800; }
.guide-card h2 { margin:0 0 9px; color:var(--navy); font-size:1.17rem; line-height:1.2; letter-spacing:-.03em; }
.guide-card p { margin:0; color:#526079; font-size:.94rem; }
.guide-card a { margin-top:auto; padding-top:20px; color:var(--blue); font-weight:780; text-decoration:none; }
.guide-card a:hover { text-decoration:underline; }
.next { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:30px; padding:25px 28px; color:#fff; background:linear-gradient(120deg,#064998,#0b72dc); border-radius:22px; }
.next h2 { margin:0 0 5px; font-size:1.25rem; letter-spacing:-.03em; }
.next p { margin:0; color:#d6e5ff; }
.button { display:inline-flex; flex:none; align-items:center; justify-content:center; min-height:45px; padding:0 17px; border-radius:12px; color:var(--navy); background:var(--aqua); font-weight:800; text-decoration:none; }
.button:hover { background:#4ae3d0; }
.article { max-width:850px; margin:0 auto; padding:clamp(28px,5vw,58px); background:rgba(255,255,255,.97); border:1px solid rgba(193,211,233,.98); border-radius:25px; box-shadow:var(--shadow); }
.article > h1 { max-width:710px; margin:8px 0 15px; color:var(--navy); font-size:clamp(2rem,4.8vw,3.6rem); line-height:1.05; letter-spacing:-.06em; }
.intro { max-width:700px; margin:0 0 27px; color:#45526c; font-size:1.1rem; }
.article h2 { margin:34px 0 10px; color:var(--navy); font-size:1.38rem; line-height:1.2; letter-spacing:-.03em; }
.article h3 { margin:23px 0 7px; color:var(--ink); font-size:1.05rem; letter-spacing:-.02em; }
.article p, .article li { color:#45526c; }
.article p { margin:0 0 15px; }
.article ul, .article ol { margin:0 0 18px; padding-left:23px; }
.article li + li { margin-top:8px; }
.takeaway { margin:25px 0; padding:20px 22px; border-left:4px solid var(--aqua); border-radius:0 15px 15px 0; background:#eefbf8; }
.takeaway strong { display:block; margin-bottom:5px; color:var(--aqua-deep); }
.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:21px 0; }
.compare > div { padding:19px; border:1px solid #dce5f0; border-radius:16px; background:var(--cloud); }
.compare h3 { margin:0 0 8px; }
.compare p { margin:0; font-size:.94rem; }
.checks { display:grid; gap:10px; margin:18px 0; }
.checks div { display:flex; gap:11px; align-items:flex-start; padding:14px 15px; border:1px solid #dce5f0; border-radius:13px; background:#fff; color:#45526c; }
.checks b { display:grid; flex:none; place-items:center; width:23px; height:23px; border-radius:50%; color:var(--aqua-deep); background:#d8f8f1; font-size:.83rem; }
.article-image { width:100%; margin:27px 0 4px; border-radius:18px; object-fit:cover; max-height:430px; }
.image-caption { margin:7px 0 24px!important; color:#64728a!important; font-size:.84rem; }
.finder-cta { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:31px; padding:22px; border-radius:18px; color:#fff; background:var(--navy); }
.finder-cta h2 { margin:0 0 5px; color:#fff; font-size:1.17rem; }
.finder-cta p { margin:0; color:#cbd8eb; font-size:.94rem; }
.sources { margin-top:34px; padding-top:23px; border-top:1px solid var(--line); }
.sources h2 { margin:0 0 9px; font-size:1.08rem; }
.sources ul { margin:0; font-size:.9rem; }
.site-footer { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-top:32px; padding:22px 2px 0; border-top:1px solid rgba(180,197,220,.72); color:#5a6880; font-size:.86rem; }
.site-footer p { max-width:360px; margin:0; color:#5a6880; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 15px; }
.footer-links a { color:#38547e; text-decoration:none; }
.footer-links a:hover { color:var(--blue); text-decoration:underline; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } .hero-image { min-height:280px; max-height:400px; } .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .shell { padding:0 15px 36px; } .topbar { padding:17px 0 20px; } .nav { gap:12px; font-size:.84rem; } .site-menu summary { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid #c8d8ec; border-radius:10px; color:#214773; background:#fff; font-size:.86rem; font-weight:800; } .site-menu summary span { color:var(--blue); font-size:1.05rem; line-height:1; } .site-menu > nav { position:absolute; z-index:10; right:0; top:calc(100% + 8px); width:min(230px,calc(100vw - 30px)); padding:8px; border:1px solid #cbd9eb; border-radius:13px; background:#fff; box-shadow:0 16px 34px rgba(12,35,78,.16); } .site-menu:not([open]) > nav { display:none; } .site-menu[open] > nav { display:grid; gap:2px; } .site-nav a { padding:10px 11px; border-radius:8px; font-size:.92rem; } .site-nav a:hover { background:#edf5ff; text-decoration:none; } .hero { border-radius:20px; } .hero-copy { padding:29px 22px; } .hero-image { min-height:230px; } .guide-grid,.compare { grid-template-columns:1fr; } .guide-card { min-height:0; } .article { padding:29px 21px; border-radius:19px; } .finder-cta,.next,.site-footer { display:grid; gap:15px; } .footer-links { justify-content:flex-start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:760px) { .topbar { display:grid; grid-template-columns:1fr; gap:11px; align-items:start; } .site-nav { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px 13px; width:100%; color:#38547e; font-size:.86rem; } .site-nav a { padding:0!important; border-radius:0!important; background:transparent!important; } }