:root{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:#193d40;
  background:#fff;
  font-synthesis:none;
  --teal:#127b70;
  --ink:#193d40;
  --muted:#526c6c;
  --line:#dce5e2;
  --mint:#eaf6ef;
  --paper:#f7f9f6}
*{
  box-sizing:border-box}
body{
  margin:0;
  line-height:1.65}
a{
  color:var(--teal);
  text-underline-offset:4px}
button,input,textarea,select{
  font:inherit}
button,a,input,select,summary,textarea{
  -webkit-tap-highlight-color:transparent}
:focus-visible{
  outline:3px solid #c06a21;
  outline-offset:4px}
button{
  cursor:pointer}
a,button{
  touch-action:manipulation}
p{
  margin:0 0 1.1em}
h1,h2,h3{
  line-height:1.18;
  letter-spacing:-.035em;
  margin:0 0 .65em}
h1{
  font-size:clamp(2.2rem,4.6vw,3.9rem)}
h2{
  font-size:clamp(1.6rem,2.6vw,2.25rem)}
h3{
  font-size:1.22rem;
  letter-spacing:-.02em}
.container{
  width:min(1160px,calc(100% - 64px));
  margin:auto}
.icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  vertical-align:middle}
.skip{
  position:fixed;
  top:-100px;
  left:20px;
  background:white;
  padding:14px;
  z-index:99}
.skip:focus{
  top:10px}
.site-header{
  border-bottom:1px solid var(--line);
  background:white}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-height:88px}
.brand{
  display:inline-flex;
  align-items:center;
  font-size:1.5rem;
  letter-spacing:-.06em;
  font-weight:800;
  text-decoration:none;
  color:var(--ink)}
.brand>span:not(.brand-mark){
  color:var(--teal)}
.brand-mark{
  display:grid;
  place-items:center;
  color:white;
  background:var(--teal);
  border-radius:10px;
  width:35px;
  height:35px;
  margin-right:10px}
.brand small{
  font-size:.57rem;
  letter-spacing:.15em;
  font-weight:700;
  margin:5px 0 0 10px;
  color:var(--muted)}
.nav nav{
  display:flex;
  gap:30px}
.nav nav a{
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  color:var(--muted);
  padding:10px 0}
.nav nav a:hover,.nav nav [aria-current]{
  color:var(--teal);
  text-decoration:underline}
.hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:78px 0 80px}
.hero-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:88px;
  align-items:center}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#376553;
  background:#e7f1e9;
  border:1px solid #d5e4d7;
  border-radius:30px;
  font-size:.64rem;
  letter-spacing:.1em;
  font-weight:750;
  padding:7px 12px;
  margin-bottom:25px}
.status-dot{
  width:6px;
  height:6px;
  background:#147257;
  border-radius:50%}
.hero h1{
  letter-spacing:-.05em;
  font-weight:750;
  line-height:1.12;
  margin-bottom:23px}
.hero em{
  font-style:normal;
  color:var(--teal)}
.hero-copy{
  font-size:1.03rem;
  max-width:460px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:26px}
.button{
  border:1px solid transparent;
  border-radius:8px;
  background:var(--teal);
  color:white;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:.9rem;
  line-height:1.4;
  font-weight:650;
  min-height:48px;
  padding:13px 19px}
.button:hover{
  background:#096558}
.button .icon{
  width:18px;
  height:18px}
.hero-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:19px;
  margin-top:23px;
  font-size:.69rem;
  color:#506b63}
.hero-benefits span{
  display:flex;
  align-items:center;
  gap:5px}
.hero-benefits .icon{
  width:14px;
  height:14px}
.hero-visual{
  background:#fff;
  border:1px solid #d6e3d9;
  border-radius:14px;
  padding:25px 28px;
  position:relative;
  box-shadow:0 18px 45px #224a3510;
  transform:rotate(-1.5deg)}
.sample-top{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.59rem;
  letter-spacing:.06em;
  font-weight:700;
  color:var(--muted);
  padding-bottom:23px}
.icon-box{
  background:#eaf4ed;
  color:var(--teal);
  border-radius:10px;
  width:45px;
  height:45px;
  display:inline-grid;
  place-items:center}
.sample-top .icon-box{
  width:35px;
  height:35px}
.sample-top .icon{
  width:21px}
.sample-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7fb098;
  margin-left:auto}
