/* ==========================================================================
   GetRealTerms — shared stylesheet
   Used by: /index.html, /about.html, /offer-ledger/offer-ledger.html,
   /rent-vs-buy/rent-vs-buy.html, /freelance-vs-fulltime/freelance-vs-fulltime.html,
   /lease-vs-buy-car/lease-vs-buy-car.html, /grad-school-vs-working/grad-school-vs-working.html,
   /relocate-city-a-vs-b/relocate-city-a-vs-b.html, /new-car-vs-used-car/new-car-vs-used-car.html,
   /dog-vs-cat-lifetime-cost/dog-vs-cat-lifetime-cost.html, /hire-employee-vs-freelancer/hire-employee-vs-freelancer.html,
   /college-vs-bootcamp/college-vs-bootcamp.html, /mortgage-15-vs-30/mortgage-15-vs-30.html,
   /ev-vs-gas-car/ev-vs-gas-car.html, /instate-vs-outofstate-tuition/instate-vs-outofstate-tuition.html,
   /term-vs-whole-life/term-vs-whole-life.html, /student-loan-vs-529/student-loan-vs-529.html,
   /mortgage-payoff-vs-invest/mortgage-payoff-vs-invest.html
   ========================================================================== */

:root{
  --paper:#F1F3EE;
  --paper-raised:#FBFBF8;
  --ink:#14231D;
  --ink-soft:#4A5850;
  --ink-faint:#8A968E;
  --line:#CBD2C6;
  --line-strong:#A9B3A2;
  --gold:#B8892B;
  --gold-deep:#8C6A22;
  --teal:#3C6E58;
  --teal-deep:#294B3D;
  --rust:#A34428;
  --rust-deep:#7A3119;
  --max-width:960px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:var(--max-width); margin:0 auto; padding:0 24px;}

/* ---------- Site header / nav (injected by header.js) ---------- */
.site-header{border-bottom:1px solid var(--line); background:var(--paper-raised);}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.site-logo{
  font-family:'Fraunces', serif; font-weight:500; font-size:19px;
  text-decoration:none; color:var(--ink); letter-spacing:-0.01em;
}
.site-logo span{color:var(--gold-deep);}
.site-nav{display:flex; gap:28px;}
.site-nav a{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; text-decoration:none; color:var(--ink-soft);
  padding-bottom:2px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.site-nav a:hover, .site-nav a.active{color:var(--teal-deep); border-color:var(--gold);}

/* ---------- Site footer (injected by footer.js) ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:96px; background:var(--paper-raised);}
.site-footer .wrap{padding-top:40px; padding-bottom:40px;}
.footer-top{
  display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:20px;
}
.footer-brand{max-width:320px;}
.footer-brand .site-logo{display:block; margin-bottom:8px;}
.footer-brand p{font-size:13px; color:var(--ink-faint); margin:0; line-height:1.6;}
.footer-links{display:flex; gap:48px;}
.footer-col h4{
  font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); margin:0 0 12px;
}
.footer-col a{
  display:block; font-size:13px; color:var(--ink-soft); text-decoration:none;
  margin-bottom:8px;
}
.footer-col a:hover{color:var(--teal-deep);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint);
}
.footer-disclaimer{font-size:12px; color:var(--ink-faint); max-width:640px; line-height:1.6; margin:0 0 16px;}

/* ---------- Homepage: hero + tool card grid ---------- */
.hero{padding:64px 0 48px;}
.hero .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep); margin:0 0 14px;
}
.hero h1{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(32px,5vw,48px);
  line-height:1.08; margin:0 0 16px; letter-spacing:-0.01em; max-width:680px;
}
.hero .sub{color:var(--ink-soft); font-size:16px; max-width:560px; margin:0;}

.tools-section{padding-bottom:96px;}
.tools-section h2{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-faint); margin:0 0 20px; font-weight:400;
}
.tool-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media(max-width:860px){ .tool-grid{grid-template-columns:repeat(2, 1fr);} }
@media(max-width:520px){ .tool-grid{grid-template-columns:1fr;} }

