/* =====================================================================
   Shared "plain-English" light theme — used by the landing page and every
   guide (all-in-one + trade-specific). Warm paper, navy ink, teal accent.
   ===================================================================== */
:root{
  --paper:#faf7f1; --surface:#ffffff; --ink:#1e2c3a; --navy:#17324d;
  --muted:#5f7082; --teal:#2f9bc4; --line:#ddd5c8; --amber:#d9a406;
  --green:#2f9e6b; --red:#c0504f; --violet:#7b5fd6;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.6; font-size:16px;}
.wrap{max-width:820px; margin:0 auto; padding:0 26px 60px;}
.wrap.wide{max-width:960px;}

/* Top bar */
.topbar{background:var(--navy); color:#fff; padding:14px 26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.topbar .mark{font-weight:700; letter-spacing:.5px;}
.topbar .mark span{color:#7fb8e0;}
.topbar .sub{color:#b9cbdc; font-size:13px;}
.topbar .grow{flex:1;}
.topbar a{color:#cfe0ef; text-decoration:none; font-size:13px;}
.printbtn{font:inherit; font-size:13px; background:var(--teal); color:#06121d; border:0; border-radius:6px; padding:8px 14px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-block;}

/* Cover / hero */
.cover{border-bottom:3px solid var(--teal); padding:34px 0 22px; margin-bottom:8px;}
.cover .eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); font-weight:700; margin:0 0 10px;}
.cover h1{font-size:34px; line-height:1.15; color:var(--navy); margin:0 0 10px;}
.cover p{color:var(--muted); margin:0; font-size:16px; max-width:60ch;}
.cover h1 + p{font-size:18px;}

/* Calls to action */
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 4px;}
.btn{display:inline-block; font:inherit; font-weight:600; font-size:15px; text-decoration:none;
  border:1px solid var(--navy); color:var(--navy); background:transparent; border-radius:8px; padding:12px 22px; cursor:pointer;}
.btn:hover{background:rgba(23,50,77,.06);}
.btn.primary{background:var(--teal); border-color:var(--teal); color:#06121d;}
.btn.primary:hover{filter:brightness(1.05);}
.microcopy{font-size:13px; color:var(--muted); margin:14px 0 0;}

h2{font-size:24px; color:var(--navy); margin:38px 0 10px; padding-bottom:8px; border-bottom:2px solid var(--line);}
h3{font-size:18px; color:var(--navy); margin:22px 0 6px;}
p{margin:0 0 14px;}
ul{margin:0 0 16px; padding-left:22px;}
li{margin:5px 0;}
strong{color:var(--navy);}
.lead{font-size:17px;}
code{background:#efe9df; padding:1px 5px; border-radius:4px; font-size:14px;}

.tldr{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:8px; padding:18px 20px; margin:18px 0;}
.tldr h3{margin-top:0;}

.steps{counter-reset:step; margin:14px 0;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px 18px 16px 56px; margin:0 0 12px; position:relative;}
.step::before{counter-increment:step; content:counter(step); position:absolute; left:16px; top:16px; width:28px; height:28px; background:var(--navy); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.step h3{margin:0 0 4px;}
.step p{margin:0; color:var(--muted);}

.dash{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--teal); border-radius:8px; padding:16px 18px; margin:0 0 14px; break-inside:avoid;}
.dash.c2{border-top-color:var(--amber);}
.dash.c3{border-top-color:var(--green);}
.dash.c4{border-top-color:var(--violet);}
.dash.c5{border-top-color:var(--teal);}
.dash.c6{border-top-color:var(--red);}
.dash h3{margin:0 0 8px;}
.dash .q{color:var(--teal); font-style:italic; font-weight:600;}
.dash p{margin:6px 0;}
.dash .runs{font-size:14px; color:var(--muted);}

.toolgroup{margin:6px 0 16px;}
.toolgroup .gh{font-weight:700; color:var(--navy); margin:14px 0 4px;}

.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0;}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px;}
.pcard .pnum{font-weight:700; color:var(--teal); font-size:20px; margin-bottom:8px;}
.pcard p{margin:0; color:var(--muted); font-size:14.5px;}

.promise{background:#f1f6ef; border:1px solid #cfe0c9; border-radius:8px; padding:16px 20px;}
.contact{background:var(--navy); color:#fff; border-radius:8px; padding:22px 24px; margin-top:22px;}
.contact a{color:#9bd0ee;}
.contact .big{font-size:18px; font-weight:700; margin:0 0 6px;}

.legend{display:inline-block; padding:1px 8px; border-radius:4px; font-size:13px; font-weight:600;}
.lg{background:rgba(47,158,107,.16); color:var(--green);}
.ly{background:rgba(217,164,6,.18); color:#8a6a06;}
.lr{background:rgba(192,80,79,.14); color:var(--red);}

.foot{margin-top:30px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px;}
.foot a{color:var(--teal);}

@media (max-width:680px){
  .cards3{grid-template-columns:1fr;}
  .cover h1{font-size:28px;}
}

@media print{
  .no-print{display:none !important;}
  body{background:#fff; font-size:12pt;}
  .wrap{max-width:none; padding:0 0 20px;}
  .topbar{background:#fff; color:var(--navy); padding:0 0 8px; border-bottom:2px solid var(--navy);}
  .topbar .mark span,.topbar .sub{color:var(--muted);}
  h2{break-after:avoid;} h3{break-after:avoid;}
  .dash,.step,.tldr,.contact,.promise,.pcard{break-inside:avoid;}
  a{color:var(--ink); text-decoration:none;}
}