:root { --ink:#1c2130; --muted:#5a6070; --line:#d8dce6; --brand:#2f6df6; --bg:#f7f8fa; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
.wrap { max-width:860px; margin:0 auto; padding:0 18px; }
.site-nav { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; gap:12px; flex-wrap:wrap; }
.site-nav .logo { font-weight:700; text-decoration:none; color:var(--ink); font-size:17px; }
.site-nav nav { display:flex; gap:14px; align-items:center; }
.site-nav nav a { color:var(--muted); text-decoration:none; font-size:14px; }
.site-nav nav a:hover { color:var(--ink); }
.hero { text-align:center; padding:26px 0 10px; }
.hero h1 { font-size:32px; margin:0 0 10px; line-height:1.2; }
.lead { font-size:17px; color:#333a4d; max-width:640px; margin:0 auto 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; margin:18px 0; }
.card h2 { margin:0 0 10px; font-size:21px; }
.card h3 { margin:18px 0 4px; font-size:16px; }
.tiny { font-size:13px; color:var(--muted); }
.muted { color:var(--muted); }
fieldset { border:0; padding:0; margin:0; }
legend { font-size:19px; font-weight:700; padding:0; margin-bottom:12px; }
.opts { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.opt { padding:13px 14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; font-size:15px; cursor:pointer; text-align:left; }
.opt:hover { border-color:var(--brand); }
.opt.picked { border-color:var(--brand); background:#eef3fe; font-weight:600; }
.btn { display:inline-block; padding:10px 18px; border:0; border-radius:9px; background:var(--brand); color:#fff; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { background:#2459d6; }
.btn.small { padding:7px 12px; font-size:13.5px; }
.ghost { padding:8px 12px; border:1.5px solid var(--line); border-radius:9px; background:#fff; font-size:14px; cursor:pointer; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px; }
.quote-range { font-size:34px; font-weight:800; margin:6px 0 10px; }
.note { background:#fff8e1; border:1px solid #f0d98c; border-radius:9px; padding:10px 12px; }
table { border-collapse:collapse; width:100%; margin:10px 0; }
th, td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; font-size:14.5px; }
input[type=number] { padding:8px 10px; border:1.5px solid var(--line); border-radius:8px; font-size:15px; width:90px; }
textarea { width:100%; padding:10px; border:1.5px solid var(--line); border-radius:9px; font-family:ui-monospace,Menlo,monospace; font-size:13px; }
.overlay { display:none; position:fixed; inset:0; background:rgba(15,18,30,.55); align-items:center; justify-content:center; z-index:9999; padding:16px; }
.overlay.open { display:flex; }
.pro-panel { background:#fff; border-radius:14px; max-width:440px; width:100%; padding:24px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.pro-panel h3 { margin:0 0 8px; font-size:19px; }
.pro-panel .price { font-size:24px; font-weight:800; margin:10px 0; }
.pro-panel ul { padding-left:20px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#1c2130; color:#fff; padding:11px 18px; border-radius:10px; font-size:14.5px; z-index:10000; max-width:90vw; }
#quote-sheet { display:none; }
footer { padding:26px 18px 40px; }

/* Embed mode (?embed=1): compact wizard only — no nav, hero, FAQ, footer. */
body.embed-mode .site-nav, body.embed-mode .hero, body.embed-mode #how,
body.embed-mode #faq, body.embed-mode #pro, body.embed-mode #rates,
body.embed-mode footer { display:none; }
body.embed-mode .wrap { max-width:720px; }
body.embed-mode .card { margin:10px 0; }
body.embed-mode .embed-badge { display:block; }
.embed-badge { display:none; text-align:center; font-size:12px; color:var(--muted); padding:6px 0 10px; }
body.no-brand .embed-badge { display:none; }
/* Pro-unlocked browser: hide the credit line on the printed quote sheet. */
body.pro-stored #quote-sheet .brand-line { display:none; }

@media print {
  body * { visibility:hidden; }
  #quote-sheet, #quote-sheet * { visibility:visible; }
  #quote-sheet { display:block; position:absolute; left:0; top:0; width:100%; padding:24px; font-size:15px; }
  #quote-sheet .quote-range { font-size:30px; }
}
@media (max-width:560px) {
  .hero h1 { font-size:26px; }
  .quote-range { font-size:28px; }
  .card { padding:16px; }
}