.tool-card{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--paper-raised); padding:26px 22px; min-height:190px;
  text-decoration:none; color:var(--ink); transition:background .18s, color .18s;
}
.tool-card:hover{background:var(--teal-deep); color:var(--paper-raised);}
.tool-card:hover .tool-tag{color:var(--gold); border-color:rgba(184,137,43,.5);}
.tool-card:hover .tool-desc{color:#D7DED8;}
.tool-card:hover .tool-arrow{opacity:1; transform:translateX(0);}
.tool-tag{
  display:inline-block; align-self:flex-start; font-family:'IBM Plex Mono', monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-deep);
  border:1px solid var(--line-strong); border-radius:20px; padding:3px 10px; margin-bottom:16px;
  transition:color .18s, border-color .18s;
}
.tool-name{font-family:'Fraunces', serif; font-weight:500; font-size:19px; margin:0 0 8px;}
.tool-desc{font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0; transition:color .18s;}
.tool-arrow{
  font-family:'IBM Plex Mono', monospace; font-size:13px; margin-top:18px;
  opacity:.6; transform:translateX(-4px); transition:opacity .18s, transform .18s;
}

.tool-card.placeholder{
  align-items:center; justify-content:center; color:var(--ink-faint);
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-align:center;
}
.tool-card.placeholder:hover{background:var(--paper-raised); color:var(--ink-faint);}

/* ---------- Generic content page (About, etc.) ---------- */
.page-hero{padding:56px 0 8px;}
.page-hero h1{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(30px,4.5vw,42px);
  margin:0 0 14px;
}
.page-content{padding:16px 0 96px; max-width:680px;}
.page-content p{font-size:15px; color:var(--ink-soft); line-height:1.75; margin:0 0 18px;}
.page-content h2{font-family:'Fraunces', serif; font-weight:500; font-size:22px; margin:36px 0 12px;}

/* ==========================================================================
   Calculator page components (ledger, cards, form fields, modals)
   Originally built for Offer Ledger (/offer-ledger/offer-ledger.html),
   now shared by Rent vs Buy and Freelance vs Full-time as well.
   ========================================================================== */

/* This page's own header block sits inside the shared .wrap, but needs the
   original page padding — scope it so the homepage/about .wrap is untouched. */
body[data-page="offer-ledger"] .wrap{padding:56px 24px 96px;}

/* Rent vs Buy and Freelance vs Full-time use the same page-shell padding as
   Offer Ledger — scoped separately per the CSS pattern noted in
   PROJECT-CONTEXT.md so future subpages don't collide with the homepage/about .wrap. */
body[data-page="rent-vs-buy"] .wrap{padding:56px 24px 96px;}
body[data-page="freelance-vs-fulltime"] .wrap{padding:56px 24px 96px;}
body[data-page="lease-vs-buy-car"] .wrap{padding:56px 24px 96px;}
body[data-page="grad-school-vs-working"] .wrap{padding:56px 24px 96px;}
body[data-page="relocate-city-a-vs-b"] .wrap{padding:56px 24px 96px;}
body[data-page="new-car-vs-used-car"] .wrap{padding:56px 24px 96px;}
body[data-page="dog-vs-cat-lifetime-cost"] .wrap{padding:56px 24px 96px;}
body[data-page="hire-employee-vs-freelancer"] .wrap{padding:56px 24px 96px;}
body[data-page="college-vs-bootcamp"] .wrap{padding:56px 24px 96px;}
body[data-page="mortgage-15-vs-30"] .wrap{padding:56px 24px 96px;}
body[data-page="ev-vs-gas-car"] .wrap{padding:56px 24px 96px;}
body[data-page="instate-vs-outofstate-tuition"] .wrap{padding:56px 24px 96px;}
body[data-page="term-vs-whole-life"] .wrap{padding:56px 24px 96px;}
body[data-page="student-loan-vs-529"] .wrap{padding:56px 24px 96px;}
body[data-page="mortgage-payoff-vs-invest"] .wrap{padding:56px 24px 96px;}
body[data-page="15yr-vs-30yr-mortgage"] .wrap{padding:56px 24px 96px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep); margin:0;
}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.year-tag{
  display:inline-block; margin-left:10px; font-size:10px; letter-spacing:.06em;
  color:var(--ink-faint); border:1px solid var(--line-strong); border-radius:20px;
  padding:2px 9px; text-transform:none; vertical-align:middle;
}
.cities-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--paper-raised); border:1px solid var(--line-strong);
  padding:7px 14px; font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep);
  cursor:pointer; border-radius:20px; transition:border-color .15s, color .15s;
}
.cities-btn i{font-style:normal; color:var(--gold); font-size:13px;}
.cities-btn:hover{border-color:var(--teal); color:var(--teal);}

