@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
:root{
  --black:#0d0d10;
  --paper:#f3efe8;
  --card:#ffffff;
  --line:#d8d2c8;
  --text:#161616;
  --muted:#5b5b5b;
  --red:#d71919;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.55;letter-spacing:0}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.container{width:min(1360px,calc(100% - 72px));margin:0 auto}
.narrow{width:min(1180px,100%)}
.site-header{background:var(--black);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:1000}
.header-inner{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand img{width:44px;height:44px;object-fit:contain}
.brand span{font-size:44px;line-height:44px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav a{height:72px;min-width:190px;padding:0 26px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#292929 0%,#181818 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.22);display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.nav a:hover{border-color:rgba(255,255,255,.3)}
.hero{background:var(--black);color:#fff;padding:80px 0 96px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.eyebrow{margin:0 0 16px;font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72)}.hero h1{margin:0;font-size:clamp(56px,5.3vw,94px);line-height:.98;letter-spacing:-.04em;text-transform:uppercase;font-weight:600;max-width:760px}.hero p{margin:0;max-width:620px;font-size:22px;line-height:1.6;color:rgba(255,255,255,.95)}
.page-hero{background:var(--black);color:#fff;padding:70px 0 84px}.page-hero h1{margin:0 0 16px;font-size:clamp(40px,4.3vw,68px);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;font-weight:600}.page-hero p{margin:0;max-width:960px;font-size:21px;line-height:1.6;color:rgba(255,255,255,.94)}
.section{padding:70px 0}.section-title{margin:0 0 18px;font-size:clamp(44px,4vw,68px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;font-weight:700}.section-lede{margin:0 0 34px;max-width:1240px;font-size:22px;line-height:1.7;color:#2f2f2f}
.calculator-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 42px}
.calc-tab{font:inherit;font-size:21px;line-height:1.25;font-weight:400;letter-spacing:0;text-align:left;color:#111;background:#fff;border:1px solid #cfc8be;border-radius:0;padding:24px 24px;min-height:92px;display:flex;align-items:center;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.03)}
.calc-tab:hover,.calc-tab.active{background:#111;color:#fff;border-color:#111}
.calculator-panel{scroll-margin-top:128px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.04);margin-bottom:40px}
.calculator-card{padding:34px 34px 28px}.calculator-card h2{margin:0 0 12px;font-size:clamp(34px,3vw,54px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;font-weight:700;max-width:1000px}.intro{margin:0 0 18px;max-width:1120px;font-size:18px;line-height:1.7;color:#404040}.formula-box{background:#111;color:#fff;padding:18px 20px;margin:0 0 26px}.formula-box span{display:block;margin-bottom:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.68)}.formula-box strong{display:block;font-size:17px;line-height:1.5;font-weight:600}
.assumption-stack{display:grid;gap:18px;margin-bottom:22px}.input-group{border:1px solid #e3ddd4;background:#fbfaf7;padding:22px}.input-group h3{margin:0 0 16px;font-size:18px;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}.field label{display:block;margin:0 0 8px;font-size:13px;line-height:1.35;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#121212}.field input{width:100%;font:inherit;font-size:18px;padding:14px 14px;border:1px solid #cfc7bc;background:#fff;border-radius:0}.field input:focus{outline:2px solid #111;outline-offset:0}
.calculator-actions{display:flex;gap:12px;margin:4px 0 20px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;background:#111;color:#fff;border:1px solid #111;border-radius:0;font:inherit;font-size:17px;font-weight:500;cursor:pointer}
.results-stack{display:grid;gap:18px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric-card{background:#111;color:#fff;padding:18px 18px 16px}.metric-card span{display:block;font-size:11px;line-height:1.3;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7)}.metric-card strong{display:block;margin-top:8px;font-size:28px;line-height:1.1;font-weight:600}
.block{border:1px solid #e3ddd4;background:#fff;padding:22px}.block h3{margin:0 0 14px;font-size:18px;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.breakdown-table{width:100%;border-collapse:collapse}.breakdown-table td{padding:10px 0;border-bottom:1px solid #eee7dd;font-size:16px;line-height:1.5}.breakdown-table td:last-child{text-align:right;font-weight:600}.plain-list{margin:0;padding-left:20px}.plain-list li{margin:0 0 9px;font-size:16px;line-height:1.65;color:#333}.block p{margin:0 0 12px;font-size:16px;line-height:1.72;color:#333}.block p:last-child{margin-bottom:0}.note{margin:16px 0 0;padding-top:14px;border-top:1px solid #ebe3d8;font-size:13px;line-height:1.6;color:#666}
.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:34px}.preview-card{display:block;background:#fff;border:1px solid var(--line);padding:22px 24px;box-shadow:0 6px 14px rgba(0,0,0,.03)}.preview-card:hover{border-color:#111}.preview-meta{display:block;margin-bottom:12px;font-size:13px;line-height:1.35;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}.preview-card h3{margin:0 0 12px;font-size:26px;line-height:1.18;font-weight:600;letter-spacing:-.01em}.preview-card p{margin:0;font-size:17px;line-height:1.65;color:#444}
.story{scroll-margin-top:128px;background:#fff;border:1px solid var(--line);padding:34px 34px 28px;box-shadow:0 6px 14px rgba(0,0,0,.03);margin-bottom:28px}.story-meta{display:block;margin-bottom:12px;font-size:13px;line-height:1.35;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}.story h2{margin:0 0 16px;font-size:clamp(36px,3.3vw,58px);line-height:1.06;letter-spacing:-.02em;font-weight:700}.story .lede{margin:0 0 20px;font-size:22px;line-height:1.65;color:#202020;max-width:1100px}.story-body p{margin:0 0 18px;font-size:19px;line-height:1.85;color:#2a2a2a;max-width:1100px}.callout{border-left:3px solid var(--red);padding:0 0 0 16px;margin:28px 0 24px}.callout h3{margin:0 0 10px;font-size:18px;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.callout p{margin:0;font-size:18px;line-height:1.75;color:#2f2f2f;max-width:980px}.question-title{margin:0 0 12px;font-size:18px;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.question-list{margin:0;padding-left:22px}.question-list li{margin:0 0 10px;font-size:17px;line-height:1.72;color:#333;max-width:1020px}
.footer{background:#111;color:#fff;padding:34px 0;margin-top:44px}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.footer p{margin:0 0 10px;color:rgba(255,255,255,.76)}.footer .brand img{width:32px;height:32px}.footer .brand span{font-size:26px;line-height:32px}.small{font-size:13px;line-height:1.55}
@media (max-width:1200px){.header-inner{min-height:96px}.brand img{width:36px;height:36px}.brand span{font-size:36px;line-height:36px}.nav a{min-width:156px;height:60px;font-size:18px}.hero-grid,.preview-grid,.calculator-tabs,.metric-grid{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.container{width:min(100%,calc(100% - 36px))}.header-inner{flex-direction:column;align-items:flex-start;padding:18px 0}.nav{width:100%;justify-content:flex-start}.hero-grid,.preview-grid,.calculator-tabs,.form-grid,.metric-grid,.footer-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(48px,14vw,78px)}.section{padding:54px 0}.calculator-card,.story{padding:24px}.brand span{font-size:30px;line-height:30px}.brand img{width:30px;height:30px}.nav a{min-width:0;width:auto;height:48px;padding:0 18px;font-size:16px}.page-hero p,.section-lede,.story .lede,.hero p{font-size:18px}.story-body p{font-size:17px;line-height:1.75}}



/* FINAL OVERRIDES: restore old compact header and reduce oversized typography */
.site-header {
  background: #0d0d10;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner {
  min-height: 88px !important;
  padding: 0 !important;
  align-items: center !important;
}

.brand {
  gap: 12px !important;
}

.brand img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

.brand span {
  font-size: 30px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

.nav {
  gap: 14px !important;
}

.nav a {
  height: 50px !important;
  min-width: auto !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
}

.hero {
  padding: 72px 0 84px !important;
}

.hero h1 {
  font-size: clamp(44px, 4.6vw, 76px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  max-width: 760px !important;
}

.hero p {
  font-size: 19px !important;
  line-height: 1.55 !important;
  max-width: 620px !important;
}

.eyebrow {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.section {
  padding: 58px 0 !important;
}

.section-title {
  font-size: clamp(36px, 3vw, 52px) !important;
  letter-spacing: -.025em !important;
}

.section-lede {
  font-size: 18px !important;
  line-height: 1.6 !important;
  max-width: 1080px !important;
}

.calculator-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.calc-tab {
  min-height: 76px !important;
  padding: 18px 20px !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

.calculator-card h2 {
  font-size: clamp(28px, 2.4vw, 42px) !important;
}

.intro {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.metric-card strong {
  font-size: 23px !important;
}

.field input {
  font-size: 16px !important;
  padding: 12px !important;
}

.story h2 {
  font-size: clamp(32px, 3vw, 48px) !important;
}

.story .lede {
  font-size: 19px !important;
}

.story-body p {
  font-size: 17px !important;
  line-height: 1.75 !important;
}

.preview-card h3 {
  font-size: 22px !important;
}

.preview-card p {
  font-size: 15px !important;
}

@media (max-width: 900px) {
  .header-inner {
    min-height: auto !important;
    padding: 16px 0 !important;
  }

  .brand img {
    width: 30px !important;
    height: 30px !important;
  }

  .brand span {
    font-size: 28px !important;
    line-height: 30px !important;
  }

  .nav a {
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }

  .calculator-tabs {
    grid-template-columns: 1fr !important;
  }

  .hero {
    padding: 52px 0 60px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 64px) !important;
  }
}



/* FINAL HERO RESTORE: keep compact header, restore full-height hero */
.hero {
  min-height: 560px !important;
  padding: 92px 0 108px !important;
  display: flex !important;
  align-items: center !important;
}

.hero-grid {
  align-items: center !important;
}

.hero h1 {
  font-size: clamp(46px, 4.8vw, 78px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  max-width: 780px !important;
}

.hero p {
  font-size: 19px !important;
  line-height: 1.6 !important;
  max-width: 620px !important;
}

@media (max-width: 900px) {
  .hero {
    min-height: 520px !important;
    padding: 72px 0 82px !important;
  }
}



/* Line-item breakdown alignment fix */
.breakdown-table {
  width: min(100%, 1120px) !important;
  table-layout: fixed !important;
}

.breakdown-table td:first-child {
  width: 68% !important;
  padding-right: 28px !important;
}

.breakdown-table td:last-child {
  width: 32% !important;
  text-align: left !important;
  padding-left: 28px !important;
  white-space: nowrap !important;
}



/* HARD FINAL COMPACT OVERRIDE */

/* Header: match the older compact header */
body .site-header {
  height: auto !important;
  min-height: 74px !important;
  background: #0d0d10 !important;
}

body .header-inner {
  min-height: 74px !important;
  height: 74px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

body .brand {
  gap: 10px !important;
}

body .brand img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

body .brand span {
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

body .nav {
  gap: 10px !important;
}

body .nav a {
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
}

/* Hero: keep spacious, but reduce the text */
body .hero {
  min-height: 500px !important;
  padding: 72px 0 88px !important;
  display: flex !important;
  align-items: center !important;
}

body .hero h1 {
  font-size: clamp(38px, 4.1vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  max-width: 700px !important;
  font-weight: 600 !important;
}

body .hero p {
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 560px !important;
  font-weight: 400 !important;
}

body .eyebrow {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Homepage section text */
body .section {
  padding: 48px 0 !important;
}

body .section-title {
  font-size: clamp(30px, 2.6vw, 44px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

body .section-lede {
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 980px !important;
}

/* Calculator selector buttons */
body .calculator-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body .calc-tab {
  min-height: 58px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

/* Calculator panels: reduce title, intro, and black formula bar */
body .calculator-card {
  padding: 26px !important;
}

body .calculator-card h2 {
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

body .intro {
  font-size: 15px !important;
  line-height: 1.55 !important;
  max-width: 1000px !important;
}

body .formula-box {
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
}

body .formula-box span {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

body .formula-box strong {
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* Inputs and result blocks */
body .input-group {
  padding: 16px !important;
}

body .input-group h3,
body .block h3 {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

body .field label {
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body .field input {
  font-size: 15px !important;
  padding: 10px 11px !important;
}

body .metric-card {
  padding: 14px !important;
}

body .metric-card span {
  font-size: 10px !important;
}

body .metric-card strong {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

body .block {
  padding: 16px !important;
}

body .breakdown-table {
  width: min(100%, 920px) !important;
  table-layout: fixed !important;
}

body .breakdown-table td {
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding: 8px 0 !important;
}

body .breakdown-table td:first-child {
  width: 62% !important;
  padding-right: 18px !important;
}

body .breakdown-table td:last-child {
  width: 38% !important;
  text-align: left !important;
  padding-left: 18px !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}

body .plain-list li,
body .block p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body .note {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Insights: reduce too-large story preview and story text */
body .page-hero h1 {
  font-size: clamp(32px, 3vw, 48px) !important;
}

body .page-hero p {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

body .preview-card h3 {
  font-size: 19px !important;
  line-height: 1.25 !important;
}

body .preview-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body .story h2 {
  font-size: clamp(28px, 2.5vw, 40px) !important;
  line-height: 1.08 !important;
}

body .story .lede {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

body .story-body p {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

@media (max-width: 900px) {
  body .header-inner {
    height: auto !important;
    min-height: 68px !important;
    padding: 14px 0 !important;
  }

  body .brand img {
    width: 28px !important;
    height: 28px !important;
  }

  body .brand span {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  body .nav a {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  body .hero {
    min-height: 460px !important;
    padding: 56px 0 66px !important;
  }

  body .hero h1 {
    font-size: clamp(36px, 11vw, 54px) !important;
  }

  body .calculator-tabs,
  body .form-grid,
  body .metric-grid {
    grid-template-columns: 1fr !important;
  }
}



/* FINAL TYPOGRAPHY RESET: Stack Sans, airier hierarchy, larger readable calculators */
:root{
  --stack-font: "Stack Sans Headline","Stack Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

html, body, input, button, textarea, select, a, p, div, span, li, td, th, label, h1, h2, h3, h4, h5, h6 {
  font-family: var(--stack-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* Keep the old compact header, but use the new font */
body .site-header{
  min-height: 74px !important;
}
body .header-inner{
  min-height: 74px !important;
  height: 74px !important;
}
body .brand img{
  width: 30px !important;
  height: 30px !important;
}
body .brand span{
  font-family: var(--stack-font) !important;
  font-size: 23px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}
body .nav a{
  font-family: var(--stack-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  height: 38px !important;
  padding: 0 18px !important;
}

/* Hero: less jumbo than before, but larger and airier than the tiny reduced version */
body .hero{
  min-height: 530px !important;
  padding: 86px 0 96px !important;
}
body .hero-grid{
  gap: 72px !important;
}
body .eyebrow{
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}
body .hero h1{
  font-family: var(--stack-font) !important;
  font-size: clamp(46px, 4.8vw, 74px) !important;
  line-height: 0.98 !important;
  letter-spacing: -.03em !important;
  font-weight: 600 !important;
  max-width: 760px !important;
}
body .hero p{
  font-size: 19px !important;
  line-height: 1.75 !important;
  max-width: 700px !important;
  color: rgba(255,255,255,.95) !important;
}

/* Main section hierarchy */
body .section{
  padding: 58px 0 !important;
}
body .section-title{
  font-family: var(--stack-font) !important;
  font-size: clamp(38px, 3vw, 54px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.025em !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
}
body .section-lede{
  font-size: 18px !important;
  line-height: 1.75 !important;
  max-width: 1200px !important;
  color: #2f2f2f !important;
}

/* Calculator buttons: 3 x 4, bigger, airy, no bold */
body .calculator-tabs{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 30px 0 42px !important;
}
body .calc-tab{
  min-height: 74px !important;
  padding: 18px 20px !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .calc-tab:hover,
body .calc-tab.active{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* Calculator panels: clearer hierarchy and better spacing */
body .calculator-panel{
  margin-bottom: 34px !important;
}
body .calculator-card{
  padding: 30px 30px 26px !important;
}
body .calculator-card h2{
  font-family: var(--stack-font) !important;
  font-size: clamp(30px, 2.3vw, 44px) !important;
  line-height: 1.03 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  max-width: 1100px !important;
}
body .intro{
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 1140px !important;
  color: #3d3d3d !important;
}
body .formula-box{
  padding: 18px 20px !important;
  margin-bottom: 22px !important;
}
body .formula-box span{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}
body .formula-box strong{
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

/* Fewer visual clashes in forms */
body .assumption-stack{
  gap: 16px !important;
}
body .input-group{
  padding: 22px !important;
  background: #fbfaf7 !important;
}
body .input-group h3,
body .block h3{
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  margin-bottom: 16px !important;
}
body .form-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
}
body .field label{
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  margin-bottom: 8px !important;
}
body .field input{
  font-size: 17px !important;
  line-height: 1.35 !important;
  padding: 14px 14px !important;
}
body .btn{
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 14px 20px !important;
}

/* Results: slightly larger */
body .metric-grid{
  gap: 14px !important;
}
body .metric-card{
  padding: 16px !important;
}
body .metric-card span{
  font-size: 11px !important;
  font-weight: 600 !important;
}
body .metric-card strong{
  font-size: 23px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

/* Line-item tables and explanatory blocks */
body .block{
  padding: 20px !important;
}
body .breakdown-table{
  width: min(100%, 980px) !important;
}
body .breakdown-table td{
  font-size: 16px !important;
  line-height: 1.6 !important;
  padding: 10px 0 !important;
}
body .breakdown-table td:first-child{
  width: 60% !important;
  padding-right: 16px !important;
}
body .breakdown-table td:last-child{
  width: 40% !important;
  padding-left: 16px !important;
  text-align: left !important;
  font-weight: 600 !important;
}
body .block p,
body .plain-list li{
  font-size: 16px !important;
  line-height: 1.75 !important;
}
body .note{
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Insights page: airy card hierarchy like the reference */
body .page-hero{
  padding: 70px 0 82px !important;
}
body .page-hero h1{
  font-size: clamp(36px, 3.3vw, 54px) !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}
body .page-hero p{
  font-size: 18px !important;
  line-height: 1.75 !important;
  max-width: 1000px !important;
}
body .preview-grid{
  gap: 22px !important;
}
body .preview-card{
  padding: 26px 28px !important;
  box-shadow: none !important;
}
body .preview-meta{
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}
body .preview-card h3{
  font-size: 24px !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  margin-bottom: 12px !important;
}
body .preview-card p{
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #444 !important;
}

/* Full story pages: single-column feel with roomy type */
body .story{
  padding: 32px 32px 26px !important;
  margin-bottom: 30px !important;
}
body .story-meta{
  font-size: 12px !important;
  font-weight: 600 !important;
}
body .story h2{
  font-size: clamp(32px, 2.8vw, 46px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}
body .story .lede{
  font-size: 20px !important;
  line-height: 1.75 !important;
  max-width: 1080px !important;
}
body .story-body p{
  font-size: 17px !important;
  line-height: 1.85 !important;
  max-width: 1020px !important;
}
body .callout h3,
body .question-title{
  font-size: 17px !important;
  font-weight: 600 !important;
}
body .callout p,
body .question-list li{
  font-size: 16px !important;
  line-height: 1.75 !important;
}

body .footer .brand span{
  font-size: 22px !important;
  line-height: 28px !important;
}

@media (max-width: 900px){
  body{
    font-size: 16px !important;
  }
  body .header-inner{
    height: auto !important;
    min-height: 68px !important;
    padding: 14px 0 !important;
  }
  body .brand span{
    font-size: 21px !important;
    line-height: 28px !important;
  }
  body .nav a{
    font-size: 11px !important;
    height: 36px !important;
    padding: 0 14px !important;
  }
  body .hero{
    min-height: 470px !important;
    padding: 62px 0 72px !important;
  }
  body .hero h1{
    font-size: clamp(40px, 12vw, 58px) !important;
  }
  body .hero p,
  body .page-hero p,
  body .section-lede,
  body .intro,
  body .story .lede{
    font-size: 17px !important;
  }
  body .calculator-tabs,
  body .preview-grid,
  body .form-grid,
  body .metric-grid{
    grid-template-columns: 1fr !important;
  }
  body .calc-tab{
    min-height: 64px !important;
    font-size: 17px !important;
  }
}



/* FINAL INSIGHTS SEPARATE-PAGE UPDATE + AIRIER TYPOGRAPHY */

html {
  letter-spacing: 0.004em;
}

body {
  font-family: var(--stack-font) !important;
  letter-spacing: 0.006em !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
}

p, li, td, label, input, button, a, span {
  letter-spacing: 0.006em !important;
}

h1, h2, h3, h4 {
  letter-spacing: -0.012em !important;
}

.site-header {
  min-height: 74px !important;
}

.header-inner {
  min-height: 74px !important;
  height: 74px !important;
}

.brand img {
  width: 30px !important;
  height: 30px !important;
}

.brand span {
  font-size: 23px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.nav a {
  height: 38px !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

/* Home hero */
.hero {
  min-height: 530px !important;
  padding: 86px 0 96px !important;
}

.hero-grid {
  gap: 84px !important;
}

.hero h1 {
  font-size: clamp(48px, 4.9vw, 76px) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
  max-width: 780px !important;
}

.hero p {
  font-size: 19px !important;
  line-height: 1.82 !important;
  max-width: 720px !important;
}

.eyebrow {
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
}

.section-title {
  font-size: clamp(38px, 3vw, 54px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}

.section-lede {
  font-size: 19px !important;
  line-height: 1.82 !important;
  max-width: 1160px !important;
  letter-spacing: 0.004em !important;
}

.calc-tab {
  font-size: 19px !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
  letter-spacing: 0.004em !important;
}

.calculator-card h2 {
  font-size: clamp(31px, 2.4vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.018em !important;
  font-weight: 600 !important;
}

.intro {
  font-size: 17px !important;
  line-height: 1.78 !important;
  letter-spacing: 0.004em !important;
}

.input-group h3,
.block h3 {
  font-size: 17px !important;
  line-height: 1.34 !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.field label {
  font-size: 13px !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.field input {
  font-size: 17px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.004em !important;
  padding: 15px 14px !important;
}

.metric-card strong {
  font-size: 24px !important;
}

.breakdown-table td,
.block p,
.plain-list li {
  font-size: 16px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.004em !important;
}

/* Insights landing hero */
.page-hero.insights-hero {
  background: var(--black) !important;
  color: #fff !important;
  padding: 70px 0 76px !important;
}

.page-hero.insights-hero h1,
.page-hero.story-hero h1 {
  font-size: clamp(38px, 3.4vw, 54px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  text-transform: none !important;
  margin-bottom: 14px !important;
}

.page-hero.insights-hero p,
.page-hero.story-hero p {
  font-size: 19px !important;
  line-height: 1.84 !important;
  max-width: 1020px !important;
  letter-spacing: 0.004em !important;
}

.insights-index-section {
  padding-top: 44px !important;
}

.insights-index-lede {
  margin-bottom: 26px !important;
}

/* Preview cards now only previews */
.preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-bottom: 0 !important;
}

.preview-card {
  padding: 28px 30px !important;
  min-height: 280px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.03) !important;
}

.preview-meta {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

.preview-card h3 {
  font-size: 25px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
}

.preview-card p {
  font-size: 17px !important;
  line-height: 1.82 !important;
  letter-spacing: 0.004em !important;
}

/* Separate story pages */
.page-hero.story-hero {
  background: var(--black) !important;
  color: #fff !important;
  padding: 70px 0 78px !important;
}

.story-page-section {
  padding-top: 34px !important;
}

.story-page {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  padding: 36px 38px 30px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.03) !important;
}

.story-page-body {
  max-width: 980px !important;
}

.story-page-body p {
  margin: 0 0 18px !important;
  font-size: 18px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.004em !important;
  color: #2a2a2a !important;
}

.story-page-callout {
  margin: 28px 0 26px !important;
  max-width: 980px !important;
}

.story-page-callout h3 {
  font-size: 17px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.03em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.story-page-callout p {
  font-size: 17px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.004em !important;
  margin: 0 !important;
}

.question-title {
  font-size: 17px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.03em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.question-list li {
  font-size: 17px !important;
  line-height: 1.82 !important;
  letter-spacing: 0.004em !important;
  max-width: 980px !important;
}

.story-back-link {
  margin-top: 30px !important;
  font-size: 15px !important;
}

.story-back-link a {
  display: inline-block !important;
  font-weight: 500 !important;
}

@media (max-width: 900px) {
  .hero-grid,
  .preview-grid,
  .calculator-tabs,
  .form-grid,
  .metric-grid {
    grid-template-columns: 1fr !important;
  }

  .hero {
    min-height: 470px !important;
    padding: 62px 0 72px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 11vw, 60px) !important;
  }

  .page-hero.insights-hero,
  .page-hero.story-hero {
    padding: 56px 0 60px !important;
  }

  .preview-card {
    min-height: auto !important;
  }

  .story-page {
    padding: 26px 24px 22px !important;
  }

  .story-page-body p,
  .page-hero.insights-hero p,
  .page-hero.story-hero p {
    font-size: 17px !important;
  }
}



/* FINAL INSIGHTS CARD TYPOGRAPHY UPDATE
   Larger, airier preview cards and separate insight pages preserved */

body {
  letter-spacing: 0.008em !important;
  line-height: 1.78 !important;
}

p, li {
  letter-spacing: 0.008em !important;
}

h1, h2, h3 {
  letter-spacing: -0.018em !important;
}

/* Keep compact header */
.site-header,
.header-inner {
  min-height: 74px !important;
}
.header-inner {
  height: 74px !important;
}
.brand span {
  font-size: 23px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
}

/* Insights landing hero remains on top */
.page-hero.insights-hero {
  padding: 74px 0 82px !important;
}
.page-hero.insights-hero h1 {
  font-size: clamp(40px, 3.6vw, 56px) !important;
  line-height: 1.06 !important;
  font-weight: 600 !important;
}
.page-hero.insights-hero p {
  font-size: 20px !important;
  line-height: 1.9 !important;
  max-width: 1080px !important;
}

/* Make insight cards bigger and airier like the reference */
.insights-index-section {
  padding-top: 46px !important;
  padding-bottom: 64px !important;
}

.insights-index-lede {
  font-size: 18px !important;
  line-height: 1.85 !important;
  margin-bottom: 28px !important;
}

.preview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
  align-items: start !important;
}

.preview-card {
  padding: 34px 34px 36px !important;
  min-height: 420px !important;
  border: 1px solid #e9e6e0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.preview-card:hover {
  transform: translateY(-2px) !important;
  border-color: #d7d2c8 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04) !important;
}

.preview-meta {
  display: inline-block !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
}

.preview-card h3 {
  font-size: clamp(32px, 2.2vw, 40px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.022em !important;
  font-weight: 400 !important;
  margin: 0 0 24px !important;
  max-width: 16ch !important;
}

.preview-card p {
  font-size: 17px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.008em !important;
  color: #333 !important;
  margin: 0 !important;
}

/* Separate story page remains one insight per page */
.page-hero.story-hero {
  padding: 74px 0 82px !important;
}

.page-hero.story-hero h1 {
  font-size: clamp(40px, 3.6vw, 56px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  max-width: 15ch !important;
}

.page-hero.story-hero p {
  font-size: 20px !important;
  line-height: 1.92 !important;
  max-width: 980px !important;
}

.story-page {
  padding: 40px 42px 32px !important;
}

.story-page-body p,
.story-page-callout p,
.question-list li {
  font-size: 18px !important;
  line-height: 1.92 !important;
  letter-spacing: 0.008em !important;
}

.story-page-callout h3,
.question-title {
  font-size: 17px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

.story-back-link {
  font-size: 16px !important;
  margin-top: 32px !important;
}

@media (max-width: 1200px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  .preview-card {
    min-height: 380px !important;
  }

  .preview-card h3 {
    font-size: clamp(30px, 2.6vw, 38px) !important;
  }
}

@media (max-width: 900px) {
  .preview-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .preview-card {
    min-height: auto !important;
    padding: 28px 26px 30px !important;
  }

  .preview-card h3 {
    font-size: clamp(28px, 8vw, 36px) !important;
    max-width: none !important;
  }

  .preview-card p,
  .page-hero.insights-hero p,
  .page-hero.story-hero p,
  .story-page-body p,
  .story-page-callout p,
  .question-list li {
    font-size: 17px !important;
  }
}



/* ULTRA AIRY TYPOGRAPHY REFINEMENT
   Reduce the cramped feeling: lighter weights, more open tracking, more generous line-height */

html {
  letter-spacing: 0.01em !important;
}

body {
  letter-spacing: 0.01em !important;
  line-height: 1.86 !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 360 !important;
}

p, li, a, span, label, td, th, input, button {
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
}

h1, h2, h3, h4 {
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 380 !important;
}

/* Header stays compact but slightly lighter */
.brand span {
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  font-variation-settings: "wght" 500 !important;
}
.nav a {
  font-weight: 450 !important;
  letter-spacing: 0.10em !important;
  font-variation-settings: "wght" 450 !important;
}

/* Homepage hero */
.hero h1 {
  font-size: clamp(46px, 4.5vw, 72px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 380 !important;
  max-width: 820px !important;
}
.hero p {
  font-size: 20px !important;
  line-height: 1.95 !important;
  letter-spacing: 0.01em !important;
  max-width: 760px !important;
}
.eyebrow {
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
}

/* Insights landing hero */
.page-hero.insights-hero h1 {
  font-size: clamp(40px, 3.4vw, 54px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.012em !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 380 !important;
  max-width: 14ch !important;
}
.page-hero.insights-hero p {
  font-size: 20px !important;
  line-height: 1.95 !important;
  letter-spacing: 0.01em !important;
  max-width: 1060px !important;
}

/* Preview cards: larger but more open and less dense */
.preview-grid {
  gap: 38px !important;
}

.preview-card {
  padding: 36px 36px 38px !important;
  min-height: 430px !important;
}

.preview-meta {
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  margin-bottom: 20px !important;
}

.preview-card h3 {
  font-size: clamp(31px, 2.15vw, 39px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.012em !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 380 !important;
  margin: 0 0 22px !important;
  max-width: 17ch !important;
}

.preview-card p {
  font-size: 18px !important;
  line-height: 1.95 !important;
  letter-spacing: 0.01em !important;
  color: #353535 !important;
}

/* Separate story page hero */
.page-hero.story-hero {
  padding: 78px 0 88px !important;
}

.page-hero.story-hero h1 {
  font-size: clamp(44px, 3.8vw, 60px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.012em !important;
  font-weight: 380 !important;
  font-variation-settings: "wght" 380 !important;
  max-width: 14ch !important;
  margin-bottom: 24px !important;
}

.page-hero.story-hero p {
  font-size: 21px !important;
  line-height: 2 !important;
  letter-spacing: 0.01em !important;
  max-width: 1020px !important;
  font-weight: 360 !important;
  font-variation-settings: "wght" 360 !important;
}

/* Story body */
.story-page {
  padding: 44px 46px 36px !important;
}

.story-page-body p {
  font-size: 19px !important;
  line-height: 2 !important;
  letter-spacing: 0.01em !important;
  font-weight: 360 !important;
  font-variation-settings: "wght" 360 !important;
  color: #262626 !important;
  margin: 0 0 20px !important;
  max-width: 980px !important;
}

.story-page-callout h3,
.question-title {
  font-size: 16px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
}

.story-page-callout p,
.question-list li {
  font-size: 18px !important;
  line-height: 1.95 !important;
  letter-spacing: 0.01em !important;
  font-weight: 360 !important;
  font-variation-settings: "wght" 360 !important;
}

/* Calculator content also a bit more open */
.section-title,
.calculator-card h2 {
  font-weight: 420 !important;
  font-variation-settings: "wght" 420 !important;
  letter-spacing: -0.012em !important;
}

.section-lede,
.intro,
.block p,
.plain-list li,
.breakdown-table td {
  font-size: 18px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.01em !important;
}

.input-group h3,
.block h3,
.field label {
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
}

.calc-tab {
  font-weight: 400 !important;
  font-variation-settings: "wght" 400 !important;
  letter-spacing: 0.01em !important;
}

@media (max-width: 1200px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
  }

  .preview-card {
    min-height: 390px !important;
  }

  .page-hero.story-hero h1 {
    max-width: 15ch !important;
  }
}

@media (max-width: 900px) {
  .hero h1,
  .page-hero.insights-hero h1,
  .page-hero.story-hero h1 {
    letter-spacing: -0.01em !important;
  }

  .hero p,
  .page-hero.insights-hero p,
  .page-hero.story-hero p,
  .preview-card p,
  .story-page-body p,
  .story-page-callout p,
  .question-list li {
    font-size: 17px !important;
    line-height: 1.9 !important;
  }

  .preview-card {
    min-height: auto !important;
  }
}



/* =========================================================
   SITEWIDE GOOGLE SANS TYPOGRAPHY SYSTEM
   Uses Google Sans family first, with Noto Sans fallback.
   Applied consistently across the full website.
   ========================================================= */

:root {
  --site-font: "Google Sans Text","Google Sans","Product Sans","Noto Sans",Arial,sans-serif;
}

/* Global reset */
html,
body,
body *,
input,
button,
textarea,
select {
  font-family: var(--site-font) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Core text rhythm */
html {
  letter-spacing: 0.008em !important;
}

body {
  font-size: 17px !important;
  line-height: 1.82 !important;
  letter-spacing: 0.008em !important;
  font-weight: 400 !important;
}

/* Body copy */
p,
li,
td,
th,
label,
input,
button,
textarea,
select,
a,
span {
  letter-spacing: 0.008em !important;
  font-weight: 400 !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.01em !important;
  font-weight: 500 !important;
}

/* Header */
.site-header {
  min-height: 72px !important;
}

.header-inner {
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  align-items: center !important;
}

.brand {
  gap: 12px !important;
}

.brand img {
  width: 30px !important;
  height: 30px !important;
}

.brand span {
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0.018em !important;
  text-transform: uppercase !important;
}

.nav {
  gap: 10px !important;
}

.nav a {
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

/* Shared small labels */
.eyebrow,
.preview-meta,
.story-meta,
.formula-box span,
.metric-card span,
.field label,
.note,
.small {
  letter-spacing: 0.08em !important;
}

/* Home hero */
.hero {
  min-height: 520px !important;
  padding: 82px 0 92px !important;
}

.hero-grid {
  gap: 90px !important;
}

.hero h1 {
  font-size: clamp(46px, 4.5vw, 70px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  font-weight: 500 !important;
  max-width: 820px !important;
  text-transform: none !important;
}

.hero p {
  font-size: 20px !important;
  line-height: 1.92 !important;
  letter-spacing: 0.008em !important;
  max-width: 760px !important;
}

/* Page heroes: insights landing + each article */
.page-hero,
.page-hero.insights-hero,
.page-hero.story-hero {
  padding: 74px 0 82px !important;
}

.page-hero h1,
.page-hero.insights-hero h1,
.page-hero.story-hero h1 {
  font-size: clamp(40px, 3.4vw, 54px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.012em !important;
  font-weight: 500 !important;
  max-width: 920px !important;
  text-transform: none !important;
  margin-bottom: 18px !important;
}

.page-hero p,
.page-hero.insights-hero p,
.page-hero.story-hero p {
  font-size: 20px !important;
  line-height: 1.92 !important;
  letter-spacing: 0.008em !important;
  max-width: 1040px !important;
}

/* Shared sections */
.section {
  padding: 58px 0 !important;
}

.section-title {
  font-size: clamp(38px, 3vw, 52px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.section-lede,
.insights-index-lede,
.intro,
.block p,
.plain-list li,
.breakdown-table td {
  font-size: 18px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.008em !important;
}

/* Calculator tabs */
.calculator-tabs {
  gap: 18px !important;
}

.calc-tab {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: 0.008em !important;
  min-height: 92px !important;
  padding: 22px 24px !important;
}

/* Calculator cards */
.calculator-card {
  padding: 34px 34px 30px !important;
}

.calculator-card h2 {
  font-size: clamp(32px, 2.8vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  max-width: 980px !important;
}

.intro {
  margin-bottom: 22px !important;
}

.formula-box {
  padding: 20px 22px !important;
}

.formula-box strong {
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

.assumption-stack {
  gap: 18px !important;
}

.input-group {
  padding: 22px !important;
}

.input-group h3,
.block h3 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.form-grid {
  gap: 16px 18px !important;
}

.field label {
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.field input,
.btn {
  font-size: 18px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.006em !important;
}

.field input {
  padding: 15px 14px !important;
}

.btn {
  font-weight: 500 !important;
}

.metric-card strong {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

/* Insights landing cards */
.preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

.preview-card {
  padding: 34px 34px 36px !important;
  min-height: 410px !important;
  box-shadow: none !important;
}

.preview-meta {
  display: inline-block !important;
  margin-bottom: 18px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.preview-card h3 {
  font-size: clamp(30px, 2.2vw, 38px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
  font-weight: 400 !important;
  max-width: 16ch !important;
  margin: 0 0 22px !important;
}

.preview-card p {
  font-size: 18px !important;
  line-height: 1.92 !important;
  letter-spacing: 0.008em !important;
}

/* Individual insight page */
.story-page {
  padding: 42px 44px 34px !important;
}

.story-page-body p,
.story-page-callout p,
.question-list li {
  font-size: 19px !important;
  line-height: 1.96 !important;
  letter-spacing: 0.008em !important;
}

.story-page-callout h3,
.question-title {
  font-size: 16px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

.story-back-link {
  font-size: 16px !important;
  margin-top: 32px !important;
}

/* Footer */
.footer {
  margin-top: 48px !important;
}

.footer .brand img {
  width: 30px !important;
  height: 30px !important;
}

.footer .brand span {
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0.018em !important;
}

.footer p,
.footer a {
  font-size: 15px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.006em !important;
}

/* Mobile */
@media (max-width: 1200px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  .preview-card {
    min-height: 360px !important;
  }
}

@media (max-width: 900px) {
  .hero-grid,
  .preview-grid,
  .calculator-tabs,
  .form-grid,
  .metric-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .hero {
    min-height: 470px !important;
    padding: 64px 0 72px !important;
  }

  .hero h1,
  .page-hero h1,
  .page-hero.insights-hero h1,
  .page-hero.story-hero h1 {
    font-size: clamp(36px, 9vw, 50px) !important;
    line-height: 1.12 !important;
  }

  .hero p,
  .page-hero p,
  .page-hero.insights-hero p,
  .page-hero.story-hero p,
  .preview-card p,
  .story-page-body p,
  .story-page-callout p,
  .question-list li,
  .section-lede,
  .intro,
  .block p,
  .plain-list li,
  .breakdown-table td {
    font-size: 17px !important;
    line-height: 1.88 !important;
  }

  .preview-card {
    min-height: auto !important;
    padding: 28px 26px 30px !important;
  }

  .story-page {
    padding: 28px 26px 24px !important;
  }
}



/* =========================================================
   FINAL SITEWIDE TUNING
   - restore compact original header proportion
   - keep logo compact and stable
   - make insight topic headings airy and bold 700
   - reduce jammed feeling throughout story hero typography
   ========================================================= */

:root{
  --site-font:"Google Sans Text","Google Sans","Product Sans","Noto Sans",Arial,sans-serif;
}

html, body, body *, input, button, textarea, select{
  font-family:var(--site-font) !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
}

/* Compact header matching the earlier preferred header */
.site-header{
  background:#0d0d10 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.header-inner{
  min-height:78px !important;
  height:78px !important;
  padding:0 !important;
  gap:24px !important;
  align-items:center !important;
}
.brand{
  gap:12px !important;
}
.brand img{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
}
.brand span{
  font-size:21px !important;
  line-height:28px !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
  color:#fff !important;
}
.nav{
  gap:14px !important;
}
.nav a{
  height:44px !important;
  min-width:auto !important;
  padding:0 24px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  background:linear-gradient(180deg,#2c2c2c 0%,#191919 100%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.18) !important;
}

/* Global airy text tuning */
body{
  font-size:17px !important;
  line-height:1.84 !important;
  letter-spacing:.008em !important;
  font-weight:400 !important;
}
p, li, td, th, label, input, button, textarea, select, a, span{
  letter-spacing:.008em !important;
}
h1, h2, h3, h4, h5, h6{
  letter-spacing:-.012em !important;
}

/* Home hero remains airy */
.hero{
  padding:84px 0 96px !important;
}
.hero-grid{
  gap:86px !important;
}
.hero h1{
  font-size:clamp(48px,4.8vw,74px) !important;
  line-height:1.08 !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  text-transform:uppercase !important;
  max-width:760px !important;
}
.hero p{
  font-size:20px !important;
  line-height:1.95 !important;
  letter-spacing:.008em !important;
  max-width:720px !important;
}
.eyebrow{
  font-size:13px !important;
  line-height:1.5 !important;
  letter-spacing:.08em !important;
  font-weight:500 !important;
}

/* General page heroes */
.page-hero{
  padding:92px 0 104px !important;
}
.page-hero p{
  font-size:20px !important;
  line-height:1.95 !important;
  letter-spacing:.008em !important;
  max-width:1080px !important;
}

/* Insight landing hero */
.page-hero.insights-hero h1{
  font-size:clamp(44px,4vw,64px) !important;
  line-height:1.12 !important;
  font-weight:600 !important;
  letter-spacing:-.016em !important;
  text-transform:none !important;
  max-width:920px !important;
}

/* Story hero: specifically fix the topic title */
.page-hero.story-hero{
  padding:108px 0 118px !important;
}
.page-hero.story-hero .eyebrow{
  margin:0 0 20px !important;
  font-size:14px !important;
  line-height:1.5 !important;
  letter-spacing:.08em !important;
  font-weight:500 !important;
}
.page-hero.story-hero h1{
  font-size:clamp(52px,5vw,84px) !important;
  line-height:1.16 !important;
  font-weight:700 !important;
  letter-spacing:-.022em !important;
  text-transform:none !important;
  max-width:980px !important;
  margin:0 0 26px !important;
}
.page-hero.story-hero p{
  font-size:21px !important;
  line-height:2.0 !important;
  letter-spacing:.008em !important;
  max-width:1140px !important;
  font-weight:400 !important;
}

/* Insights preview cards should feel airy too */
.preview-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:34px !important;
}
.preview-card{
  padding:34px 34px 36px !important;
  min-height:390px !important;
  box-shadow:none !important;
}
.preview-meta{
  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  margin-bottom:18px !important;
}
.preview-card h3{
  font-size:clamp(29px,2.1vw,38px) !important;
  line-height:1.24 !important;
  font-weight:500 !important;
  letter-spacing:-.014em !important;
  max-width:16ch !important;
  margin:0 0 20px !important;
}
.preview-card p{
  font-size:18px !important;
  line-height:1.95 !important;
  letter-spacing:.008em !important;
}

/* Story body */
.story-page{
  padding:42px 42px 34px !important;
}
.story-page-body p{
  font-size:19px !important;
  line-height:1.98 !important;
  letter-spacing:.008em !important;
  max-width:1100px !important;
}
.story-page-callout h3,
.question-title{
  font-size:16px !important;
  line-height:1.45 !important;
  letter-spacing:.08em !important;
  font-weight:600 !important;
}
.story-page-callout p,
.question-list li{
  font-size:19px !important;
  line-height:1.95 !important;
  letter-spacing:.008em !important;
}

/* Calculator section */
.section-title{
  font-size:clamp(38px,3vw,54px) !important;
  line-height:1.08 !important;
  letter-spacing:-.016em !important;
  font-weight:700 !important;
}
.section-lede{
  font-size:18px !important;
  line-height:1.95 !important;
  letter-spacing:.008em !important;
  max-width:1280px !important;
}
.calc-tab{
  font-size:20px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  letter-spacing:.008em !important;
  min-height:92px !important;
  padding:22px 24px !important;
}
.calculator-card h2{
  font-size:clamp(34px,2.8vw,50px) !important;
  line-height:1.1 !important;
  letter-spacing:-.016em !important;
  font-weight:700 !important;
}
.intro,
.block p,
.breakdown-table td,
.plain-list li{
  font-size:17px !important;
  line-height:1.9 !important;
  letter-spacing:.008em !important;
}
.field label{
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
}
.field input{
  font-size:18px !important;
  line-height:1.45 !important;
  padding:15px 14px !important;
}
.formula-box strong{
  font-size:18px !important;
  line-height:1.6 !important;
  font-weight:600 !important;
}
.metric-card strong{
  font-size:26px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

/* Footer */
.footer .brand img{
  width:28px !important;
  height:28px !important;
}
.footer .brand span{
  font-size:21px !important;
  line-height:28px !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
}

/* Responsive */
@media (max-width:1200px){
  .preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .page-hero.story-hero h1{
    font-size:clamp(46px,4.8vw,72px) !important;
  }
}
@media (max-width:900px){
  .container{
    width:min(100%,calc(100% - 36px)) !important;
  }
  .header-inner{
    min-height:72px !important;
    height:auto !important;
    padding:12px 0 !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .brand img{
    width:28px !important;
    height:28px !important;
  }
  .brand span{
    font-size:20px !important;
    line-height:28px !important;
  }
  .nav{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  .nav a{
    height:42px !important;
    padding:0 16px !important;
    font-size:12px !important;
  }
  .hero-grid,
  .preview-grid,
  .calculator-tabs,
  .form-grid,
  .metric-grid,
  .footer-grid{
    grid-template-columns:1fr !important;
  }
  .hero{
    padding:64px 0 72px !important;
  }
  .hero h1{
    font-size:clamp(40px,10vw,58px) !important;
    line-height:1.1 !important;
  }
  .page-hero.story-hero{
    padding:74px 0 82px !important;
  }
  .page-hero.story-hero h1{
    font-size:clamp(38px,9vw,52px) !important;
    line-height:1.14 !important;
  }
  .hero p,
  .page-hero p,
  .page-hero.story-hero p,
  .preview-card p,
  .story-page-body p,
  .story-page-callout p,
  .question-list li,
  .section-lede,
  .intro,
  .block p,
  .plain-list li,
  .breakdown-table td{
    font-size:17px !important;
    line-height:1.88 !important;
  }
}


/* Requested update: make calculator section subheads bolder */
.input-group h3{
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}


/* Requested update: calculator section headings bolder, calculator typography smaller */
body .input-group h3,
body .block h3{
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

body .calculator-card h2{
  font-size: clamp(20px, 1.85vw, 30px) !important;
  line-height: 1.08 !important;
}

body .intro{
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body .formula-box strong{
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

body .field label{
  font-size: 10px !important;
  line-height: 1.35 !important;
}

body .field input,
body select,
body textarea{
  font-size: 14px !important;
  line-height: 1.35 !important;
  padding: 10px 12px !important;
}

body .metric-card strong{
  font-size: 18px !important;
  line-height: 1.15 !important;
}

body .breakdown-table td{
  font-size: 13px !important;
  line-height: 1.4 !important;
}



/* =========================================================
   FINAL FONT WEIGHT SYSTEM
   User request:
   - Google Sans family sitewide
   - All heading fonts = Google Sans Bold 700
   - Insight content body = Google Sans Regular 400
   - Do not make typography taller
   - Do not reduce What to Carry Forward / Questions sections
   ========================================================= */

:root {
  --site-font: "Google Sans Text", "Google Sans", "Product Sans", "Noto Sans", Arial, sans-serif;
}

/* Sitewide font family */
html,
body,
body *,
input,
button,
textarea,
select {
  font-family: var(--site-font) !important;
  font-optical-sizing: auto;
  font-variation-settings: normal !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Normal body text: regular 400, not thin */
body,
p,
li,
td,
th,
label,
input,
button,
textarea,
select,
a,
span {
  font-weight: 400 !important;
  font-variation-settings: normal !important;
}

/* All headings: bold 700 */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.calculator-card h2,
.input-group h3,
.block h3,
.preview-card h3,
.story-page-callout h3,
.question-title,
.page-hero h1,
.page-hero.insights-hero h1,
.page-hero.story-hero h1 {
  font-weight: 700 !important;
  font-variation-settings: normal !important;
}

/* Keep the compact header stable */
.site-header {
  min-height: 78px !important;
}

.header-inner {
  height: 78px !important;
  min-height: 78px !important;
  padding: 0 !important;
}

.brand img {
  width: 28px !important;
  height: 28px !important;
}

.brand span {
  font-size: 21px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.nav a {
  height: 44px !important;
  padding: 0 24px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

/* Story hero topic: bold 700, but not taller */
.page-hero.story-hero h1 {
  font-size: clamp(46px, 4.4vw, 72px) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.018em !important;
  font-weight: 700 !important;
  max-width: 980px !important;
  margin-bottom: 24px !important;
}

/* Story hero supporting text: regular 400 */
.page-hero.story-hero p,
.page-hero.insights-hero p,
.page-hero p {
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
}

/* Insight article body: Google Sans regular 400, not thin, not overly tall */
.story-page-body p {
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.68 !important;
  letter-spacing: 0 !important;
  color: #242424 !important;
  max-width: 1080px !important;
}

/* Keep What to Carry Forward and Questions readable; do not reduce */
.story-page-callout h3,
.question-title {
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
}

.story-page-callout p,
.question-list li {
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.68 !important;
  letter-spacing: 0 !important;
  color: #242424 !important;
}

/* Insight preview cards */
.preview-card h3 {
  font-weight: 700 !important;
  font-size: clamp(29px, 2.05vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
}

.preview-card p {
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
}

/* Calculator headings bold; calculator contents smaller as requested before */
.calculator-card h2 {
  font-weight: 700 !important;
  font-size: clamp(20px, 1.85vw, 30px) !important;
  line-height: 1.08 !important;
}

.input-group h3,
.block h3 {
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
}

.intro,
.block p,
.plain-list li,
.breakdown-table td {
  font-weight: 400 !important;
}

.field label {
  font-weight: 700 !important;
}

.metric-card strong {
  font-weight: 700 !important;
}

/* General headings elsewhere */
.hero h1,
.section-title,
.page-hero.insights-hero h1 {
  font-weight: 700 !important;
}

/* Mobile */
@media (max-width: 900px) {
  .page-hero.story-hero h1 {
    font-size: clamp(38px, 9vw, 52px) !important;
    line-height: 1.12 !important;
  }

  .story-page-body p,
  .story-page-callout p,
  .question-list li {
    font-size: 17px !important;
    line-height: 1.66 !important;
  }

  .brand img {
    width: 28px !important;
    height: 28px !important;
  }

  .brand span {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}



/* Legal pages required for search, advertising review, and site trust */
.legal-hero h1 {
  font-weight: 700 !important;
}

.legal-document {
  background: #fff;
  border: 1px solid var(--line);
  padding: 42px 44px;
  max-width: 1080px;
}

.legal-document h2 {
  margin: 32px 0 10px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.legal-document h2:first-child {
  margin-top: 0;
}

.legal-document p,
.legal-document li {
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400 !important;
  letter-spacing: 0;
  color: #2b2b2b;
}

.legal-document ul {
  margin: 10px 0 22px;
  padding-left: 22px;
}

.footer-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .legal-document {
    padding: 28px 24px;
  }

  .legal-document h2 {
    font-size: 22px;
  }

  .legal-document p,
  .legal-document li {
    font-size: 16px;
  }
}



/* Make insight preview card typography bolder without changing size */
.preview-card h3,
.insight-card h3,
.story-card h3,
.insights-grid .card h3 {
  font-weight: 700 !important;
}

.preview-card p,
.insight-card p,
.story-card p,
.insights-grid .card p {
  font-weight: 500 !important;
}



/* =========================================================
   FINAL EXACT GOOGLE SANS OVERRIDE
   User-provided Google Fonts link is in every HTML head.
   Apply Google Sans everywhere.
   Apply Google Sans Bold 700 to all heading/topic/hero text.
   ========================================================= */

:root {
  --site-font: "Google Sans", "Google Sans Text", "Product Sans", "Noto Sans", Arial, sans-serif !important;
}

html,
body,
body *,
input,
button,
textarea,
select {
  font-family: var(--site-font) !important;
  font-optical-sizing: auto !important;
  font-variation-settings: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Normal content stays Google Sans Regular 400 */
body,
p,
li,
td,
th,
label,
input,
textarea,
select,
.story-page-body p,
.story-page-callout p,
.question-list li,
.preview-card p,
.intro,
.section-lede,
.block p,
.plain-list li,
.breakdown-table td {
  font-family: var(--site-font) !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
}

/* ALL headings and topic text use Google Sans Bold 700 */
h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.page-hero h1,
.page-hero.insights-hero h1,
.page-hero.story-hero h1,
.section-title,
.calculator-card h2,
.input-group h3,
.block h3,
.preview-card h3,
.story-page-callout h3,
.question-title,
.brand span,
.nav a,
.eyebrow,
.preview-meta,
.story-meta,
.formula-box span,
.metric-card span,
.field label {
  font-family: var(--site-font) !important;
  font-weight: 700 !important;
  font-variation-settings: normal !important;
}

/* Restore compact stable header; do not enlarge logo */
.site-header {
  min-height: 78px !important;
  background: #0d0d10 !important;
}

.header-inner {
  height: 78px !important;
  min-height: 78px !important;
  padding: 0 !important;
  align-items: center !important;
}

.brand {
  gap: 12px !important;
}

.brand img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

.brand span {
  font-size: 21px !important;
  line-height: 28px !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

.nav {
  gap: 14px !important;
}

.nav a {
  height: 44px !important;
  min-width: auto !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Hero/topic typography: actual Google Sans Bold 700, not thin */
.hero h1 {
  font-size: clamp(48px, 4.8vw, 74px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em !important;
  text-transform: uppercase !important;
  max-width: 820px !important;
}

.page-hero.story-hero h1 {
  font-size: clamp(52px, 4.7vw, 78px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.018em !important;
  text-transform: none !important;
  max-width: 1120px !important;
  margin-bottom: 26px !important;
}

.page-hero.insights-hero h1,
.page-hero.legal-hero h1,
.page-hero h1 {
  font-size: clamp(42px, 3.8vw, 62px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.016em !important;
  text-transform: none !important;
}

.page-hero.story-hero p,
.page-hero.insights-hero p,
.page-hero.legal-hero p,
.page-hero p,
.hero p {
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.78 !important;
  letter-spacing: 0 !important;
}

/* Insight preview cards: keep same size, make title and preview text stronger */
.preview-card h3 {
  font-weight: 700 !important;
  font-size: clamp(29px, 2.05vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
}

.preview-card p {
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
}

/* Calculator section topics bold 700; calculator content smaller */
.input-group h3,
.block h3 {
  font-size: 18px !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
}

.calculator-card h2 {
  font-size: clamp(20px, 1.85vw, 30px) !important;
  line-height: 1.08 !important;
}

.intro {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.formula-box strong {
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.field label {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.field input,
select,
textarea {
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  padding: 10px 12px !important;
}

.metric-card strong {
  font-family: var(--site-font) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.breakdown-table td {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Insight body: regular 400, not thin, not reduced */
.story-page-body p,
.story-page-callout p,
.question-list li {
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.68 !important;
  letter-spacing: 0 !important;
  color: #242424 !important;
}

.story-page-callout h3,
.question-title {
  font-size: 17px !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
}

/* Legal pages */
.legal-document h2 {
  font-weight: 700 !important;
}

.legal-document p,
.legal-document li {
  font-weight: 400 !important;
}

/* Mobile */
@media (max-width: 900px) {
  .header-inner {
    height: auto !important;
    min-height: 72px !important;
    padding: 12px 0 !important;
  }

  .brand img {
    width: 28px !important;
    height: 28px !important;
  }

  .brand span {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .page-hero.story-hero h1 {
    font-size: clamp(38px, 9vw, 52px) !important;
    line-height: 1.12 !important;
  }

  .story-page-body p,
  .story-page-callout p,
  .question-list li {
    font-size: 17px !important;
    line-height: 1.66 !important;
  }
}


/* READABILITY UPDATE: calculator typography only */
html, body, body *, input, button, textarea, select {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
}

/* Calculator titles and explanatory copy */
.calculator-card h2 {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(38px, 3vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em !important;
}

.intro {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 1.75 !important;
  color: #2f2f2f !important;
}

/* Black formula banner */
.formula-box span {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
}

.formula-box strong {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.55 !important;
}

/* Section boxes like EXISTING ASSET / PLANNING / COST ASSUMPTIONS */
.input-group h3,
.block h3 {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

/* Field labels */
.field label {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.42 !important;
  letter-spacing: .01em !important;
  color: #101010 !important;
}

/* Inputs */
.field input,
.field select,
.field textarea {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  color: #111 !important;
  padding: 18px 18px !important;
}

/* Buttons inside calculators */
.calculator-actions .btn,
.btn {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  padding: 16px 26px !important;
}

/* Result cards */
.metric-card span {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: .06em !important;
}

.metric-card strong {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  line-height: 1.12 !important;
}

/* Breakdown + notes */
.breakdown-table td,
.plain-list li,
.block p,
.note {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.72 !important;
}

.breakdown-table td:last-child {
  font-weight: 700 !important;
}

/* Tabs for calculators */
.calc-tab {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
}

@media (max-width: 900px) {
  .calculator-card h2 {
    font-size: 32px !important;
  }
  .intro {
    font-size: 19px !important;
  }
  .input-group h3,
  .block h3 {
    font-size: 28px !important;
  }
  .field label {
    font-size: 18px !important;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 22px !important;
  }
  .metric-card strong {
    font-size: 29px !important;
  }
  .breakdown-table td,
  .plain-list li,
  .block p,
  .note {
    font-size: 18px !important;
  }
}

/* =========================================================
   PREMIUM INSIGHTS CARD UPGRADE
   More premium, editorial card styling for the insights index
   ========================================================= */

.preview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

.preview-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%) !important;
  border: 1px solid #e7e2da !important;
  border-radius: 24px !important;
  padding: 34px 34px 30px !important;
  min-height: 430px !important;
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.04), 0 1px 0 rgba(255,255,255,0.95) inset !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.preview-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #cf2e2e 0%, #ef6557 100%) !important;
}

.preview-card::after {
  content: "Open full article →" !important;
  margin-top: auto !important;
  padding-top: 24px !important;
  font-family: "Google Sans", "Google Sans Text", "Product Sans", "Noto Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #151515 !important;
  opacity: 0.72 !important;
}

.preview-card:hover,
.preview-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: #d8d0c4 !important;
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.08), 0 1px 0 rgba(255,255,255,0.96) inset !important;
}

.preview-meta {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 22px !important;
  border-radius: 999px !important;
  background: rgba(207, 46, 46, 0.07) !important;
  border: 1px solid rgba(207, 46, 46, 0.14) !important;
  color: #c72c2c !important;
  font-family: "Google Sans", "Google Sans Text", "Product Sans", "Noto Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.preview-card h3 {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", "Noto Sans", Arial, sans-serif !important;
  font-size: clamp(30px, 2.1vw, 38px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.022em !important;
  font-weight: 700 !important;
  color: #131313 !important;
  margin: 0 0 18px !important;
  max-width: 15ch !important;
}

.preview-card p {
  font-family: "Google Sans", "Google Sans Text", "Product Sans", "Noto Sans", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  color: #3d3d3d !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .preview-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .preview-card {
    min-height: auto !important;
    padding: 26px 24px 24px !important;
    border-radius: 20px !important;
  }

  .preview-card h3 {
    font-size: 28px !important;
  }

  .preview-card p {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }
}

/* Requested update: make hero typography breathe more */
.hero {
  padding: 96px 0 108px !important;
}

.hero-grid {
  gap: 104px !important;
  align-items: center !important;
}

.hero .eyebrow {
  margin: 0 0 24px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.055em !important;
}

.hero h1 {
  font-size: clamp(54px, 5vw, 90px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  max-width: 10.8ch !important;
  text-wrap: balance !important;
}

.hero p {
  font-size: 22px !important;
  line-height: 1.9 !important;
  max-width: 34ch !important;
}

@media (max-width: 900px) {
  .hero {
    padding: 72px 0 82px !important;
  }

  .hero-grid {
    gap: 36px !important;
  }

  .hero .eyebrow {
    margin-bottom: 18px !important;
    font-size: 14px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 10vw, 64px) !important;
    line-height: 1.14 !important;
    max-width: 11ch !important;
  }

  .hero p {
    font-size: 19px !important;
    line-height: 1.8 !important;
    max-width: 100% !important;
  }
}

/* Requested update: make result / line-item breakdown much larger and bolder */
.block h3 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.breakdown-table td {
  font-size: 24px !important;
  line-height: 1.68 !important;
  padding: 14px 0 !important;
}

.breakdown-table td:first-child {
  font-weight: 500 !important;
}

.breakdown-table td:last-child {
  font-size: 26px !important;
  font-weight: 700 !important;
}

.plain-list li,
.block p,
.note {
  font-size: 22px !important;
  line-height: 1.72 !important;
}

@media (max-width: 900px) {
  .block h3 {
    font-size: 21px !important;
  }

  .breakdown-table td {
    font-size: 20px !important;
    padding: 12px 0 !important;
  }

  .breakdown-table td:last-child {
    font-size: 22px !important;
  }

  .plain-list li,
  .block p,
  .note {
    font-size: 19px !important;
  }
}

/* Requested update: every calculator title uses Google Sans Bold 700 */
body .calculator-card h2 {
  font-family: 'Google Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-variation-settings: 'wght' 700, 'opsz' 18 !important;
  letter-spacing: -0.02em !important;
}


/* ABOUT PAGE + LEGAL HUB */
.about-hero h1 {
  font-family: "Google Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
}

.about-section {
  padding-top: 58px !important;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}

.about-panel {
  background: #fff;
  border: 1px solid #e5ded4;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(10,10,10,.035);
}

.about-panel h2 {
  margin: 0 0 16px;
  font-family: "Google Sans", Arial, sans-serif !important;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700 !important;
  letter-spacing: -0.018em;
}

.about-panel h3 {
  margin: 0 0 8px;
  font-family: "Google Sans", Arial, sans-serif !important;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.about-panel p {
  margin: 0 0 16px;
  font-family: "Google Sans", Arial, sans-serif !important;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 400 !important;
  color: #2f2f2f;
}

.about-panel p:last-child {
  margin-bottom: 0;
}

.legal-link-grid {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.legal-link-grid a {
  display: block;
  padding: 18px 18px;
  border: 1px solid #e6ded4;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  text-decoration: none;
  color: #111;
}

.legal-link-grid a:hover,
.legal-link-grid a:focus-visible {
  border-color: #d8d0c4;
  box-shadow: 0 8px 20px rgba(10,10,10,.05);
}

.legal-link-grid strong {
  display: block;
  font-family: "Google Sans", Arial, sans-serif !important;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700 !important;
  margin-bottom: 6px;
}

.legal-link-grid span {
  display: block;
  font-family: "Google Sans", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400 !important;
  color: #4a4a4a;
}

.scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.scope-grid p {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .about-grid,
  .scope-grid {
    grid-template-columns: 1fr;
  }

  .about-panel {
    padding: 26px;
    border-radius: 20px;
  }

  .about-panel h2 {
    font-size: 28px;
  }

  .about-panel p {
    font-size: 17px;
  }
}

/* FINAL HIERARCHY + READABILITY OVERRIDES */
:root{
  --google-sans-final: "Google Sans", Arial, sans-serif;
}

body,
body *{
  font-family: var(--google-sans-final) !important;
}

/* Keep brand all caps */
.brand span{
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Calculator titles and intros */
.calculator-card h2{
  font-size: clamp(38px, 3.2vw, 56px) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
}

.intro{
  font-size: clamp(22px, 1.7vw, 30px) !important;
  line-height: 1.55 !important;
  color: #2f2f2f !important;
  max-width: 1320px !important;
}

/* Formula / testing box */
.formula-box{
  padding: 24px 28px !important;
  margin: 0 0 32px !important;
}
.formula-box span{
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.formula-box strong{
  font-size: clamp(28px, 2vw, 36px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* Input sections */
.assumption-stack{
  gap: 24px !important;
}
.input-group{
  padding: 28px !important;
}
.input-group h3{
  font-size: clamp(30px, 2.1vw, 38px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-bottom: 20px !important;
}
.form-grid{
  gap: 22px 22px !important;
}
.field label{
  font-size: clamp(24px, 1.75vw, 32px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}
.field input{
  font-size: clamp(30px, 2.1vw, 40px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  padding: 18px 18px !important;
}

/* Premium red calculate button */
.btn{
  background: linear-gradient(180deg, #e53935 0%, #b80f16 100%) !important;
  border: 1px solid #940b12 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 22px rgba(128,0,0,0.22) !important;
}

/* Black result cards = biggest result hierarchy */
.metric-grid{
  gap: 18px !important;
}
.metric-card{
  padding: 22px 22px 20px !important;
}
.metric-card span{
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.metric-card strong{
  font-size: clamp(40px, 3vw, 54px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
}

/* Result blocks */
.block{
  padding: 26px !important;
}
.block h3{
  font-size: clamp(28px, 2vw, 36px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-bottom: 18px !important;
}

/* Line-item breakdown: same font size on both sides */
.breakdown-table{
  width: 100% !important;
}
.breakdown-table td{
  padding: 16px 0 !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}
.breakdown-table td:first-child{
  width: 52% !important;
  color: #171717 !important;
}
.breakdown-table td:last-child{
  width: 48% !important;
  text-align: right !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Decision and interpretation readability */
.plain-list li,
.block p{
  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.7 !important;
}

.note{
  font-size: 20px !important;
  line-height: 1.65 !important;
}

/* Mobile safety */
@media (max-width: 900px){
  .calculator-card h2{font-size: 34px !important;}
  .intro{font-size: 20px !important;}
  .formula-box span{font-size: 15px !important;}
  .formula-box strong{font-size: 24px !important;}
  .input-group{padding: 22px !important;}
  .input-group h3{font-size: 24px !important;}
  .field label{font-size: 20px !important;}
  .field input{font-size: 26px !important;}
  .metric-card strong{font-size: 34px !important;}
  .metric-card span{font-size: 14px !important;}
  .block h3{font-size: 24px !important;}
  .breakdown-table td,
  .breakdown-table td:last-child{font-size: 22px !important;}
  .plain-list li,
  .block p{font-size: 20px !important;}
}


/* ===== FINAL TYPOGRAPHY AND HIERARCHY FIXES ===== */
:root{
  --final-google-sans: "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif;
}
body,
input,
button,
textarea,
select,
.site-header,
.brand span,
.nav a,
.hero h1,
.hero p,
.section-title,
.section-lede,
.calculator-card,
.calculator-card h2,
.intro,
.formula-box,
.input-group,
.input-group h3,
.field label,
.field input,
.metric-card,
.metric-card span,
.metric-card strong,
.block,
.block h3,
.breakdown-table td,
.plain-list li,
.block p,
.note {
  font-family: var(--final-google-sans) !important;
}

/* Calculator title and intro */
.calculator-card h2{
  font-size: 42px !important;
  line-height: 1.06 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.intro{
  font-size: 20px !important;
  line-height: 1.55 !important;
}

/* Formula bar */
.formula-box{
  padding: 22px 28px !important;
}
.formula-box span{
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
.formula-box strong{
  font-size: 24px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* Input sections */
.input-group{
  padding: 26px 26px 22px !important;
}
.input-group h3{
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  margin-bottom: 20px !important;
}
.field label{
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  margin-bottom: 10px !important;
}
.field input{
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  padding: 16px 16px !important;
  min-height: 68px !important;
}

/* Calculate button */
.btn{
  font-size: 24px !important;
  font-weight: 700 !important;
  padding: 16px 28px !important;
}

/* Result metric cards on black background */
.metric-grid{
  gap: 18px !important;
}
.metric-card{
  padding: 22px 22px 20px !important;
}
.metric-card span{
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.metric-card strong{
  margin-top: 12px !important;
  font-size: 42px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}

/* Result blocks */
.block{
  padding: 24px !important;
}
.block h3{
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  margin-bottom: 18px !important;
}

/* Line-item breakdown: label and value same font size */
.breakdown-table{
  table-layout: fixed !important;
  width: 100% !important;
}
.breakdown-table td{
  padding: 16px 0 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
}
.breakdown-table td:first-child{
  width: 58% !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  padding-right: 24px !important;
}
.breakdown-table td:last-child{
  width: 42% !important;
  text-align: right !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Decision / interpretation sections */
.plain-list li,
.block p{
  font-size: 20px !important;
  line-height: 1.65 !important;
}
.note{
  font-size: 18px !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px){
  .calculator-card h2{font-size: 34px !important;}
  .formula-box span{font-size: 15px !important;}
  .formula-box strong{font-size: 20px !important;}
  .input-group h3{font-size: 21px !important;}
  .field label{font-size: 18px !important;}
  .field input{font-size: 24px !important; min-height: 60px !important;}
  .metric-card span{font-size: 15px !important;}
  .metric-card strong{font-size: 32px !important;}
  .breakdown-table td,
  .breakdown-table td:first-child,
  .breakdown-table td:last-child{font-size: 18px !important;}
  .plain-list li,
  .block p{font-size: 18px !important;}
}


/* ===== FORMULA BAR ENLARGED PER LATEST REQUEST ===== */
.formula-box{
  padding: 28px 28px !important;
}
.formula-box span{
  font-size: 27px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}
.formula-box strong{
  font-size: 36px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
@media (max-width: 900px){
  .formula-box span{font-size: 18px !important;}
  .formula-box strong{font-size: 26px !important;}
}

/* ===== FINAL RESULT HIERARCHY FIX: BLACK RESULT CARDS MUST BE LARGER THAN BREAKDOWN ===== */
.results-stack .metric-grid{
  gap: 18px !important;
}
.results-stack .metric-card{
  padding: 20px 20px 18px !important;
}
.results-stack .metric-card span{
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}
.results-stack .metric-card strong{
  display: block !important;
  margin-top: 10px !important;
  font-size: 48px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
}

.results-stack .block h3{
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
.results-stack .breakdown-table td,
.results-stack .breakdown-table td:first-child,
.results-stack .breakdown-table td:last-child{
  font-size: 18px !important;
  line-height: 1.35 !important;
}
.results-stack .breakdown-table td:first-child{
  font-weight: 500 !important;
}
.results-stack .breakdown-table td:last-child{
  font-weight: 700 !important;
}

@media (max-width: 900px){
  .results-stack .metric-card strong{
    font-size: 34px !important;
  }
  .results-stack .metric-card span{
    font-size: 14px !important;
  }
  .results-stack .breakdown-table td,
  .results-stack .breakdown-table td:first-child,
  .results-stack .breakdown-table td:last-child{
    font-size: 16px !important;
  }
}

/* ===== FINAL INPUT LABEL SIZE FIX: CALCULATOR INFO INPUT BOX LABELS MUCH BIGGER ===== */
.calculator-card .field label{
  display: block !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-bottom: 12px !important;
}

.calculator-card .input-group h3{
  font-size: 46px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin-bottom: 22px !important;
}

@media (max-width: 900px){
  .calculator-card .field label{
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .calculator-card .input-group h3{
    font-size: 32px !important;
    line-height: 1.12 !important;
  }
}


/* =======================================================================
   FINAL SANE FONT HIERARCHY FIX
   Purpose:
   - Stop oversized input labels.
   - Make input values easier to read.
   - Keep black result cards strong but contained in the 4-column grid.
   - Keep breakdown smaller than the result cards.
   ======================================================================= */

/* Calculator assumption group titles: visible, not gigantic */
.calculator-card .input-group h3{
  font-size: clamp(30px, 2.2vw, 38px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin: 0 0 22px !important;
}

/* Input box labels: medium hierarchy */
.calculator-card .field label{
  display: block !important;
  font-size: clamp(18px, 1.15vw, 22px) !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
}

/* Customer-entered numbers inside input boxes: larger and readable */
.calculator-card .field input{
  font-size: clamp(22px, 1.35vw, 28px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  min-height: 72px !important;
  padding: 18px 20px !important;
}

/* Keep result cards aligned and prevent number overflow */
.results-stack .metric-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.results-stack .metric-card{
  padding: 22px 24px 24px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.results-stack .metric-card span{
  font-size: clamp(13px, .85vw, 16px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.78) !important;
}

.results-stack .metric-card strong{
  display: block !important;
  margin-top: 12px !important;
  font-size: clamp(30px, 2.05vw, 40px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Breakdown should support the result cards, not overpower them */
.results-stack .block{
  padding: 26px 30px !important;
}

.results-stack .block h3{
  font-size: clamp(20px, 1.25vw, 24px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin-bottom: 18px !important;
}

.results-stack .breakdown-table{
  width: 100% !important;
  table-layout: fixed !important;
}

.results-stack .breakdown-table td,
.results-stack .breakdown-table td:first-child,
.results-stack .breakdown-table td:last-child{
  font-size: clamp(17px, 1.05vw, 20px) !important;
  line-height: 1.35 !important;
  padding: 13px 0 !important;
  vertical-align: middle !important;
}

.results-stack .breakdown-table td:first-child{
  width: 60% !important;
  font-weight: 500 !important;
  padding-right: 24px !important;
}

.results-stack .breakdown-table td:last-child{
  width: 40% !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Responsive: two result columns before stacking */
@media (max-width: 1200px){
  .results-stack .metric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .results-stack .metric-card strong{
    font-size: clamp(32px, 4vw, 42px) !important;
  }
}

@media (max-width: 900px){
  .calculator-card .input-group h3{
    font-size: 30px !important;
  }
  .calculator-card .field label{
    font-size: 18px !important;
  }
  .calculator-card .field input{
    font-size: 22px !important;
    min-height: 64px !important;
  }
  .results-stack .metric-grid{
    grid-template-columns: 1fr !important;
  }
  .results-stack .metric-card strong{
    font-size: 34px !important;
  }
  .results-stack .breakdown-table td,
  .results-stack .breakdown-table td:first-child,
  .results-stack .breakdown-table td:last-child{
    font-size: 16px !important;
  }
}

/* =======================================================================
   DEPLOY-ONCE FINAL TYPOGRAPHY ADJUSTMENT
   Reviewed against the live BuildMath calculator structure on 2026-05-13.
   This is the final visual hierarchy for calculator inputs and results.
   ======================================================================= */

/* Assumption section headings: important, but not billboard-sized */
.calculator-card .input-group h3{
  font-size: clamp(30px, 2vw, 36px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin: 0 0 22px !important;
}

/* Labels above input boxes: readable mid-level hierarchy */
.calculator-card .field label{
  display: block !important;
  font-size: clamp(18px, 1vw, 21px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
}

/* Customer-entered numbers: clearly larger than labels */
.calculator-card .field input,
.calculator-card input[type="number"],
.calculator-card input[type="text"]{
  font-size: clamp(24px, 1.3vw, 28px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  min-height: 68px !important;
  padding: 16px 18px !important;
}

/* Results: four cards stay aligned on desktop */
.results-stack .metric-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.results-stack .metric-card{
  min-width: 0 !important;
  min-height: 126px !important;
  overflow: hidden !important;
  padding: 20px 22px 22px !important;
}

.results-stack .metric-card span{
  display: block !important;
  font-size: clamp(13px, .75vw, 15px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.76) !important;
}

.results-stack .metric-card strong{
  display: block !important;
  margin-top: 12px !important;
  font-size: clamp(31px, 2.05vw, 38px) !important;
  line-height: 1.04 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Breakdown: secondary to result cards */
.results-stack .block{
  padding: 26px 30px !important;
}

.results-stack .block h3{
  font-size: clamp(20px, 1.2vw, 23px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin-bottom: 18px !important;
}

.results-stack .breakdown-table{
  width: 100% !important;
  table-layout: fixed !important;
}

.results-stack .breakdown-table td,
.results-stack .breakdown-table td:first-child,
.results-stack .breakdown-table td:last-child{
  font-size: clamp(17px, .95vw, 19px) !important;
  line-height: 1.35 !important;
  padding: 12px 0 !important;
  vertical-align: middle !important;
}

.results-stack .breakdown-table td:first-child{
  width: 60% !important;
  font-weight: 500 !important;
  padding-right: 24px !important;
}

.results-stack .breakdown-table td:last-child{
  width: 40% !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Tablet: two result cards per row avoids cramped cards */
@media (max-width: 1200px){
  .results-stack .metric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .results-stack .metric-card strong{
    font-size: clamp(32px, 3.4vw, 38px) !important;
  }
}

/* Mobile: one result card per row */
@media (max-width: 900px){
  .calculator-card .input-group h3{
    font-size: 30px !important;
  }
  .calculator-card .field label{
    font-size: 18px !important;
  }
  .calculator-card .field input,
  .calculator-card input[type="number"],
  .calculator-card input[type="text"]{
    font-size: 23px !important;
    min-height: 64px !important;
  }
  .results-stack .metric-grid{
    grid-template-columns: 1fr !important;
  }
  .results-stack .metric-card{
    min-height: 112px !important;
  }
  .results-stack .metric-card strong{
    font-size: 34px !important;
  }
  .results-stack .breakdown-table td,
  .results-stack .breakdown-table td:first-child,
  .results-stack .breakdown-table td:last-child{
    font-size: 16px !important;
  }
}

/* ===== FINAL SPACING AND INPUT-VALUE TUNE ===== */
/* Customer-entered input numbers: slightly larger */
.calculator-card .field input,
.calculator-card input[type="number"],
.calculator-card input[type="text"]{
  font-size: clamp(24px, 1.45vw, 30px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  padding: 18px 20px !important;
}

/* Line-item breakdown: pull value column closer to the label column */
.results-stack .breakdown-table{
  width: 100% !important;
  table-layout: auto !important;
}
.results-stack .breakdown-table td:first-child{
  width: auto !important;
  padding-right: 28px !important;
}
.results-stack .breakdown-table td:last-child{
  width: 1% !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 18px !important;
}

@media (max-width: 900px){
  .calculator-card .field input,
  .calculator-card input[type="number"],
  .calculator-card input[type="text"]{
    font-size: 24px !important;
  }
}


/* =======================================================================
   TRUE FINAL HIERARCHY + COMPACT BREAKDOWN FIX
   This block intentionally comes last.
   ======================================================================= */

/* 1. Calculator name must be the biggest item inside each calculator card */
.calculator-card > h2{
  font-size: clamp(48px, 4.2vw, 72px) !important;
  line-height: 1.02 !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 18px !important;
}

/* Calculator intro should support the title, not compete with it */
.calculator-card > .intro{
  font-size: clamp(18px, 1.15vw, 22px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  max-width: 1180px !important;
  margin-bottom: 28px !important;
}

/* Formula bar stays clearly below calculator title */
.calculator-card .formula-box{
  padding: 22px 24px !important;
  margin-bottom: 28px !important;
}
.calculator-card .formula-box span{
  font-size: clamp(14px, .85vw, 16px) !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  letter-spacing: .06em !important;
}
.calculator-card .formula-box strong{
  font-size: clamp(18px, 1.2vw, 23px) !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

/* 2. Content group titles: secondary, not bigger than calculator name */
.calculator-card .input-group h3{
  font-size: clamp(34px, 2.5vw, 46px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 24px !important;
}

/* 3. Field labels: readable, clear, but not headline-sized */
.calculator-card .field label{
  display: block !important;
  font-size: clamp(18px, 1.1vw, 23px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
}

/* 4. Customer input values: large enough to read, smaller than labels/groups */
.calculator-card .field input,
.calculator-card input[type="number"],
.calculator-card input[type="text"]{
  font-size: clamp(23px, 1.45vw, 30px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  min-height: 72px !important;
  padding: 18px 20px !important;
}

/* 5. Result cards: strong but contained */
.results-stack .metric-card strong{
  font-size: clamp(30px, 2vw, 38px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
}

/* 6. Breakdown: do NOT stretch values to the far right of the whole page.
      The table content uses a readable compact width and leaves extra white
      space on the right instead of creating a giant gap between label/value. */
.results-stack .block:has(.breakdown-table){
  padding: 26px 30px !important;
}

.results-stack .breakdown-table{
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

.results-stack .breakdown-table td,
.results-stack .breakdown-table td:first-child,
.results-stack .breakdown-table td:last-child{
  font-size: clamp(17px, 1vw, 20px) !important;
  line-height: 1.35 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  vertical-align: middle !important;
}

.results-stack .breakdown-table td:first-child{
  width: auto !important;
  max-width: 760px !important;
  font-weight: 500 !important;
  padding-right: 36px !important;
}

.results-stack .breakdown-table td:last-child{
  width: 1% !important;
  min-width: 220px !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 750 !important;
  padding-left: 20px !important;
}

/* Tablet */
@media (max-width: 1200px){
  .calculator-card > h2{
    font-size: clamp(42px, 5vw, 58px) !important;
  }
  .calculator-card .input-group h3{
    font-size: clamp(30px, 3.6vw, 40px) !important;
  }
  .results-stack .breakdown-table{
    width: 100% !important;
    max-width: none !important;
  }
}

/* Mobile */
@media (max-width: 900px){
  .calculator-card > h2{
    font-size: 38px !important;
    line-height: 1.06 !important;
  }
  .calculator-card > .intro{
    font-size: 17px !important;
  }
  .calculator-card .input-group h3{
    font-size: 28px !important;
  }
  .calculator-card .field label{
    font-size: 17px !important;
  }
  .calculator-card .field input,
  .calculator-card input[type="number"],
  .calculator-card input[type="text"]{
    font-size: 23px !important;
    min-height: 64px !important;
  }

  .results-stack .breakdown-table,
  .results-stack .breakdown-table tbody,
  .results-stack .breakdown-table tr,
  .results-stack .breakdown-table td{
    display: block !important;
    width: 100% !important;
  }
  .results-stack .breakdown-table td:first-child{
    max-width: none !important;
    padding-right: 0 !important;
    padding-bottom: 4px !important;
  }
  .results-stack .breakdown-table td:last-child{
    min-width: 0 !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
}


/* =======================================================================
   FINAL USER-MARKUP HIERARCHY FIX
   Target from markup:
   1. Calculator title = biggest and boldest.
   2. Formula / testing bar = bigger than content section titles.
   3. Content section titles like Existing Asset / Planning / Cost Assumptions
      = smaller than calculator title and formula hierarchy.
   4. Field labels and input numbers remain readable but do not compete.
   5. Breakdown values stay closer to item names.
   ======================================================================= */

/* Calculator name: biggest */
.calculator-card > h2{
  font-size: clamp(56px, 5.2vw, 88px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
  margin: 0 0 18px !important;
  max-width: 1320px !important;
}

/* Intro under calculator title */
.calculator-card > .intro{
  font-size: clamp(18px, 1.05vw, 21px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  margin-bottom: 30px !important;
}

/* Formula bar: bigger than section titles */
.calculator-card .formula-box{
  padding: 28px 30px !important;
  margin: 0 0 30px !important;
}
.calculator-card .formula-box span{
  display: block !important;
  font-size: clamp(16px, .95vw, 18px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  margin-bottom: 10px !important;
}
.calculator-card .formula-box strong{
  display: block !important;
  font-size: clamp(24px, 1.65vw, 31px) !important;
  line-height: 1.38 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

/* Content topic titles: smaller than calculator name and formula text */
.calculator-card .input-group h3{
  font-size: clamp(30px, 2.05vw, 38px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 24px !important;
}

/* Field labels: clear but subordinate */
.calculator-card .field label{
  font-size: clamp(18px, 1.05vw, 21px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  margin-bottom: 10px !important;
}

/* Input box numbers: readable customer data */
.calculator-card .field input,
.calculator-card input[type="number"],
.calculator-card input[type="text"]{
  font-size: clamp(24px, 1.45vw, 30px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  min-height: 72px !important;
  padding: 18px 20px !important;
}

/* Result card values: strong, contained */
.results-stack .metric-card strong{
  font-size: clamp(30px, 1.95vw, 37px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
}

/* Breakdown: compact value column, not stretched across the page */
.results-stack .breakdown-table{
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  table-layout: auto !important;
}
.results-stack .breakdown-table td:first-child{
  width: auto !important;
  max-width: 720px !important;
  padding-right: 34px !important;
}
.results-stack .breakdown-table td:last-child{
  width: 1% !important;
  min-width: 210px !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 18px !important;
}

/* Tablet */
@media (max-width: 1200px){
  .calculator-card > h2{
    font-size: clamp(48px, 5.8vw, 68px) !important;
  }
  .calculator-card .formula-box strong{
    font-size: clamp(23px, 2.2vw, 28px) !important;
  }
  .calculator-card .input-group h3{
    font-size: clamp(28px, 3.2vw, 36px) !important;
  }
}

/* Mobile */
@media (max-width: 900px){
  .calculator-card > h2{
    font-size: 38px !important;
    line-height: 1.04 !important;
  }
  .calculator-card .formula-box{
    padding: 22px 22px !important;
  }
  .calculator-card .formula-box span{
    font-size: 14px !important;
  }
  .calculator-card .formula-box strong{
    font-size: 20px !important;
  }
  .calculator-card .input-group h3{
    font-size: 26px !important;
  }
  .calculator-card .field label{
    font-size: 17px !important;
  }
  .calculator-card .field input,
  .calculator-card input[type="number"],
  .calculator-card input[type="text"]{
    font-size: 22px !important;
    min-height: 62px !important;
  }
  .results-stack .breakdown-table{
    width: 100% !important;
    max-width: none !important;
  }
  .results-stack .breakdown-table td:last-child{
    min-width: 0 !important;
  }
}


/* =======================================================================
   FINAL CORRECTION FROM USER MARKUP
   Calculator title must be clearly bigger.
   Content group titles must be clearly smaller.
   ======================================================================= */

/* Calculator name: visibly dominant */
.calculator-card > h2{
  font-size: clamp(64px, 6.2vw, 104px) !important;
  line-height: .96 !important;
  font-weight: 950 !important;
  letter-spacing: -0.065em !important;
  margin: 0 0 20px !important;
  max-width: 1500px !important;
}

/* Intro: normal supporting text */
.calculator-card > .intro{
  font-size: clamp(18px, 1.05vw, 22px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  margin-bottom: 32px !important;
}

/* Formula bar stays important, but not larger than calculator title */
.calculator-card .formula-box{
  padding: 30px 34px !important;
  margin-bottom: 30px !important;
}
.calculator-card .formula-box span{
  font-size: clamp(16px, .95vw, 19px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
}
.calculator-card .formula-box strong{
  font-size: clamp(25px, 1.7vw, 33px) !important;
  line-height: 1.38 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
}

/* Existing Asset / Planning / Cost Assumptions: smaller than title and formula */
.calculator-card .input-group h3{
  font-size: clamp(26px, 1.7vw, 34px) !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 22px !important;
}

/* Input labels: clearly below group titles */
.calculator-card .field label{
  font-size: clamp(18px, 1vw, 21px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  margin-bottom: 10px !important;
}

/* Input values: readable but not competing with headings */
.calculator-card .field input,
.calculator-card input[type="number"],
.calculator-card input[type="text"]{
  font-size: clamp(24px, 1.35vw, 29px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  min-height: 70px !important;
  padding: 17px 20px !important;
}

/* Breakdown value column remains compact */
.results-stack .breakdown-table{
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  table-layout: auto !important;
}
.results-stack .breakdown-table td:first-child{
  width: auto !important;
  max-width: 720px !important;
  padding-right: 34px !important;
}
.results-stack .breakdown-table td:last-child{
  width: 1% !important;
  min-width: 210px !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 18px !important;
}

@media (max-width: 1200px){
  .calculator-card > h2{
    font-size: clamp(52px, 6.4vw, 76px) !important;
  }
  .calculator-card .formula-box strong{
    font-size: clamp(23px, 2.25vw, 29px) !important;
  }
  .calculator-card .input-group h3{
    font-size: clamp(25px, 3vw, 32px) !important;
  }
}

@media (max-width: 900px){
  .calculator-card > h2{
    font-size: 42px !important;
    line-height: 1.02 !important;
  }
  .calculator-card .formula-box strong{
    font-size: 20px !important;
  }
  .calculator-card .input-group h3{
    font-size: 25px !important;
  }
  .calculator-card .field label{
    font-size: 17px !important;
  }
  .calculator-card .field input,
  .calculator-card input[type="number"],
  .calculator-card input[type="text"]{
    font-size: 22px !important;
    min-height: 62px !important;
  }
}

/* ===== FINAL BREAKDOWN COLUMN TIGHTENING ===== */
/* Pull the value column much closer to the item names */
.results-stack .breakdown-table{
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  table-layout: auto !important;
  margin-left: 0 !important;
}
.results-stack .breakdown-table td,
.results-stack .breakdown-table td:first-child,
.results-stack .breakdown-table td:last-child{
  font-size: clamp(17px, 1vw, 20px) !important;
}
.results-stack .breakdown-table td:first-child{
  width: auto !important;
  max-width: 620px !important;
  padding-right: 28px !important;
}
.results-stack .breakdown-table td:last-child{
  width: 1% !important;
  min-width: 170px !important;
  max-width: 190px !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 12px !important;
}

@media (max-width: 1200px){
  .results-stack .breakdown-table{
    width: min(100%, 860px) !important;
    max-width: 860px !important;
  }
}

@media (max-width: 900px){
  .results-stack .breakdown-table{
    width: 100% !important;
    max-width: none !important;
  }
  .results-stack .breakdown-table td:first-child,
  .results-stack .breakdown-table td:last-child{
    max-width: none !important;
    min-width: 0 !important;
  }
}


/* =======================================================================
   FINAL SECTION-TITLE SCALE FIX
   User markup: Existing Asset / Planning / Cost Assumptions are still too big.
   This block reduces only the calculator input-group titles and keeps the
   calculator title dominant.
   ======================================================================= */

/* Main calculator title remains dominant */
.calculator-card > h2{
  font-size: clamp(52px, 4.8vw, 82px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
  margin: 0 0 18px !important;
}

/* Formula bar remains secondary but stronger than section topics */
.calculator-card .formula-box strong{
  font-size: clamp(24px, 1.55vw, 30px) !important;
  line-height: 1.4 !important;
  font-weight: 850 !important;
}

/* Existing Asset / Planning / Cost Assumptions: step down clearly */
.calculator-card .input-group h3{
  font-size: clamp(22px, 1.35vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 22px !important;
}

/* Field labels should now sit just below section titles */
.calculator-card .field label{
  font-size: clamp(17px, .95vw, 20px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

/* Customer-entered numbers stay readable */
.calculator-card .field input,
.calculator-card input[type="number"],
.calculator-card input[type="text"]{
  font-size: clamp(23px, 1.3vw, 28px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  min-height: 68px !important;
  padding: 16px 19px !important;
}

@media (max-width: 900px){
  .calculator-card > h2{
    font-size: 38px !important;
    line-height: 1.04 !important;
  }
  .calculator-card .formula-box strong{
    font-size: 20px !important;
  }
  .calculator-card .input-group h3{
    font-size: 22px !important;
  }
  .calculator-card .field label{
    font-size: 16px !important;
  }
  .calculator-card .field input,
  .calculator-card input[type="number"],
  .calculator-card input[type="text"]{
    font-size: 22px !important;
    min-height: 62px !important;
  }
}

/* ===== FINAL RESULT-DETAIL CONSISTENCY FIX =====
   Red = same heading font and size across result detail blocks
   Blue = same content font size and aligned content width
*/

/* All result-detail block headings use the same hierarchy */
.results-stack .block h3{
  font-size: 22px !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

/* Line-item breakdown content sets the common content scale */
.results-stack .breakdown-table td,
.results-stack .breakdown-table td:first-child,
.results-stack .breakdown-table td:last-child,
.results-stack .plain-list li,
.results-stack .block p{
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* Keep the breakdown table compact */
.results-stack .breakdown-table{
  width: min(100%, 920px) !important;
  max-width: 920px !important;
}

/* Make decision-signal list and interpretation text follow the same readable width */
.results-stack .plain-list,
.results-stack .block > p{
  width: min(100%, 920px) !important;
  max-width: 920px !important;
}

.results-stack .plain-list{
  margin: 0 !important;
  padding-left: 24px !important;
}
.results-stack .plain-list li{
  margin: 0 0 10px !important;
}
.results-stack .block > p{
  margin: 0 0 14px !important;
}
.results-stack .block > p:last-child{
  margin-bottom: 0 !important;
}

@media (max-width: 900px){
  .results-stack .block h3{
    font-size: 20px !important;
  }
  .results-stack .breakdown-table td,
  .results-stack .breakdown-table td:first-child,
  .results-stack .breakdown-table td:last-child,
  .results-stack .plain-list li,
  .results-stack .block p{
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .results-stack .plain-list,
  .results-stack .block > p,
  .results-stack .breakdown-table{
    width: 100% !important;
    max-width: none !important;
  }
}


/* ===== FINAL CALCULATOR TITLE LOGO + FONT ALIGNMENT ===== */
.calculator-card .calculator-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  font-family: "Google Sans", "Product Sans", Inter, Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  vertical-align: middle !important;
}

.calculator-card .calculator-title-logo{
  display: block !important;
  height: 0.78em !important;
  width: auto !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  align-self: center !important;
  margin: 0 !important;
  transform: translateY(0) !important;
}

.calculator-card .calculator-title span{
  display: inline-block !important;
  font-family: "Google Sans", "Product Sans", Inter, Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
}

/* Main calculator title size and weight */
.calculator-card > h2,
.calculator-card .calculator-title,
.calculator-card .calculator-title span{
  font-size: clamp(52px, 4.8vw, 82px) !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 18px !important;
}

@media (max-width: 900px){
  .calculator-card .calculator-title{
    gap: 10px !important;
  }
  .calculator-card > h2,
  .calculator-card .calculator-title,
  .calculator-card .calculator-title span{
    font-size: 38px !important;
    line-height: 1.04 !important;
  }
  .calculator-card .calculator-title-logo{
    height: 0.8em !important;
  }
}


/* =======================================================================
   FINAL CALCULATOR-TO-CALCULATOR SEPARATION
   Makes each new calculator start visually obvious without making the page noisy.
   ======================================================================= */

/* Space between calculator cards */
.calculator-panel + .calculator-panel{
  margin-top: 112px !important;
  padding-top: 56px !important;
  border-top: 10px solid #111 !important;
}

/* First calculator should not get the divider */
.calculator-panel:first-child{
  margin-top: 0 !important;
}

/* Keep each calculator card clean under the divider */
.calculator-panel + .calculator-panel .calculator-card{
  margin-top: 0 !important;
}

/* Mobile/tablet spacing */
@media (max-width: 900px){
  .calculator-panel + .calculator-panel{
    margin-top: 72px !important;
    padding-top: 36px !important;
    border-top: 7px solid #111 !important;
  }
}


/* =======================================================================
   TRUE FINAL FIX
   - Calculator title row: aligned logo + Google Sans style + bold 700
   - Divider between calculators: strong visible black bar
   This block comes last on purpose.
   ======================================================================= */

/* Calculator title row */
.calculator-card > h2.calculator-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  margin: 0 0 18px !important;
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Inter, Arial, sans-serif !important;
  font-size: clamp(52px, 4.8vw, 82px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  vertical-align: middle !important;
}

.calculator-card > h2.calculator-title .calculator-title-logo{
  display: block !important;
  height: 0.78em !important;
  width: auto !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  transform: none !important;
  align-self: center !important;
}

.calculator-card > h2.calculator-title span{
  display: inline-block !important;
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Inter, Arial, sans-serif !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: inherit !important;
}

/* Make sure other heading rules do not fight the title */
.calculator-card > h2:not(.calculator-title){
  font-family: "Google Sans", "Google Sans Text", "Product Sans", Inter, Arial, sans-serif !important;
  font-size: clamp(52px, 4.8vw, 82px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

/* Very visible separator before every calculator except the first */
.calculator-panel + .calculator-panel{
  position: relative !important;
  margin-top: 110px !important;
  padding-top: 58px !important;
  border-top: none !important;
}

.calculator-panel + .calculator-panel::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 10px !important;
  background: #111 !important;
}

.calculator-panel + .calculator-panel .calculator-card{
  margin-top: 0 !important;
}

@media (max-width: 900px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2:not(.calculator-title){
    font-size: 38px !important;
    line-height: 1.04 !important;
  }

  .calculator-card > h2.calculator-title{
    gap: 10px !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 0.8em !important;
  }

  .calculator-panel + .calculator-panel{
    margin-top: 74px !important;
    padding-top: 38px !important;
  }

  .calculator-panel + .calculator-panel::before{
    height: 7px !important;
  }
}


/* ===== FINAL GOOGLE FONT APPLICATION ===== */
.calculator-card > h2.calculator-title,
.calculator-card > h2.calculator-title span{
  font-family: "Google Sans", "Stack Sans Headline", Inter, Arial, sans-serif !important;
  font-weight: 700 !important;
}

body,
input,
button,
select,
textarea{
  font-family: "Google Sans", Inter, Arial, sans-serif !important;
}


/* ===== FINAL FONT FAMILY CONFIRMATION ===== */
.calculator-card > h2.calculator-title,
.calculator-card > h2.calculator-title span{
  font-family: "Google Sans", "Stack Sans Headline", Inter, Arial, sans-serif !important;
  font-weight: 700 !important;
}

body,
input,
button,
select,
textarea{
  font-family: "Google Sans", Inter, Arial, sans-serif !important;
}


/* ===== FINAL FONT FIX: GOOGLE SANS ONLY ===== */
html,
body,
body *,
input,
button,
select,
textarea{
  font-family: "Google Sans" !important;
}

.calculator-card > h2.calculator-title,
.calculator-card > h2.calculator-title span,
.calculator-card > h2:not(.calculator-title){
  font-family: "Google Sans" !important;
  font-weight: 700 !important;
}


/* =======================================================================
   FINAL TITLE SIZE CORRECTION
   User request: Google Sans BOLD 700 only — do NOT enlarge calculator titles.
   Keep logo alignment and calculator dividers.
   ======================================================================= */

.calculator-card > h2.calculator-title,
.calculator-card > h2.calculator-title span,
.calculator-card > h2:not(.calculator-title){
  font-family: "Google Sans" !important;
  font-size: clamp(34px, 2.45vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 18px !important;
}

.calculator-card > h2.calculator-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.calculator-card > h2.calculator-title .calculator-title-logo{
  height: 0.82em !important;
  width: auto !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

/* Preserve visible divider between calculators */
.calculator-panel + .calculator-panel{
  position: relative !important;
  margin-top: 110px !important;
  padding-top: 58px !important;
  border-top: none !important;
}

.calculator-panel + .calculator-panel::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 10px !important;
  background: #111 !important;
}

@media (max-width: 900px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span,
  .calculator-card > h2:not(.calculator-title){
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .calculator-card > h2.calculator-title{
    gap: 10px !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 0.82em !important;
  }

  .calculator-panel + .calculator-panel{
    margin-top: 74px !important;
    padding-top: 38px !important;
  }

  .calculator-panel + .calculator-panel::before{
    height: 7px !important;
  }
}


/* =======================================================================
   TRUE FINAL TITLE FIX
   Request: same size, Google Sans, bold only, logo aligned to text height.
   ======================================================================= */

.calculator-card > h2.calculator-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  font-family: "Google Sans" !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 18px !important;
}

.calculator-card > h2.calculator-title span{
  display: inline-block !important;
  font-family: "Google Sans" !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}

.calculator-card > h2.calculator-title .calculator-title-logo{
  display: block !important;
  height: 44px !important;
  width: 44px !important;
  flex: 0 0 44px !important;
  object-fit: contain !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 900px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .calculator-card > h2.calculator-title{
    gap: 10px !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 30px !important;
    width: 30px !important;
    flex-basis: 30px !important;
  }
}


/* =======================================================================
   EMERGENCY FINAL TITLE NORMALIZATION
   Correct target:
   - Calculator title is a normal one-line title on desktop.
   - Google Sans only.
   - Bold 700 only.
   - Logo aligns to text height.
   - Do NOT create giant two-line hero title.
   ======================================================================= */

.calculator-card > h2.calculator-title{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: visible !important;
  font-family: "Google Sans" !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 18px !important;
}

.calculator-card > h2.calculator-title span{
  display: inline-block !important;
  font-family: "Google Sans" !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
}

.calculator-card > h2.calculator-title .calculator-title-logo{
  display: block !important;
  height: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  object-fit: contain !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

/* Keep calculator section labels clearly below title */
.calculator-card .input-group h3{
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Tablet */
@media (max-width: 1200px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 30px !important;
    white-space: normal !important;
  }
  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
  }
}

/* Mobile */
@media (max-width: 900px){
  .calculator-card > h2.calculator-title{
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 26px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    flex-basis: 26px !important;
    margin-top: 2px !important;
  }
}


/* =======================================================================
   VERIFIED LOCK — DO NOT OVERRIDE
   Final exact behavior:
   - All text uses Google Sans only.
   - Calculator title is normal size, bold 700, not enlarged.
   - Logo is same height as title text.
   - Divider appears before every calculator except the first.
   ======================================================================= */

html,
body,
body *,
input,
button,
select,
textarea{
  font-family: "Google Sans" !important;
}

.calculator-card > h2.calculator-title{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  font-family: "Google Sans" !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 18px !important;
}

.calculator-card > h2.calculator-title span{
  font-family: "Google Sans" !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
}

.calculator-card > h2.calculator-title .calculator-title-logo{
  display: block !important;
  height: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  object-fit: contain !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

.calculator-panel + .calculator-panel{
  position: relative !important;
  margin-top: 110px !important;
  padding-top: 58px !important;
  border-top: none !important;
}

.calculator-panel + .calculator-panel::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 10px !important;
  background: #111 !important;
}

@media (max-width: 1200px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 30px !important;
    white-space: normal !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
  }
}

@media (max-width: 900px){
  .calculator-card > h2.calculator-title{
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 26px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    flex-basis: 26px !important;
    margin-top: 2px !important;
  }

  .calculator-panel + .calculator-panel{
    margin-top: 74px !important;
    padding-top: 38px !important;
  }

  .calculator-panel + .calculator-panel::before{
    height: 7px !important;
  }
}


/* =======================================================================
   FINAL TITLE / LOGO ALIGNMENT LOCK
   Exact target:
   - Title is not enlarged.
   - Title is Google Sans bold 700.
   - Logo is the same height as the title text.
   - Logo and text are vertically centered.
   - Long titles do not become giant hero titles.
   ======================================================================= */

.calculator-card > h2.calculator-title{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  white-space: normal !important;
  font-family: "Google Sans" !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.calculator-card > h2.calculator-title span{
  display: block !important;
  font-family: "Google Sans" !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.calculator-card > h2.calculator-title .calculator-title-logo{
  display: block !important;
  height: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px !important;
  object-fit: contain !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Keep the divider visible, but make sure it does not affect title alignment */
.calculator-panel + .calculator-panel{
  position: relative !important;
  margin-top: 96px !important;
  padding-top: 48px !important;
  border-top: none !important;
}

.calculator-panel + .calculator-panel::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 8px !important;
  background: #111 !important;
}

/* Tablet */
@media (max-width: 1200px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
  }
}

/* Mobile */
@media (max-width: 900px){
  .calculator-card > h2.calculator-title{
    align-items: center !important;
    gap: 10px !important;
  }

  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    flex-basis: 24px !important;
  }

  .calculator-panel + .calculator-panel{
    margin-top: 72px !important;
    padding-top: 36px !important;
  }

  .calculator-panel + .calculator-panel::before{
    height: 7px !important;
  }
}


/* =======================================================================
   FINAL SUBTLE CALCULATOR TITLE FIX
   Exact target:
   - Calculator title only slightly bigger than section headings inside card.
   - Google Sans, bold 700.
   - Logo same height as title text.
   - No giant hero-title behavior.
   ======================================================================= */

/* Card section headings, for reference hierarchy */
.calculator-card .input-group h3{
  font-size: 22px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Calculator title: slightly larger than card section headings */
.calculator-card > h2.calculator-title{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  flex-wrap: nowrap !important;
  white-space: normal !important;
  font-family: "Google Sans" !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.calculator-card > h2.calculator-title span{
  display: block !important;
  font-family: "Google Sans" !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo: same height as calculator title text */
.calculator-card > h2.calculator-title .calculator-title-logo{
  display: block !important;
  height: 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  object-fit: contain !important;
  align-self: flex-start !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Preserve visible divider between calculators */
.calculator-panel + .calculator-panel{
  position: relative !important;
  margin-top: 96px !important;
  padding-top: 48px !important;
  border-top: none !important;
}

.calculator-panel + .calculator-panel::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 8px !important;
  background: #111 !important;
}

/* Tablet */
@media (max-width: 1200px){
  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    flex-basis: 28px !important;
    margin-top: 2px !important;
  }
}

/* Mobile */
@media (max-width: 900px){
  .calculator-card .input-group h3{
    font-size: 20px !important;
  }

  .calculator-card > h2.calculator-title{
    gap: 9px !important;
  }

  .calculator-card > h2.calculator-title,
  .calculator-card > h2.calculator-title span{
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  .calculator-card > h2.calculator-title .calculator-title-logo{
    height: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    flex-basis: 24px !important;
    margin-top: 1px !important;
  }

  .calculator-panel + .calculator-panel{
    margin-top: 72px !important;
    padding-top: 36px !important;
  }

  .calculator-panel + .calculator-panel::before{
    height: 7px !important;
  }
}

/* ===== FINAL EYEBROW / BREADCRUMB TONE FIX =====
   Smaller and greyer on every page.
*/
.eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.page-hero.insights-hero .eyebrow,
.page-hero.story-hero .eyebrow,
.page-hero.about-hero .eyebrow {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
  margin: 0 0 12px !important;
}

@media (max-width: 900px){
  .eyebrow,
  .hero .eyebrow,
  .page-hero .eyebrow,
  .page-hero.insights-hero .eyebrow,
  .page-hero.story-hero .eyebrow,
  .page-hero.about-hero .eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 10px !important;
  }
}

/* ===== ABOUT PAGE SINGLE-COLUMN REDESIGN ===== */
.about-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
  margin-bottom: 28px !important;
}

.about-panel {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #e5ded4 !important;
  border-top: 8px solid #111 !important;
  border-radius: 0 0 24px 24px !important;
  padding: 32px !important;
  box-shadow: none !important;
}

.legal-link-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

.legal-link-grid a {
  display: block !important;
  padding: 18px 18px !important;
  border: 1px solid #e6ded4 !important;
  border-top: 6px solid #111 !important;
  border-radius: 0 0 18px 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.scope-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.scope-grid > div {
  background: #fff !important;
  border: 1px solid #e6ded4 !important;
  border-top: 6px solid #111 !important;
  border-radius: 0 0 18px 18px !important;
  padding: 18px 18px 16px !important;
}

.scope-grid p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1000px) {
  .about-panel {
    padding: 24px !important;
    border-radius: 0 0 20px 20px !important;
  }
  .legal-link-grid a,
  .scope-grid > div {
    border-radius: 0 0 16px 16px !important;
  }
}


/* =======================================================================
   ABOUT PAGE INNER-CARD LINE CLEANUP
   Keep bold black top line only on main about-panel sections.
   Remove black top lines from smaller inner cards / legal links / scope items.
   ======================================================================= */

.about-panel {
  border-top: 8px solid #111 !important;
}

/* Remove inner black lines from legal link cards */
.legal-link-grid a {
  border-top: 1px solid #e6ded4 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

/* Remove inner black lines from limitation cards */
.scope-grid > div {
  border-top: 1px solid #e6ded4 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

/* Keep single-column layout */
.about-grid {
  grid-template-columns: 1fr !important;
}

.scope-grid {
  grid-template-columns: 1fr !important;
}

@media (max-width: 1000px) {
  .legal-link-grid a,
  .scope-grid > div {
    border-radius: 16px !important;
  }
}


/* =======================================================================
   FINAL ABOUT INNER CARD CLEANUP
   Keep black top line ONLY on main .about-panel sections.
   Remove black top lines from all nested cards.
   ======================================================================= */

/* Main stacked About sections keep the black top line */
.about-section .about-panel {
  border-top: 8px solid #111 !important;
}

/* Legal link cards: NO black top line */
.about-section .about-panel .legal-link-grid a,
.about-section .legal-link-grid a {
  border: 1px solid #e6ded4 !important;
  border-top: 1px solid #e6ded4 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Important use limitation inner cards: NO black top line */
.about-section .about-panel .scope-grid > div,
.about-section .scope-grid > div {
  border: 1px solid #e6ded4 !important;
  border-top: 1px solid #e6ded4 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Keep single-column page composition */
.about-section .about-grid,
.about-section .scope-grid,
.about-section .legal-link-grid {
  grid-template-columns: 1fr !important;
}

@media (max-width: 1000px) {
  .about-section .about-panel .legal-link-grid a,
  .about-section .legal-link-grid a,
  .about-section .about-panel .scope-grid > div,
  .about-section .scope-grid > div {
    border-radius: 16px !important;
  }
}

/* ===== CONTACT / LEGAL PAGE CONSISTENCY FIX ===== */
.page-hero.legal-hero .eyebrow,
.legal-hero .eyebrow {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
  margin: 0 0 12px !important;
}

.legal-document {
  background: #fff !important;
  border: 1px solid #e5ded4 !important;
  border-top: 8px solid #111 !important;
  border-radius: 0 0 24px 24px !important;
  padding: 42px 44px !important;
  max-width: 1080px !important;
  box-shadow: none !important;
}

@media (max-width: 900px){
  .page-hero.legal-hero .eyebrow,
  .legal-hero .eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 10px !important;
  }

  .legal-document {
    padding: 24px !important;
    border-radius: 0 0 20px 20px !important;
  }
}


/* ABOUT PAGE LEGAL SECTION ADJUSTMENT: remove deleted heading/sentence spacing only */
.about-section .legal-hub .legal-link-grid {
  margin-top: 0 !important;
}

.about-section .legal-hub {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

@media (max-width: 1000px) {
  .about-section .legal-hub {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}