:root { --paper:#f5f8fb; --ink:#14243a; --muted:#5c6c7d; --blue:#147d99; --navy:#113e64; --pale:#e8f6f8; --line:#dbe6ef; --white:#fff; --warm:#fff8e8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.85; }
a { color:var(--blue); text-underline-offset:3px; }
.site-header,.article-shell,footer { max-width:1040px; margin:0 auto; padding-left:32px; padding-right:32px; }
.site-header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; padding-bottom:24px; }
.site-header::before { content:""; position:absolute; z-index:-1; inset:0 calc((100vw - 100%) / -2); background:rgba(249,252,255,.95); border-bottom:1px solid rgba(20,125,153,.14); }
.brand-group { display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:750; }
.parent-brand,.brand { color:var(--ink); text-decoration:none; }.brand { font-weight:850; }.brand span { color:var(--blue); }
.header-cta { padding:9px 14px; border-radius:999px; color:#fff; background:var(--navy); font-size:.76rem; font-weight:800; text-decoration:none; }
.article-shell { padding-top:52px; padding-bottom:84px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 32px; color:var(--muted); font-size:.75rem; }.breadcrumbs a { color:var(--muted); }
.article-hero { max-width:820px; margin-bottom:42px; }.eyebrow { margin:0 0 10px; color:var(--blue); font-size:.72rem; font-weight:850; letter-spacing:.13em; }.article-hero h1 { margin:0 0 20px; font-size:clamp(2.15rem,4.4vw,3.55rem); line-height:1.17; letter-spacing:-.045em; }.article-hero .lead { max-width:760px; margin:0 0 18px; color:#41566d; font-size:1.08rem; }.article-meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:.75rem; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; gap:42px; }
.article-body { min-width:0; }.article-body > section { margin-top:55px; scroll-margin-top:24px; }.article-body > section:first-child { margin-top:0; }
.article-body h2 { margin:0 0 18px; font-size:clamp(1.65rem,3vw,2.25rem); line-height:1.35; letter-spacing:-.045em; }.article-body h3 { margin:32px 0 9px; font-size:1.18rem; line-height:1.5; letter-spacing:-.025em; }.article-body p { margin:0 0 17px; color:#344a61; }.article-body ul,.article-body ol { margin:0 0 20px; padding-left:1.4em; color:#344a61; }.article-body li + li { margin-top:7px; }.article-body strong { color:var(--ink); }
.answer-box { padding:24px 26px; border:1px solid rgba(20,125,153,.2); border-left:5px solid var(--blue); border-radius:14px; background:var(--white); box-shadow:0 10px 25px rgba(17,62,100,.05); }.answer-box p:last-child { margin-bottom:0; }.answer-box .answer-label { margin:0 0 5px; color:var(--blue); font-size:.72rem; font-weight:850; letter-spacing:.1em; }
.note-box,.method-box { margin:24px 0; padding:20px 22px; border-radius:12px; background:var(--pale); }.note-box p:last-child,.method-box p:last-child { margin-bottom:0; }.method-box { border:1px dashed rgba(20,125,153,.38); background:#f8fcfd; }.method-box h3 { margin-top:0; }
.warning-box { margin:24px 0; padding:20px 22px; border-left:4px solid #d69b26; background:var(--warm); }.warning-box p:last-child { margin-bottom:0; }
.table-wrap { overflow-x:auto; margin:24px 0 30px; border:1px solid var(--line); border-radius:12px; background:var(--white); }.data-table { width:100%; min-width:590px; border-collapse:collapse; font-size:.88rem; }.data-table th,.data-table td { padding:14px 15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.data-table tr:last-child td { border-bottom:0; }.data-table th { color:var(--navy); background:#edf6fa; font-size:.78rem; }.data-table td { color:#3d5369; }.data-table td strong { display:block; }
.formula { margin:24px 0; padding:20px; border-radius:12px; color:var(--navy); background:#fff; border:1px solid var(--line); font-size:1rem; font-weight:800; text-align:center; }
.step-list { list-style:none; padding:0 !important; counter-reset:steps; }.step-list li { position:relative; padding:0 0 26px 52px; counter-increment:steps; }.step-list li::before { content:counter(steps); position:absolute; left:0; top:0; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:var(--blue); font-size:.8rem; font-weight:850; }.step-list li:not(:last-child)::after { content:""; position:absolute; left:16px; top:39px; bottom:4px; width:1px; background:#b9d7df; }.step-list strong { display:block; margin-bottom:3px; }
.cta-card { margin:56px 0 18px; padding:30px; border-radius:18px; color:#fff; background:var(--navy); }.cta-card .eyebrow { color:#9fe0e9; }.cta-card h2 { margin-bottom:10px; }.cta-card p { color:#dbe9f2; }.cta-button { display:inline-flex; align-items:center; gap:9px; margin-top:5px; padding:12px 18px; border-radius:9px; color:var(--navy); background:#fff; font-weight:850; text-decoration:none; }.cta-button:hover { background:#eaf7f9; }
.sources { padding-top:28px; border-top:1px solid var(--line); }.sources h2 { font-size:1.2rem; }.sources li { font-size:.82rem; }
.side-nav { position:sticky; top:24px; padding:22px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.86); }.side-nav p { margin:0 0 10px; color:var(--muted); font-size:.7rem; font-weight:850; letter-spacing:.1em; }.side-nav ol { margin:0; padding-left:1.25em; font-size:.78rem; line-height:1.6; }.side-nav li + li { margin-top:8px; }.side-nav a { color:#41566d; text-decoration:none; }.side-nav a:hover { color:var(--blue); text-decoration:underline; }
.related { margin-top:65px; padding-top:36px; border-top:1px solid var(--line); }.related h2 { margin-bottom:20px; }.related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.related-card { display:block; padding:19px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; text-decoration:none; }.related-card span { display:block; margin-bottom:4px; color:var(--blue); font-size:.68rem; font-weight:850; }.related-card strong { line-height:1.5; }.related-card:hover { border-color:var(--blue); }
footer { display:flex; justify-content:space-between; gap:18px; padding-top:25px; padding-bottom:28px; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; } footer p { margin:0; } footer a { font-weight:750; }
@media (max-width:800px) { .site-header,.article-shell,footer { padding-left:20px; padding-right:20px; }.article-shell { padding-top:38px; }.article-layout { grid-template-columns:1fr; }.side-nav { display:none; }.article-hero h1 { font-size:clamp(2rem,9.5vw,2.7rem); }.related-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .site-header { align-items:flex-start; }.brand-group { flex-wrap:wrap; }.header-cta { white-space:nowrap; }.article-meta { display:block; }.article-meta span { display:block; }.answer-box,.cta-card { padding:22px 20px; }.table-wrap { margin-left:-20px; margin-right:-20px; border-radius:0; border-left:0; border-right:0; }.data-table th,.data-table td { padding:12px; } footer { display:block; } footer p + p { margin-top:8px; } }