:root{
  --bg:#f4f7fb;
  --primary:#002B5B;
  --primary-600:#014a8c;
  --ink:#0b1b2b;
  --muted:#5f7183;
  --card:#ffffff;
  --border:#e6ecf3;
  --accent:#e9f2ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#ffffffcc;backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--primary)}
.logo-dot{width:12px;height:12px;border-radius:50%;background:var(--primary)}
.nav-links{display:flex;gap:18px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--primary)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:10px;
  font-weight:700;text-decoration:none;border:1px solid transparent;
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn.small{padding:8px 12px;border-radius:8px;font-size:14px}
.btn.full{width:100%}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600);transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--primary)}
.btn-ghost:hover{background:var(--accent);border-color:#cfe2ff}

/* Hero */
.hero{
  padding:48px 0 24px;
  background:
    radial-gradient(1200px 300px at 50% -50%, #cfe2ff 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-copy h1{font-size:40px;line-height:1.1;margin:0 0 10px;color:var(--primary)}
.hero-copy p{color:var(--muted);font-size:18px;max-width:560px}
.hero-cta{display:flex;gap:12px;margin:18px 0}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.trust-pill{background:#fff;border:1px solid var(--border);padding:8px 10px;border-radius:999px;color:var(--muted);font-weight:600;font-size:13px}

/* Card + Form */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.card h3{margin:0 0 6px}
.card .muted{color:var(--muted);margin:0 0 14px}
.stack>*+*{margin-top:10px}
.grid{display:grid;gap:10px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3, 1fr)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid.two,.grid.three{grid-template-columns:1fr}
}

input, select{
  width:100%;padding:12px 12px;border-radius:10px;border:1px solid var(--border);
  background:#fff;font-size:15px;outline:none;
}
input:focus, select:focus{border-color:#bcd3ef;box-shadow:0 0 0 3px #e7f1ff}

.result{margin-top:14px;border:1px dashed var(--border);border-radius:12px;padding:14px;background:#fcfdff}
.result.hidden{display:none}
.result.loading{display:flex;align-items:center;gap:10px}
.spinner{width:18px;height:18px;border:3px solid #d9e7fb;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.estimate-result h3{margin:0 0 6px}
.estimate-result .muted{color:var(--muted)}
.estimate-pill{
  display:inline-block;margin:10px 0 6px;padding:10px 14px;border-radius:999px;
  background:#e8f3ff;border:1px solid #cfe2ff;font-weight:800;color:var(--primary);
  font-size:18px
}
.fine{color:#7a8b9c;font-size:13px}
.actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}

/* How it works */
.how{padding:56px 0}
.how h2{margin:0 0 18px;color:var(--primary);font-size:28px}
.feature{text-align:left;padding:16px;border:1px solid var(--border);border-radius:14px;background:#fff}
.feature-icon{font-size:24px}

/* Reviews */
.reviews{padding:24px 0 56px;background:linear-gradient(180deg, #f7fbff 0%, #fff 100%)}
.reviews h2{margin:0 0 18px;color:var(--primary);font-size:28px}
.review.card p{margin:0 0 10px}
.reviewer{color:var(--muted);font-weight:700}

/* CTA */
.estimate-section .cta-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;
}
.estimate-section{padding:10px 0 48px}
.estimate-section h2{margin:0;color:var(--primary)}
@media (max-width:700px){.estimate-section .cta-strip{flex-direction:column;align-items:flex-start}}

/* FAQ */
.faq{padding:0 0 56px}
.faq h2{margin:0 0 12px;color:var(--primary);font-size:28px}
details{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px 14px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700;color:var(--ink)}
details p{color:var(--muted);margin:8px 0 0}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:#fff}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.footer-links{display:flex;gap:16px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--primary)}

/* Utility */
.muted{color:var(--muted)}
.error{color:#b42318;background:#ffefef;border:1px solid #ffd6d1;padding:10px;border-radius:10px}


/* --- Locked inputs on home quick-estimate --- */
.input-locked{pointer-events:none}
.blurred{filter:blur(1.5px);opacity:0.65}
#quickEstimateForm .btn{pointer-events:auto;filter:none;opacity:1}

/* --- Active nav link on estimate page --- */
.nav-links a.active{color:var(--primary);font-weight:700}

/* --- Estimate page --- */
.estimate-page{padding:32px 0 56px}
.page-header h1{margin:0 0 6px;color:var(--primary)}
.page-header .muted{margin:0 0 14px}
.card.big{padding:24px}

.label{font-weight:700}
textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:#fff;font-size:15px;resize:vertical;min-height:120px;
}
textarea:focus{border-color:#bcd3ef;box-shadow:0 0 0 3px #e7f1ff}

/* --- Progress bar --- */
.progress-wrap{margin:10px 0 14px}
.progress-meta{display:flex;justify-content:space-between;font-weight:700;color:var(--muted);margin-bottom:6px}
.progress-bar{
  width:100%;height:10px;border-radius:999px;background:#eef3f9;border:1px solid var(--border);overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;background:linear-gradient(90deg, #98c8ff, var(--primary));
  transition:width .25s ease;border-right:1px solid #0b2e57;
}

/* Tight tweak for small screens */
@media (max-width:420px){
  .page-header h1{font-size:26px}
  .card.big{padding:18px}
}

/* Input-like checkbox so it aligns with other fields */
.checkbox-field{
  display:flex; align-items:center; gap:10px;
  height:44px; padding:0 12px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  font-weight:600; color:var(--ink);
}
.checkbox-field:hover{border-color:#bcd3ef; box-shadow:0 0 0 3px #e7f1ff}
.checkbox-field input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--primary);
  margin:0; /* keep vertical centering tidy */
}

/* === Paywall modal & pricing cards === */
.modal{position:fixed;inset:0;display:none;z-index:60}
.modal.open{display:block}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(10,20,30,.35);backdrop-filter:blur(2px);
}
.modal-box{
  position:relative;max-width:880px;margin:8vh auto;background:#fff;border:1px solid var(--border);
  border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:20px;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-title{margin:0;color:var(--primary);font-size:20px;font-weight:800}
.modal-close{border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
@media (max-width:820px){.option-grid{grid-template-columns:1fr}}
.option-card{
  border:1px solid var(--border);border-radius:14px;padding:16px;background:#fff
}
.option-card h4{margin:0 0 6px;color:var(--ink)}
.sub{color:var(--muted);margin:0 0 10px;font-size:14px}
.price{font-weight:900;font-size:22px;color:var(--primary);margin:2px 0 10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#ecf5ff;border:1px solid #d7e9ff;color:var(--primary);font-weight:800;font-size:12px}
.feature-list{list-style:none;margin:10px 0 12px;padding:0}
.feature-list li{display:flex;gap:8px;align-items:flex-start;margin:6px 0;color:#2a3a4a}
.icon-pos{width:18px;height:18px;border-radius:50%;background:#eaf7ef;border:1px solid #c7ecd3;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#147540;flex:0 0 18px}
.icon-neg{width:18px;height:18px;border-radius:50%;background:#fff2f1;border:1px solid #ffd6d1;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#b42318;flex:0 0 18px}

/* Add-on toggle row on the PDF card */
.addon-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 10px;
  padding:10px;border:1px dashed var(--border);border-radius:10px;background:#fcfdff;
}
.addon-row label{font-weight:700;color:var(--ink)}
/* simple switch */
.switch{position:relative;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;inset:0;background:#e9eef5;border:1px solid var(--border);border-radius:999px;transition:.2s;
}
.slider:before{
  content:"";position:absolute;height:18px;width:18px;left:3px;top:2.5px;background:#fff;border:1px solid #d6e1ef;border-radius:50%;transition:.2s;
}
.switch input:checked + .slider{background:#d7e9ff;border-color:#c7dcff}
.switch input:checked + .slider:before{transform:translateX(18px);border-color:#b9cff4}

/* Helper when we only want the results visible */
.results-only .card.big,
.results-only .progress-wrap,
.results-only #finishPanel{display:none}