@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* =========================================================
   WEALTHARIA MASTER DESIGN SYSTEM
   Single source of truth for shared site UI.
   ========================================================= */
:root{
  --wa-ink:#10261f;
  --wa-green:#22a96b;
  --wa-green-2:#45c989;
  --wa-mint:#e9f8f0;
  --wa-bg:#f8faf8;
  --wa-text:#18352b;
  --wa-muted:#687b73;
  --wa-line:#e0e9e4;
  --wa-white:#fff;
}

html{background:var(--wa-bg)!important}
body{
  background:var(--wa-bg)!important;
  color:var(--wa-text)!important;
  font-family:'DM Sans',Arial,Helvetica,sans-serif!important;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Manrope',Arial,Helvetica,sans-serif!important;
}

/* ===== MASTER HEADER ===== */
.site-header{
  height:82px!important;
  min-height:82px!important;
  background:#fff!important;
  border-bottom:1px solid #d7e5e0!important;
  position:sticky!important;
  top:0!important;
  z-index:1100!important;
  box-sizing:border-box!important;
}
.nav-wrap{
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  height:82px!important;
  min-height:82px!important;
  margin:auto!important;
  padding:14px 28px!important;
  display:flex!important;
  align-items:center!important;
  gap:28px!important;
  box-sizing:border-box!important;
}
.site-header .brand{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-1.5px!important;
  white-space:nowrap!important;
  color:var(--wa-ink)!important;
  text-decoration:none!important;
}
.site-header .brand .mark{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  flex:0 0 54px!important;
  border-radius:16px!important;
  background:var(--wa-ink)!important;
  color:#53e0a8!important;
  display:grid!important;
  place-items:center!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:31px!important;
  line-height:1!important;
  font-weight:800!important;
  box-sizing:border-box!important;
}
.site-header .brand>span:last-child{color:var(--wa-ink)!important}
.site-header .brand>span:last-child>span{color:var(--wa-green)!important}
.site-header .nav{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  margin-left:auto!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.site-header .nav a{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:700!important;
  color:#31524a!important;
  text-decoration:none!important;
  border-bottom:2px solid transparent!important;
  padding-bottom:4px!important;
}
.site-header .nav a:hover{
  color:var(--wa-green)!important;
}
.site-header .nav a.active{
  color:#16ad78!important;
  border-bottom-color:#16ad78!important;
}
.site-header .header-btn{
  background:var(--wa-ink)!important;
  color:#fff!important;
  padding:15px 22px!important;
  border-radius:14px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:800!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.site-header .menu-btn{
  display:none!important;
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
  color:var(--wa-ink)!important;
}
.revenue-nav-link{display:none!important}

/* ===== MASTER FOOTER ===== */
.footer{
  background:var(--wa-ink)!important;
  color:#a8c0b9!important;
  padding:58px 28px 28px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  text-align:left!important;
}
.footer-inner{max-width:1180px!important;margin:auto!important}
.footer-brand{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:28px!important;
  font-weight:800!important;
  line-height:1.2!important;
  color:#fff!important;
  display:block!important;
  margin:0!important;
  letter-spacing:-.5px!important;
}
.footer-brand .footer-word{color:#fff!important}
.footer-brand .footer-ar{color:#42c991!important}
.footer p{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  line-height:1.55!important;
  color:#a8c0b9!important;
  margin:8px 0 0!important;
}
.footer-grid{
  display:grid!important;
  grid-template-columns:2fr 1fr 1fr 1fr!important;
  gap:35px!important;
  margin:28px 0!important;
  padding:0!important;
}
.footer-grid>div:first-child{display:block!important}
.footer h4{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:700!important;
  color:#fff!important;
  margin:0 0 12px!important;
}
.footer a{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  line-height:1.55!important;
  font-weight:400!important;
  display:block!important;
  margin:9px 0!important;
  color:#a8c0b9!important;
  text-decoration:none!important;
}
.footer a:hover{color:#63dda3!important}
.footer .copyright{
  font-family:Arial,Helvetica,sans-serif!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
  padding-top:16px!important;
  color:#70847d!important;
  font-size:12px!important;
  line-height:1.6!important;
}

/* ===== SHARED FORM / CARD LANGUAGE ===== */
input,select,textarea,button{font-family:'DM Sans',Arial,Helvetica,sans-serif}
button{cursor:pointer}



/* Brand name inside page content only — header/footer excluded */
.wa-content-brand{color:var(--wa-green)!important}

/* =========================================================
   GLOBAL CONTENT GREEN THEME
   Applies to page content only.
   Header, footer and logos are intentionally excluded.
   ========================================================= */
body :where(h1,h2,h3,h4,h5,h6,a):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  color:var(--wa-green)!important;
}

body :where(.btn,button,input[type="submit"],input[type="button"],input[type="reset"]):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  background:var(--wa-green)!important;
  border-color:var(--wa-green)!important;
  color:#fff!important;
}

body :where(a:hover,.btn:hover,button:hover):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  color:var(--wa-green-2)!important;
}

body :where(.card,.box,.panel,.feature,.stat,.result,.calculator,.form-card):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border-color:var(--wa-green)!important;
}

body :where(input:focus,select:focus,textarea:focus):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border-color:var(--wa-green)!important;
  box-shadow:0 0 0 3px rgba(34,169,107,.12)!important;
}

/* ===== MASTER MOBILE ===== */
@media(max-width:800px){
  .site-header{height:68px!important;min-height:68px!important}
  .nav-wrap{
    height:68px!important;
    min-height:68px!important;
    padding:0 20px!important;
    gap:0!important;
  }
  .site-header .brand{
    gap:9px!important;
    font-size:20px!important;
    letter-spacing:-.8px!important;
  }
  .site-header .brand .mark{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    flex:0 0 34px!important;
    border-radius:10px!important;
    font-size:16px!important;
  }
  .site-header .nav,
  .site-header .header-btn{display:none!important}
  .site-header .menu-btn{
    display:block!important;
    margin-left:auto!important;
    width:42px!important;
    height:42px!important;
    padding:0!important;
    font-size:0!important;
    position:relative!important;
    z-index:1201!important;
  }
  .site-header .menu-btn:before{
    content:"☰";
    font-size:28px;
    line-height:42px;
  }
  .site-header .nav.menu-open{
    display:flex!important;
    position:fixed!important;
    top:68px!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:8px 24px 12px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow:hidden!important;
    border-bottom:1px solid #d7e5e0!important;
    box-shadow:0 10px 24px rgba(16,38,31,.08)!important;
    z-index:1200!important;
  }
  .site-header .nav.menu-open a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    padding:7px 0!important;
    margin:0!important;
    line-height:1.25!important;
    font-size:16px!important;
    font-weight:600!important;
    position:relative!important;
    z-index:1!important;
    text-decoration:none!important;
  }
  .site-header .nav.menu-open a.active{
    color:#16ad78!important;
    border-bottom:2px solid #16ad78!important;
    padding-bottom:7px!important;
  }
  .site-header .nav.menu-open .revenue-nav-link{
    display:block!important;
  }
  .site-header .nav.menu-open a[href="pricing.html"]{
    font-size:16px!important;
    font-weight:600!important;
    padding:7px 0!important;
  }

  .footer{padding:42px 27px 22px!important}
  .footer-brand{font-size:26px!important;line-height:1.2!important}
  .footer p{font-size:12px!important;line-height:1.5!important;margin:7px 0 0!important}
  .footer-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:28px!important;
    row-gap:0!important;
    margin:25px 0 22px!important;
  }
  .footer-grid>div:first-child{grid-column:1/-1!important}
  .footer h4{font-size:14px!important;line-height:1.25!important;margin:0 0 10px!important}
  .footer a{font-size:12px!important;line-height:1.45!important;margin:0 0 9px!important}
  .footer-grid>div:nth-child(2),
  .footer-grid>div:nth-child(3),
  .footer-grid>div:nth-child(4){align-self:start!important}
  .footer .copyright{font-size:12px!important;line-height:1.55!important;padding-top:14px!important}
}


