/* ClearCents — finance editorial site (NerdWallet-inspired structure, original design) */
:root{
  --green:#00a955; --green-dark:#0a3d26; --green-hover:#008a45;
  --mint:#e8f7ef; --mint-soft:#f5fbf8; --lime:#8fd14f;
  --ink:#15241c; --muted:#5d6e64; --line:#e3eae5; --bg:#ffffff;
  --maxw:1140px; --article-w:780px; --radius:14px;
  --shadow:0 8px 26px rgba(10,61,38,.09);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:var(--green); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,"Times New Roman",serif; color:var(--green-dark); letter-spacing:-.3px; line-height:1.22; font-weight:600;}
::selection{background:#bdf0d4; color:var(--green-dark);}

/* ================= header & dropdown nav ================= */
.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100;}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px;}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.28rem; color:var(--green-dark); letter-spacing:-.5px; flex:none;}
.logo:hover{text-decoration:none;}
.logo .mark{width:30px; height:30px; flex:none;}
nav.main-nav{display:flex; align-items:stretch; height:64px;}
.nav-item{position:relative; display:flex; align-items:center;}
.nav-item>a{
  color:var(--ink); font-size:.88rem; font-weight:700; padding:0 13px; height:64px;
  display:flex; align-items:center; border-bottom:3px solid transparent;
}
.nav-item>a:hover{color:var(--green-dark); border-bottom-color:var(--green); text-decoration:none; background:var(--mint-soft);}
.dropdown{
  position:absolute; top:64px; left:50%; transform:translateX(-50%); min-width:280px;
  background:#fff; border:1px solid var(--line); border-radius:0 0 12px 12px;
  box-shadow:var(--shadow); padding:14px 0 8px; display:none; z-index:99;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block;}
.dropdown .dd-head{
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); padding:0 18px 6px;
}
.dropdown a{display:block; padding:8px 18px; font-size:.85rem; color:var(--ink); font-weight:500;}
.dropdown a:hover{background:var(--mint); color:var(--green-dark); text-decoration:none;}
.dropdown .dd-all{font-weight:700; color:var(--green); border-top:1px solid var(--line); margin-top:6px; padding-top:10px;}
@media(max-width:920px){
  .header-inner{flex-wrap:wrap; padding:10px 16px;}
  nav.main-nav{height:auto; flex-wrap:wrap; width:100%;}
  .nav-item>a{height:auto; padding:8px 10px; font-size:.8rem;}
  .dropdown{display:none !important;}
}

/* ================= buttons ================= */
.btn{
  display:inline-block; background:var(--green); color:#fff !important; font-weight:700;
  padding:14px 30px; border-radius:999px; font-size:.95rem; transition:background .15s, transform .15s; border:none; cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--green-hover); text-decoration:none; transform:translateY(-1px);}
