/* Resource hub and guide pages: same tokens as landing-layout.css, long-form reading layout. Footer block must stay identical to landing-layout.css and calculator-layout.css. */
:root{
  color-scheme:light;
  --ink:#171C47; --muted:#526579; --brand:#2973BA; --brand-text:#1F64A6; --amber:#E6A23C; --amber-hi:#F0B457;
  --bg:#FFFFFF; --tint:#EBF2FA; --line:rgba(23,28,71,.10);
  --display:"Literata", Georgia, "Times New Roman", serif;
  --body:"Public Sans", "Segoe UI", Arial, sans-serif;
  --lift:0 0 0 1px rgba(23,28,71,.07), 0 1px 2px rgba(23,28,71,.05), 0 18px 40px -20px rgba(23,28,71,.22);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;border-radius:8px;background:var(--ink);padding:10px 16px;color:#fff;font-weight:700}
.skip-link:focus{top:12px}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;color:var(--ink)}
p{margin:0}

body > header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;min-width:0}
.logo img{display:block;height:28px;width:auto;max-width:100%}
@media (max-width:767px){.nav-in{height:52px;gap:10px}.logo img{height:auto;max-height:24px;max-width:min(170px,100%)}.nav-links .btn-sm{min-height:36px;padding:0 12px;font-size:13px}}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav-links a{color:var(--muted);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease),background .3s}
.btn-amber{background:var(--amber);color:var(--ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -12px rgba(230,162,60,.8)}
.btn-amber:hover{transform:translateY(-1px);background:var(--amber-hi)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
@media (max-width:560px){.hide-s{display:none}}

.g-hero{background-color:var(--tint);background-image:radial-gradient(900px 420px at 12% 0%,rgba(41,115,186,.10),rgba(41,115,186,0) 70%);padding-block:44px 52px;border-bottom:1px solid var(--line)}
.g-hero-in{display:flex;flex-direction:column;gap:14px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.label{font:600 15px/1.3 var(--body);color:var(--brand-text)}
.g-hero h1{max-width:22ch;font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-.025em;font-weight:800}
.lede{font-size:19px;color:var(--muted);max-width:62ch}

.g-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;padding-block:56px 72px;align-items:start}
.g-body{max-width:68ch;display:flex;flex-direction:column;gap:44px;min-width:0}
.g-sec{display:flex;flex-direction:column;gap:14px}
.g-sec h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.015em}
.g-sec h3{font-size:19px;margin-top:8px}
.g-sec p{color:#33475B}
.g-sec ul,.g-sec ol{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.g-sec ul li{position:relative;padding-left:22px;color:#33475B}
.g-sec ul li:before{content:"";position:absolute;left:4px;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.g-sec ol{counter-reset:o}
.g-sec ol li{position:relative;padding-left:44px;color:#33475B;counter-increment:o}
.g-sec ol li:before{content:counter(o);position:absolute;left:0;top:0;font:700 22px/1.3 var(--display);color:#A8701F}
.g-sec li strong{color:var(--ink)}
.g-key{background:#fff;border-radius:20px;padding:26px 28px;box-shadow:var(--lift)}
.g-cta{background:#171C47;background-image:radial-gradient(520px 260px at 100% 0%,rgba(41,115,186,.32),rgba(41,115,186,0) 70%);color:#fff;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.g-cta h2{color:#fff;font-size:28px}
.g-cta p{color:#D6E4EA}

.g-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.g-toc{border-left:2px solid var(--line);padding-left:18px}
.toc-h{font-weight:700;font-size:14px;margin-bottom:8px}
.g-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.g-toc a{color:var(--muted);text-decoration:none;font-size:14.5px;line-height:1.4}
.g-toc a:hover{color:var(--brand)}
.g-sidecta{background:#fff;border-radius:20px;padding:22px;box-shadow:var(--lift);display:flex;flex-direction:column;gap:10px}
.sc-h{font:700 20px/1.25 var(--display)}
.g-sidecta p{font-size:15px;color:var(--muted)}

.g-related{background-color:var(--tint);padding-block:56px}
.g-related h2{font-size:28px;margin-bottom:20px}
.rel-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rel{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;gap:24px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .35s var(--ease)}
.rel:hover{background:rgba(255,255,255,.7)}
.gcat{font-size:13px;font-weight:600;color:var(--brand-text)}
.rel b{font:700 20px/1.25 var(--display)}
.ga{font-size:22px;color:var(--brand);justify-self:end;transition:transform .35s var(--ease)}
.rel:hover .ga{transform:translateX(4px)}

/* Site footer: keep identical in landing-layout.css, calculator-layout.css and resources.css. */
body > footer { background: #E6EDF6; border-top: 1px solid rgba(23, 28, 71, .10); padding: 44px 24px 56px; text-align: center }
body > footer > div { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px }
body > footer img { height: 24px; width: auto; max-width: none }
body > footer p { color: #2E3A44; font-size: 13.5px; line-height: 21px; font-weight: 400 }
body > footer .footer-copyright { color: #4F5961; font-weight: 400 }
body > footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 44px }
body > footer a { color: #3A4651; font-size: 13.5px; font-weight: 600; line-height: 21px; text-decoration: none; white-space: nowrap }
body > footer a:hover { color: #2973BA; text-decoration: underline }

@media (max-width:900px){
  .g-grid{grid-template-columns:1fr;gap:36px}
  .g-side{display:none}
  .rel{grid-template-columns:1fr 28px;gap:4px 12px}
  .rel .gcat,.rel b{grid-column:1}
  .rel .ga{grid-column:2;grid-row:1 / span 2}
}

/* Resource hub list */
.g-hub{display:flex;flex-direction:column;gap:48px;padding-block:48px 72px}
.rel-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.rel-t h2{font:700 20px/1.25 var(--display);margin:0}
.gd{color:var(--muted);font-size:15px;line-height:1.5}