/* ==========================================================================
   sipcalculatorhub.com — editorial theme
   tokens.css : design tokens + base + layout + components
   ========================================================================== */

/* ---- self-hosted fonts (drop the actual files in /assets/fonts/) ---- */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/assets/fonts/Inter-Variable.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

/* ---- tokens ---- */
:root{
  --bg:#fcfcfa; --surface:#ffffff; --wash:#f2f4f7; --line:#e3e7ee; --line-2:#cfd6e0;
  --ink:#13203a; --ink-soft:#3d4a63; --muted:#6c768c;
  --blue:#1e4ed8; --blue-deep:#15349a; --blue-wash:#eaf0ff;
  --grow:#1f8a5b;   /* nominal */
  --grow-wash:#e6f4ef;
  --tax:#b5532b;    /* post-tax */
  --real:#8a6d2a;   /* real value */

  --maxw:1060px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---- reset / base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* ---- header ---- */
.site-header{border-bottom:1px solid var(--line-2);background:var(--bg);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px}
.brand .mark{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;border:1px solid var(--ink);padding:3px 6px;color:var(--blue);font-weight:700}
.brand em{font-style:italic;color:var(--blue)}
.nav-links{display:flex;gap:18px;font-size:.88rem;color:var(--ink-soft);flex-wrap:wrap}
.nav-links a:hover{color:var(--blue)}
.burger{display:none;font-size:1.4rem;background:none;border:0;cursor:pointer;color:var(--ink)}
@media(max-width:980px){.nav-links{display:none}.burger{display:block}}

/* ---- hero / headings ---- */
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:18px;display:flex;gap:12px;align-items:center}
.kicker::after{content:"";flex:1;height:1px;background:var(--line-2);max-width:120px}
h1.display{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.04;letter-spacing:-.02em;font-weight:700;max-width:17ch}
h1.display em{font-style:italic;color:var(--blue)}
.lede{margin-top:20px;font-size:1.14rem;color:var(--ink-soft);max-width:56ch}

/* ---- calculator shell ---- */
.calc{margin-top:38px;border:1px solid var(--line-2);background:var(--surface)}
.calc-top{padding:12px 26px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.calc-top .live{color:var(--grow);display:inline-flex;align-items:center;gap:7px}
.calc-top .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grow)}
.calc-disclaimer{margin:0;padding:9px 26px;background:var(--wash);border-bottom:1px solid var(--line);font-size:.76rem;color:var(--muted);line-height:1.45}
.calc-disclaimer a{color:var(--blue);text-decoration:underline}
.calc-grid{display:grid;grid-template-columns:300px 1fr}
@media(max-width:840px){.calc-grid{grid-template-columns:1fr}}
.calc-inputs{padding:28px 26px;border-right:1px solid var(--line)}
@media(max-width:840px){.calc-inputs{border-right:0;border-bottom:1px solid var(--line)}}
.calc-out{padding:28px 26px}

/* ---- form fields ---- */
.field{margin-bottom:18px}
.field .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.field .val{font-family:var(--mono);font-size:.9rem;font-weight:700;color:var(--blue-deep)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--line-2);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1px var(--blue)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--blue);border:0}
.toggle{display:flex;align-items:center;gap:9px;margin-top:4px;font-size:.83rem;color:var(--ink-soft);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--blue);width:15px;height:15px}

/* ---- signature: three-column figure table ---- */
.figure-lead{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.92rem;margin-bottom:6px}
.three{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
@media(max-width:560px){.three{grid-template-columns:1fr}}
.three .col{padding:18px 16px;border-right:1px solid var(--line)}
.three .col:last-child{border-right:0}
@media(max-width:560px){.three .col{border-right:0;border-bottom:1px solid var(--line)}.three .col:last-child{border-bottom:0}}
.three .t{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.three .col.nom .t{color:var(--grow)} .three .col.tax .t{color:var(--tax)} .three .col.real .t{color:var(--real)}
.three .a{font-family:var(--serif);font-size:1.7rem;font-weight:700;margin-top:10px;letter-spacing:-.01em}
.three .d{font-size:.74rem;color:var(--muted);margin-top:5px}
.note{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--ink-soft);border-left:3px solid var(--blue);padding-left:14px}
.note b{font-family:var(--mono);font-style:normal;font-weight:700;color:var(--tax)}

/* ---- trust strip ---- */
.trust{padding:24px 0 4px}
.trust-inner{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.82rem;color:var(--muted)}
.trust-inner b{color:var(--ink-soft);font-weight:600}
.trust-inner .pip{color:var(--blue)}

/* ---- sections ---- */
.section{padding:62px 0}
.section.wash{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:62ch;margin-bottom:32px}
.section-head .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:13px}
.section-head h2{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:-.015em;line-height:1.1}
.section-head p{margin-top:12px;color:var(--ink-soft)}

/* ---- tool grid ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line-2);background:var(--surface)}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
.card{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s}
.card:nth-child(2n){border-right:0}
.card:hover{background:var(--blue-wash)}
.card .ix{font-family:var(--mono);font-size:.72rem;color:var(--blue);font-weight:600}
.card h3{font-family:var(--serif);font-size:1.2rem;margin:10px 0 7px}
.card p{font-size:.9rem;color:var(--muted)}
.moat{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--blue-deep);background:var(--blue-wash);padding:3px 8px}

/* ---- why strip ---- */
.why{background:var(--ink);color:#dfe6f2}
.why .wrap{padding:56px 24px}
.why .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8fb4ff;font-weight:600;margin-bottom:12px}
.why h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.015em;max-width:26ch;color:#fff}
.why .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
@media(max-width:760px){.why .cols{grid-template-columns:1fr;gap:22px}}
.why .col h4{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:#8fb4ff;margin-bottom:9px}
.why .col p{font-size:.91rem;color:#aab6cc}

/* ---- footer ---- */
.site-footer{padding:48px 0 32px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);margin-top:48px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr 1fr}}
.foot-brand .brand{font-size:1.1rem}
.foot-tag{margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--muted);max-width:34ch}
.foot-col h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;font-weight:700}
.foot-col a{display:block;color:var(--muted);padding:4px 0;font-size:1rem}
.foot-col a:hover{color:var(--blue)}
.disclaimer{margin-top:30px;font-size:.76rem;color:#98a0b2;max-width:82ch;line-height:1.5;border-top:1px solid var(--line);padding-top:20px}
.copyright{margin-top:10px;font-size:.78rem;color:#98a0b2}

/* free tools directory */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tool-grid{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--line-2);background:var(--surface);transition:.12s}
.tool-card:hover{border-color:var(--blue);transform:translateY(-1px)}
.tool-name{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.tool-card:hover .tool-name{color:var(--blue-deep)}
.tool-desc{font-size:.82rem;color:var(--muted);line-height:1.45}

/* ---- ad slots ---- */
.ad-slot{margin:28px auto;text-align:center;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:.7rem;border:1px dashed var(--line-2);background:var(--wash)}
.ad-slot[data-size="mobile"]{min-height:50px}

/* ---- a11y / motion ---- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}