/* ============================================================
   IFTACalculators.com — Shared Tools Stylesheet
   Design system extracted from the main site (Inter + blue).
   Used by /tools hub + every calculator page.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1a56db;--blue-dk:#1e429f;--blue-lt:#ebf5ff;--blue-md:#3f83f8;
  --green:#057a55;--green-lt:#f3faf7;--green-bd:#6ee7b7;
  --red:#e02424;--red-lt:#fdf2f2;--red-bd:#fca5a5;
  --amber:#b45309;--amber-lt:#fffbeb;--amber-bd:#fcd34d;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;
  --g400:#9ca3af;--g500:#6b7280;--g600:#4b5563;--g700:#374151;
  --g800:#1f2937;--g900:#111827;
  --r:10px;--rs:6px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--g50);color:var(--g800);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}

/* ============================================================
   AD SLOTS — reserved containers, HIDDEN until monetization is on.
   Nothing renders on the front end right now (display:none).
   TO ENABLE ADS LATER:
     1. Paste your AdSense loader <script> once in <head>.
     2. Drop your <ins class="adsbygoogle">…</ins> inside each .ad box.
     3. Add class="ads-live" to the <body> tag (site-wide switch).
   The boxes below then reserve the right size so layout doesn't jump.
   ============================================================ */
.ad{display:none}
.ad-label{display:none}
body.ads-live .ad{display:block;margin:1.25rem auto;text-align:center;overflow:hidden;background:var(--g100);border:1px solid var(--g200);border-radius:var(--rs)}
body.ads-live .ad-label{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);padding-top:.25rem}
body.ads-live .ad-top,body.ads-live .ad-bottom{max-width:728px;min-height:90px}
body.ads-live .ad-side{min-height:250px;margin:0 0 1rem}
body.ads-live .ad-inline{max-width:580px;min-height:250px}

/* HEADER */
.hdr{background:#fff;border-bottom:1.5px solid var(--g200);position:sticky;top:0;z-index:200;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.hdr-in{max-width:1160px;margin:0 auto;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{text-decoration:none;display:flex;align-items:center;gap:10px}
.logo-img{height:46px;width:auto;display:block}
.logo-txt .ln{font-size:1rem;font-weight:800;color:var(--g900);letter-spacing:-.02em;display:block}
.logo-txt .lt{font-size:10px;color:var(--g500);font-weight:500;letter-spacing:.02em;display:block}
nav{display:flex;gap:.2rem;align-items:center}
nav a{color:var(--g600);text-decoration:none;font-size:13.5px;font-weight:500;padding:.4rem .75rem;border-radius:var(--rs);transition:all .15s}
nav a:hover{color:var(--blue);background:var(--blue-lt)}
nav a.active{color:var(--blue);font-weight:600}
@media(max-width:720px){nav{display:none}}

/* TOOLS DROPDOWN (header nav) */
.nav-dd{position:relative;display:inline-flex}
.dd-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.dd-caret{font-size:10px;transition:transform .15s}
.nav-dd:hover .dd-caret,.nav-dd:focus-within .dd-caret{transform:rotate(180deg)}
.dd-menu{position:absolute;top:100%;left:0;min-width:222px;background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.13);padding:.4rem;margin-top:.35rem;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .15s,transform .15s,visibility .15s;z-index:300}
.nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:.5rem}
.dd-menu a{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;font-size:13px;color:var(--g700);border-radius:var(--rs);font-weight:500;white-space:nowrap}
.dd-menu a:hover{background:var(--blue-lt);color:var(--blue)}
.dd-menu .dd-all{border-top:1px solid var(--g100);margin-top:.3rem;padding-top:.6rem;color:var(--blue);font-weight:700}

