@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root{
  --paper:#F6F4EE;
  --paper-raised:#FFFFFF;
  --ink:#1C2620;
  --ink-soft:#4B564D;
  --ledger:#2F6D53;
  --ledger-dark:#1F4E3B;
  --gold:#C4922E;
  --line:#D9D4C6;
  --line-strong:#B9B29C;
  --red:#B23B3B;
  --radius:10px;
  --shadow: 0 1px 2px rgba(28,38,32,0.06), 0 8px 24px -12px rgba(28,38,32,0.15);
  --font-display:'Source Serif 4', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:var(--ledger-dark);}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em;}
h1{font-size:clamp(1.8rem,4vw,2.6rem);}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem);}
h3{font-size:1.05rem;}
p{margin:0 0 1em;}
.container{max-width:1120px; margin:0 auto; padding:0 20px;}
.visually-hidden{position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(246,244,238,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .row{display:flex; align-items:center; justify-content:space-between; padding:14px 20px;}
.logo{font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px;}
.logo .tally-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px;height:30px; border:2px solid var(--ledger); border-radius:6px;
  font-family:var(--font-mono); font-size:.8rem; color:var(--ledger); font-weight:700;
}
nav.main-nav{display:none; gap:22px;}
nav.main-nav a{color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.95rem; padding:6px 0; border-bottom:2px solid transparent;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ledger-dark); border-bottom-color:var(--gold);}
.menu-toggle{
  background:none;border:1px solid var(--line-strong); border-radius:8px; width:42px;height:42px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative;
}
.menu-toggle span::before{position:absolute; top:-6px;}
.menu-toggle span::after{position:absolute; top:6px;}
.mobile-nav{display:none; flex-direction:column; padding:6px 20px 18px; border-top:1px solid var(--line);}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:var(--ink); text-decoration:none; padding:11px 0; border-bottom:1px solid var(--line); font-weight:500;}
@media (min-width:860px){
  nav.main-nav{display:flex;}
  .menu-toggle{display:none;}
}

/* Hero / intro */
.page-intro{padding:44px 0 8px;}
.eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--ledger-dark); font-weight:600;}

/* Home grid */
.calc-grid{display:grid; grid-template-columns:1fr; gap:16px; padding:28px 0 56px;}
@media (min-width:640px){.calc-grid{grid-template-columns:1fr 1fr;}}
.calc-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease;
  display:flex; flex-direction:column; gap:10px;
}
.calc-card:hover{transform:translateY(-3px); border-color:var(--ledger);}
.calc-card .icon{
  width:42px;height:42px; border-radius:8px; background:var(--ledger); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.calc-card h3{margin-bottom:2px;}
.calc-card p{color:var(--ink-soft); font-size:.92rem; margin:0;}

/* Layout: calculator page */
.calc-layout{display:grid; grid-template-columns:1fr; gap:22px; padding:26px 0 10px;}
@media (min-width:900px){.calc-layout{grid-template-columns:1.1fr .9fr; align-items:start;}}
.panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.results-panel{position:relative;}
@media (min-width:900px){.results-panel{position:sticky; top:84px;}}

.field{margin-bottom:18px;}
.field label{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:.92rem; margin-bottom:6px;}
.field .val-badge{font-family:var(--font-mono); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:2px 8px; font-size:.85rem;}
input[type=number], input[type=text], select{
  width:100%; font-family:var(--font-mono); font-size:1rem; padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--ink);
}
input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:4px;
  background:var(--line-strong); margin-top:6px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--ledger); border:3px solid #fff; box-shadow:0 0 0 1px var(--ledger); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--ledger); border:3px solid #fff;
  box-shadow:0 0 0 1px var(--ledger); cursor:pointer;
}
.slider-row{display:flex; align-items:center; gap:10px;}
.slider-row input[type=range]{flex:1;}
.slider-row input[type=number]{width:88px; flex:none;}