h1{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(32px,5vw,48px);
  line-height:1.08; margin:0 0 16px; letter-spacing:-0.01em;
}
.sub{color:var(--ink-soft); font-size:16px; max-width:520px; margin:0 0 14px;}
.estimate-notice{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold-deep);
  margin:0 0 40px;
}

/* Shared "assumptions" bar sitting above the two-card grid — used by
   Rent vs Buy for location + stay length + investment return. */
.location-card{
  background:var(--paper-raised); border:1px solid var(--line); padding:24px 28px 4px; margin-bottom:28px;
}
.row3{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
@media(max-width:860px){ .row3{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .row3{grid-template-columns:1fr;} }

.grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:28px;}
@media(max-width:720px){.grid{grid-template-columns:1fr;}}
.card{background:var(--paper-raised); padding:28px;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:14px;}
.card-head .name{font-family:'Fraunces', serif; font-size:20px; font-weight:500;}
.card-head .letter{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-faint);
  border:1px solid var(--line-strong); padding:2px 8px;
}

.field{margin-bottom:16px;}
.field label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-faint); margin-bottom:6px; font-family:'IBM Plex Mono', monospace;
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
input, select{
  width:100%; border:1px solid var(--line-strong); background:var(--paper);
  padding:9px 10px; font-family:'IBM Plex Mono', monospace; font-size:14px;
  color:var(--ink); border-radius:2px;
}
input:focus, select:focus{outline:none; border-color:var(--teal);}

.compare-btn{
  width:100%; padding:15px; background:var(--teal-deep); color:var(--paper-raised);
  border:none; font-family:'IBM Plex Mono', monospace; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; margin-bottom:16px;
}
.compare-btn:hover{background:var(--teal);}
.error-msg{
  display:none; color:var(--rust-deep); font-family:'IBM Plex Mono', monospace;
  font-size:13px; margin:0 0 16px; text-align:center;
}
.defaults-link-row{text-align:center; margin:0 0 56px;}
.defaults-link{
  background:none; border:none; font-family:'IBM Plex Mono', monospace;
  font-size:11px; color:var(--ink-faint); text-decoration:underline;
  text-decoration-style:dotted; cursor:pointer; padding:4px;
}
.defaults-link:hover{color:var(--teal-deep);}

/* Result: ledger tape */
#result{display:none;}
.headline{
  font-family:'Fraunces', serif; font-size:clamp(22px,3vw,30px); font-weight:500;
  line-height:1.3; padding:24px 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  margin-bottom:32px;
}
.headline .amt{color:var(--teal-deep);}
.headline .amt.neg{color:var(--rust-deep);}

.ledger{background:var(--paper-raised); border:1px solid var(--line); padding:8px 0 4px; margin-bottom:12px;}
.ledger-title{
  font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-faint); padding:14px 24px 4px;
}
.ledger-note{
  font-size:12px; color:var(--ink-faint); padding:0 24px 12px; margin:0; line-height:1.5;
}
.ledger-row{
  display:flex; align-items:baseline; padding:9px 24px; font-family:'IBM Plex Mono', monospace; font-size:14px;
}
.ledger-row .step{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border:1px solid var(--line-strong); border-radius:50%; font-size:10px; color:var(--ink-faint);
  margin-right:10px; flex-shrink:0;
}
.ledger-row .label{color:var(--ink-soft);}
.ledger-row .fill{flex:1; border-bottom:1px dotted var(--line-strong); margin:0 8px; transform:translateY(-4px);}
.ledger-row .vals{display:flex; gap:28px;}
.ledger-row .vals span{width:92px; text-align:right;}
.ledger-arrow{text-align:center; color:var(--line-strong); font-size:12px; line-height:1; padding:1px 0;}
.ledger-row.final{background:rgba(60,110,88,0.08); margin:6px 12px 8px; padding:14px 12px; border-radius:2px;}
.ledger-row.final .step{border-color:var(--teal); color:var(--teal-deep);}
.final-tag{
  display:inline-block; margin-left:8px; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-deep); background:rgba(60,110,88,0.16); border-radius:10px; padding:2px 8px; vertical-align:middle;
}
.ledger-head-row{display:flex; padding:0 24px 8px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); justify-content:flex-end;}
.ledger-head-row .vals{display:flex; gap:28px;}
.ledger-head-row .vals span{width:92px; text-align:right;}

