/* theme.css — the shared KEEN visual system for keenprosuite.com.
   KEEN palette is locked here (single visual source). All tools link this file so
   header, footer, cards, buttons, tables, and type scale are consistent across the suite. */

:root{
  --navy:#002e6e; --blue:#0073bd; --teal:#00b7a5;
  --ink:#0a1622; --bg:#f4f7fb; --card:#ffffff;
  --line:#e3e9f2; --muted:#5a6b80; --good:#0f9d58; --warn:#c0392b;
  --radius:14px; --maxw:1100px;
  --shadow:0 1px 3px rgba(10,30,60,.06); --shadow-lg:0 10px 30px rgba(10,30,60,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
a{color:var(--blue)}

/* Shared header (KEEN, locked) */
header.keen-top{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}
header.keen-top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 22px}
.keen-logo{font-size:1.5rem;font-weight:800;letter-spacing:.6px;color:#fff;text-decoration:none}
.keen-logo span{color:var(--teal)}
.keen-toolname{font-size:.95rem;opacity:.92;margin-top:2px;font-weight:600}
.keen-right{display:flex;align-items:center;gap:14px}
.keen-partner{font-size:.72rem;opacity:.8;text-align:right;line-height:1.4}
.keen-lang{display:flex;gap:3px;background:rgba(255,255,255,.14);border-radius:20px;padding:3px}
.keen-lang button{padding:5px 12px;border:none;border-radius:16px;cursor:pointer;font-weight:700;font-size:.76rem;background:transparent;color:rgba(255,255,255,.75)}
.keen-lang button.on{background:#fff;color:var(--navy)}
.keen-back{font-size:.8rem;color:#fff;opacity:.85;text-decoration:none}
.keen-back:hover{opacity:1}

/* Hero + layout */
.hero{font-size:1.7rem;font-weight:800;margin:26px 0 6px;color:var(--ink)}
.lede{color:var(--muted);max-width:720px;margin-bottom:22px}
.grid{display:grid;grid-template-columns:340px 1fr;gap:22px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h2{font-size:1.05rem;color:var(--navy);margin-bottom:14px}
.card + .card{margin-top:18px}

/* Forms */
label{display:block;font-weight:600;font-size:.85rem;margin:14px 0 6px}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:1rem;background:#fff;color:var(--ink);font-family:inherit}
input[type=range]{width:100%}
.rangeval{font-weight:700;color:var(--navy);font-size:1.1rem}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.formrow{grid-template-columns:1fr}}

/* Segmented control */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:74px;padding:9px;border:1px solid var(--line);background:#fff;border-radius:9px;font-weight:600;cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Buttons */
.cta{display:block;width:100%;margin-top:18px;padding:15px;background:var(--navy);color:#fff;border:none;border-radius:11px;font-size:1.05rem;font-weight:700;cursor:pointer}
.cta:hover{background:#00245a}
.cta.teal{background:var(--teal)} .cta.teal:hover{background:#009b8c}
.btn-ghost{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:600;cursor:pointer;color:var(--navy);text-decoration:none}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
td.key{font-weight:700;color:var(--navy)}
.inc{color:var(--good);font-weight:700}
.no{color:var(--warn)}
.totrow td{border-top:2px solid var(--navy);font-weight:800}

/* Payment hero (financing tools) */
.pay{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;border-radius:var(--radius);padding:22px;text-align:center;margin-bottom:18px}
.pay .amt{font-size:2.7rem;font-weight:800;line-height:1}
.pay .amt small{font-size:1rem;font-weight:600;opacity:.9}
.pay .cap{opacity:.92;font-size:.9rem;margin-top:4px}

/* Badges + notes */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.3px}
.badge.navy{background:rgba(0,46,110,.1);color:var(--navy)}
.badge.teal{background:rgba(0,183,165,.14);color:#067f73}
.spec-strip{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 4px}
.spec-strip .item{font-size:.82rem;color:var(--muted)}
.spec-strip .item b{color:var(--navy)}
.note{font-size:.74rem;color:var(--muted);margin-top:14px;line-height:1.5}
.ok{background:#e9f9f1;border:1px solid #bfe9d4;color:#0f6b43;padding:12px;border-radius:10px;margin-top:12px;display:none;font-weight:600}

/* Dealer block on homeowner-facing outputs (co-branded) */
.dealer-block{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#fbfdff}
.dealer-block img{height:34px;width:auto;border-radius:6px}
.dealer-block .dl-co{font-weight:800;color:var(--ink)}
.dealer-block .dl-meta{font-size:.78rem;color:var(--muted);line-height:1.4}
.dealer-equip{font-size:.74rem;color:var(--muted);margin-top:6px}

/* Mode toggle (dual-mode tools) */
.modebar{display:inline-flex;background:#eef3fa;border-radius:999px;padding:4px;gap:4px;margin:18px 0 4px}
.modebar button{border:none;background:transparent;padding:9px 18px;border-radius:999px;font-weight:700;cursor:pointer;color:var(--muted);font-size:.9rem}
.modebar button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow)}

/* Footer */
footer.keen-foot{margin-top:30px;padding:22px 0 40px;font-size:.74rem;color:var(--muted);text-align:center;border-top:1px solid var(--line)}