/* BANNER */
.banner{background:linear-gradient(90deg,#1e3a8a,var(--blue));color:#fff;text-align:center;padding:.5rem 1rem;font-size:13px;font-weight:500}
.banner strong{color:#fde68a;font-weight:700}
.banner a{color:#bfdbfe;text-decoration:underline;font-weight:600;margin-left:.3rem}

/* HERO */
.hero{background:#fff;border-bottom:1.5px solid var(--g200);padding:2.25rem 1.25rem}
.hero-in{max-width:1160px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:5px;background:var(--blue-lt);color:var(--blue-dk);font-size:11.5px;font-weight:700;padding:.25rem .75rem;border-radius:99px;margin-bottom:.9rem;border:1px solid #bfdbfe}
.hero h1{font-size:clamp(1.6rem,3.4vw,2.35rem);font-weight:800;color:var(--g900);line-height:1.14;letter-spacing:-.03em;margin-bottom:.7rem}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:.975rem;color:var(--g600);margin-bottom:1.1rem;max-width:640px;line-height:1.7}
.badges{display:flex;flex-wrap:wrap;gap:.45rem}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--g700);font-weight:500;background:var(--g100);padding:.28rem .65rem;border-radius:99px;border:1px solid var(--g200)}
.badge .ck{color:var(--green);font-weight:800}

/* BREADCRUMB */
.crumb{max-width:1160px;margin:0 auto;padding:.85rem 1.25rem 0;font-size:12.5px;color:var(--g500)}
.crumb a{color:var(--g500);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb span{color:var(--g700);font-weight:600}

/* LAYOUT */
.wrap{max-width:1160px;margin:0 auto;padding:1.5rem 1.25rem;display:grid;grid-template-columns:1fr 296px;gap:1.5rem;align-items:start}
@media(max-width:900px){.wrap{grid-template-columns:1fr}}
.wrap.solo{grid-template-columns:minmax(0,820px);justify-content:center}

/* CARDS */
.card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.card+.card{margin-top:1.25rem}
.card-hd{padding:.9rem 1.5rem;border-bottom:1px solid var(--g200);background:var(--g50);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-hd-l{display:flex;align-items:center;gap:.6rem}
.step-dot{width:26px;height:26px;background:var(--blue);color:#fff;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-dot.green{background:var(--green)}
.ct{font-size:.9rem;font-weight:700;color:var(--g900)}
.cs{font-size:12px;color:var(--g500)}
.card-bd{padding:1.5rem}
.sec-h{font-size:11.5px;font-weight:700;color:var(--g700);text-transform:uppercase;letter-spacing:.04em;margin:1.4rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--g200)}
.sec-h:first-child{margin-top:0}

/* FORM */
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:520px){.fg2,.fg3{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:.32rem}
.lbl{font-size:11.5px;font-weight:700;color:var(--g700);text-transform:uppercase;letter-spacing:.04em}
.lbl .req{color:var(--red);font-size:13px}
.hint{font-size:11.5px;color:var(--g500);line-height:1.4}
.inwrap{position:relative;display:flex;align-items:center}
.inwrap .pre{position:absolute;left:.7rem;color:var(--g500);font-size:14px;font-weight:600;pointer-events:none}
.inwrap .suf{position:absolute;right:.7rem;color:var(--g500);font-size:12px;pointer-events:none}
.inwrap.has-pre input{padding-left:1.6rem}
input,select{width:100%;padding:.65rem .85rem;border:1.5px solid var(--g300);border-radius:var(--rs);font-size:14px;font-family:inherit;color:var(--g900);background:#fff;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
input::placeholder{color:var(--g400)}

/* BUTTONS */
.btn-calc{width:100%;padding:.95rem;background:var(--blue);color:#fff;border:none;border-radius:var(--r);font-size:1.05rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .15s;box-shadow:0 4px 14px rgba(26,86,219,.3);margin-top:1.25rem}
.btn-calc:hover{background:var(--blue-dk);box-shadow:0 6px 18px rgba(26,86,219,.35)}
.btn-calc:active{transform:scale(.99)}
.btn-reset{width:100%;padding:.6rem;background:#fff;color:var(--g600);border:1.5px solid var(--g300);border-radius:var(--rs);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s;margin-top:.5rem}
.btn-reset:hover{background:var(--g100)}

/* RESULTS */
.res-card{display:none;margin-top:1.25rem}
.res-card.show{display:block}
.res-card .card-hd{background:#f0fdf4}
.sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.1rem}
@media(max-width:580px){.sum-grid{grid-template-columns:1fr 1fr}}
.sc{border-radius:var(--rs);padding:.9rem .85rem;text-align:center}
.sc.owe{background:var(--red-lt);border:1.5px solid var(--red-bd)}
.sc.cred{background:var(--green-lt);border:1.5px solid var(--green-bd)}
.sc.info{background:var(--blue-lt);border:1.5px solid #bfdbfe}
.sc.neut{background:var(--g100);border:1.5px solid var(--g200)}
.sc-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}
.owe .sc-lbl{color:var(--red)}.cred .sc-lbl{color:var(--green)}.info .sc-lbl{color:var(--blue-dk)}.neut .sc-lbl{color:var(--g600)}
.sc-val{font-size:1.35rem;font-weight:800;line-height:1.1}
.owe .sc-val{color:var(--red)}.cred .sc-val{color:var(--green)}.info .sc-val{color:var(--blue)}.neut .sc-val{color:var(--g700)}
.sc-sub{font-size:10px;margin-top:.25rem;color:var(--g500)}
.verdict{border-radius:var(--rs);padding:1rem 1.15rem;margin-bottom:1.1rem;display:flex;align-items:flex-start;gap:.75rem;font-size:13.5px;line-height:1.7;background:var(--blue-lt);border:1px solid #bfdbfe}
.v-icon{font-size:1.3rem;flex-shrink:0;margin-top:2px}
/* breakdown table */
.bdn{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:1rem;border:1px solid var(--g200);border-radius:var(--rs);overflow:hidden}
.bdn td{padding:.6rem .85rem;border-bottom:1px solid var(--g100)}
.bdn tr:last-child td{border-bottom:none}
.bdn td.r{text-align:right;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}
.bdn tr.sub td{background:var(--g50);font-weight:700;color:var(--g800)}
.bdn tr.tot td{background:var(--g100);font-weight:800;border-top:2px solid var(--g300);font-size:14.5px}
.err-box{background:var(--red-lt);border:1px solid var(--red-bd);border-radius:var(--rs);padding:.85rem 1rem;margin-top:.75rem;display:none;font-size:13px;color:var(--red)}
.err-box.show{display:block}
.disc{background:var(--amber-lt);border:1px solid var(--amber-bd);border-radius:var(--rs);padding:.85rem 1rem;margin-top:.85rem;font-size:12px;color:#78350f;line-height:1.7}
.disc strong{font-weight:700}.disc a{color:var(--amber);font-weight:600}

/* SIDEBAR */
.sdb{display:flex;flex-direction:column;gap:1rem}
.ic{background:#fff;border:1px solid var(--g200);border-radius:var(--r);overflow:hidden}
.ic-hd{padding:.8rem 1.1rem;border-bottom:1px solid var(--g100);background:var(--g50)}
.ic-t{font-size:.85rem;font-weight:700;color:var(--g800)}
.ic-bd{padding:.9rem 1.1rem}
.tool-link{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--g100);text-decoration:none;color:var(--g700);font-size:13.5px;font-weight:500;transition:color .15s}
.tool-link:last-child{border-bottom:none}
.tool-link:hover{color:var(--blue)}
.tool-link .ti{font-size:1.1rem;flex-shrink:0}

/* SEO CONTENT */
.seo{max-width:1160px;margin:0 auto;padding:2rem 1.25rem 3rem}
.seo.narrow{max-width:820px}
h2.sh{font-size:1.3rem;font-weight:800;color:var(--g900);margin:1.75rem 0 1rem;letter-spacing:-.02em}
h2.sh:first-child{margin-top:0}
.intro-txt p{font-size:14.5px;color:var(--g600);line-height:1.8;margin-bottom:.85rem}
.intro-txt h3{font-size:1.05rem;font-weight:700;color:var(--g800);margin:1.4rem 0 .5rem}
.intro-txt ul,.intro-txt ol{margin:.4rem 0 1rem 1.3rem}
.intro-txt li{font-size:14.5px;color:var(--g600);line-height:1.8;margin-bottom:.35rem}
.formula{background:var(--g800);border-radius:var(--r);padding:1.25rem 1.5rem;margin:1.25rem 0}
.formula h3{font-size:.75rem;color:var(--g400);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.85rem}
.f-step{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.5rem;padding:.45rem .6rem;border-radius:4px}
.f-step:nth-child(2){background:rgba(59,130,246,.15)}
.f-step:nth-child(3){background:rgba(16,185,129,.12)}
.f-step:nth-child(4){background:rgba(245,158,11,.12)}
.f-n{font-size:10px;font-weight:700;color:var(--g500);min-width:20px}
.f-e{font-family:ui-monospace,monospace;font-size:13px;color:#e5e7eb;line-height:1.5}
.f-e b{color:#fde68a;font-weight:700}
.example-box{background:var(--blue-lt);border:1px solid #bfdbfe;border-radius:var(--r);padding:1.1rem 1.35rem;margin:1.25rem 0}
.example-box h3{font-size:.95rem;font-weight:700;color:var(--blue-dk);margin-bottom:.6rem}
.example-box p,.example-box li{font-size:13.5px;color:var(--g700);line-height:1.8}
.example-box ul{margin:.3rem 0 .3rem 1.2rem}
.info-callout{background:var(--blue-lt);border:1px solid #bfdbfe;border-radius:var(--rs);padding:.85rem 1rem;font-size:13.5px;color:var(--blue-dk);line-height:1.7;margin:1rem 0}
.info-callout strong{font-weight:700}
.faq-list{display:flex;flex-direction:column;gap:.4rem}
.faq-i{border:1px solid var(--g200);border-radius:var(--rs);overflow:hidden;background:#fff}
.faq-q{padding:.9rem 1.1rem;font-size:14px;font-weight:600;color:var(--g800);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .15s;user-select:none}
.faq-q:hover{background:var(--g50)}
.faq-ic{flex-shrink:0;width:20px;height:20px;background:var(--g100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--blue);transition:transform .2s;margin-left:.5rem}
.faq-i.open .faq-ic{transform:rotate(45deg);background:var(--blue-lt)}
.faq-a{display:none;padding:.1rem 1.1rem 1rem;font-size:13.5px;color:var(--g600);line-height:1.8;border-top:1px solid var(--g100)}
.faq-i.open .faq-a{display:block}
.src-note{font-size:12px;color:var(--g500);margin-top:1rem;line-height:1.6}
.src-note a{color:var(--blue);font-weight:600}

/* RELATED TOOLS GRID */
.rt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.rt-card{text-decoration:none;background:#fff;border:1px solid var(--g200);border-radius:var(--r);padding:1.1rem;transition:box-shadow .2s,transform .2s;display:block}
.rt-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.rt-ic{font-size:1.5rem;margin-bottom:.5rem}
.rt-card strong{display:block;font-size:.92rem;color:var(--g900);font-weight:700;margin-bottom:.25rem}
.rt-card span{font-size:12.5px;color:var(--g600);line-height:1.55}

/* FOOTER */
.ftr{background:var(--g900);color:var(--g400);padding:2.5rem 1.25rem 1.5rem;margin-top:1rem}
.ftr-in{max-width:1160px;margin:0 auto}
.ftr-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--g800)}
@media(max-width:700px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.ftr-top{grid-template-columns:1fr}}
.ftr-brand{font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.ftr-logo{height:74px;width:auto;display:block;margin-bottom:.7rem}
.ftr-desc{font-size:12.5px;line-height:1.7;max-width:260px}
.ftr-h{font-size:11px;font-weight:700;color:var(--g300);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem}
.ftr-links{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.ftr-links a{color:var(--g400);text-decoration:none;font-size:13px;transition:color .15s}
.ftr-links a:hover{color:#fff}
.ftr-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.ftr-copy{font-size:12px}
.ftr-disc{font-size:11px;color:var(--g600);line-height:1.65;max-width:680px}
.ftr-disc a{color:var(--g500);text-decoration:underline}