.sample-label{
  font-size:1rem;
  font-weight:650}
.sample-price{
  font-size:2.75rem;
  font-weight:750;
  letter-spacing:-.055em;
  margin:0 0 14px}
.sample-price span{
  font-size:.8rem;
  font-weight:500;
  letter-spacing:0;
  margin-left:10px;
  color:var(--muted)}
.sample-row{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  padding:10px 0;
  border-top:1px solid #edf1ec;
  color:var(--muted)}
.sample-row strong{
  font-weight:650;
  color:var(--ink)}
.sample-profit{
  display:flex;
  align-items:center;
  gap:10px;
  background:#edf7ef;
  padding:12px;
  border-radius:6px;
  font-size:.75rem;
  color:#276147;
  margin-top:13px}
.sample-profit>span{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex:1}
.sample-note{
  font-size:.59rem;
  text-align:center;
  margin:14px 0 0;
  color:var(--muted)}
.floating-label{
  position:absolute;
  right:-20px;
  bottom:-19px;
  border:1px solid #e2dfcc;
  box-shadow:0 5px 20px #193d4008;
  border-radius:7px;
  background:#fff9e8;
  color:#775726;
  font-weight:650;
  font-size:.71rem;
  padding:11px 15px;
  transform:rotate(3deg)}
.floating-label .icon{
  width:15px;
  height:15px;
  margin-right:5px}
.section{
  padding:68px 0}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:28px}
.section-heading h2{
  margin:10px 0 0}
.section-heading>p{
  color:var(--muted);
  font-size:.86rem;
  margin:0}
.eyebrow{
  font-size:.65rem;
  font-weight:750;
  letter-spacing:.12em;
  color:var(--teal);
  display:inline-flex;
  gap:8px;
  align-items:center}
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px}
.tool-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  padding:25px 25px 20px;
  border-radius:12px;
  text-decoration:none;
  color:var(--ink);
  transition:transform .15s,border-color .15s;
  background:white}
.tool-card:hover{
  border-color:#79aa94;
  transform:translateY(-3px)}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px}
.index{
  color:#526d63;
  font-size:.67rem;
  font-weight:650}
.tool-card h3{
  margin-bottom:10px}
.tool-card p{
  color:var(--muted);
  font-size:.86rem;
  margin-bottom:14px;
  max-width:240px}
.card-tags{
  color:#526d63;
  font-size:.65rem;
  margin-bottom:25px}
.card-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--teal);
  font-weight:700;
  font-size:.8rem;
  padding-top:17px;
  border-top:1px solid var(--line);
  margin-top:auto}
.card-link .icon{
  width:18px;
  height:18px}
.how-section{
  background:var(--paper);
  padding:65px 0;
  border-block:1px solid var(--line)}
.how-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px}
.how-grid h2{
  margin-top:15px}
.how-grid p{
  color:var(--muted);
  font-size:.9rem;
  max-width:380px}
.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:24px}
.steps li{
  display:flex;
  gap:20px}
.steps li>span{
  border:1px solid #d6e6db;
  border-radius:50%;
  width:34px;
  height:34px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  color:var(--teal);
  font-size:.71rem;
  font-weight:650}
.steps h3{
  font-size:1rem;
  letter-spacing:-.015em;
  margin:4px 0 6px}
.steps p{
  font-size:.82rem;
  margin:0}
.trust-section{
  display:flex;
  gap:22px;
  justify-content:center;
  padding:60px 0}
.trust-section>.icon{
  width:36px;
  height:36px;
  color:var(--teal);
  margin-top:3px}
.trust-section h2{
  font-size:1.5rem}
.trust-section p{
  max-width:590px;
  color:var(--muted);
  font-size:.86rem;
  margin-bottom:10px}
.trust-section a{
  font-size:.8rem;
  font-weight:650}
.trust-section a .icon{
  width:15px}
.site-footer{
  background:#f6f8f5;
  border-top:1px solid var(--line);
  padding:40px 0 20px}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:35px}
.footer-grid .brand{
  font-size:1.35rem;
  margin-bottom:12px}
.footer-grid p{
  font-size:.8rem;
  color:var(--muted)}
