/* ClickBloomSE — brand: cream #FDFBF7, forest #1F3D2B, rose #D48A94, sage #7A8B6F, gold #C9A227 */
:root{
  --cream:#FDFBF7; --forest:#1F3D2B; --rose:#D48A94; --sage:#7A8B6F;
  --gold:#C9A227; --ink:#2d3730; --card:#f7f3ea; --line:#e7e0d2;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:Georgia,'Times New Roman',serif; background:var(--cream); color:var(--ink); line-height:1.7; font-size:18px}
.wrap{max-width:860px; margin:0 auto; padding:0 20px}
header.site{background:var(--forest); color:var(--cream); padding:14px 0; position:sticky; top:0; z-index:10}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
.brand{font-size:22px; font-weight:bold; color:var(--cream); text-decoration:none; letter-spacing:.5px}
.brand span{color:var(--gold)}
nav a{color:var(--cream); text-decoration:none; margin-left:18px; font-size:16px; font-family:Arial,sans-serif}
nav a:hover{color:var(--gold)}
.hero{text-align:center; padding:56px 20px 40px}
.eyebrow{font-family:Arial,sans-serif; font-size:13px; letter-spacing:3px; color:var(--gold); text-transform:uppercase}
.hero h1{color:var(--forest); font-size:42px; line-height:1.25; margin:12px 0}
.hero p.sub{color:var(--sage); font-size:20px; max-width:640px; margin:0 auto}
.gold-rule{width:120px; height:4px; background:var(--gold); margin:18px auto; border-radius:2px}
.tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:30px 0 10px}
@media(max-width:640px){.tool-grid{grid-template-columns:1fr}.hero h1{font-size:32px}}
.tool-card{background:var(--card); border:2px solid var(--gold); border-radius:14px; padding:28px 24px; text-decoration:none; color:var(--ink); display:block}
.tool-card:hover{box-shadow:0 6px 24px rgba(31,61,43,.12)}
.tool-card h2{color:var(--forest); font-size:26px; margin-bottom:8px}
.tool-card p{font-family:Arial,sans-serif; font-size:16px; color:var(--sage)}
.tool-card .go{display:inline-block; margin-top:14px; font-family:Arial,sans-serif; font-weight:bold; color:var(--forest)}
.calc{background:#fff; border:2px solid var(--line); border-radius:14px; padding:28px 24px; margin:24px 0}
.calc h2{color:var(--forest); font-size:24px; margin-bottom:6px}
.step-bar{background:var(--forest); color:#fff; font-family:Arial,sans-serif; font-weight:bold; font-size:15px; padding:10px 16px; border-radius:8px; margin:22px 0 12px}
.field{margin:12px 0}
.field label{display:block; font-family:Arial,sans-serif; font-size:15px; font-weight:bold; margin-bottom:6px}
.field input{width:100%; padding:12px 14px; font-size:18px; border:2px solid var(--line); border-radius:8px; background:#fffdf5; font-family:Arial,sans-serif}
.field input:focus{outline:none; border-color:var(--gold)}
.result{background:var(--forest); color:#fff; border-radius:12px; padding:24px; margin-top:20px; text-align:center}
.result .big{font-size:40px; font-weight:bold; color:var(--gold); margin:6px 0}
.result .lbl{font-family:Arial,sans-serif; font-size:14px; letter-spacing:2px; text-transform:uppercase; opacity:.85}
.note{font-size:15px; color:var(--sage); font-style:italic; margin-top:10px}
.cta-box{background:linear-gradient(135deg,var(--forest),#2c5238); border-radius:14px; padding:32px 28px; text-align:center; color:#fff; margin:36px 0}
.cta-box h2{font-size:28px; margin-bottom:10px}
.cta-box p{font-family:Arial,sans-serif; font-size:16px; opacity:.92; max-width:560px; margin:0 auto 18px}
.btn{display:inline-block; background:var(--gold); color:var(--forest); font-family:Arial,sans-serif; font-weight:bold; font-size:18px; padding:14px 34px; border-radius:40px; text-decoration:none}
.btn:hover{background:#d9b545}
section.content{margin:34px 0}
section.content h2{color:var(--forest); font-size:28px; margin:26px 0 10px}
section.content h3{color:var(--forest); font-size:22px; margin:20px 0 8px}
section.content p, section.content li{margin-bottom:12px}
section.content ul{padding-left:24px}
.faq{margin:12px 0}
.faq summary{cursor:pointer; font-weight:bold; color:var(--forest); font-size:19px; padding:10px 0}
footer.site{background:var(--forest); color:var(--cream); margin-top:50px; padding:30px 0; font-family:Arial,sans-serif; font-size:14px}
footer.site a{color:var(--gold); text-decoration:none; margin-right:16px}
footer.site p{margin-top:10px; opacity:.75}
table.plain{width:100%; border-collapse:collapse; margin:16px 0; font-family:Arial,sans-serif; font-size:16px}
table.plain th{background:var(--forest); color:#fff; padding:10px; text-align:left}
table.plain td{padding:10px; border-bottom:1px solid var(--line)}