.btn.ghost{background:#fff; color:var(--green-dark) !important; border:2px solid var(--green-dark); padding:12px 28px;}
.btn.ghost:hover{background:var(--mint);}

/* ================= hero (centered, NerdWallet-style) ================= */
.hero{background:linear-gradient(180deg, var(--mint-soft) 0%, #fff 100%); border-bottom:1px solid var(--line);}
.hero-inner{max-width:820px; margin:0 auto; padding:64px 24px 30px; text-align:center;}
.hero h1{font-size:clamp(2rem,4.8vw,3.1rem); font-weight:800;}
.hero h1 em{font-style:normal; color:var(--green);}
.hero h1 .rotator{
  display:inline-block; transition:opacity .28s ease, transform .28s ease;
  border-bottom:4px solid var(--lime); padding-bottom:2px;
}
.hero h1 .rotator.rot-out{opacity:0; transform:translateY(10px);}
@media(prefers-reduced-motion:no-preference){
  .hero-inner > h1{animation:heroup .7s ease both;}
  .hero-inner > p{animation:heroup .7s ease .12s both;}
  .hero-inner > .searchwrap{animation:heroup .7s ease .24s both;}
  .hero-inner > .micro{animation:heroup .7s ease .32s both;}
  .hero-inner > .mascot-hero{animation:heroup .8s ease .4s both;}
  @keyframes heroup{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
}
.hero p{margin:16px auto 0; color:var(--muted); font-size:1.12rem; max-width:560px;}

/* search */
.searchwrap{position:relative; max-width:620px; margin:30px auto 0;}
.searchbox{
  display:flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--green-dark);
  border-radius:999px; padding:6px 8px 6px 22px; box-shadow:var(--shadow);
}
.searchbox svg{width:20px; height:20px; flex:none;}
.searchbox input{
  flex:1; border:none; outline:none; font-size:1rem; font-family:inherit; color:var(--ink);
  background:transparent; min-width:0;
}
.searchbox .btn{padding:11px 24px; font-size:.88rem;}
.searchwrap{position:relative; max-width:620px; margin:30px auto 0; z-index:300;}
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#ffffff; opacity:1;
  border:1.5px solid var(--green-dark); border-radius:14px;
  box-shadow:0 20px 55px rgba(10,61,38,.30);
  text-align:left; overflow:hidden; display:none; z-index:500;
}
.search-results a{background:#fff;}
.search-results.show{display:block;}
.search-results a{display:block; padding:11px 18px; font-size:.88rem; color:var(--ink); border-bottom:1px solid var(--mint);}
.search-results a:last-child{border-bottom:none;}
.search-results a:hover{background:var(--mint-soft); text-decoration:none;}
.search-results .sr-cat{font-size:.66rem; font-weight:800; text-transform:uppercase; color:var(--green); letter-spacing:.5px; display:block;}
.search-results .sr-none{padding:13px 18px; font-size:.85rem; color:var(--muted);}
.hero .micro{margin:14px 0 0; font-size:.76rem; color:var(--muted);}

/* category cards — carousel, 5 visible max */
.catwrap{
  max-width:var(--maxw); margin:0 auto; padding:34px 24px 44px;
  display:flex; align-items:stretch; gap:10px; position:relative;
}
.catcards{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; flex:1;
  scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x mandatory; padding:6px 2px;
}
.catcards::-webkit-scrollbar{display:none;}
.catcards .catcard{
  flex:0 0 calc(20% - 14.4px); min-width:185px; scroll-snap-align:start;
}
.cnav{
  flex:none; align-self:center; width:44px; height:44px; border-radius:50%;
  background:#fff; border:1.5px solid var(--line); color:var(--green-dark);
  font-size:1.3rem; line-height:1; cursor:pointer; box-shadow:var(--shadow);
  transition:background .15s, border-color .15s, transform .15s; font-family:inherit;
}
.cnav:hover{background:var(--mint); border-color:var(--green); transform:scale(1.07);}
.cnav:disabled{opacity:.35; cursor:default; transform:none;}
@media(max-width:720px){
  .catcards .catcard{flex:0 0 70%;}
  .cnav{width:38px; height:38px;}
}
.catcard{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  border:1.5px solid var(--line); border-radius:var(--radius); padding:30px 18px 24px;
  background:#fff; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.catcard:hover{border-color:var(--green); box-shadow:var(--shadow); transform:translateY(-4px); text-decoration:none;}
.catcard svg{width:74px; height:62px; margin-bottom:4px;}
.catcard .cc-title{
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.05rem;
  line-height:1.25; color:var(--green-dark); letter-spacing:-.3px;
}
.catcard:hover .cc-title{color:var(--green);}
.catcard p{font-size:.8rem; color:var(--muted); line-height:1.45;}
.cc-arrow{
  position:absolute; top:14px; right:16px; font-size:1rem; color:#b9c9bf;
  transition:color .15s, transform .2s;
}
.catcard:hover .cc-arrow{color:var(--green); transform:translate(2px,-2px);}

/* hub page details */
.hub-topics{margin-top:18px;}
.ht-label{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin-bottom:8px;}
.ht-chips{display:flex; flex-wrap:wrap; gap:8px;}
.topic-chip{
  font-size:.74rem; font-weight:600; color:var(--green-dark); background:#fff;
  border:1.5px solid var(--line); border-radius:999px; padding:5px 13px;
}
.hub-calc{max-width:var(--maxw); margin:0 auto; padding:10px 24px 50px;}
.hub-calc .calc-card{border:1.5px solid var(--line); max-width:560px;}

/* ================= sections & cards ================= */
.section{max-width:var(--maxw); margin:0 auto; padding:46px 24px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px;}
.section-head h2{font-size:1.6rem; font-weight:800;}
.section-head a{font-size:.86rem; font-weight:700;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px;}
.card{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff;
  transition:border-color .15s, box-shadow .15s, transform .15s; display:flex; flex-direction:column; gap:10px; color:inherit;
}
.card:hover{border-color:var(--green); box-shadow:var(--shadow); transform:translateY(-3px); text-decoration:none;}
.chip{
  align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--green-dark); background:var(--mint);
  padding:5px 12px; border-radius:999px;
}
.card h3{font-size:1.13rem;}
.card:hover h3{color:var(--green);}
.card p{color:var(--muted); font-size:.89rem;}
.card .meta{margin-top:auto; font-size:.75rem; color:var(--muted);}

/* calculator promo cards */
.calc-band{background:var(--green-dark);}
.calc-band .section{padding-top:44px; padding-bottom:44px;}
.calc-band h2{color:#fff; font-size:1.5rem; margin-bottom:6px;}
.calc-band .sub{color:#a9cdb9; font-size:.92rem; margin-bottom:22px;}
.calc-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px;}
.calc-card{
  display:flex; gap:18px; align-items:center; background:#fff; border-radius:var(--radius);
  padding:20px 22px; color:inherit; transition:transform .15s, box-shadow .15s;
}
.calc-card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.25); text-decoration:none;}
.calc-card svg{width:62px; height:52px; flex:none;}
.calc-card b{color:var(--green-dark); font-size:1rem; display:block;}
.calc-card span{font-size:.8rem; color:var(--muted);}

/* trust band */
.trust{background:var(--mint-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust .section{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; padding-top:46px; padding-bottom:46px;}
.trust .t-item{display:flex; gap:16px; align-items:flex-start;}
.trust svg{width:52px; height:44px; flex:none;}
.trust h3{font-size:1rem; margin-bottom:5px;}
.trust p{font-size:.85rem; color:var(--muted);}

/* ================= hub pages ================= */
.hub-hero{background:var(--mint-soft); border-bottom:1px solid var(--line);}
.hub-hero-inner{
  max-width:var(--maxw); margin:0 auto; padding:46px 24px 40px;
  display:flex; gap:34px; align-items:center; justify-content:space-between;
}
.hub-hero h1{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800;}
.hub-hero p{color:var(--muted); margin-top:10px; max-width:600px;}
.hub-hero svg{width:150px; height:auto; flex:none;}
@media(max-width:640px){.hub-hero svg{display:none;}}
.row-list{max-width:var(--maxw); margin:0 auto; padding:34px 24px; display:flex; flex-direction:column; gap:16px;}
.row{
  display:flex; gap:22px; align-items:center; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; background:#fff; color:inherit; transition:border-color .15s, box-shadow .15s;
}
.row:hover{border-color:var(--green); box-shadow:var(--shadow); text-decoration:none;}
.row svg{width:64px; height:54px; flex:none;}
.row h3{font-size:1.1rem; margin-bottom:4px;}
.row:hover h3{color:var(--green);}
.row p{font-size:.88rem; color:var(--muted);}
.row .meta{font-size:.74rem; color:var(--muted); margin-top:6px;}
.empty-hub{max-width:var(--maxw); margin:0 auto; padding:14px 24px 44px; color:var(--muted); font-size:.95rem;}

/* ================= article pages ================= */
.article-hero{background:var(--mint-soft); border-bottom:1px solid var(--line);}
.article-hero-inner{
  max-width:var(--article-w); margin:0 auto; padding:38px 22px 28px;
  display:flex; gap:30px; align-items:center; justify-content:space-between;
}
.article-hero-inner svg{width:115px; height:auto; flex:none;}
.article-hero h1{font-size:clamp(1.6rem,3.8vw,2.3rem); font-weight:800; margin:10px 0 0;}
@media(max-width:640px){.article-hero-inner svg{display:none;}}

/* byline / trust block */
.trustline{
  max-width:var(--article-w); margin:0 auto; padding:18px 22px 0;
}
.byline-block{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:16px;
}
.byline-block .avatar{width:44px; height:44px; flex:none;}
.byline-block .who{font-size:.84rem; line-height:1.5;}
.byline-block .who b{color:var(--green-dark);}
.byline-block .who span{color:var(--muted);}
.factcheck{
  margin-left:auto; display:flex; align-items:center; gap:7px; font-size:.76rem; font-weight:700;
  color:var(--green-dark); background:var(--mint); border-radius:999px; padding:6px 14px;
}
.verify{max-width:var(--article-w); margin:10px auto 0; padding:0 22px;}
.verify details{font-size:.8rem; color:var(--muted);}
.verify summary{cursor:pointer; color:var(--green); font-weight:600; font-size:.78rem;}
.verify p{margin-top:8px; line-height:1.6; background:var(--mint-soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}

.article-wrap{max-width:var(--article-w); margin:0 auto; padding:30px 22px 70px;}
.article-body h2{font-size:1.45rem; margin:40px 0 14px; font-weight:800;}
.article-body h3{font-size:1.1rem; margin:28px 0 10px;}
.article-body p{margin:0 0 18px;}
.article-body ul,.article-body ol{margin:0 0 18px 24px;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{
  background:var(--mint); border-left:4px solid var(--green); border-radius:0 12px 12px 0;
  padding:14px 18px; margin:0 0 22px; font-size:.88rem; color:#155a3e;
}
.article-body table{width:100%; border-collapse:separate; border-spacing:0; margin:8px 0 26px; font-size:.9rem;
  border:1.5px solid var(--line); border-radius:12px; overflow:hidden;}
.article-body th{background:var(--green-dark); color:#fff; text-align:left; padding:11px 14px; font-size:.82rem;}
.article-body td{padding:11px 14px; border-bottom:1px solid var(--line);}
.article-body tr:last-child td{border-bottom:none;}
.article-body tr:nth-child(even) td{background:var(--mint-soft);}
.article-body strong{color:var(--green-dark);}
.article-body hr{border:none; border-top:1.5px solid var(--line); margin:34px 0;}
.cta-link{
  display:inline-block; background:var(--green); color:#fff !important; font-weight:700;
  padding:12px 26px; border-radius:999px; margin:2px 0 6px; font-size:.92rem;
}
.cta-link:hover{background:var(--green-hover); text-decoration:none;}
.cta-link.pending{background:#a8c4b6; cursor:default; pointer-events:none;}
.aff-note{font-size:.72rem; color:var(--muted); display:block; margin-bottom:14px;}

/* ================= calculator pages ================= */
.calc-wrap{max-width:780px; margin:0 auto; padding:38px 22px 70px;}
.calc-panel{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:30px; background:#fff;
  box-shadow:var(--shadow); margin:26px 0;
}
.calc-panel .field{margin-bottom:18px;}
.panel-sub{font-size:1.05rem; margin-bottom:12px;}
.calc-panel label{display:block; font-size:.82rem; font-weight:700; color:var(--green-dark); margin-bottom:6px;}
.calc-panel input,.calc-panel select{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:1rem; font-family:inherit; color:var(--ink);
}
.calc-panel input:focus,.calc-panel select:focus{outline:none; border-color:var(--green);}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){.calc-grid{grid-template-columns:1fr;}}
.results{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-top:8px;}
.result-card{background:var(--mint-soft); border:1.5px solid var(--line); border-radius:12px; padding:18px; text-align:center;}
.result-card.hl{background:var(--green-dark); border-color:var(--green-dark);}
.result-card b{display:block; font-size:1.45rem; color:var(--green-dark); letter-spacing:-.5px;}
.result-card.hl b{color:#fff;}
.result-card span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700;}
.result-card.hl span{color:#a9cdb9;}
.milestones{width:100%; border-collapse:collapse; margin-top:22px; font-size:.88rem;}
.milestones th{background:var(--green-dark); color:#fff; padding:9px 12px; text-align:left; font-size:.78rem;}
.milestones td{padding:9px 12px; border-bottom:1px solid var(--line);}
.calc-note{font-size:.78rem; color:var(--muted); margin-top:18px; line-height:1.6;}
.calc-explain{margin-top:30px;}
.calc-explain h2{font-size:1.3rem; margin-bottom:10px;}
.calc-explain p{color:var(--muted); font-size:.92rem; margin-bottom:14px;}

/* ================= skip link, breadcrumbs, TOC, related ================= */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--green-dark); color:#fff;
  padding:10px 18px; border-radius:0 0 10px 0; z-index:200; font-weight:700; font-size:.85rem;
}
.skip:focus{left:0; text-decoration:none;}
.crumbs{max-width:var(--article-w); margin:0 auto; padding:14px 22px 0; font-size:.74rem; color:var(--muted);}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--green);}
.crumbs .sep{margin:0 6px; color:#b9c9bf;}
.toc{
  background:var(--mint-soft); border:1.5px solid var(--line); border-radius:12px;
  padding:16px 20px; margin:22px 0 6px;
}
.toc b{font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; color:var(--green-dark);}
.toc ol{margin:8px 0 0 20px; font-size:.86rem;}
.toc li{margin-bottom:5px;}
.related{max-width:var(--article-w); margin:0 auto; padding:0 22px 60px;}
.related h2{font-size:1.25rem; margin-bottom:16px;}
.related .card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.related .card{padding:18px;}
.related .card h3{font-size:.95rem;}

/* ================= header search & mobile nav ================= */
.hsearch{position:relative; flex:none; display:flex; align-items:center;}
.hsearch input{
  border:1.5px solid var(--line); border-radius:999px; padding:8px 14px 8px 34px;
  font-size:.82rem; font-family:inherit; width:170px; transition:width .2s, border-color .15s;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6e64' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 L21 21'/%3E%3C/svg%3E") 11px center/15px no-repeat;
}
.hsearch input:focus{outline:none; border-color:var(--green); width:230px;}
.hsearch .search-results{top:calc(100% + 6px); min-width:300px; right:0; left:auto;}
.caret{font-size:.6rem; margin-left:4px; color:var(--muted);}
.navtoggle, .hamburger{display:none;}
@media(max-width:920px){
  .hamburger{
    display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:10px;
    margin-left:auto; order:2;
  }
  .hamburger i{width:24px; height:3px; background:var(--green-dark); border-radius:2px; display:block; transition:transform .2s, opacity .2s;}
  .hsearch{order:1; flex:1; margin:0 10px;}
  .hsearch input{width:100%;}
  .hsearch input:focus{width:100%;}
  nav.main-nav{display:none; order:3; width:100%; flex-direction:column; border-top:1px solid var(--line); padding:6px 0;}
  .navtoggle:checked ~ nav.main-nav{display:flex;}
  .navtoggle:checked ~ .hamburger i:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .navtoggle:checked ~ .hamburger i:nth-child(2){opacity:0;}
  .navtoggle:checked ~ .hamburger i:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  .nav-item{width:100%;}
  .nav-item>a{width:100%; border-bottom:1px solid var(--mint); border-left:3px solid transparent;}
  .nav-item>a:hover{border-left-color:var(--green); border-bottom-color:var(--mint);}
  .caret{display:none;}
}

/* ================= newsletter ================= */
.newsletter{
  background:var(--mint); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:28px; margin:0 auto; max-width:var(--maxw); display:flex; gap:24px; align-items:center;
  flex-wrap:wrap; justify-content:space-between;
}
.newsletter .nl-copy b{font-size:1.15rem; color:var(--green-dark); display:block; margin-bottom:4px;}
.newsletter .nl-copy span{font-size:.86rem; color:var(--muted);}
.newsletter .nl-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter input{
  border:1.5px solid var(--line); border-radius:999px; padding:12px 18px; font-size:.9rem;
  font-family:inherit; min-width:240px;
}
.newsletter input:focus{outline:none; border-color:var(--green);}
.nl-note{font-size:.7rem; color:var(--muted); width:100%;}
.newsletter-wrap{padding:0 24px 46px; max-width:100%;}

/* ================= back to top & misc ================= */
#backtop{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--green-dark); color:#fff; border:none; font-size:18px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:90; box-shadow:var(--shadow);
}
#backtop.show{opacity:1; pointer-events:auto;}
#backtop:hover{background:var(--green);}
.sources-note{font-size:.78rem; color:var(--muted);}
.bigpage{text-align:center; padding:80px 24px;}
.bigpage h1{font-size:3rem;}
.bigpage p{color:var(--muted); margin:14px 0 26px;}

/* ================= design pass: featured, stats, waves, callouts, charts ================= */
.featured{
  max-width:var(--maxw); margin:0 auto; padding:0 24px 10px;
}
.featured a{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center;
  border:1.5px solid var(--line); border-radius:20px; padding:38px 42px; color:inherit;
  background:linear-gradient(120deg, var(--mint-soft) 0%, #fff 55%);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.featured a:hover{border-color:var(--green); box-shadow:var(--shadow); transform:translateY(-3px); text-decoration:none;}
.featured svg{width:100%; max-width:300px; height:auto; justify-self:center;}
.featured .chip{margin-bottom:12px;}
.featured h2{font-size:clamp(1.4rem,3vw,2rem); margin-bottom:10px;}
.featured p{color:var(--muted); font-size:.95rem;}
.featured .meta{display:block; margin-top:14px; font-size:.76rem; color:var(--muted);}
.featured .readon{display:inline-block; margin-top:16px; color:var(--green); font-weight:700; font-size:.9rem;}
.featured a:hover .readon{text-decoration:underline;}
@media(max-width:720px){.featured a{grid-template-columns:1fr; padding:26px; text-align:center;} .featured svg{max-width:200px;}}

.statstrip{
  display:flex; justify-content:center; gap:46px; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto; padding:6px 24px 30px;
}
.statstrip .st b{font-size:1.7rem; color:var(--green-dark); font-family:"Fraunces",Georgia,serif;}
.statstrip .st span{display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:700;}
.statstrip .st{text-align:center;}

.wave{display:block; width:100%; height:30px; margin:-1px 0;}

/* callouts */
.callout{
  display:flex; gap:13px; border-radius:14px; padding:16px 18px; margin:0 0 22px;
  font-size:.92rem; line-height:1.65; align-items:flex-start;
}
.callout .co-ic{flex:none; width:26px; height:26px; margin-top:2px;}
.callout.tip{background:var(--mint); border:1.5px solid #bfe6d0;}
.callout.warn{background:#fdf6e7; border:1.5px solid #ecdcb0;}
.callout.example{background:#fff; border:1.5px solid var(--line); box-shadow:var(--shadow);}
.callout b:first-child{color:var(--green-dark);}
.callout.warn b:first-child{color:#8a6d1f;}

/* Penny's Verdict box */
.verdict{
  display:flex; gap:18px; align-items:center; background:var(--mint);
  border:2px solid var(--green); border-radius:16px; padding:18px 22px; margin:0 0 26px;
}
.verdict .v-owl{flex:none; width:72px;}
.verdict .v-owl svg{width:72px; height:auto;}
.verdict .v-label{
  display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.8px; color:#fff; background:var(--green-dark); border-radius:999px;
  padding:4px 12px; margin-bottom:8px;
}
.verdict p{margin:0 !important; font-size:1.02rem; line-height:1.6; color:var(--green-dark); font-weight:500;}
@media(max-width:560px){.verdict{flex-direction:column; text-align:center;}}

/* Start Here path */
.path-step{
  display:flex; gap:24px; align-items:flex-start; max-width:var(--article-w);
  margin:0 auto; padding:26px 22px; position:relative;
}
.path-step::before{
  content:""; position:absolute; left:49px; top:78px; bottom:-20px; width:3px;
  background:repeating-linear-gradient(180deg, var(--lime) 0 8px, transparent 8px 16px);
}
.path-step:last-of-type::before{display:none;}
.path-num{
  flex:none; width:54px; height:54px; border-radius:50%; background:var(--green-dark);
  color:#fff; font-family:"Fraunces",Georgia,serif; font-size:1.5rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
  box-shadow:0 0 0 6px var(--mint);
}
.path-body h2{font-size:1.3rem; margin-bottom:8px;}
.path-body p{color:var(--muted); font-size:.94rem; margin-bottom:12px;}
.path-links{display:flex; gap:10px; flex-wrap:wrap;}
.path-links a{
  font-size:.8rem; font-weight:700; background:#fff; border:1.5px solid var(--green);
  color:var(--green-dark); border-radius:999px; padding:7px 16px;
}
.path-links a:hover{background:var(--mint); text-decoration:none;}
.path-illo{flex:none; width:84px; display:none;}
@media(min-width:640px){.path-illo{display:block;}}
.path-done{text-align:center; padding:30px 22px 60px;}
.path-done svg{width:130px; height:auto;}
.path-done h2{margin:14px 0 8px;}
.path-done p{color:var(--muted); max-width:480px; margin:0 auto 18px;}

/* drop cap & pull quote */
.article-body > p:first-of-type::first-letter{
  font-family:"Fraunces",Georgia,serif; font-size:3.4em; font-weight:600; color:var(--green);
  float:left; line-height:.82; padding:4px 10px 0 0;
}
.pullquote{
  border:none !important; background:none !important; padding:8px 0 !important;
  font-family:"Fraunces",Georgia,serif; font-size:1.35rem !important; color:var(--green-dark) !important;
  text-align:center; line-height:1.45 !important; position:relative; margin:30px 0 !important;
}
.pullquote::before,.pullquote::after{
  content:""; display:block; width:70px; height:3px; border-radius:2px;
  background:var(--lime); margin:14px auto;
}

/* inline article charts */
.mini-chart{margin:6px 0 26px; text-align:center;}
.mini-chart svg{max-width:480px; width:100%; height:auto;}
.mini-chart .cap{font-size:.74rem; color:var(--muted); margin-top:6px;}

/* calculator charts */
.donut-wrap{display:flex; gap:26px; align-items:center; justify-content:center; margin-top:22px; flex-wrap:wrap;}
.donut{
  width:150px; height:150px; border-radius:50%;
  background:conic-gradient(var(--green-dark) 0% 50%, var(--green) 50% 80%, var(--lime) 80% 100%);
  position:relative; flex:none;
}
.donut::after{content:""; position:absolute; inset:22%; background:#fff; border-radius:50%;}
.donut-legend{font-size:.82rem; color:var(--muted);}
.donut-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px; vertical-align:-1px;}
.donut-legend div{margin-bottom:6px;}
.growthbars{display:flex; align-items:flex-end; gap:10px; height:150px; margin-top:24px; padding:0 6px;}
.growthbars .gb{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%;}
.growthbars .bar{width:100%; border-radius:8px 8px 3px 3px; background:var(--green); position:relative; min-height:6px; transition:height .5s ease;}
.growthbars .bar .contrib{position:absolute; bottom:0; left:0; right:0; background:var(--green-dark); border-radius:0 0 3px 3px;}
.growthbars .yl{font-size:.64rem; color:var(--muted); font-weight:700;}
.gb-legend{font-size:.72rem; color:var(--muted); margin-top:10px; text-align:center;}
.gb-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 6px 0 14px; vertical-align:-1px;}

/* micro-interactions & reveals */
.card svg,.tile svg,.row svg,.cat-chip svg,.calc-card svg{transition:transform .25s ease;}
.card:hover svg,.tile:hover svg,.row:hover svg,.cat-chip:hover svg,.calc-card:hover svg{transform:rotate(-4deg) scale(1.07);}
.tile .go{transition:transform .2s ease;}
.tile:hover .go{transform:translateX(5px);}
.btn:active{transform:translateY(1px) scale(.98);}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;}
  .reveal.vis{opacity:1; transform:none;}
}

/* footer skyline */
.skyline-strip{display:block; width:100%; height:46px; margin-bottom:-1px;}

/* mascot placements */
.mascot-hero{display:flex; justify-content:center; margin-top:26px;}
.mascot-hero svg{width:min(680px,92%); height:auto;}
.newsletter .nl-mascot{width:86px; height:auto; flex:none;}
.bigpage svg{width:170px; height:auto; margin-bottom:18px;}
.empty-hub{display:flex; gap:20px; align-items:center;}
.empty-hub svg{width:90px; height:auto; flex:none;}

/* ================= footer ================= */
.site-footer{background:var(--green-dark); margin-top:40px;}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:42px 24px 30px; font-size:.8rem; color:#a9cdb9;}
.footer-inner .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px; margin-bottom:26px;}
.footer-inner .f-head{color:#fff; font-size:.85rem; margin-bottom:10px; font-weight:700;}
.footer-inner a{color:#a9cdb9; display:block; padding:3px 0;}
.footer-inner a:hover{color:#fff;}
.footer-inner .legal{border-top:1px solid rgba(255,255,255,.15); padding-top:18px; line-height:1.7; font-size:.74rem;}