/* CTA buttons keep readable white text */
body :where(.learn,.cta .learn,.btn.white):not(.site-header *):not(.footer *){
  background:var(--wa-green)!important;
  color:#fff!important;
  border-color:var(--wa-green)!important;
}
body :where(.learn:hover,.cta .learn:hover,.btn.white:hover):not(.site-header *):not(.footer *){
  color:#fff!important;
  background:var(--wa-green-2)!important;
}


/* ===== MOBILE SPACING PASS =====
   Reduce excessive vertical whitespace on phones while
   preserving desktop spacing and Header/Footer styling.
*/
@media(max-width:700px){
  .page-hero{
    padding:44px 0 38px!important;
  }
  .page-section,
  .section{
    padding:44px 0!important;
  }
  .topics{
    padding:44px 0!important;
  }
  .ask-section{
    padding:38px 0!important;
  }
  .features{
    padding:24px 0!important;
  }
  .why{
    padding:50px 0!important;
  }
  .cta{
    padding-bottom:50px!important;
  }
  .blog{
    padding-bottom:50px!important;
  }
  .revenue-tools{
    padding:40px 20px!important;
  }
  .plans{
    gap:16px!important;
    padding-bottom:32px!important;
  }
  .box{
    margin-top:16px!important;
    margin-bottom:20px!important;
  }
}


