:root{--bg:#f6f7fb;--card:#fff;--text:#111827;--muted:#667085;--line:#e5e7eb;--accent:#111827;--soft:#f1f3f6}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
header{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;z-index:20}
.brand{font-weight:850;font-size:1.35rem}
nav{display:flex;gap:26px}
.hero{max-width:1180px;margin:44px auto 26px;padding:0 20px}
.eyebrow{font-size:.75rem;letter-spacing:.12em;font-weight:800;color:var(--muted)}
h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:.98;letter-spacing:-.055em;margin:.25rem 0 1rem}
.hero p:last-child{font-size:1.05rem;color:var(--muted);max-width:760px}
.workspace{max-width:1500px;margin:0 auto;padding:18px;display:grid;grid-template-columns:170px minmax(0,1fr) 170px;gap:18px;align-items:start}
.app{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 35px rgba(17,24,39,.06);overflow:hidden}
.appbar{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}
.appbar span{display:block;color:var(--muted);font-size:.84rem;margin-top:3px}
.appbar-actions{display:flex;gap:8px}
.tabs{display:flex;gap:6px;overflow:auto;padding:10px;background:#fafafa;border-bottom:1px solid var(--line)}
.tab,.soft{border:0;background:var(--soft);border-radius:10px;padding:10px 12px;font:inherit;font-weight:700;cursor:pointer}
.tab.active{background:#111827;color:#fff}
.tabpane{display:none;padding:22px}
.tabpane.active{display:block}
.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}
label{display:block;font-weight:750;font-size:.86rem;margin-bottom:8px}
input,textarea{width:100%;border:1px solid #d0d5dd;border-radius:12px;padding:12px 13px;font:inherit;outline:none;background:#fff}
textarea{resize:vertical}
input:focus,textarea:focus{border-color:#98a2b3;box-shadow:0 0 0 3px rgba(152,162,179,.12)}
.display{margin:12px 0 8px;background:#111827;color:#fff;border-radius:14px;padding:19px;text-align:right;font-size:1.4rem;font-weight:850;min-height:66px;overflow:auto}
.memory-line{font-size:.82rem;color:var(--muted);margin-bottom:10px}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.keys button{border:0;background:var(--soft);border-radius:10px;padding:10px 7px;font:inherit;font-weight:750;cursor:pointer}
.memory-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0}
.primary{border:0;background:#111827;color:#fff;border-radius:11px;padding:12px 18px;font:inherit;font-weight:800;cursor:pointer}
.full{width:100%}
.quick-help{background:#fafafa;border:1px solid var(--line);border-radius:16px;padding:18px}
.quick-help p{color:var(--muted);line-height:1.6}
.function-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.function-row span{font-weight:800}
.remove-fn{border:0;background:#f3f4f6;border-radius:8px;padding:10px;cursor:pointer}
.graph-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
#graphCanvas{width:100%;height:auto;border:1px solid var(--line);border-radius:15px;background:#fff;touch-action:none}
.two-col,.matrix-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.table-wrap{overflow:auto;margin-top:16px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right}
th:first-child,td:first-child{text-align:left}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.card{background:#fafafa;border:1px solid var(--line);border-radius:14px;padding:16px}
.card small{display:block;color:var(--muted);margin-bottom:5px}
.card strong{font-size:1.15rem}
.output{background:#111827;color:#fff;border-radius:14px;padding:16px;white-space:pre-wrap;margin-top:14px;min-height:58px}
.history-list{display:grid;gap:9px;margin-top:12px}
.history-item{background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:13px}
.history-item small{display:block;color:var(--muted);margin-top:4px}
.ad{border:1px dashed #cfd4dc;background:#fff;color:#98a2b3;border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.ad small{letter-spacing:.1em;margin-bottom:6px}
.ad-top{max-width:970px;height:100px;margin:22px auto}
.side{min-height:600px;position:sticky;top:92px;padding:12px}
.ad-wide{max-width:970px;min-height:130px;margin:28px auto;padding:18px}
.ad-bottom{max-width:970px;min-height:105px;margin:30px auto}
.content{max-width:1080px;margin:58px auto;padding:0 20px}
.content h2{font-size:2rem;letter-spacing:-.035em}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-grid article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.feature-grid p,.faq p{color:var(--muted);line-height:1.6}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 19px;margin:10px 0}
footer{background:#111827;color:#fff;padding:36px 5vw;margin-top:58px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
footer p{color:#98a2b3}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.side{display:none}}
@media(max-width:840px){nav{display:none}.calc-layout,.two-col,.matrix-grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr}.range-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){header{height:62px}.workspace{padding:9px}.tabpane{padding:14px}.keys{grid-template-columns:repeat(4,1fr)}.memory-row{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:1fr}.range-grid{grid-template-columns:1fr}.ad-top,.ad-wide,.ad-bottom{margin-left:14px;margin-right:14px}}


/* Navigation anchor offset for sticky header */
#calculator, #features, #faq {
  scroll-margin-top: 104px;
}
html {
  scroll-behavior: smooth;
}

/* Legal/information pages */
.info-page {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
}
.info-main {
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 72px;
  flex: 1;
}
.info-main h1 {
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0 0 18px;
}
.info-main h2 {
  margin-top: 30px;
  font-size: 1.25rem;
}
.info-main p, .info-main li {
  color: var(--muted);
  line-height: 1.75;
}
.info-main ul {
  padding-left: 20px;
}
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-top: 22px;
}
@media(max-width:560px){
  #calculator, #features, #faq { scroll-margin-top: 82px; }
  .info-main { padding-top: 40px; }
}


/* SEO calculator landing pages */
.seo-main{width:min(1040px,calc(100% - 40px));margin:0 auto;padding:58px 0 74px}
.seo-hero{padding:18px 0 22px}
.seo-hero h1{font-size:clamp(2.5rem,6vw,4.8rem);line-height:.98;letter-spacing:-.055em;margin:.25rem 0 1rem}
.seo-hero p{font-size:1.08rem;line-height:1.7;color:var(--muted);max-width:760px}
.seo-cta{display:inline-block;background:#111827;color:#fff;padding:12px 18px;border-radius:11px;font-weight:800;margin-top:8px}
.seo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
.seo-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.seo-card h2,.seo-card h3{margin-top:0}
.seo-card p,.seo-card li{color:var(--muted);line-height:1.65}
.seo-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.seo-links a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font-weight:750}
.seo-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:10px 0}
.seo-faq summary{font-weight:800;cursor:pointer}
.seo-faq p{color:var(--muted);line-height:1.65}
@media(max-width:720px){.seo-grid,.seo-links{grid-template-columns:1fr}}