/* Truepost site — shared styles. Mobile-first, trucker-on-a-phone friendly. */
:root{
  --steel:#2E3338; --steel2:#3b4248; --navy:#16307a; --orange:#E8590C; --orange-d:#cf4f0a;
  --yellow:#FFD43B; --ink:#212529; --muted:#6b7280; --line:#E5E8EB; --paper:#F8F9FA;
  --ivory:#FBF8F1; --green:#2B8A3E; --red:#C92A2A; --maxw:1080px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  color:var(--ink); line-height:1.6; background:#fff; -webkit-text-size-adjust:100%;
}
img{max-width:100%; display:block;}
a{color:var(--navy); text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.narrow{max-width:760px; margin:0 auto; padding:0 20px;}

/* ---- header / nav ---- */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:12px 20px;}
.nav .brand{display:flex; align-items:center; gap:10px;}
.nav .brand img{height:34px; width:auto;}
.nav .brand .name{font-weight:800; font-size:18px; color:var(--navy); letter-spacing:.3px;}
.nav-links{display:flex; align-items:center; gap:22px; list-style:none;}
.nav-links a{color:var(--ink); font-weight:700; font-size:14.5px;}
.nav-links a:hover{color:var(--orange); text-decoration:none;}
.nav-cta{background:var(--orange); color:#fff !important; padding:8px 15px; border-radius:7px; font-weight:800; font-size:14px;}
.nav-cta:hover{background:var(--orange-d); text-decoration:none;}
.nav-toggle{display:none; background:none; border:0; font-size:26px; color:var(--steel); cursor:pointer; line-height:1;}

@media (max-width:760px){
  .nav-toggle{display:block;}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:6px 0; display:none; box-shadow:0 8px 18px rgba(0,0,0,.08);}
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:13px 20px; width:100%; font-size:16px;}
  .nav-links .nav-cta{margin:8px 20px; text-align:center;}
}

/* ---- buttons ---- */
.btn{display:inline-block; background:var(--orange); color:#fff; font-weight:800; font-size:16px;
  text-transform:uppercase; letter-spacing:.4px; padding:14px 22px; border-radius:9px; border:0; cursor:pointer; text-align:center;}