/* ===== GLOBAL MOBILE DENSITY / SCROLL PASS =====
   Site-wide phone layout: reduce dead space and section gaps
   while keeping cards comfortable and readable.
*/
@media(max-width:700px){
  /* Remove large desktop-style section breathing room on phones */
  main > section{
    padding-top:36px!important;
    padding-bottom:36px!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
  main > section + section{
    margin-top:0!important;
  }

  /* Hero blocks should size to their content, not reserve a tall viewport */
  main .hero,
  main .page-hero{
    min-height:0!important;
  }
  main .hero-inner{
    min-height:0!important;
    padding-top:32px!important;
    padding-bottom:32px!important;
    gap:24px!important;
  }
  main .hero-art{
    margin-top:24px!important;
  }

  /* Keep the most common section headings close to their content */
  main .section-head,
  main .page-section .section-head{
    margin-bottom:20px!important;
  }
  main .section-label,
  main .eyebrow{
    margin-bottom:10px!important;
  }

  /* Comfortable but compact card stacks */
  main .cards-grid,
  main .feature-grid,
  main .blog-grid,
  main .plans,
  main .grid{
    gap:14px!important;
  }
  main .cards-grid,
  main .feature-grid,
  main .blog-grid{
    margin-top:22px!important;
  }
  main .card,
  main .box,
  main .panel,
  main .feature,
  main .info-card,
  main .form-card{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  /* Compact common card internals without making them cramped */
  main .info-card{
    padding:20px!important;
  }
  main .form-card{
    padding:20px!important;
  }

  /* Avoid oversized vertical gaps around common CTA areas */
  main .cta,
  main .ask-section{
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
  main .cta-box{
    padding:28px 22px!important;
  }

  /* Keep stacked content blocks visually separated, not widely spaced */
  main .reason-list>div{
    padding:14px 0!important;
  }
  main .category{
    margin-top:22px!important;
    margin-bottom:0!important;
  }

  /* Calculator / tool pages */
  main .tabs{
    padding-top:10px!important;
    padding-bottom:6px!important;
  }
  main .heroBox{
    min-height:0!important;
  }
}


/* ===== MOBILE DEAD-SPACE CORRECTION =====
   Final global phone pass: keep sections distinct, but remove
   unnecessary top/bottom air and compounded nested padding.
*/
@media(max-width:700px){
  /* A compact section rhythm across the entire site */
  main > section{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  /* Page/landing heroes: content starts closer to the header */
  main > .hero,
  main > .page-hero{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  /* Home/landing hero nested padding must not stack into dead space */
  main .hero-inner{
    padding-top:12px!important;
    padding-bottom:12px!important;
    gap:12px!important;
  }
  main .hero-art{
    margin-top:8px!important;
  }

  /* Keep the first content block close to a hero illustration */
  main > .features{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }

  /* Common section headings and card grids */
  main .section-head{
    margin-bottom:14px!important;
  }
  main .cards-grid,
  main .feature-grid,
  main .blog-grid{
    margin-top:16px!important;
    gap:12px!important;
  }

  /* Comfortable card padding, without large surrounding gaps */
  main .info-card,
  main .form-card{
    padding:18px!important;
  }
  main .box{
    margin-top:8px!important;
    margin-bottom:12px!important;
  }

  /* Compact transitions around CTA / AI / tool sections */
  main .cta,
  main .ask-section,
  main .topics,
  main .why,
  main .blog,
  main .revenue-tools{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  /* Don't let a nested CTA add another large vertical buffer */
  main .cta-box{
    margin-top:0!important;
    margin-bottom:0!important;
    padding:24px 20px!important;
  }
}


/* ===== FINAL GLOBAL MOBILE LAYOUT AUTHORITY =====
   Loaded last on every page. This is the single mobile spacing
   standard for WealthAria.
*/
@media(max-width:700px){
  main > section{
    margin:0!important;
    padding-top:20px!important;
    padding-bottom:20px!important;
  }
  main > section + section{
    padding-top:20px!important;
  }

  /* Eliminate hero dead space caused by desktop grid centering,
     minimum heights and compounded mobile padding. */
  main > .hero,
  main > .page-hero{
    min-height:0!important;
    height:auto!important;
    padding-top:16px!important;
    padding-bottom:16px!important;
  }
  main .hero-inner{
    min-height:0!important;
    height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
    gap:8px!important;
    row-gap:8px!important;
    align-items:start!important;
    align-content:start!important;
  }
  main .hero-copy{
    margin-top:0!important;
    margin-bottom:0!important;
  }
  main .hero-art{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  /* Compact common section-to-content spacing */
  main .section-head{
    margin-top:0!important;
    margin-bottom:12px!important;
  }
  main .section-label,
  main .eyebrow{
    margin-bottom:8px!important;
  }
  main .cards-grid,
  main .feature-grid,
  main .blog-grid{
    margin-top:12px!important;
    gap:12px!important;
  }

  /* Cards stay readable; only their surrounding dead space is reduced. */
  main .card,
  main .box,
  main .panel,
  main .feature,
  main .info-card,
  main .form-card{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  main .cta,
  main .ask-section,
  main .topics,
  main .why,
  main .blog,
  main .revenue-tools{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  main .cta-box{
    margin-top:0!important;
    margin-bottom:0!important;
    padding:22px 20px!important;
  }
}

@media(max-width:700px){main > .hero + .features + .why{padding-top:20px!important;padding-bottom:12px!important}main > .hero + .features + .why .two-col{row-gap:18px!important}main > .hero + .features + .why + .cta{padding-top:12px!important;padding-bottom:20px!important}main > .hero + .features + .why + .cta .cta-box{margin-top:0!important}}


/* ===== HOME MOBILE GAP — FINAL FIX =====
   Remove nested desktop/tablet padding from the Home "Why" block.
   This specifically prevents the large blank area before the CTA.
*/
@media(max-width:700px){
  main > .why{
    padding-top:8px!important;
    padding-bottom:8px!important;
    min-height:0!important;
    height:auto!important;
  }
  main > .why .two-col{
    display:block!important;
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
    gap:0!important;
  }
  main > .why .two-col>div:first-child{
    margin-bottom:18px!important;
  }
  main > .why .reason-list{
    margin:0!important;
    padding:0!important;
  }
  main > .why .reason-list>div{
    padding:14px 0!important;
  }
  main > .why .reason-list>div:last-child{
    padding-bottom:0!important;
  }
  main > .why + .cta{
    padding-top:8px!important;
    margin-top:0!important;
  }
}


/* ===== HOME MOBILE — TIGHTEN WHY → CTA ===== */
@media(max-width:700px){
  main > .why{
    padding-bottom:0!important;
  }
  main > .why + .cta{
    padding-top:0!important;
  }
}


/* ===== INNER PAGES — MOBILE COMPACT RHYTHM =====
   Home is intentionally excluded; its spacing is tuned separately.
   Keep inner pages compact without making cards or forms cramped.
*/
@media(max-width:700px){
  main > .page-hero{
    padding-top:16px!important;
    padding-bottom:16px!important;
  }
  main > .page-section{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  main > .page-section + .page-section{
    padding-top:12px!important;
  }
  main > .page-section .section-head{
    margin-top:0!important;
    margin-bottom:10px!important;
  }
  main > .page-section .cards-grid{
    margin-top:12px!important;
    gap:12px!important;
  }
  main > .page-section .info-card{
    padding:18px!important;
  }
  main > .page-section .form-card{
    padding:18px!important;
  }

  /* Common non-home content sections */
  main > .section,
  main > .topics,
  main > .ask-section,
  main > .revenue-tools{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  main > .section + .section,
  main > .topics + .section,
  main > .section + .topics{
    padding-top:12px!important;
  }
  main > .section .section-head{
    margin-bottom:10px!important;
  }
}


/* ===== CALCULATORS + WEALTHARIA PLUS — MOBILE FINAL ALIGNMENT ===== */
@media(max-width:700px){

  /* Calculators: remove the remaining vertical air around the active tool,
     disclaimer and CTA while keeping the calculator card readable. */
  main .panel{
    padding-top:6px!important;
    padding-bottom:10px!important;
  }
  main .panel .box{
    margin-top:0!important;
    margin-bottom:8px!important;
  }
  main .panel .insight{
    margin-bottom:8px!important;
  }
  main .disclaimer{
    padding:10px 5%!important;
    margin:0!important;
    line-height:1.55!important;
  }
  main .cta{
    margin:8px 4% 20px!important;
  }
  main .ctaIn{
    width:100%!important;
    max-width:none!important;
    padding:22px 24px!important;
    box-sizing:border-box!important;
  }
  main .cta h2{
    margin:0!important;
  }
  main .cta .learn{
    margin-top:12px!important;
  }

  /* WealthAria Plus / revenue pages: keep every mobile block centered
     on the same 20px side rail and prevent nested width drift. */
  main .wrap{
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  main > .hero{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  main > .hero .wrap{
    width:calc(100% - 40px)!important;
  }
  main > .plans{
    width:calc(100% - 40px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-bottom:18px!important;
    gap:12px!important;
  }
  main > .plans .card{
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  main > .section{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  main > .section .wrap{
    width:calc(100% - 40px)!important;
  }
  main > .section .features{
    width:100%!important;
    margin:0!important;
    gap:12px!important;
  }
  main > .section .feature{
    width:100%!important;
    box-sizing:border-box!important;
  }
  main > .note{
    width:calc(100% - 40px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:14px 0 20px!important;
  }
}


/* ===== CALCULATORS — TRUE MOBILE SPACING AUTHORITY =====
   The Calculators page has no <main> wrapper, so main-scoped rules
   cannot affect its .panel/.disclaimer/.cta elements. Target the
   calculator flow directly after .tabs.
*/
@media(max-width:700px){
  .tabs ~ .panel{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0 20px 8px!important;
    box-sizing:border-box!important;
  }
  .tabs ~ .panel.active{
    display:block!important;
  }
  .tabs ~ .panel:not(.active){
    display:none!important;
  }
  .tabs ~ .panel .box{
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }
  .tabs ~ .panel .insight{
    margin:8px 0 0!important;
  }

  .tabs ~ .disclaimer{
    width:100%!important;
    margin:0!important;
    padding:14px 20px!important;
    box-sizing:border-box!important;
    line-height:1.55!important;
  }

  .tabs ~ .cta{
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin:8px auto 20px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .tabs ~ .cta .ctaIn{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:22px 24px!important;
    box-sizing:border-box!important;
  }
}


/* ===== GLOBAL CONTENT BOX BOUNDARIES =====
   Give all true content/card containers a consistent WealthAria
   section boundary. Header, footer, buttons and large page sections
   are intentionally excluded.
*/
body :where(
  .card,
  .box,
  .panel,
  .feature,
  .stat,
  .result,
  .calculator,
  .form-card,
  .info-card,
  .cta-box,
  .ctaIn,
  .insight,
  .note,
  .ask-card,
  .category,
  .blog-card,
  .plans .card
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:2px solid var(--wa-green)!important;
  box-sizing:border-box!important;
}


/* ===== CONTENT BOX BOUNDARY REFINEMENT =====
   Boundaries belong to the visible rounded content boxes themselves.
   Avoid double/square borders on structural wrappers and tiny summary cells.
*/
body :where(
  .panel,
  .stat,
  .ctaIn
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:0!important;
}

/* Keep the CTA boundary on its rounded outer container. */
body :where(.cta,.cta-box):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  box-sizing:border-box!important;
}

/* Calculators: give the main calculator its own breathing room below tabs. */
@media(max-width:700px){
  .tabs ~ .panel.active{
    margin-top:12px!important;
  }
}


/* ===== SHARED ROUNDED CONTENT BOUNDARIES — ALL PAGES =====
   Global-only rule: major visible content boxes use one consistent
   rounded green boundary. Structural wrappers remain unbordered.
*/
body :where(
  .feature-card,
  .photo-card,
  .info-card,
  .policy-card,
  .form-card,
  .hero-panel,
  .answer-box,
  .research-info,
  .ask-card,
  .cta-card,
  .cta-box,
  .box,
  .score,
  .card
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  box-sizing:border-box!important;
}

/* Internal/structural wrappers must not create a second boundary. */
body :where(
  .panel,
  .ctaIn,
  .stat,
  .wrap,
  .container,
  .section,
  .page-section,
  .features,
  .blog-grid,
  .cards-grid,
  .feature-grid,
  .topic-grid,
  .contact-grid,
  .faq-grid,
  .policy-grid,
  .footer-grid
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:0!important;
}

/* Calculator insight is already a self-contained rounded callout. */
body .insight:not(.site-header *):not(.footer *){
  border:2px solid var(--wa-green)!important;
  border-radius:18px!important;
}

/* Keep the calculator's main box separated from its tab row on mobile. */
@media(max-width:700px){
  .tabs ~ .panel.active{margin-top:12px!important}
}


/* ===== FIX ROUNDING FOR EXISTING GLOBAL CONTENT BOUNDARIES =====
   The boundary is applied to the content container, not its children.
*/
body :where(
  .category,
  .calculator,
  .result,
  .note,
  .blog-card,
  .plans .card,
  .panel,
  .feature,
  .info-card,
  .form-card
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border-radius:22px!important;
  overflow:hidden!important;
}


/* ===== MOBILE CATEGORY / CHIP SPACING =====
   Keep topic chips comfortably inside their rounded category boundary.
   Natural flex wrapping is retained; no forced/symmetric column pattern.
*/
@media(max-width:700px){
  body .category:not(.site-header *):not(.footer *){
    padding:20px 16px 22px!important;
    margin-top:20px!important;
    margin-bottom:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  body .category:first-child{
    margin-top:0!important;
  }

  body .category h3{
    margin:0 0 20px!important;
    line-height:1.12!important;
  }

  body .category .chips{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    align-content:flex-start!important;
    justify-content:flex-start!important;
    gap:14px!important;
    row-gap:14px!important;
    column-gap:14px!important;
    padding:0!important;
    margin:0!important;
  }

  body .category .chip{
    margin:0!important;
    flex:0 0 auto!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}


/* ===== MOBILE TOPIC CHIP SEQUENCE =====
   Use a clean two-column rhythm for topic buttons. Long questions span
   both columns so the sequence reads as intentional rows rather than
   an uneven vertical list.
*/
@media(max-width:700px){
  body .category .chips{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
    align-items:stretch!important;
  }

  body .category .chip{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:58px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  /* The longer third question becomes a deliberate full-width row. */
  body .category .chip:nth-child(3){
    grid-column:1 / -1!important;
  }
}

/* ===== HIDE NON-AI MUTUAL FUND DATA CHIP ===== */
body button.chip[onclick*="Show top performing mutual funds"]{
  display:none!important;
}


/* ===== MOBILE CATEGORY NESTING SAFETY =====
   Prevent an accidentally nested topic category from becoming a
   narrow box. Every topic category must use the same full-width
   container and the same mobile chip rhythm.
*/
@media(max-width:700px){
  body .category .category{
    width:100%!important;
    max-width:100%!important;
    margin:20px 0 0!important;
    padding:20px 16px 22px!important;
    border:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  body .category .category:first-child{
    margin-top:0!important;
  }
  body .category .category .chips{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
    box-sizing:border-box!important;
  }
  body .category .category .chip{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  body .category .category .chip:nth-child(3){
    grid-column:1 / -1!important;
  }
}


/* ===== AI TOPIC CATEGORY WIDTH SAFETY =====
   If an older/cached DOM ever nests one topic category inside another,
   promote the nested category back to the full topic-column width.
   Normal sibling categories are unaffected.
*/
@media(max-width:700px){
  body .category:has(.category){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
  }

  body .category .category{
    width:100%!important;
    max-width:none!important;
    margin:20px 0 0!important;
    padding:20px 16px 22px!important;
    box-sizing:border-box!important;
    border:2px solid var(--wa-green)!important;
    border-radius:22px!important;
    overflow:visible!important;
  }

  body .category .category:first-child{
    margin-top:0!important;
  }

  body .category .category .chips{
    width:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
}


/* ===== AI TOPIC CARDS — FORCE FULL MOBILE WIDTH =====
   Correct narrow topic cards on the live AI page without changing
   page HTML or affecting other pages.
*/
@media(max-width:700px){
  #topics .container .category{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 100%!important;
    grid-column:1 / -1!important;
    justify-self:stretch!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  #topics .container .category:has(.category){
    padding:0!important;
    border:0!important;
    border-radius:0!important;
  }

  #topics .container .category .category{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    grid-column:1 / -1!important;
    margin-left:0!important;
    margin-right:0!important;
    border:2px solid var(--wa-green)!important;
    border-radius:22px!important;
    box-sizing:border-box!important;
  }
}


/* ===== HEADER WORDMARK SIZE — HOME AND AI STANDARD =====
   Keep the visible WealthAria text identical on every page,
   including pages with legacy responsive logo rules.
*/
.site-header .brand>span:last-child{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-1.5px!important;
}
@media(max-width:800px){
  .site-header .brand>span:last-child{
    font-size:20px!important;
    letter-spacing:-.8px!important;
  }
}


/* ===== SITE-WIDE HEADER WORDMARK NORMALIZATION =====
   One logo text specification for every page using the shared header.
   Explicitly size both wordmark spans to prevent page-level inheritance
   or legacy logo rules from changing the visible text size.
*/
.site-header a.brand > span:last-child,
.site-header a.brand > span:last-child > span{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-1.5px!important;
}
@media(max-width:800px){
  .site-header a.brand > span:last-child,
  .site-header a.brand > span:last-child > span{
    font-size:20px!important;
    letter-spacing:-.8px!important;
  }
}


/* ===== AI PAGE TYPOGRAPHY ALIGNMENT =====
   Match the AI hero's type scale to the Home hero while retaining
   the AI page's own content and layout.
*/
@media(min-width:701px){
  body:has(.category) .hero .eyebrow{
    font-size:10px!important;
    letter-spacing:1.8px!important;
    line-height:1.4!important;
  }
  body:has(.category) .hero h1{
    font-size:clamp(43px,5.5vw,67px)!important;
    line-height:1.08!important;
    letter-spacing:-2.8px!important;
  }
  body:has(.category) .hero p{
    font-size:17px!important;
    line-height:1.6!important;
  }
  body:has(.category) .hero .actions .btn{
    font-size:13px!important;
  }
}
@media(max-width:700px){
  body:has(.category) .hero .eyebrow{
    font-size:10px!important;
    letter-spacing:1.8px!important;
    line-height:1.4!important;
  }
  body:has(.category) .hero h1{
    font-size:42px!important;
    line-height:1.08!important;
    letter-spacing:-2px!important;
  }
  body:has(.category) .hero p{
    font-size:17px!important;
    line-height:1.6!important;
  }
  body:has(.category) .hero .actions .btn{
    font-size:13px!important;
  }
}


/* ===== AI PAGE ACTION BUTTONS — MATCH HOME / LEARN =====
   Standardize the main action buttons while keeping topic chips
   compact and readable for their different purpose.
*/
body:has(.category) .hero .actions .btn,
body:has(.category) .ask-row .btn{
  min-height:52px!important;
  padding:13px 19px!important;
  border-radius:9px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:800!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  body:has(.category) .hero .actions{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  body:has(.category) .hero .actions .btn{
    display:flex!important;
    width:100%!important;
    min-height:52px!important;
    justify-content:center!important;
    align-items:center!important;
  }
  body:has(.category) .ask-row .btn{
    min-height:52px!important;
  }
  body:has(.category) .category .chip{
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }
}


/* ===== PREVENT DOUBLE CTA BOUNDARIES =====
   The section is a layout wrapper; only the inner CTA card should
   carry the rounded green boundary.
*/
body main > section.cta{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}


/* ===== CTA SINGLE-BOUNDARY FIX — FINAL OVERRIDE =====
   CTA section and its layout container are transparent wrappers.
   The inner .cta-box is the only element that receives a boundary.
*/
body main section.cta,
body main section.cta > .container{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
body main section.cta > .container > .cta-box{
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  box-sizing:border-box!important;
}

/* ===== FINAL CTA BORDER CLEANUP — ONE VISIBLE CARD =====
   Remove the extra frame from CTA sections and layout wrappers on every page.
   The actual CTA card alone keeps its rounded green outline.
*/
body main > section.cta,
body main > section.cta::before,
body main > section.cta::after,
body main > section.cta > .container,
body main > section.cta > .container::before,
body main > section.cta > .container::after,
body main > section.cta > .container > .cta-box::before,
body main > section.cta > .container > .cta-box::after{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
body main > section.cta > .container > .cta-box{
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}


/* ===== FINAL CTA SINGLE-CARD NORMALIZATION =====
   The CTA section and its layout wrappers are transparent.
   Only the visible CTA card (home .cta-box or AI .cta-card)
   receives the green rounded boundary.
*/
body main section.cta,
body main section.cta::before,
body main section.cta::after,
body main section.cta > .container,
body main section.cta > .container::before,
body main section.cta > .container::after{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
body main section.cta > .container > :is(.cta-box,.cta-card){
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  outline:0!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
body main section.cta > .container > :is(.cta-box,.cta-card)::before,
body main section.cta > .container > :is(.cta-box,.cta-card)::after{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* ===== LEARN CTA: REMOVE THE EXTRA OUTER FRAME =====
   Keep one rounded green boundary around the dark CTA card only.
   The section and layout container are transparent wrappers.
*/
html body main section.cta,
html body main section.cta::before,
html body main section.cta::after,
html body main section.cta > .container,
html body main section.cta > .container::before,
html body main section.cta > .container::after{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
html body main section.cta > .container > .cta-box{
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  outline:0!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}

/* ===== LEARN CTA: FINAL OVERRIDE FOR GLOBAL BORDER RULES ===== */
body main section.cta:not(.site-header *):not(.footer *):not(.site-header):not(.footer),
body main section.cta > .container:not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
body main section.cta > .container > .cta-box:not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:2px solid var(--wa-green)!important;
  border-radius:22px!important;
  outline:0!important;
  box-shadow:none!important;
}

/* ===== LEARN PAGE: REDUCE MOBILE GAP BELOW CTA =====
   Keep a comfortable gap after the CTA card without excess blank space.
   Scoped to the Learn page so other page layouts remain unchanged.
*/
@media(max-width:700px){
  body:has(main > section.topics) main > section.cta{
    padding-top:20px!important;
    padding-bottom:12px!important;
    margin-bottom:0!important;
  }
  body:has(main > section.topics) main > section.cta > .container{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
}

/* ===== SITE-WIDE ICON ENHANCEMENT =====
   Make content icons larger, vivid and consistently contained
   across all pages. Header and footer branding stay untouched.
*/
body :where(
  .feature-icon,
  .icon,
  .info-card .icon,
  .topic-title .icon,
  .benefit .icon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .hIcon
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  min-height:60px!important;
  max-width:100%!important;
  flex:0 0 60px!important;
  display:inline-grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  padding:0!important;
  font-size:32px!important;
  line-height:1!important;
  overflow:hidden!important;
  text-align:center!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#e2fff0 0%,#b8f3d4 100%)!important;
  color:#087f50!important;
  box-shadow:0 5px 14px rgba(16,38,31,.10),inset 0 1px 0 rgba(255,255,255,.8)!important;
}

/* Learn benefit icons are circular; keep the glyph centered in the tile. */
body .benefit .icon:not(.site-header *):not(.footer *){
  border-radius:50%!important;
  background:linear-gradient(145deg,#dcfff0 0%,#a9edce 100%)!important;
  color:#087f50!important;
}

/* Give repeated content-card icons a lively, coordinated color rotation. */
body .info-card:nth-child(4n+2) .icon,
body .policy-card:nth-child(4n+2) .policy-icon{
  background:linear-gradient(145deg,#e2efff 0%,#b8d5ff 100%)!important;
  color:#155fc2!important;
}
body .info-card:nth-child(4n+3) .icon,
body .policy-card:nth-child(4n+3) .policy-icon{
  background:linear-gradient(145deg,#f0e6ff 0%,#d8c1ff 100%)!important;
  color:#7040c8!important;
}
body .info-card:nth-child(4n) .icon,
body .policy-card:nth-child(4n) .policy-icon{
  background:linear-gradient(145deg,#fff0d9 0%,#ffd39a 100%)!important;
  color:#b9670a!important;
}

/* Home feature tiles retain distinct, saturated accent families. */
body .feature-icon.green{background:linear-gradient(145deg,#d8ffea 0%,#9cebc3 100%)!important;color:#087f50!important}
body .feature-icon.blue{background:linear-gradient(145deg,#e0efff 0%,#a9ceff 100%)!important;color:#155fc2!important}
body .feature-icon.purple{background:linear-gradient(145deg,#f0e5ff 0%,#d2b5ff 100%)!important;color:#7040c8!important}
body .feature-icon.orange{background:linear-gradient(145deg,#fff0d9 0%,#ffc879 100%)!important;color:#b9670a!important}

/* Calculator tabs use compact glyphs, not oversized icon tiles. */
body .tab .ico:not(.site-header *):not(.footer *){
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:38px!important;
  min-height:38px!important;
  flex:0 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:32px!important;
  line-height:1!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body .tab .cagrIcon i{max-width:7px!important}

/* On phones, keep icons fixed-size and clipped within their own tile. */
@media(max-width:700px){
  body :where(
    .feature-icon,
    .icon,
    .info-card .icon,
    .topic-title .icon,
    .benefit .icon,
    .info-icon,
    .policy-icon,
    .panel-icon,
    .hIcon
  ):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    flex:0 0 60px!important;
    font-size:32px!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  body .topic-title .icon{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    flex-basis:46px!important;
    font-size:25px!important;
    border-radius:13px!important;
  }
  body .tab .ico:not(.site-header *):not(.footer *){
    height:36px!important;
    min-height:36px!important;
    font-size:29px!important;
  }
}


/* ===== CALCULATOR ICON REFRESH =====
   Brighter, colorful calculator icons with fixed, contained tiles.
   CSS-only: no calculator markup or page-specific styles changed.
*/
body:has(.tabs) .panel .heading .hIcon{
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  min-height:68px!important;
  flex:0 0 68px!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:20px!important;
  font-size:0!important;
  line-height:1!important;
  box-shadow:0 8px 20px rgba(16,38,31,.14),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body:has(.tabs) .panel .heading .hIcon::before{
  display:block!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:36px!important;
  line-height:1!important;
  filter:drop-shadow(0 2px 2px rgba(16,38,31,.14))!important;
}
body:has(.tabs) #panel-sip .heading .hIcon{background:linear-gradient(145deg,#d8fff0 0%,#77e8b2 100%)!important}
body:has(.tabs) #panel-sip .heading .hIcon::before{content:"🌱"}
body:has(.tabs) #panel-emi .heading .hIcon{background:linear-gradient(145deg,#dceeff 0%,#8fc5ff 100%)!important}
body:has(.tabs) #panel-emi .heading .hIcon::before{content:"🏠"}
body:has(.tabs) #panel-lumpsum .heading .hIcon{background:linear-gradient(145deg,#fff0c7 0%,#ffc65c 100%)!important}
body:has(.tabs) #panel-lumpsum .heading .hIcon::before{content:"💰"}
body:has(.tabs) #panel-cagr .heading .hIcon{background:linear-gradient(145deg,#e9e0ff 0%,#b9a0ff 100%)!important}
body:has(.tabs) #panel-cagr .heading .hIcon::before{content:"📈"}
body:has(.tabs) #panel-fd .heading .hIcon{background:linear-gradient(145deg,#dff4ff 0%,#8dd9f4 100%)!important}
body:has(.tabs) #panel-fd .heading .hIcon::before{content:"🏦"}
body:has(.tabs) #panel-rd .heading .hIcon{background:linear-gradient(145deg,#ffe4ed 0%,#ff9fbd 100%)!important}
body:has(.tabs) #panel-rd .heading .hIcon::before{content:"🪙"}
body:has(.tabs) #panel-ppf .heading .hIcon{background:linear-gradient(145deg,#e4eaff 0%,#a6baff 100%)!important}
body:has(.tabs) #panel-ppf .heading .hIcon::before{content:"📊"}
body:has(.tabs) #panel-retirement .heading .hIcon{background:linear-gradient(145deg,#ffebd6 0%,#ffc18b 100%)!important}
body:has(.tabs) #panel-retirement .heading .hIcon::before{content:"🌅"}

/* Replace monochrome text symbols with vivid, legible emoji icons. */
body:has(.tabs) .tabs .tab .ico{
  font-size:0!important;
}
body:has(.tabs) .tabs .tab .ico::before{
  display:block!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:28px!important;
  line-height:1!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.16))!important;
}
body:has(.tabs) .tabs .tab[data-tool="sip"] .ico::before{content:"🌱"}
body:has(.tabs) .tabs .tab[data-tool="emi"] .ico::before{content:"🏠"}
body:has(.tabs) .tabs .tab[data-tool="lumpsum"] .ico::before{content:"💰"}
body:has(.tabs) .tabs .tab[data-tool="cagr"] .ico::before{content:"📈"}
body:has(.tabs) .tabs .tab[data-tool="fd"] .ico::before{content:"🏦"}
body:has(.tabs) .tabs .tab[data-tool="rd"] .ico::before{content:"🪙"}
body:has(.tabs) .tabs .tab[data-tool="ppf"] .ico::before{content:"📊"}
body:has(.tabs) .tabs .tab[data-tool="retirement"] .ico::before{content:"🌅"}
/* Give calculator tab icons their own bright, rounded badge while
   keeping each glyph fully inside the tab card. */
body:has(.tabs) .tabs .tab .ico{
  width:44px!important;
  height:44px!important;
  min-height:44px!important;
  flex:0 0 44px!important;
  margin:0 auto 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.12))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 9px rgba(0,0,0,.10)!important;
  font-size:0!important;
  line-height:1!important;
  overflow:hidden!important;
  position:relative!important;
  isolation:isolate!important;
}
body:has(.tabs) .tabs .tab .ico > *{
  display:none!important;
}
body:has(.tabs) .tabs .tab .ico::before{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:26px!important;
  line-height:1!important;
  pointer-events:none!important;
}
@media(max-width:700px){
  body:has(.tabs) .panel .heading .hIcon{
    width:64px!important;height:64px!important;
    min-width:64px!important;min-height:64px!important;
    flex-basis:64px!important;border-radius:18px!important;
  }
  body:has(.tabs) .panel .heading .hIcon::before{font-size:34px!important}
  body:has(.tabs) .tabs .tab .ico{
    width:38px!important;height:38px!important;
    min-height:38px!important;flex-basis:38px!important;
    font-size:0!important;border-radius:11px!important;
  }
}

/* ===== COMPACT CALCULATOR TAB CARDS =====
   Reduce oversized green tiles on phones without changing other page cards.
*/
@media(max-width:700px){
  body:has(.tabs) .tabs{
    padding:8px 3.5% 6px!important;
  }
  body:has(.tabs) .tabs .tabGrid{
    gap:8px!important;
    align-items:stretch!important;
  }
  body:has(.tabs) .tabs .tab{
    height:auto!important;
    min-height:0!important;
    padding:8px 4px 6px!important;
    border-radius:15px!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:3px!important;
    box-sizing:border-box!important;
  }
  body:has(.tabs) .tabs .tab .ico{
    width:34px!important;
    height:34px!important;
    min-height:34px!important;
    flex:0 0 34px!important;
    margin:0 auto 2px!important;
    border-radius:10px!important;
  }
  body:has(.tabs) .tabs .tab .ico::before{
    font-size:23px!important;
  }
  body:has(.tabs) .tabs .tab small{
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:center!important;
  }
  body:has(.tabs) .tabs .tab .triangle{
    margin:3px auto 0!important;
  }
}



/* ===== CALCULATOR ICON ALIGNMENT — FINAL GLOBAL OVERRIDE =====
   Center both the replacement glyph and its icon tile. Hide legacy
   icon children so the original and replacement can never overlap.
*/
@media(max-width:900px){
  body:has(.tabs) .tabs .tab{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
  }
  body:has(.tabs) .tabs .tab .ico{
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    overflow:hidden!important;
  }
  body:has(.tabs) .tabs .tab .ico::before{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    transform:none!important;
  }
  body:has(.tabs) .panel .heading .hIcon{
    display:grid!important;
    place-items:center!important;
    text-align:center!important;
    line-height:1!important;
    position:relative!important;
    overflow:hidden!important;
  }
  body:has(.tabs) .panel .heading .hIcon::before{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    transform:none!important;
  }
}


/* ===== FINAL CALCULATOR ICON BOX ALIGNMENT =====
   Keep both tab icons and active calculator icons centered in their
   own tiles. Hide legacy tab glyphs so only the refreshed icon shows.
   Scoped to the calculator page; all other pages remain unchanged.
*/
@media(max-width:900px){
  body:has(.tabs) .tabs .tab .ico{
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    position:relative!important;
    overflow:hidden!important;
    line-height:1!important;
    text-align:center!important;
  }
  body:has(.tabs) .tabs .tab .ico>*{
    display:none!important;
  }
  body:has(.tabs) .tabs .tab .ico::before{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    transform:none!important;
  }
  body:has(.tabs) .panel .heading .hIcon{
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 64px!important;
    position:relative!important;
    padding:0!important;
    overflow:hidden!important;
    text-align:center!important;
    line-height:1!important;
  }
  body:has(.tabs) .panel .heading .hIcon::before{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    transform:none!important;
  }
}

/* ===== HOME HERO RUPEE ICON REFRESH =====
   Replace the legacy plain rupee glyph with a centered coin icon.
*/
body .hero-art .coin.c1{
  display:grid!important;
  place-items:center!important;
  /* Keep the coin icon only; remove the old circular badge. */
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-align:center!important;
}
body .hero-art .coin.c1::before{
  content:"🪙"!important;
  display:block!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:54px!important;
  line-height:1!important;
  color:initial!important;
  -webkit-text-fill-color:initial!important;
  text-align:center!important;
}

/* ===== HOME FEATURE ICON REFRESH =====
   Replace legacy monochrome symbols with colorful, centered icons.
   The original glyphs are visually hidden; card text and layout stay intact.
*/
body .feature-card .feature-icon{
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  min-height:60px!important;
  flex:0 0 60px!important;
  margin:0 0 17px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:17px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  /* Hide the legacy HTML glyph; render only the replacement icon. */
  font-size:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  line-height:0!important;
  box-shadow:0 8px 20px rgba(16,38,31,.12),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body .feature-card:nth-child(1) .feature-icon{
  background:linear-gradient(145deg,#d9fff0 0%,#7ce8b8 100%)!important;
  color:#087b50!important;
}
body .feature-card:nth-child(2) .feature-icon{
  background:linear-gradient(145deg,#dceeff 0%,#83c4ff 100%)!important;
  color:#175db5!important;
}
body .feature-card:nth-child(3) .feature-icon{
  background:linear-gradient(145deg,#f0e4ff 0%,#c2a1ff 100%)!important;
  color:#7040c8!important;
}
body .feature-card:nth-child(4) .feature-icon{
  background:linear-gradient(145deg,#fff0d7 0%,#ffc477 100%)!important;
  color:#a85c08!important;
}
body .feature-card .feature-icon::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:31px!important;
  line-height:1!important;
  color:initial!important;
  -webkit-text-fill-color:initial!important;
  text-align:center!important;
  filter:drop-shadow(0 2px 2px rgba(16,38,31,.12))!important;
}
body .feature-card:nth-child(1) .feature-icon::before{content:"📘"!important}
body .feature-card:nth-child(2) .feature-icon::before{content:"🧮"!important}
body .feature-card:nth-child(3) .feature-icon::before{content:"✨"!important}
body .feature-card:nth-child(4) .feature-icon::before{content:"📰"!important}
@media(max-width:700px){
  body .feature-card .feature-icon{
    width:60px!important;height:60px!important;
    min-width:60px!important;min-height:60px!important;
    flex-basis:60px!important;border-radius:17px!important;
    margin-bottom:17px!important;
  }
  body .feature-card .feature-icon::before{font-size:31px!important}
}

/* ===== HOME FEATURE CARDS: COMPACT, WITHOUT GREEN OUTER BORDER =====
   Applies to the four Learn / Calculators / AI Tools / Blog cards only.
   Keep the icon tiles; remove the green outline around each full card.
*/
body main > section.features .feature-grid > .feature-card{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:16px!important;
  padding:18px!important;
  min-height:0!important;
  height:auto!important;
}
body main > section.features .feature-grid > .feature-card .feature-icon{
  margin-bottom:10px!important;
}
body main > section.features .feature-grid > .feature-card p{
  min-height:0!important;
  margin-bottom:8px!important;
}
body main > section.features .feature-grid > .feature-card h3{
  margin-bottom:4px!important;
}
@media(max-width:700px){
  body main > section.features{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  body main > section.features .feature-grid{
    gap:10px!important;
  }
  body main > section.features .feature-grid > .feature-card{
    padding:14px!important;
    border-radius:14px!important;
  }
  body main > section.features .feature-grid > .feature-card .feature-icon{
    margin-bottom:8px!important;
  }
  body main > section.features .feature-grid > .feature-card p{
    margin-bottom:6px!important;
    line-height:1.45!important;
  }
}



/* ===== FINAL HOME FEATURE CARD COMPACTION — GLOBAL STYLESHEET ONLY =====
   Keep the four Home destination cards compact and remove their outer
   green outlines. The small icon tiles retain their own styling.
*/
html body main > section.features > .container.feature-grid > a.feature-card{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  min-height:0!important;
  height:auto!important;
  padding:14px 16px!important;
  margin:0!important;
  border-radius:14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:0!important;
  box-sizing:border-box!important;
}
html body main > section.features > .container.feature-grid > a.feature-card .feature-icon{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  flex:0 0 54px!important;
  margin:0 0 8px!important;
}
html body main > section.features > .container.feature-grid > a.feature-card h3{
  margin:0 0 4px!important;
  line-height:1.25!important;
}
html body main > section.features > .container.feature-grid > a.feature-card p{
  min-height:0!important;
  margin:0 0 8px!important;
  line-height:1.45!important;
}
html body main > section.features > .container.feature-grid > a.feature-card > span:last-child{
  display:inline-block!important;
  margin:0!important;
  line-height:1.3!important;
}
@media(max-width:700px){
  html body main > section.features{padding:8px 0!important}
  html body main > section.features > .container.feature-grid{
    gap:10px!important;
    margin:0 auto!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card{
    padding:12px 14px!important;
    border:0!important;
    min-height:0!important;
    height:auto!important;
    border-radius:14px!important;
  }
}


/* ===== HOME FEATURE CARDS — KEEP CARD BORDERS, REMOVE ICON TILES =====
   The four destination cards retain their rounded green outlines.
   Only the colored square backgrounds behind the icons are removed.
*/
html body main > section.features > .container.feature-grid > a.feature-card{
  border:2px solid var(--wa-green)!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:18px!important;
  min-height:0!important;
  height:auto!important;
  padding:14px 16px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
html body main > section.features > .container.feature-grid > a.feature-card .feature-icon{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  flex:0 0 54px!important;
  margin:0 0 8px!important;
  overflow:visible!important;
}
@media(max-width:700px){
  html body main > section.features{padding:8px 0!important}
  html body main > section.features > .container.feature-grid{
    gap:10px!important;
    margin:0 auto!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card{
    border:2px solid var(--wa-green)!important;
    border-radius:16px!important;
    padding:12px 14px!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card .feature-icon{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    margin-bottom:8px!important;
  }
}


/* ===== HOME BLOG IMAGE STRIPS — COMPACT MOBILE HEIGHT =====
   Applies only to the three colored image areas on the Home page.
*/
@media(max-width:700px){
  html body main > section.blog .blog-grid > .post > .post-img{
    height:80px!important;
    min-height:80px!important;
    max-height:80px!important;
  }
}


/* ===== HOME BLOG IMAGE STRIPS — 30PX MOBILE HEIGHT ===== */
@media(max-width:700px){
  html body main > section.blog .blog-grid > .post > .post-img{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }
}


/* ===== HOME BLOG CARDS — COMPACT MOBILE CONTENT =====
   Pull each article's text closer to the image strip and reduce
   card height without changing desktop styling or card boundaries.
*/
@media(max-width:700px){
  html body main > section.blog .blog-grid > .post > .post-body{
    padding:12px 16px 14px!important;
    margin:0!important;
  }
  html body main > section.blog .blog-grid > .post > .post-body > small{
    display:block!important;
    margin:0 0 5px!important;
    line-height:1.2!important;
  }
  html body main > section.blog .blog-grid > .post > .post-body > h3{
    margin:0 0 5px!important;
    line-height:1.2!important;
  }
  html body main > section.blog .blog-grid > .post > .post-body > p{
    margin:0!important;
    line-height:1.35!important;
  }
}


/* ===== HOME DESTINATION CARDS — TOP-ALIGNED MOBILE CONTENT =====
   Keep the four card borders; move each icon and its text group close
   to the card's top edge.
*/
@media(max-width:700px){
  html body main > section.features > .container.feature-grid > a.feature-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    padding:2px 14px 12px!important;
    min-height:0!important;
    height:auto!important;
    gap:0!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card .feature-icon{
    flex:0 0 auto!important;
    margin:0 0 5px!important;
    align-self:flex-start!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card h3{
    margin:0 0 3px!important;
    line-height:1.2!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card p{
    margin:0 0 5px!important;
    min-height:0!important;
    line-height:1.35!important;
  }
  html body main > section.features > .container.feature-grid > a.feature-card > span:last-child{
    margin:0!important;
    line-height:1.25!important;
  }
}


/* ===== SITE-WIDE ICON BORDER CLEANUP =====
   Remove decorative/double outlines from icon containers on every page.
   Preserve icon artwork, colors, backgrounds, sizing and card borders.
   Header and footer branding are excluded.
*/
body :where(
  .feature-icon,
  .icon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .hIcon,
  .ico,
  .cIcon,
  .tool-icon,
  .topic-icon
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* ===== FINAL ICON OUTLINE RESET — HIGH-SPECIFICITY GLOBAL OVERRIDE =====
   Clear borders and decorative shadows on icon tiles themselves, without
   affecting the surrounding cards or their green section boundaries.
*/
html body main :is(
  .feature-icon,
  .info-card .icon,
  .topic-title .icon,
  .benefit .icon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .hIcon,
  .tab .ico,
  .cIcon,
  .tool-icon,
  .topic-icon,
  .icon
):not(.site-header *):not(.footer *){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* ===== SITE-WIDE ICON TILE REMOVAL =====
   Match the clean, unboxed Home icons across every page.
   Remove only the icon container's colored tile/border; keep the icon glyph,
   its size, and the surrounding card or section borders.
*/
html body main :is(
  .feature-icon,
  .icon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .hIcon,
  .ico,
  .cIcon,
  .tool-icon,
  .topic-icon
):not(.site-header *):not(.footer *){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}


/* ===== DEFINITIVE ICON TILE RESET =====
   Higher specificity than the colored icon variants above.
   Removes icon tile fills/outlines only; keeps the glyph and card borders.
*/
html body main .feature-icon.feature-icon,
html body main .info-card:nth-child(n) .icon.icon,
html body main .policy-card:nth-child(n) .policy-icon.policy-icon,
html body main .benefit .icon.icon,
html body main .panel-icon.panel-icon,
html body main .info-icon.info-icon,
html body main .policy-icon.policy-icon,
html body main .hIcon.hIcon,
html body main .tab .ico.ico,
html body main .icon.icon,
html body main .ico.ico,
html body main .cIcon.cIcon,
html body main .tool-icon.tool-icon,
html body main .topic-icon.topic-icon{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* ===== LEARN PAGE TOPIC ICONS: REMOVE GREEN TILE ===== */
html body main .topic-title > .icon{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* ===== LEARN PAGE: REMOVE ICON TILE COMPLETELY =====
   Keep the emoji glyph only; remove the colored square, border and shadow.
   This is deliberately scoped to Learn topic-card icons.
*/
html body main .topic-grid > .topic .topic-body .topic-title > span.icon{
  all:unset!important;
  display:inline-block!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  font-size:32px!important;
  line-height:1!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:inherit!important;
}
@media(max-width:700px){
  html body main .topic-grid > .topic .topic-body .topic-title > span.icon{
    font-size:32px!important;
  }
}

/* ===== UNIVERSAL CONTENT ICON CLEANUP =====
   Apply the unboxed Learn icon treatment to icon containers throughout
   every page. Preserve the glyph/image and surrounding card borders.
   Header and footer branding are excluded.
*/
html body main :is(
  [class~="feature-icon"],
  [class~="icon"],
  [class~="info-icon"],
  [class~="policy-icon"],
  [class~="panel-icon"],
  [class~="hIcon"],
  [class~="ico"],
  [class~="cIcon"],
  [class~="tool-icon"],
  [class~="topic-icon"],
  [class~="icon-wrap"],
  [class~="icon-box"]
):not(.site-header *):not(.footer *){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* Remove fixed tile dimensions from standalone emoji/icon wrappers while
   allowing image artwork to retain its natural dimensions. */
html body main :is(
  .feature-icon,
  .info-card .icon,
  .topic-title .icon,
  .benefit .icon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .hIcon,
  .tool-icon,
  .topic-icon
):not(.site-header *):not(.footer *){
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  flex:0 0 auto!important;
  padding:0!important;
  overflow:visible!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* ===== CONTENT ICON TILE RESET — ALL PAGES (NO MAIN WRAPPER ASSUMED) =====
   Pages use top-level sections rather than a <main> element. Target icon
   wrappers directly under body so the cleanup applies on every page.
*/
html body :is(
  .feature-icon,
  .topic-title > .icon,
  .benefit > .icon,
  .info-card .icon,
  .policy-card .policy-icon,
  .hIcon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .ico,
  .cIcon,
  .tool-icon,
  .topic-icon,
  .icon-wrap,
  .icon-box
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
html body :is(
  .feature-icon,
  .topic-title > .icon,
  .benefit > .icon,
  .info-card .icon,
  .policy-card .policy-icon,
  .hIcon,
  .info-icon,
  .policy-icon,
  .panel-icon,
  .ico,
  .cIcon,
  .tool-icon,
  .topic-icon,
  .icon-wrap,
  .icon-box
):not(.site-header *):not(.footer *):not(.site-header):not(.footer){
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin-right:0!important;
  overflow:visible!important;
  flex:0 0 auto!important;
}