:root{
  --bg:#f6f5f1;--card:#fff;--ink:#1f2933;--muted:#5d6673;--line:#d7d3ca;
  --accent:#2f6674;--accent-dark:#24505c;--accent2:#edf6f7;--soft:#f0eee8;
  --warn:#fff8dc;--warn-line:#e0cf89;--shadow:0 10px 28px rgba(22,32,42,.08);
  --radius:22px;--touch:58px;
}
*{box-sizing:border-box}html{font-size:18px;scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}.skip{position:absolute;left:-999px;top:auto}.skip:focus{left:1rem;top:1rem;background:#fff;padding:1rem;z-index:99;border:3px solid var(--accent)}a{color:var(--accent)}.wrap{max-width:1060px;margin:0 auto;padding:0 1rem}.topbar{position:sticky;top:0;background:rgba(250,249,246,.98);border-bottom:1px solid var(--line);z-index:10}.nav{display:flex;align-items:center;justify-content:space-between;gap:.55rem;min-height:56px}.brand{text-decoration:none;color:var(--ink);font-weight:850;font-size:1.05rem;white-space:nowrap;letter-spacing:-.03em}.brand span{color:var(--accent)}.navlinks{display:flex;gap:.15rem;flex-wrap:wrap;justify-content:flex-end}.navlinks a{padding:.4rem .55rem;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:750;font-size:.84rem}.navlinks a:hover,.navlinks a:focus{background:var(--accent2);outline:3px solid rgba(47,102,116,.16)}.hero{padding:.7rem 0 .45rem}.hero-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:1rem;box-shadow:var(--shadow)}.eyebrow{display:inline-block;background:var(--accent2);color:var(--accent-dark);font-weight:850;border-radius:999px;padding:.25rem .65rem;font-size:.78rem}h1{font-size:clamp(1.75rem,6.8vw,3.5rem);line-height:1.06;margin:.45rem 0 .25rem;letter-spacing:-.055em}h2{font-size:clamp(1.35rem,4.6vw,2.05rem);line-height:1.12;letter-spacing:-.04em;margin:1.15rem 0 .65rem}h3{font-size:1.1rem;margin:.2rem 0}.lead{font-size:1rem;color:var(--muted);max-width:780px;margin:.25rem 0}.notice,.disclaimer{border:1px solid var(--warn-line);background:var(--warn);border-radius:18px;padding:.8rem;color:#3c3000;margin:.75rem 0}.quick-tools{padding:.6rem 0 1rem}.section-head{display:flex;align-items:end;justify-content:space-between;gap:.75rem;margin:.6rem 0}.section-head p{margin:0;color:var(--muted);font-size:.95rem}.grid{display:grid;grid-template-columns:1fr;gap:.8rem}.tool-list{display:grid;grid-template-columns:1fr;gap:.65rem;margin:.7rem 0}.tool-btn,.big-btn{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;min-height:var(--touch);padding:.85rem;border:1px solid var(--line);border-radius:20px;background:var(--card);text-decoration:none;color:var(--ink);font-weight:850;box-shadow:0 5px 18px rgba(20,30,40,.045)}.tool-btn .icon{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;background:var(--soft);font-size:1.1rem;flex:none}.tool-btn span:nth-child(2){flex:1}.tool-btn small{display:block;color:var(--muted);font-weight:600;margin-top:.1rem;font-size:.86rem;line-height:1.35}.small-tool{padding:.55rem .65rem;border-radius:16px;min-height:48px}.small-tool .icon{width:1.65rem;height:1.65rem;font-size:.95rem}.small-tool small{display:none}.tool-btn.active,.tool-btn:hover,.tool-btn:focus,.big-btn:hover,.big-btn:focus{border-color:var(--accent);background:var(--accent2);outline:3px solid rgba(47,102,116,.14)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:0 8px 22px rgba(20,30,40,.045)}.calc-shell{display:grid;grid-template-columns:1fr;gap:.85rem;padding:.7rem 0 1.6rem}.calc-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:1rem;box-shadow:var(--shadow)}.calc-card.feature{border-width:2px}.field{margin:.8rem 0}label{display:block;font-weight:850;margin-bottom:.3rem;font-size:.98rem}input,select,textarea{width:100%;min-height:var(--touch);border:1.5px solid #c8c5bd;border-radius:16px;background:#fff;padding:.75rem .9rem;font:inherit;color:var(--ink)}input:focus,select:focus,textarea:focus{outline:4px solid rgba(47,102,116,.18);border-color:var(--accent)}button,.button{min-height:var(--touch);border:0;border-radius:18px;background:var(--accent);color:white;font-weight:850;font:inherit;padding:.8rem 1.1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:hover,.button:hover{background:var(--accent-dark)}.calc-display{width:100%;min-height:68px;border:1.5px solid var(--line);border-radius:20px;background:#f8f7f3;padding:.9rem;font-size:2rem;font-weight:850;text-align:right;overflow:hidden}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:.85rem}.keypad button{background:#f1f0eb;color:var(--ink);border:1px solid var(--line);font-size:1.08rem}.keypad button.op{background:var(--accent);color:#fff}.result{margin-top:.85rem;background:#f3f8f8;border:1px solid #d1e3e6;border-radius:20px;padding:.9rem;font-size:1rem}.result b{font-size:1.1rem}.result .amount{font-size:clamp(1.45rem,6.5vw,2.7rem);font-weight:900;color:var(--accent);letter-spacing:-.04em}.muted{color:var(--muted)}.pill-row{display:flex;gap:.5rem;flex-wrap:wrap}.pill{display:inline-flex;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.32rem .65rem;font-weight:700;color:var(--muted);font-size:.88rem}.article-list{display:grid;gap:.8rem}.footer{padding:1.6rem 0;border-top:1px solid var(--line);color:var(--muted);margin-top:1.4rem}.footer-grid{display:grid;gap:1rem}.table{overflow-x:auto}.table table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:.75rem}.table th{background:#f0efea}.holiday-item{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.65rem 0}.searchbox{position:relative}.two{display:grid;grid-template-columns:1fr;gap:1rem}.article-body{max-width:800px}.article-body p,.article-body li{font-size:1.03rem}.category-title{margin-top:1.3rem}.icon-note{font-size:.93rem;color:var(--muted);margin-top:.35rem}
@media(max-width:520px){html{font-size:17px}.wrap{padding:0 .7rem}.nav{min-height:52px;align-items:flex-start;padding:.45rem .7rem}.brand{font-size:1rem;padding-top:.15rem}.navlinks{max-width:64%;gap:.05rem}.navlinks a{font-size:.76rem;padding:.25rem .38rem}.hero-card{padding:.8rem;border-radius:20px}.hero{padding:.45rem 0 .25rem}.lead{font-size:.96rem}.notice{font-size:.9rem;padding:.7rem}.tool-btn{padding:.75rem;border-radius:18px}.tool-btn small{font-size:.82rem}.footer{font-size:.92rem}.sidebar h2{display:none}.sidebar{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:.5rem;background:#fbfaf7}.calc-shell{padding-top:.45rem}.calc-card{padding:.85rem;border-radius:22px}.keypad button{min-height:54px}.quick-tools h2{margin-top:.75rem}}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}.tool-list{grid-template-columns:repeat(2,1fr)}.calc-shell{grid-template-columns:290px 1fr}.sidebar{position:sticky;top:76px;align-self:start}.footer-grid{grid-template-columns:2fr 1fr 1fr}.hero-card{padding:1.45rem}.calc-card{padding:1.35rem}.two{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}


.cookie-bar{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:100;background:#fff;border:2px solid var(--line);border-radius:18px;padding:.75rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 12px 32px rgba(20,30,40,.18)}
.cookie-bar[hidden]{display:none!important}.cookie-bar p{margin:0;flex:1;font-size:.85rem;line-height:1.35}.cookie-actions{display:flex;gap:.5rem;flex:none}.cookie-bar button{min-height:46px;border-radius:14px;padding:.55rem .85rem;font-weight:850}.cookie-bar button#rejectCookies{background:#eef0f0;color:var(--ink);border:1px solid var(--line)}
@media(max-width:520px){.cookie-bar{display:block;left:.55rem;right:.55rem;bottom:.55rem}.cookie-actions{margin-top:.55rem;display:grid;grid-template-columns:1fr 1fr}.cookie-bar button{width:100%}.nav{min-height:48px}.hero-card{padding:.72rem}.quick-tools{padding-top:.25rem}.section-head{margin-top:.2rem}.section-head p{font-size:.85rem}.tool-list{gap:.5rem}.tool-btn{min-height:52px}.small-tool{min-height:46px}.calc-shell{gap:.6rem}.sidebar{max-height:220px}.calc-card.feature{scroll-margin-top:64px}}

/* --------------------------------------------------
   Calculator page refinement: full-screen calculator focus
   -------------------------------------------------- */
.calc-shell{
  display:grid;
  grid-template-columns:1fr !important;
  gap:.85rem;
  align-items:start;
}
.calc-card.feature{
  order:1;
  width:100%;
  min-height:min(72vh,780px);
  padding:clamp(1rem,3vw,1.8rem);
  overflow:hidden;
}
.sidebar{
  order:2;
  position:static !important;
  max-height:none !important;
  overflow:visible !important;
  border:1px solid var(--line);
  border-radius:22px;
  padding:.85rem;
  background:#fbfaf7;
}
.sidebar h2::after{content:' / Other calculators';font-weight:650;color:var(--muted);font-size:.75em}
.sidebar .tool-btn.small-tool{
  min-height:48px;
  padding:.55rem .7rem;
}
@media(min-width:760px){
  .calc-shell{grid-template-columns:1fr !important;max-width:860px;}
  .calc-card.feature{min-height:560px;}
  .sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;}
  .sidebar h2{grid-column:1/-1;margin:.1rem 0 .35rem;}
}
@media(min-width:1040px){
  .calc-shell{max-width:920px;}
}

/* Prevent long numbers/results from stretching mobile screens */
.calc-card,.field,.result,.hero-card,.card{min-width:0;max-width:100%;overflow:hidden;}
input,select,textarea,.calc-display,.result,.result .amount{
  max-width:100%;
  min-width:0;
}
input,textarea{
  overflow:hidden;
  text-overflow:ellipsis;
}
.calc-display{
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  font-size:clamp(1.7rem,8vw,2.6rem);
}
.result .amount{
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:clamp(1.35rem,6vw,2.4rem);
}
.keypad{grid-template-columns:repeat(4,minmax(0,1fr));}
.keypad button{min-width:0;}
@media(max-width:520px){
  .calc-card.feature{min-height:calc(100vh - 170px);}
  .sidebar{padding:.65rem;}
  .sidebar .tool-btn.small-tool{min-height:44px;font-size:.9rem;}
  .sidebar .tool-btn.small-tool .icon{width:1.55rem;height:1.55rem;}
  .sidebar h2{font-size:1.15rem;display:block!important;}
}
.back-calcs{min-height:44px;padding:.55rem .8rem;border-radius:14px;font-size:.9rem;margin-top:.1rem;background:#eef0f0;color:var(--ink);border:1px solid var(--line)}
.back-calcs:hover{background:var(--accent2);color:var(--ink)}


/* --------------------------------------------------
   Final mobile-first calculator page tightening
   Makes the calculator visible higher on small screens.
   -------------------------------------------------- */
.calc-page-hero{padding:.28rem 0 .12rem;}
.calc-page-hero .hero-card{padding:.62rem .75rem;border-radius:18px;box-shadow:none;}
.calc-page-hero h1{font-size:clamp(1.35rem,6.2vw,2.25rem);line-height:1.02;margin:0 0 .12rem;letter-spacing:-.045em;}
.calc-page-hero .lead{font-size:.86rem;line-height:1.25;margin:.08rem 0;color:var(--muted);}
.compact-note{font-size:.72rem;line-height:1.22;margin:.24rem 0 0;color:var(--muted);}
.compact-note strong{color:var(--ink);}
.compact-back{margin:.22rem 0 0;}
.back-calcs{min-height:34px;padding:.32rem .55rem;border-radius:12px;font-size:.78rem;line-height:1.1;}
.calc-shell{padding-top:.25rem!important;gap:.55rem!important;}
.calc-card.feature{min-height:auto!important;padding:.75rem!important;border-radius:18px!important;}
.calc-card.feature .field{margin:.5rem 0;}
.calc-card.feature label{font-size:.9rem;margin-bottom:.2rem;}
.calc-card.feature input,.calc-card.feature select,.calc-card.feature textarea{min-height:48px;padding:.58rem .7rem;border-radius:14px;font-size:1rem;max-width:100%;}
.calc-card.feature .result{margin-top:.55rem;padding:.7rem;border-radius:16px;}
.calc-card.feature .result .amount{font-size:clamp(1.25rem,5.5vw,2.05rem);}
.calc-card.feature .calc-display{min-height:56px;padding:.65rem;font-size:clamp(1.5rem,7vw,2.2rem);}
.calc-card.feature .keypad{gap:.4rem;margin-top:.55rem;}
.calc-card.feature .keypad button{min-height:46px;border-radius:14px;font-size:1rem;padding:.45rem .25rem;}
.calc-card.feature button{min-height:46px;}
.sidebar{margin-top:.1rem;}
@media(max-width:520px){
  .topbar{position:sticky;}
  .nav{min-height:42px!important;padding:.32rem .65rem!important;}
  .brand{font-size:.96rem;}
  .navlinks a{font-size:.72rem;padding:.22rem .32rem;}
  .calc-page-hero{padding:.18rem 0 .05rem;}
  .calc-page-hero .hero-card{padding:.5rem .58rem;border-radius:16px;}
  .calc-page-hero h1{font-size:1.32rem;margin:0 0 .05rem;}
  .calc-page-hero .lead{font-size:.78rem;line-height:1.18;}
  .compact-note{font-size:.62rem;line-height:1.16;margin-top:.16rem;}
  .compact-back{margin-top:.14rem;}
  .back-calcs{min-height:30px;font-size:.68rem;padding:.25rem .45rem;}
  .calc-shell{padding-top:.15rem!important;gap:.45rem!important;}
  .calc-card.feature{padding:.58rem!important;border-radius:16px!important;}
  .calc-card.feature .field{margin:.38rem 0;}
  .calc-card.feature label{font-size:.82rem;margin-bottom:.16rem;}
  .calc-card.feature input,.calc-card.feature select,.calc-card.feature textarea{min-height:42px;font-size:16px;padding:.48rem .55rem;border-radius:12px;}
  .calc-card.feature .result{margin-top:.45rem;padding:.58rem;font-size:.9rem;}
  .calc-card.feature .result .amount{font-size:1.25rem;}
  .calc-card.feature .calc-display{min-height:50px;font-size:1.55rem;padding:.55rem;border-radius:14px;}
  .calc-card.feature .keypad{gap:.32rem;margin-top:.42rem;}
  .calc-card.feature .keypad button{min-height:42px;border-radius:12px;font-size:.96rem;}
  .sidebar{padding:.5rem;max-height:190px!important;}
  .sidebar h2{font-size:1rem;margin:.05rem 0 .3rem;}
  .sidebar .tool-btn.small-tool{min-height:40px;padding:.42rem .5rem;font-size:.84rem;}
}

/* --------------------------------------------------
   Fix: related calculator list on calculator pages
   The previous mobile max-height allowed the list to spill over the footer.
   Keep it in normal page flow so it never overlaps content.
   -------------------------------------------------- */
.calc-shell .sidebar{
  max-height:none !important;
  overflow:visible !important;
  height:auto !important;
  margin-bottom:1rem;
}
.calc-shell .sidebar .tool-btn.small-tool{
  width:100%;
  min-width:0;
}
@media(max-width:520px){
  .calc-shell .sidebar{
    max-height:none !important;
    overflow:visible !important;
    display:grid;
    grid-template-columns:1fr;
    gap:.42rem;
  }
  .calc-shell .sidebar h2{
    display:block !important;
    margin:.05rem 0 .25rem;
  }
  .calc-shell .sidebar .tool-btn.small-tool{
    min-height:42px;
    padding:.44rem .52rem;
    border-radius:14px;
  }
  .calc-shell .sidebar .tool-btn.small-tool span:nth-child(2){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .footer{
    clear:both;
    position:relative;
    margin-top:1rem;
  }
}

/* Reliable text icons: avoids missing emoji glyph boxes on mobile/desktop browsers */
.tool-btn .icon.text-icon{font-size:.58rem;font-weight:900;letter-spacing:-.02em;color:var(--accent-dark);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;text-transform:uppercase;text-align:center;line-height:1;}
.tool-btn .icon.text-icon:not(:empty){background:#eef5f5;border:1px solid #d7e5e7;}
@media(max-width:430px){.tool-btn .icon.text-icon{font-size:.52rem}.small-tool .icon.text-icon{font-size:.48rem}}