.chart-box{background:var(--paper-raised); border:1px solid var(--line); padding:24px; margin-bottom:8px;}
.legend{display:flex; gap:20px; margin-bottom:14px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.dot{width:9px; height:9px; display:inline-block;}

.footnote{font-size:12px; color:var(--ink-faint); margin-top:24px; line-height:1.6;}

.share-row{display:flex; gap:12px; margin-top:28px;}
.ghost-btn{
  flex:1; padding:12px; background:transparent; border:1px solid var(--line-strong);
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); cursor:pointer;
}
.ghost-btn:hover{border-color:var(--teal); color:var(--teal-deep);}

/* Modals (cities / defaults / method) */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,35,29,0.45);
  align-items:center; justify-content:center; padding:24px; z-index:100;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--paper-raised); max-width:560px; width:100%; max-height:80vh;
  overflow-y:auto; border:1px solid var(--line-strong); padding:32px;
}
.modal-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px;}
.modal-head h2{font-family:'Fraunces', serif; font-weight:500; font-size:22px; margin:0;}
.modal-close{
  background:none; border:none; font-size:20px; color:var(--ink-faint);
  cursor:pointer; line-height:1; padding:4px;
}
.modal-close:hover{color:var(--ink);}
.modal-note{color:var(--ink-soft); font-size:13px; margin:0 0 24px;}
.city-group-title{
  font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--gold-deep); border-bottom:1px solid var(--line);
  padding-bottom:8px; margin:20px 0 12px;
}
.city-group-title:first-of-type{margin-top:0;}
.city-list{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin:0; padding:0; list-style:none;}
.city-list li{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink);
  padding:5px 0; border-bottom:1px dotted var(--line);
}
.explain-item{margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.explain-item:last-of-type{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.explain-label{
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500;
  color:var(--teal-deep); margin-bottom:6px;
}
.explain-item p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6;}

/* On-page SEO content (How it works / FAQ) */
.seo-section{margin-top:72px; padding-top:48px; border-top:1px solid var(--line);}
.seo-section h2{font-family:'Fraunces', serif; font-weight:500; font-size:26px; margin:0 0 12px;}
.seo-section #faq-h2{margin-top:48px;}
.seo-intro{color:var(--ink-soft); font-size:15px; max-width:640px; margin:0 0 32px;}
.seo-step{margin-bottom:24px; max-width:680px;}
.seo-step h3{
  font-family:'IBM Plex Mono', monospace; font-size:13px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--teal-deep); margin:0 0 8px;
}
.seo-step p{font-size:14px; color:var(--ink-soft); line-height:1.65; margin:0;}

.faq-list{max-width:680px;}
.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-item summary{
  font-family:'IBM Plex Sans', sans-serif; font-weight:500; font-size:15px;
  cursor:pointer; list-style:none; position:relative; padding-right:24px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; position:absolute; right:0; top:0; font-family:'IBM Plex Mono', monospace;
  color:var(--gold-deep); font-size:18px;
}
.faq-item[open] summary::after{content:'−';}
.faq-item p{font-size:14px; color:var(--ink-soft); line-height:1.65; margin:12px 0 0;}

.page-disclaimer{margin-top:56px; padding-top:24px; border-top:1px solid var(--line);}
.tax-year-note{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); margin:0;
}