.btn:hover{background:var(--orange-d); text-decoration:none; color:#fff;}
.btn.block{display:block; width:100%;}
.btn.alt{background:var(--steel);}
.btn.alt:hover{background:#23272b;}
.btn.ghost{background:#fff; color:var(--steel); border:2px solid var(--line);}
.btn.ghost:hover{background:var(--paper); color:var(--steel);}

/* ---- hero ---- */
.hero{background:var(--steel); color:#fff; border-bottom:6px solid var(--orange);}
.hero .container{padding-top:48px; padding-bottom:48px;}
.eyebrow{display:inline-block; background:var(--orange); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.7px; text-transform:uppercase; padding:5px 11px; border-radius:3px; margin-bottom:16px;}
.hero h1{font-size:34px; line-height:1.12; font-weight:800; max-width:14em;}
.hero p.lead{font-size:17px; color:#E9ECEF; margin-top:12px; max-width:34em;}
.hero .cta-row{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px;}
.trustline{margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; color:#ced4da; font-weight:600;}
.trustline b{color:var(--yellow); font-weight:800;}
@media (max-width:600px){ .hero h1{font-size:27px;} }

/* ---- sections ---- */
section{padding:46px 0;}
section.tight{padding:32px 0;}
.section-alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-ivory{background:var(--ivory); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
h2.section-title{font-size:26px; font-weight:800; margin-bottom:8px;}
p.section-sub{font-size:16px; color:#495057; margin-bottom:26px; max-width:44em;}

/* ---- cards / grid ---- */
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }
.card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px;}
.card h3{font-size:18px; font-weight:800; margin-bottom:7px;}
.card p{font-size:14.5px; color:#495057;}
.card .ic{width:40px; height:40px; border-radius:9px; background:var(--navy); color:#fff; font-size:20px;
  font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:13px;}

/* ---- feature list ---- */
.checks{list-style:none; margin:0;}
.checks li{position:relative; padding:9px 0 9px 30px; font-size:15.5px; font-weight:600; border-bottom:1px solid var(--line);}
.checks li:last-child{border-bottom:0;}
.checks li:before{content:"\2713"; position:absolute; left:2px; top:9px; color:var(--orange); font-weight:800;}

/* ---- price tag ---- */
.pricebox{display:flex; align-items:baseline; gap:8px; margin:6px 0 16px;}
.pricebox .amt{font-size:30px; font-weight:800; color:var(--ink);}
.pricebox .note{font-size:13px; color:var(--muted);}

/* ---- calculator ---- */
.calc-wrap{max-width:520px; margin:0 auto;}
.field{margin-bottom:15px;}
.field label{display:block; font-size:14px; font-weight:700; margin-bottom:5px;}
.field .hint{font-size:11.5px; color:var(--muted); font-weight:400;}
.inputrow{display:flex; align-items:center; border:2px solid var(--yellow); border-radius:9px; overflow:hidden; background:#FFFDF5;}
.inputrow:focus-within{border-color:var(--orange);}
.inputrow .pre{padding:0 0 0 14px; font-weight:800; color:var(--muted); font-size:16px;}
.inputrow input{flex:1; border:0; outline:0; background:transparent; padding:13px; font-size:17px; font-weight:700; color:var(--ink); width:100%;}
.inputrow input::-webkit-outer-spin-button,.inputrow input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.inputrow .post{padding:0 14px 0 0; font-weight:700; color:var(--muted); font-size:13px; white-space:nowrap;}
.results{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:8px;}
.hero-res{padding:22px; text-align:center; background:var(--paper);}
.hero-res .cap{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--muted);}
.hero-res .big{font-size:46px; font-weight:800; color:var(--orange); line-height:1.04; margin:5px 0 2px;}
.hero-res .unit{font-size:14px; color:var(--muted); font-weight:700;}
.alarm{background:var(--steel); color:#fff; padding:18px 22px; text-align:center;}
.alarm .cap{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:#FFD8A8;}
.alarm .big{font-size:32px; font-weight:800; color:#FF8787; line-height:1.1; margin:4px 0 3px;}
.alarm .yr{font-size:13px; color:#ced4da;}

/* ---- email capture ---- */
.emailbox{background:var(--ivory); border:1px solid var(--line); border-radius:12px; padding:24px;}
.emailbox h3{font-size:18px; font-weight:800; margin-bottom:5px;}
.emailbox p{font-size:14px; color:#495057; margin-bottom:14px;}
.emailbox input[type=email]{width:100%; border:2px solid var(--line); border-radius:9px; padding:14px; font-size:16px; margin-bottom:11px; outline:0;}
.emailbox input[type=email]:focus{border-color:var(--navy);}
.ml-success{display:none; background:#EBFBEE; border:2px solid var(--green); color:#1B5E2A; border-radius:9px; padding:15px; font-size:14px; font-weight:700; text-align:center;}
.ml-note{font-size:11.5px; color:var(--muted); margin-top:10px;}

/* ---- prose (articles / about) ---- */
.prose{max-width:720px; margin:0 auto;}
.prose h1{font-size:31px; font-weight:800; line-height:1.15; margin-bottom:14px;}
.prose h2{font-size:21px; font-weight:800; margin:30px 0 10px;}
.prose p{font-size:16.5px; color:#2b2f33; margin-bottom:16px;}
.prose ul{margin:0 0 16px 22px;}
.prose li{font-size:16.5px; margin-bottom:7px;}
.prose .disclaimer{background:var(--paper); border-left:4px solid var(--yellow); padding:14px 16px; border-radius:0; font-size:14.5px; color:#495057; margin-bottom:22px;}
.prose .cta-block{background:var(--steel); color:#fff; border-radius:12px; padding:24px; margin-top:30px;}
.prose .cta-block h3{font-size:19px; font-weight:800; margin-bottom:8px;}
.prose .cta-block p{color:#E9ECEF; font-size:15px; margin-bottom:14px;}
.prose .cta-block a.inline{color:var(--yellow); font-weight:800;}
.byline{font-size:13px; color:var(--muted); margin-bottom:22px;}

/* ---- guide cards ---- */
.guide-card{display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; height:100%;}
.guide-card:hover{border-color:var(--orange); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.06);}
.guide-card .kicker{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--orange); margin-bottom:8px;}
.guide-card h3{font-size:18px; font-weight:800; color:var(--ink); margin-bottom:6px;}
.guide-card p{font-size:14px; color:#495057;}
.guide-card .more{display:inline-block; margin-top:12px; font-weight:800; color:var(--navy); font-size:14px;}

/* ---- footer ---- */
.site-footer{background:var(--steel); color:#cbd1d6; padding:36px 0 30px; margin-top:10px;}
.site-footer .cols{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between;}
.site-footer .brand-col{max-width:300px;}
.site-footer .name{color:#fff; font-weight:800; font-size:18px; margin-bottom:8px;}
.site-footer a{color:#cbd1d6;}
.site-footer a:hover{color:#fff;}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:8px; font-size:14px;}
.site-footer .col-title{color:#fff; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px;}
.site-footer .legal{margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:#9aa1a7;}
.site-footer .legal b{color:#cbd1d6;}