/* MoneyRadar 3.0.1 — design polish, nonbreaking visual layer.
   Deliberately keeps the v3 globe, layout identity and four calculator modules. */
:root{--paper:#f5f8f6}
body{background:#f5f8f6}
/* Refined depth: softer shadows and no white flash over button copy. */
.hero .btn,.btn{box-shadow:inset 0 1px 0 #ffffff69,0 6px 19px #041d193c;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.hero .btn:before,.tool-tab:before{display:none!important}
.hero .btn:hover,.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff65,0 11px 24px #092f2955}
.hero .btn.secondary:hover{background:#c0f6d226;box-shadow:inset 0 1px 0 #ffffff42,0 8px 23px #001c184c}
.tool-tab:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 5px 15px #0a593728}
.brand:hover .brandmark{transform:translateY(-1px)!important;box-shadow:0 8px 18px #0c504136,0 0 0 2px #bfff711d}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #258c6c;outline-offset:3px}
/* A shorter hero brings useful content into view without dropping the globe. */
@media(min-width:941px){
 .hero-inner{min-height:585px;padding-top:56px;padding-bottom:58px}
 .hero-visual{height:435px}
 .earth-globe{width:min(340px,82%)}
}
/* Four editorial guides: an intentional 2 × 2 composition. */
.guides-section #guideGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.guides-section #guideGrid .story{min-height:218px;padding:25px 27px}
.guides-section #guideGrid .story h3{max-width:33ch}
.story:hover,.editorial-feature:hover{transform:translateY(-3px);box-shadow:0 15px 32px #0e38301c,0 0 0 1px #83cba539}
/* Comfortable centered article measure. No invented sidebar. */
.article-wrap{max-width:940px}
.article-wrap .breadcrumb,.article-wrap .article-hero{max-width:840px;margin-left:auto;margin-right:auto}
.article-wrap .article-body{max-width:840px;margin:28px auto 0;padding:40px clamp(25px,5vw,58px)}
.article-hero h1{font-size:clamp(36px,4.7vw,59px);line-height:1.1}
.article-body p,.article-body li{font-size:16px;line-height:1.78}
.article-body h2{line-height:1.26}
/* Sticky menu must not cover anchored sections. */
html{scroll-padding-top:110px}
section[id]{scroll-margin-top:110px}
/* Accessibility: preserve navigation on phones instead of display:none. */
@media(max-width:940px){
 .head{flex-wrap:wrap;column-gap:12px;row-gap:4px;padding:9px 0 10px}
 .nav{display:flex!important;order:3;flex:0 0 100%;align-items:center;justify-content:space-between;gap:6px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:5px 0 0}
 .nav::-webkit-scrollbar{display:none}
 .nav a{flex:1 0 auto;text-align:center;padding:8px 10px;font-size:12px;border-radius:8px;background:#eff5f1}
 .nav a:hover,.nav a:focus-visible{background:#dceee1}
 html{scroll-padding-top:139px}
 section[id]{scroll-margin-top:139px}
}
@media(max-width:700px){
 .guides-section #guideGrid{grid-template-columns:1fr;gap:14px}
 .guides-section #guideGrid .story{min-height:186px;padding:21px}
}
@media(max-width:540px){
 .nav{gap:4px}
 .nav a{font-size:11px;padding:8px 7px}
 .article-wrap{padding-top:30px;padding-bottom:65px}
 .article-wrap .article-body{margin-top:22px;padding:22px 19px}
 .article-body p,.article-body li{font-size:15px;line-height:1.77}
 .hero-inner{padding-top:42px}
}
@media(prefers-reduced-motion:reduce){
 .hero .btn,.btn,.tool-tab,.story,.editorial-feature{transition:none!important}
 .hero .btn:hover,.btn:hover,.tool-tab:hover,.story:hover,.editorial-feature:hover{transform:none!important}
}