:root {
  --ink: #111827;
  --muted: #596579;
  --line: #e4e8ee;
  --honey: #f0b429;
  --honey-deep: #a86b08;
  --navy: #143d59;
  --teal: #2b7a78;
  --paper: #fff;
  --soft: #f6f8fb;
  --max: 1160px;
  --header: 73px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 28px); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 9% 4%, rgba(240,180,41,.18), transparent 25rem), radial-gradient(circle at 93% 13%, rgba(20,61,89,.11), transparent 28rem), linear-gradient(180deg,#fffdf8 0,#fff 40rem); font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height: 1.68; }
a { color: var(--navy); text-underline-offset: 3px; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(228,232,238,.82); background: rgba(255,255,255,.88); backdrop-filter: blur(18px) saturate(1.25); }
.site-header nav { width: min(calc(100% - 40px),var(--max)); min-height: var(--header); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.site-header nav > div { display: flex; align-items: center; gap: 24px; }
.site-header nav a { text-decoration: none; font-weight: 680; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); letter-spacing: -.02em; }
.brand span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(145deg,#ffda70,#df9715); box-shadow: 0 10px 25px rgba(240,180,41,.3); font-weight: 900; }
.nav-cta,.button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#101828,var(--navy)); box-shadow: 0 14px 34px rgba(20,61,89,.2); font-weight: 780; text-decoration: none; transition: transform .2s ease,box-shadow .2s ease; }
.nav-cta:hover,.button:hover { transform: translateY(-2px); box-shadow: 0 19px 42px rgba(20,61,89,.26); }
.reading-progress { position: absolute; inset: auto 0 -2px; height: 3px; overflow: hidden; background: rgba(20,61,89,.08); }
.reading-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--honey),#e6971d,var(--teal)); will-change: transform; }
.breadcrumbs,main,footer { width: min(calc(100% - 40px),var(--max)); margin-left: auto; margin-right: auto; }
.breadcrumbs { display: flex; gap: 10px; padding-top: 32px; color: var(--muted); font-size: .9rem; }
.hero { max-width: 930px; padding: 68px 0 58px; }
.eyebrow { margin: 0 0 14px; color: var(--honey-deep); font-size: .77rem; font-weight: 880; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { max-width: 930px; margin: 0 0 26px; font-size: clamp(2.8rem,6vw,5.7rem); line-height: .98; letter-spacing: -.066em; text-wrap: balance; }
.answer { max-width: 840px; margin: 0 0 28px; color: #344054; font-size: clamp(1.1rem,2vw,1.36rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.secondary { display: inline-flex; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.76); color: var(--ink); font-weight: 720; text-decoration: none; }
.meta { margin-top: 25px; color: var(--muted); font-size: .9rem; }
.article-grid { display: grid; grid-template-columns: 260px minmax(0,760px); gap: 68px; align-items: start; }
.toc { position: sticky; top: calc(var(--header) + 28px); padding: 20px 18px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.88); box-shadow: 0 18px 50px rgba(16,24,40,.06); backdrop-filter: blur(14px); }
.toc-label { padding: 2px 8px 13px; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
.toc-label span { display: block; color: var(--honey-deep); font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.toc-label strong { display: block; margin-top: 2px; font-size: 1.05rem; }
.toc a { position: relative; display: block; margin: 2px 0; padding: 8px 10px 8px 15px; border-radius: 10px; color: var(--muted); font-size: .88rem; line-height: 1.35; text-decoration: none; transition: color .18s ease,background .18s ease,transform .18s ease; }
.toc a::before { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #cad1da; transform: translateY(-50%); }
.toc a:hover { color: var(--ink); background: var(--soft); }
.toc a.is-active { color: var(--navy); background: linear-gradient(90deg,rgba(240,180,41,.18),rgba(240,180,41,.04)); font-weight: 760; transform: translateX(2px); }
.toc a.is-active::before { height: 17px; border-radius: 4px; background: var(--honey); }
.toc-progress { position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: rgba(20,61,89,.06); }
.toc-progress span { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--honey),var(--teal)); }
.mobile-toc { display: none; }
.article-grid article section { padding: 46px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 28px); }
.article-grid article section:first-child { border-top-color: var(--honey); }
.article-grid h2,.related h2,.final-cta h2 { margin: 0 0 19px; font-size: clamp(1.75rem,3vw,2.6rem); line-height: 1.14; letter-spacing: -.038em; text-wrap: balance; }
.article-grid p { color: #465467; font-size: 1.04rem; }
.article-grid li { margin: 9px 0; color: #344054; }
.callout { margin: 26px 0; padding: 21px 23px; border: 1px solid rgba(240,180,41,.27); border-left: 5px solid var(--honey); border-radius: 0 15px 15px 0; background: linear-gradient(135deg,#fff8e8,#fffdf8); color: #4d3b16; font-weight: 680; box-shadow: 0 13px 32px rgba(168,107,8,.07); }
.text-links { display: grid; gap: 8px; margin-top: 22px; font-weight: 760; }
.inline-cta { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin: 10px 0 18px; padding: 28px; border: 1px solid rgba(20,61,89,.13); border-radius: 22px; background: radial-gradient(circle at 100% 0,rgba(240,180,41,.16),transparent 14rem),linear-gradient(145deg,#fff,#f5f8fb); box-shadow: 0 18px 46px rgba(16,24,40,.07); }
.inline-cta span { color: var(--honey-deep); font-size: .68rem; font-weight: 860; letter-spacing: .11em; text-transform: uppercase; }
.inline-cta h2 { margin: 4px 0 7px; font-size: 1.35rem; letter-spacing: -.03em; }
.inline-cta p { margin: 0; color: var(--muted); font-size: .94rem; }
.inline-cta .button { white-space: nowrap; }
.original-tool { margin: 12px 0 24px; padding: 30px; border: 1px solid rgba(43,122,120,.23); border-radius: 24px; background: radial-gradient(circle at 100% 0,rgba(43,122,120,.13),transparent 17rem),linear-gradient(145deg,#fbfffe,#f5faf9); box-shadow: 0 22px 55px rgba(20,61,89,.08); }
.tool-heading { margin-bottom: 22px; }
.tool-heading > span { color: var(--teal); font-size: .68rem; font-weight: 880; letter-spacing: .12em; text-transform: uppercase; }
.tool-heading h2 { margin: 5px 0 8px; font-size: 1.75rem; }
.tool-heading p,.tool-note { margin: 0; color: var(--muted); font-size: .93rem; }
.calculator-grid,.check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.calculator-grid label { display: grid; gap: 6px; color: #344054; font-size: .8rem; font-weight: 760; }
.calculator-grid input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #cfd8df; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.calculator-grid input:focus { outline: 3px solid rgba(43,122,120,.18); border-color: var(--teal); }
.calculator-results { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 20px 0 15px; }
.calculator-results div { padding: 14px; border: 1px solid rgba(43,122,120,.18); border-radius: 13px; background: rgba(255,255,255,.8); }
.calculator-results span { display: block; min-height: 35px; color: var(--muted); font-size: .68rem; font-weight: 740; }
.calculator-results strong { display: block; margin-top: 7px; color: var(--navy); font-size: 1.22rem; }
.check-grid label { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid rgba(43,122,120,.16); border-radius: 12px; background: rgba(255,255,255,.76); color: #344054; font-size: .86rem; font-weight: 660; cursor: pointer; }
.check-grid input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal); }
.tool-output { margin-top: 18px; padding: 18px; border-left: 4px solid var(--teal); border-radius: 0 14px 14px 0; background: #fff; }
.tool-output span { display: block; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.tool-output strong { display: block; margin: 3px 0; color: var(--navy); font-size: 1.2rem; }
.tool-output p { margin: 0; font-size: .88rem; }
.source-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: .82rem; font-weight: 730; }
.evidence-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
.evidence-grid > div { padding: 18px; border: 1px solid rgba(43,122,120,.17); border-radius: 14px; background: rgba(255,255,255,.78); }
.evidence-grid span { color: var(--teal); font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.evidence-grid strong { display: block; margin: 7px 0; font-size: .95rem; }
.evidence-grid p { margin: 0; font-size: .82rem; }
.article-grid article { min-width: 0; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin: 26px 0; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 13px 34px rgba(16,24,40,.05); }
table { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; }
caption { text-align: left; padding: 19px; font-weight: 820; }
th,td { padding: 15px 18px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--soft); }
.related { padding: 82px 0; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.related-card { min-height: 156px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,#fff,#fafbfc); box-shadow: 0 14px 36px rgba(16,24,40,.05); text-decoration: none; transition: transform .2s ease,border-color .2s ease; }
.related-card:hover { transform: translateY(-4px); border-color: rgba(240,180,41,.7); }
.related-card span { display: block; margin-bottom: 20px; color: var(--honey-deep); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.related-card strong { display: block; color: var(--ink); font-size: 1.08rem; text-transform: capitalize; }
.final-cta { position: relative; overflow: hidden; margin-bottom: 72px; padding: 54px; border-radius: 30px; background: radial-gradient(circle at 90% 0,rgba(240,180,41,.23),transparent 20rem),linear-gradient(135deg,#101828,var(--navy)); color: #fff; box-shadow: 0 28px 70px rgba(20,61,89,.2); }
.final-cta p { max-width: 700px; color: #dce6ed; }
.final-cta .button { background: var(--honey); color: #2b1b00; }
footer { padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

@media (max-width: 920px) {
  :root { --mobile-toc: 68px; }
  html { scroll-padding-top: calc(var(--header) + var(--mobile-toc) + 18px); }
  .site-header nav > div > a:not(.nav-cta) { display: none; }
  .article-grid { display: block; }
  .toc { display: none; }
  .mobile-toc { position: sticky; top: var(--header); z-index: 35; display: block; margin: 0 -10px 22px; border: 1px solid rgba(228,232,238,.94); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(16,24,40,.1); backdrop-filter: blur(18px); }
  .mobile-toc summary { min-height: var(--mobile-toc); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
  .mobile-toc summary::-webkit-details-marker { display: none; }
  .mobile-toc summary > span:first-child { min-width: 0; }
  .mobile-toc small { display: block; color: var(--honey-deep); font-size: .65rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
  .current-section { display: block; overflow: hidden; color: var(--ink); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
  .toc-action { flex: none; padding: 7px 10px; border-radius: 999px; background: #fff7e5; color: var(--honey-deep); font-size: .75rem; font-weight: 820; }
  .mobile-toc[open] .toc-action { background: var(--navy); color: #fff; }
  .mobile-toc nav { max-height: min(56vh,430px); padding: 6px 10px 12px; overflow: auto; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  .mobile-toc nav a { display: block; padding: 11px 12px; border-radius: 10px; color: var(--muted); font-size: .9rem; text-decoration: none; }
  .mobile-toc nav a.is-active { background: linear-gradient(90deg,rgba(240,180,41,.19),transparent); color: var(--navy); font-weight: 760; }
  .article-grid article section { scroll-margin-top: calc(var(--header) + var(--mobile-toc) + 18px); }
  .inline-cta { grid-template-columns: 1fr; }
  .inline-cta .button { width: 100%; max-width: 100%; justify-self: stretch; white-space: normal; text-align: center; }
  .calculator-results { grid-template-columns: repeat(2,1fr); }
  .evidence-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 46px; }
  .final-cta { padding: 36px 28px; }
}

@media (max-width: 540px) {
  .site-header nav { width: min(calc(100% - 24px),var(--max)); }
  .brand { font-size: .87rem; }
  .nav-cta { padding: 10px 13px; font-size: .78rem; }
  .breadcrumbs,main,footer { width: min(calc(100% - 28px),var(--max)); }
  .hero h1 { font-size: clamp(2.65rem,13vw,3.8rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .mobile-toc { margin-left: -4px; margin-right: -4px; }
  .original-tool { padding: 23px 18px; }
  .calculator-grid,.check-grid { grid-template-columns: 1fr; }
  .final-cta { border-radius: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.language-switcher{position:absolute;right:max(20px,calc((100vw - 1180px)/2));top:74px;z-index:25}.language-switcher>button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font:700 12px/1 inherit;cursor:pointer}.language-switcher>div{display:none;position:absolute;right:0;top:40px;min-width:150px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(18,28,43,.14)}.language-switcher.is-open>div{display:grid}.language-switcher a{padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}.language-switcher a:hover,.language-switcher a[aria-current="page"]{background:var(--soft)}.language-suggestion{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;background:#122033;color:#fff;border-radius:999px;box-shadow:0 18px 60px rgba(18,28,43,.28);font-size:14px}.language-suggestion a{color:#fff;font-weight:800}.language-suggestion button{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:50%;width:28px;height:28px;font-size:19px;cursor:pointer}@media(max-width:760px){.language-switcher{right:16px;top:68px}.language-suggestion{width:calc(100% - 28px);bottom:14px;border-radius:18px;justify-content:center;flex-wrap:wrap}}