.footer-caption{
  font-size:.64rem;
  color:var(--muted)}
.footer-grid nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 38px;
  align-content:start;
  margin-top:5px}
.footer-grid nav a{
  font-size:.76rem;
  color:var(--muted);
  text-decoration:none}
.footer-grid nav a:hover{
  text-decoration:underline}
.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  font-size:.64rem;
  color:var(--muted);
  gap:15px}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:12px;
  padding:24px 0;
  font-size:.75rem;
  color:var(--muted)}
.breadcrumb a{
  color:var(--muted)}
.tool-intro{
  padding:12px 0 30px}
.tool-intro h1{
  font-size:clamp(2rem,3.7vw,3rem);
  margin:14px 0}
.tool-intro>p{
  color:var(--muted);
  max-width:700px;
  font-size:.98rem;
  margin:0}
.tool-intro .icon{
  width:17px;
  height:17px}
.tool-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
  margin-bottom:60px}
.form-panel{
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  padding:28px}
.fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px}
.wide{
  grid-column:1/-1}
fieldset{
  border:0;
  padding:0;
  margin:0 0 30px;
  min-width:0}
legend{
  font-weight:700;
  font-size:1rem;
  margin-bottom:18px;
  letter-spacing:-.02em}
legend>span{
  font-size:.64rem;
  color:var(--teal);
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  background:var(--mint);
  border-radius:6px;
  margin-right:7px}
.field-hint{
  font-size:.77rem;
  color:var(--muted);
  margin:-7px 0 19px}
.field label{
  display:block;
  font-size:.76rem;
  line-height:1.5;
  font-weight:650;
  margin-bottom:7px}
.field small{
  display:block;
  color:var(--muted);
  font-size:.69rem;
  line-height:1.55;
  margin-top:6px}
.field input,.field select,.field textarea{
  width:100%;
  min-width:0;
  border:1px solid #aabeb5;
  color:var(--ink);
  border-radius:6px;
  background:#fff;
  padding:11px 12px;
  font-size:.9rem;
  min-height:46px}
.field textarea{
  resize:vertical}
