/* DealWorksheet - light, fast, one template for every tool. */
:root{
  --navy:#1e3a8a; --navy-dark:#172d6e; --ink:#0f172a; --slate:#475569;
  --line:#e2e8f0; --wash:#f2f7ff; --card:#ffffff; --accent:#2563eb;
  --good:#15803d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fcfdff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; font-size:17px;
}
body::before{
  content:""; position:fixed; inset:0; background:rgba(37,99,235,.045);
  pointer-events:none; z-index:0;
}
header.site, main, footer.site{position:relative; z-index:1}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}

header.site{
  background:var(--card); border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px}
.logo{font-weight:800; font-size:21px; color:var(--navy); letter-spacing:-.02em}
.logo span{color:var(--accent)}
nav.main a{color:var(--slate); margin-left:20px; font-size:15.5px; font-weight:600}
nav.main a:hover{color:var(--navy); text-decoration:none}

.hero{padding:52px 0 30px; text-align:left}
.hero h1{font-size:40px; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; color:var(--ink)}
.hero h1 em{font-style:normal; color:var(--navy)}
.hero p{font-size:19px; color:var(--slate); max-width:640px; margin:0}

h2{font-size:26px; letter-spacing:-.01em; margin:38px 0 12px}
h3{font-size:19px; margin:22px 0 8px}
p{margin:0 0 14px}
.small{font-size:14px; color:var(--slate)}
.muted{color:var(--slate)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:20px 0 8px}
.tool-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; display:block; color:var(--ink);
}
a.tool-card:hover{border-color:var(--accent); text-decoration:none; box-shadow:0 6px 22px rgba(30,58,138,.08)}
.tool-card h3{margin:0 0 6px; font-size:18px; color:var(--navy)}
.tool-card p{margin:0; font-size:15px; color:var(--slate)}
.badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:10px;
}
.badge.live{background:#dcfce7; color:var(--good)}
.badge.soon{background:var(--wash); color:var(--slate)}

.calc{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px; margin:22px 0; display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
@media (max-width:760px){ .calc{grid-template-columns:1fr} .hero h1{font-size:32px} }
.calc label{display:block; font-size:14px; font-weight:600; color:var(--slate); margin:0 0 5px}
.calc .field{margin-bottom:14px}
.calc input{
  width:100%; padding:10px 12px; font-size:16.5px; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:var(--ink);
}
.calc input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.calc .group-title{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); margin:18px 0 10px}
.calc .group-title:first-child{margin-top:0}
.results{background:var(--wash); border-radius:12px; padding:20px}
.results .headline{font-size:15px; font-weight:600; color:var(--slate); margin:0}
.results .big{font-size:46px; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin:2px 0 14px; line-height:1}
.results table{width:100%; border-collapse:collapse; font-size:15.5px}
.results td{padding:6px 0; border-top:1px solid var(--line)}
.results td:last-child{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.results tr.total td{font-weight:800; color:var(--navy)}
button.share{
  margin-top:16px; background:var(--navy); color:#fff; border:0; cursor:pointer;
  font-size:15px; font-weight:700; padding:10px 18px; border-radius:999px;
}
button.share:hover{background:var(--navy-dark)}

table.plain{width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:16px}
table.plain th, table.plain td{border:1px solid var(--line); padding:8px 12px; text-align:left}
table.plain th{background:var(--wash); color:var(--navy)}
table.plain td:last-child{font-variant-numeric:tabular-nums}
.formula{
  background:var(--wash); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; font-size:17.5px; text-align:center; margin:14px 0; font-weight:600; color:var(--navy);
}
.faq h3{margin-bottom:4px}
.disclaimer{
  border-top:1px solid var(--line); margin-top:44px; padding:18px 0 6px;
  font-size:13.5px; color:var(--slate);
}
footer.site{border-top:1px solid var(--line); margin-top:26px; background:var(--card)}
footer.site .wrap{padding-top:20px; padding-bottom:26px; font-size:14.5px; color:var(--slate)}
footer.site a{color:var(--slate); font-weight:600; margin-right:18px}
footer.site a:hover{color:var(--navy)}