.seg-group{display:flex; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden;}
.seg-group button{
  flex:1; background:#fff; border:none; padding:10px 8px; font-family:var(--font-body);
  font-weight:600; font-size:.88rem; cursor:pointer; color:var(--ink-soft); border-right:1px solid var(--line);
}
.seg-group button:last-child{border-right:none;}
.seg-group button[aria-pressed="true"]{background:var(--ledger); color:#fff;}

.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.switch{position:relative; width:46px; height:26px; flex:none;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch .track{position:absolute; inset:0; background:var(--line-strong); border-radius:20px; transition:.2s;}
.switch .thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .track{background:var(--ledger);}
.switch input:checked ~ .thumb{transform:translateX(20px);}

/* Tally readout - signature element */
.tally-total{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(2rem,7vw,2.7rem);
  color:var(--ledger-dark); letter-spacing:.01em; display:flex; align-items:baseline; gap:6px;
}
.tally-total .cents{font-size:.5em; color:var(--ink-soft);}
.tally-sub{font-size:.85rem; color:var(--ink-soft); margin-top:2px;}
.tally-row{
  display:flex; justify-content:space-between; align-items:center; padding:10px 0;
  border-bottom:1px dashed var(--line);
}
.tally-row:last-child{border-bottom:none;}
.tally-row .lbl{font-size:.92rem; color:var(--ink-soft);}
.tally-row .amt{font-family:var(--font-mono); font-weight:600;}
.result-card{margin-bottom:16px;}
.callout{
  background:#F1EEE0; border-left:3px solid var(--gold); border-radius:0 8px 8px 0;
  padding:12px 14px; font-size:.88rem; color:var(--ink-soft); margin-top:14px;
}

/* bar chart */
.bars{display:flex; align-items:flex-end; gap:14px; height:150px; margin-top:14px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.bar-col .bar{width:100%; max-width:52px; background:var(--line-strong); border-radius:5px 5px 0 0; transition:height .4s ease;}
.bar-col.active .bar{background:var(--ledger);}
.bar-col .bar-val{font-family:var(--font-mono); font-size:.72rem; margin-bottom:4px; color:var(--ink-soft);}
.bar-col .bar-label{font-size:.72rem; margin-top:6px; color:var(--ink-soft); text-align:center;}

/* amortization table */
.table-wrap{overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:8px;}
table{width:100%; border-collapse:collapse; font-size:.85rem;}
th,td{padding:8px 10px; text-align:right; border-bottom:1px solid var(--line); font-family:var(--font-mono);}
th:first-child,td:first-child{text-align:left; font-family:var(--font-body); font-weight:600;}
thead th{background:var(--paper); position:sticky; top:0;}
.table-toggle{display:flex; gap:8px; margin-top:16px;}
.linklike-btn{background:none; border:1px solid var(--line-strong); border-radius:7px; padding:8px 14px; font-weight:600; font-size:.85rem; cursor:pointer; color:var(--ink);}
.linklike-btn[aria-pressed="true"]{background:var(--ledger); color:#fff; border-color:var(--ledger);}
details.amort summary{cursor:pointer; font-weight:600; padding:10px 0; color:var(--ledger-dark);}

/* explainer / FAQ */
.explainer{padding:36px 0; border-top:1px solid var(--line); margin-top:30px;}
.faq-item{border-bottom:1px solid var(--line); padding:14px 0;}
.faq-item h3{margin-bottom:6px;}

/* you might also like */
.also-like{padding:10px 0 40px;}
.also-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:14px;}
.also-grid a{background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:14px; text-decoration:none; color:var(--ink); font-weight:600; font-size:.9rem;}
.also-grid a:hover{border-color:var(--ledger);}

/* footer */
footer.site-footer{background:var(--ledger-dark); color:#EDEAE0; margin-top:50px; padding:38px 0 26px;}
footer.site-footer .foot-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media (min-width:700px){footer.site-footer .foot-grid{grid-template-columns:1.2fr 1fr 1fr;}}
footer.site-footer h4{font-family:var(--font-mono); text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; color:#C9CFC5; margin-bottom:10px;}
footer.site-footer a{color:#EDEAE0; text-decoration:none; opacity:.9; font-size:.9rem;}
footer.site-footer a:hover{opacity:1; text-decoration:underline;}
footer.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:26px; padding-top:16px; font-size:.8rem; color:#C9CFC5; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;}

.legal-page{padding:40px 0 60px; max-width:760px; margin:0 auto;}
.legal-page h2{margin-top:1.6em;}
.legal-page .updated{color:var(--ink-soft); font-size:.9rem; margin-bottom:2em;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}