.field input:hover,.field select:hover{
  border-color:#568e79}
.field [aria-invalid="true"]{
  border:2px solid #ac2d26}
.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.78rem;
  min-height:36px}
.check input{
  width:18px;
  height:18px;
  accent-color:var(--teal)}
.form-bottom{
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px}
.form-bottom>span{
  font-size:.64rem;
  color:var(--muted)}
.text-button{
  border:0;
  background:none;
  color:var(--teal);
  padding:8px 0;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:.75rem;
  min-height:36px}
.client-fields{
  border-top:1px solid var(--line);
  margin-bottom:25px;
  padding-top:15px}
.client-fields summary{
  font-size:.82rem;
  font-weight:650;
  padding:5px 0;
  cursor:pointer}
.client-fields summary>span{
  font-size:.65rem;
  font-weight:400;
  color:var(--muted);
  margin-left:8px}
.client-fields[open] summary{
  margin-bottom:20px}
.result-panel{
  position:sticky;
  top:22px;
  background:#eef6f0;
  border:1px solid #d5e6d8;
  border-radius:12px;
  padding:28px}
.result-panel h2{
  font-size:.91rem;
  letter-spacing:0;
  font-weight:550;
  margin:18px 0 6px}
.result-value{
  font-size:clamp(2rem,3vw,2.8rem);
  font-weight:750;
  letter-spacing:-.05em;
  line-height:1.2;
  color:#116b59;
  overflow-wrap:anywhere}
.result-sub{
  font-size:.7rem;
  color:#4e6d5e;
  margin:10px 0 15px}
.result-panel dl{
  margin:15px 0}
.result-line{
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #d6e4d8;
  padding:11px 0;
  font-size:.75rem}
.result-line dt{
  color:#486251}
.result-line dd{
  margin:0;
  text-align:right;
  font-weight:650;
  overflow-wrap:anywhere;
  min-width:0}
.result-actions{
  display:grid;
  gap:10px;
  margin-top:23px}
.result-actions .button{
  font-size:.78rem;
  padding:11px}
.secondary{
  background:transparent;
  color:#116b59;
  border-color:#8eb7a0}
.secondary:hover{
  background:#dfefe2}
.note{
  font-size:.69rem;
  color:#506756;
  line-height:1.65;
  margin:10px 0}
.private-note{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.65rem;
  color:#45664f;
  border-top:1px solid #d6e4d8;
  padding-top:15px;
  margin-top:20px}
.private-note .icon{
  width:14px;
  height:14px}
.error{
  background:#fff0ec;
  border:1px solid #d68a77;
  color:#8c2e1b;
  font-size:.8rem;
  padding:12px;
  border-radius:6px;
  margin:16px 0}
.guide{
  max-width:800px;
  margin:0 auto 60px;
  color:#3e5b57;
  font-size:.94rem}
.guide h2{
  color:var(--ink);
  font-size:1.6rem;
  margin:38px 0 15px}
.formula{
  background:var(--paper);
  border-left:3px solid var(--teal);
  padding:18px 22px;
  line-height:1.9;
  margin:22px 0;
  font-size:.85rem;
  font-variant-numeric:tabular-nums}
.faq{
  margin-top:40px}
.faq details{
  border-bottom:1px solid var(--line);
  padding:17px 0}
.faq summary{
  cursor:pointer;
  font-weight:650;
  font-size:.9rem;
  color:var(--ink)}
.faq details p{
  font-size:.86rem;
  margin:15px 0 0}
.related{
  border-top:1px solid var(--line);
  padding:32px 0 60px}
.related h2{
  font-size:1.4rem}
.related-links{
  display:flex;
  flex-wrap:wrap;
  gap:20px}
.related-links a{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:8px;
  padding:17px 22px;
  font-size:.85rem;
  font-weight:650}
.related-links a:hover{
  background:var(--paper)}
.legal{
  max-width:800px;
  padding:45px 0 75px;
  min-height:55vh}
.legal h1{
  font-size:2.8rem;
  margin:20px 0 30px}
.legal h2{
  font-size:1.4rem;
  margin-top:30px}
.legal p{
  color:#465f5a;
  font-size:.93rem}
.back-link,.updated{
  font-size:.78rem!important}
.scenarios{
  margin-bottom:60px}
.chart-panel{
  padding:25px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper)}
#chart svg{
  display:block;
  width:100%;
  max-height:310px}
.chart-legend{
  display:flex;
  gap:25px;
  justify-content:center;
  font-size:.75rem;
  margin:12px 0 25px}
.chart-legend span:before{
  content:'';
  display:inline-block;
  width:20px;
  height:3px;
  background:var(--teal);
  vertical-align:middle;
  margin-right:7px}
.chart-legend span:last-child:before{
  background:#a35d2f}
.table-scroll{
  overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.8rem;
  font-variant-numeric:tabular-nums}
caption{
  text-align:left;
  font-size:.72rem;
  color:var(--muted);
  padding-bottom:12px}
th,td{
  padding:14px;
  text-align:right;
  border-bottom:1px solid var(--line);
  white-space:nowrap}
th:first-child,td:first-child{
  text-align:left}
th{
  font-size:.72rem;
  color:var(--muted)}
td.positive{
  color:#09644b}
td.negative{
  color:#9d3223}
dialog{
  border:1px solid #a2bfb0;
  border-radius:12px;
  max-width:850px;
  width:calc(100% - 32px);
  max-height:94vh;
  padding:22px}
dialog::backdrop{
  background:#143a4199}
.dialog-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center}
.dialog-head h2{
  font-size:1.2rem;
  margin:0}
iframe{
  width:100%;
  height:55vh;
  border:1px solid var(--line);
  display:block;
  background:white;
  margin:15px 0}
#print-sheet{
  display:none}
[hidden]{
  display:none!important}

@media(min-width:1600px){
  .hero{
  padding:95px 0}
}
@media(max-width:1000px){
  .hero-grid{
  gap:45px}
.hero{
  padding:55px 0 65px}
.sample-price{
  font-size:2.3rem}
.sample-top{
  font-size:.54rem}
.hero-visual{
  padding:20px}
.nav nav{
  gap:20px}
.tool-layout{
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:20px}
.form-panel,.result-panel{
  padding:22px}
.how-grid{
  gap:50px}
.tool-card{
  padding:22px}
.fields{
  gap:16px}
}
@media(max-width:750px){
  .container{
  width:calc(100% - 36px)}
.nav{
  min-height:80px;
  flex-wrap:wrap;
  padding:17px 0 12px;
  gap:12px}
.brand{
  font-size:1.35rem}
.brand-mark{
  width:30px;
  height:30px}
.nav nav{
  width:100%;
  justify-content:space-between;
  gap:10px}
.nav nav a{
  font-size:.74rem;
  padding:3px 0}
.hero{
  padding:36px 0 50px}
.hero-grid{
  grid-template-columns:1fr;
  gap:38px}
.hero h1{
  font-size:clamp(2.15rem,7.5vw,3.3rem)}
.hero-copy{
  font-size:.94rem;
  max-width:550px}
.hero-visual{
  max-width:450px;
  width:calc(100% - 16px);
  margin:0 auto}
.hero-benefits{
  font-size:.65rem;
  gap:15px}
.section{
  padding:44px 0}
.section-heading{
  align-items:start;
  flex-direction:column;
  gap:14px;
  margin-bottom:24px}
.section-heading>p br{
  display:none}
.cards{
  grid-template-columns:1fr;
  gap:15px}
.card-top{
  margin-bottom:16px}
.tool-card p{
  max-width:none}
.card-tags{
  margin-bottom:17px}
.tool-card{
  padding:23px}
.how-section{
  padding:42px 0}
.how-grid{
  grid-template-columns:1fr;
  gap:30px}
.how-grid p{
  max-width:100%}
.trust-section{
  padding:40px 0;
  gap:16px}
.trust-section>.icon{
  width:27px;
  height:27px}
.trust-section h2{
  font-size:1.25rem}
.footer-grid{
  flex-direction:column;
  gap:20px}
.footer-grid nav{
  justify-content:start}
.footer-bottom{
  flex-direction:column;
  gap:6px}
.tool-layout{
  grid-template-columns:1fr;
  margin-bottom:38px}
.result-panel{
  position:static}
.tool-intro{
  padding:5px 0 24px}
.tool-intro h1{
  font-size:2rem}
.tool-intro>p{
  font-size:.9rem}
.breadcrumb{
  padding:20px 0;
  font-size:.68rem}
.form-panel{
  padding:20px}
.guide{
  font-size:.9rem}
.guide h2{
  font-size:1.35rem}
.related-links{
  display:grid;
  grid-template-columns:1fr}
.related-links a{
  justify-content:space-between}
.related-links a>span{
  margin-right:auto}
.legal{
  padding:30px 0 50px}
.legal h1{
  font-size:2.3rem}
.chart-panel{
  padding:12px}
.chart-legend{
  font-size:.65rem;
  gap:15px}
.result-value{
  font-size:2.4rem}
}
@media(max-width:420px){
  .fields{
  grid-template-columns:1fr}
.form-bottom{
  align-items:start;
  flex-direction:column;
  gap:5px}
.hero-benefits{
  gap:10px}
.pill{
  font-size:.57rem}
.sample-profit>span{
  gap:10px}
.floating-label{
  right:-8px}
.nav nav a{
  font-size:.68rem}
.sample-price{
  font-size:2.55rem}
.field label{
  font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){
  *{
  scroll-behavior:auto!important;
  transition:none!important;
  transform:none!important}
}

@page{
  size:Letter portrait;
  margin:18mm}
@media print{
  body>header,body>footer,body>main,body>dialog{
  display:none!important}
body #print-sheet{
  display:block!important}
body:not([data-tool="quote"])>main{
  display:block!important}
.result-panel{
  position:static;
  break-inside:avoid}
.tool-layout{
  display:block}
.form-bottom,.related,.breadcrumb{
  display:none!important}
a{
  color:inherit}
body{
  font-size:11pt}
#print-sheet{
  font:12pt/1.6 Arial,sans-serif;
  color:#163b40}
#print-sheet h1{
  font-size:25pt}
#print-sheet h2{
  font-size:13pt;
  margin-top:20pt}
#print-sheet p{
  white-space:pre-wrap;
  overflow-wrap:anywhere}
#print-sheet table{
  font-size:12pt;
  margin:25pt 0}
#print-sheet td{
  white-space:normal;
  padding:10pt 0}
#print-sheet footer{
  font-size:9pt;
  margin-top:25pt}
.site-header{
  display:none}
}