/* ==========================================================================
   Wildfire Ready — Homeowner Learning Centre
   Matches flashwildfireservices.ca: Hubot Sans, gold #b18c19 on light #f6f5f1
   with dark #15171c accent bands. High-contrast text only (no grey).
   ========================================================================== */

@font-face{
  font-family:"Hubot Sans";
  src:url("fonts/hubot.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}

:root{
  /* Gold accent system (exact) */
  --gold:#b18c19;          /* primary accent, button fills, rules */
  --gold-bright:#c99e1c;   /* accent text/icons on dark, eyebrows, headline word */
  --gold-deep:#8a6e14;     /* accent text on light backgrounds */
  --gold-soft:rgba(177,140,25,.12);
  --gold-liner:rgba(177,140,25,.40);

  /* Surfaces */
  --dark:#15171c;          /* primary dark background */
  --dark2:#0e1316;         /* deepest dark / inset */
  --card-dark:#1c1f26;     /* cards on dark */
  --light:#f6f5f1;         /* primary light background */
  --card-light:#ffffff;    /* cards on light */

  /* Text */
  --ink:#20231d;           /* body on light (near-black) */
  --white:#ffffff;         /* primary text on dark */
  --soft-white:#eceef2;    /* secondary text on dark (never mid-grey) */
  --line-light:rgba(32,35,29,.14);
  --line-dark:rgba(255,255,255,.12);

  --maxw:1180px;
  --gutter:clamp(1.1rem,4vw,3rem);
  --radius:6px;
  --font:"Hubot Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background-color:var(--light); color:var(--ink);
  background-image:linear-gradient(to right,rgba(32,35,29,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(32,35,29,.05) 1px,transparent 1px);
  background-size:46px 46px;
  font-family:var(--font); font-size:1.05rem; line-height:1.65; font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--gold-deep); text-decoration:none;}
a:hover{color:var(--ink);}
h1,h2,h3,h4{font-family:var(--font); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em; color:var(--ink);}
p{margin:0 0 1.1em;}
strong{font-weight:700; color:inherit;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:clamp(3.2rem,7vw,5.6rem);}
.section--tight{padding-block:clamp(2.2rem,4vw,3.4rem);}
.section--white{background:transparent;}
.section--dark,.section--surface{background:var(--dark); color:var(--white);}
.section--inset{background:var(--dark2); color:var(--white);}

.eyebrow{font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.6rem;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); display:inline-block;}
.lede{font-size:clamp(1.08rem,1.8vw,1.28rem); line-height:1.55; color:var(--ink); max-width:62ch;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font); font-weight:700; font-size:.95rem; padding:.82rem 1.45rem; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:all .16s ease;}
.btn--gold{background:var(--gold); color:#15171c; border-color:var(--gold);}
.btn--gold:hover{background:var(--gold-bright); color:#15171c; transform:translateY(-2px);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-light);}
.btn--ghost:hover{border-color:var(--ink); color:var(--ink);}
.btn--sm{padding:.55rem 1rem; font-size:.85rem;}
.btn .ar{transition:transform .16s ease;}
.btn:hover .ar{transform:translateX(3px);}

/* ---------- Header (dark) ---------- */
.site-header{position:sticky; top:0; z-index:60; background:var(--dark); border-bottom:1px solid var(--line-dark);}
.site-header .wrap{max-width:1380px;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:70px;}
.brand{display:flex; align-items:center; gap:.65rem; font-weight:700; font-size:1.06rem; color:var(--white); letter-spacing:-.01em; white-space:nowrap; flex:none;}
.brand:hover{color:var(--white);}
.brand .mark{height:34px; width:auto; flex:none; display:block;}
.brand small{display:block; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; margin-top:2px;}
.nav-links{display:flex; align-items:center; gap:clamp(.55rem,1.1vw,1.15rem); list-style:none; margin:0; padding:0;}
.nav-links a{color:var(--soft-white); font-size:.88rem; font-weight:500; position:relative; white-space:nowrap;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--white);}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);}
.nav-cta{display:flex; align-items:center; gap:.8rem;}
.nav-cta .btn{white-space:nowrap;}
.nav-toggle{display:none; background:none; border:1.5px solid var(--line-dark); border-radius:var(--radius); color:var(--white); width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center;}
.nav-toggle svg{width:22px; height:22px;}
@media (max-width:1300px){
  .nav-links{position:fixed; inset:70px 0 auto 0; flex-direction:column; gap:0; background:var(--dark2); border-bottom:1px solid var(--line-dark); padding:.5rem var(--gutter) 1.4rem; align-items:stretch; transform:translateY(-130%); transition:transform .28s ease; z-index:55;}
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:.85rem 0; border-bottom:1px solid var(--line-dark); font-size:1.02rem;}
  .nav-links a[aria-current="page"]::after{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-cta .btn--label{display:none;}
}

/* ---------- Hero (dark) ---------- */
.hero{position:relative; background:var(--dark); color:var(--white); padding-block:clamp(3.4rem,8vw,6.5rem); overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(120% 90% at 80% 6%,var(--gold-soft),transparent 55%); pointer-events:none;}
.hero .wrap{position:relative; z-index:1;}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem); font-weight:700; max-width:17ch; color:var(--white);}
.hero h1 .em{color:var(--gold-bright);}
.hero .lede{margin-top:1.3rem; color:var(--soft-white);}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem;}

/* staggered reveal */
.reveal{opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
.reveal.d1{animation-delay:.07s;} .reveal.d2{animation-delay:.16s;} .reveal.d3{animation-delay:.26s;} .reveal.d4{animation-delay:.38s;}
@keyframes rise{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none; opacity:1; transform:none;}}

/* ---------- Stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--radius); overflow:hidden;}
.stat{background:var(--dark2); padding:1.8rem 1.5rem;}
.stat .num{font-size:clamp(2.1rem,5vw,3.2rem); font-weight:700; color:var(--gold-bright); line-height:1; letter-spacing:-.02em;}
.stat .lab{font-size:.92rem; color:var(--soft-white); margin-top:.6rem;}
.stat .src{font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); margin-top:.7rem; font-weight:700;}
@media (max-width:720px){.stats{grid-template-columns:1fr;}}

/* ---------- Grids & cards ---------- */
.grid{display:grid; gap:1.2rem;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

.card{background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.6rem; transition:border-color .18s,transform .18s,box-shadow .18s; display:flex; flex-direction:column; height:100%; box-shadow:0 1px 2px rgba(32,35,29,.04);}
.card:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:0 10px 26px rgba(32,35,29,.10);}
.card .kicker{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:.8rem;}
.card h3{font-size:1.32rem; margin-bottom:.5rem; color:var(--ink);}
.card p{color:var(--ink); font-size:.97rem; margin-bottom:1.1rem;}
.card .more{margin-top:auto; font-weight:700; color:var(--gold-deep); font-size:.92rem; display:inline-flex; gap:.4rem; align-items:center;}
.card a.card-link,a.card-link{color:inherit;}
.card-num{font-size:2.4rem; font-weight:700; color:var(--gold); line-height:1; margin-bottom:.5rem; letter-spacing:-.03em;}

/* cards/components inside dark sections */
.section--dark .card,.section--surface .card{background:var(--card-dark); border-color:var(--line-dark); box-shadow:none;}
.section--dark .card h3,.section--surface .card h3{color:var(--white);}
.section--dark .card p,.section--surface .card p{color:var(--soft-white);}
.section--dark .card .kicker,.section--surface .card .kicker,
.section--dark .card-num,.section--surface .card-num{color:var(--gold-bright);}
.section--dark .card .more,.section--surface .card .more{color:var(--gold-bright);}
.section--dark .eyebrow,.section--surface .eyebrow,.hero .eyebrow,.page-intro .eyebrow{color:var(--gold-bright);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.section--surface h1,.section--surface h2,.section--surface h3,.section--surface h4{color:var(--white);}
.section--dark p,.section--surface p,.section--dark .lede,.section--surface .lede{color:var(--soft-white);}
.section--dark a:not(.btn),.section--surface a:not(.btn){color:var(--gold-bright);}
.section--dark .btn--ghost,.section--surface .btn--ghost,.hero .btn--ghost,.page-intro .btn--ghost{color:#ffffff; border-color:rgba(255,255,255,.38);}
.section--dark .btn--ghost:hover,.section--surface .btn--ghost:hover,.hero .btn--ghost:hover,.page-intro .btn--ghost:hover{border-color:#ffffff; color:#ffffff;}

/* ---------- Prose ---------- */
.prose{max-width:70ch;}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.3rem); margin-top:2.2em; color:var(--ink);}
.prose h3{font-size:1.28rem; margin-top:1.7em; color:var(--ink);}
.prose p,.prose li{color:var(--ink);}
.prose ul,.prose ol{padding-left:1.2rem; margin:0 0 1.3em;}
.prose li{margin-bottom:.5em;}
.prose ul li::marker{color:var(--gold);}
.prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-liner);}

.callout{border-left:3px solid var(--gold); background:var(--gold-soft); padding:1.1rem 1.35rem; border-radius:0 var(--radius) var(--radius) 0; margin:1.6rem 0;}
.callout .t{font-weight:700; color:var(--ink); margin-bottom:.3rem; font-size:1.05rem;}
.callout p:last-child{margin-bottom:0; color:var(--ink);}

/* ---------- Checklist ---------- */
.checklist{list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.55rem;}
.checklist li{display:flex; gap:.8rem; align-items:flex-start; background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:.82rem 1rem; color:var(--ink);}
.checklist li::before{content:""; flex:none; width:20px; height:20px; margin-top:2px; border-radius:3px; border:2px solid var(--gold);}

/* ---------- HIZ diagram ---------- */
.hiz{display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:center;}
@media (max-width:880px){.hiz{grid-template-columns:1fr;}}
.hiz-fig svg{width:100%; height:auto;}
.zone-shape{cursor:pointer; transition:opacity .2s ease;}
.zone-shape:hover,.zone-shape.active{opacity:1;}
.zone-dim{opacity:.5;}
.hiz-panel{background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.5rem 1.6rem; min-height:230px;}
.hiz-tabs{display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap;}
.hiz-tab{font-family:var(--font); font-weight:700; font-size:.82rem; padding:.48rem .9rem; border-radius:100px; border:1.5px solid var(--line-light); background:transparent; color:var(--ink); cursor:pointer; transition:all .16s;}
.hiz-tab[aria-selected="true"]{background:var(--gold); color:#15171c; border-color:var(--gold);}
.hiz-panel h3{font-size:1.45rem; margin-bottom:.2rem; color:var(--ink);}
.hiz-panel .rng{color:var(--gold-deep); font-weight:700; font-size:.9rem; margin-bottom:.9rem;}
.hiz-panel ul{padding-left:1.1rem; margin:0;}
.hiz-panel li{color:var(--ink); margin-bottom:.5rem;}
.hiz-panel li::marker{color:var(--gold);}
/* dark-context HIZ */
.section--dark .hiz-panel,.section--surface .hiz-panel{background:var(--card-dark); border-color:var(--line-dark);}
.section--dark .hiz-panel h3,.section--surface .hiz-panel h3,
.section--dark .hiz-panel li,.section--surface .hiz-panel li{color:var(--white);}
.section--dark .hiz-tab,.section--surface .hiz-tab{color:var(--soft-white); border-color:var(--line-dark);}

/* ---------- Finder ---------- */
.finder{background:var(--card-light); border:1px solid var(--line-light); border-radius:10px; padding:clamp(1.4rem,3vw,2.4rem); box-shadow:0 2px 8px rgba(32,35,29,.05);}
.finder .q{font-weight:700; font-size:1.18rem; margin-bottom:1rem; color:var(--ink);}
.finder .q .n{color:var(--gold-deep); margin-right:.5rem;}
.opts{display:grid; gap:.7rem; grid-template-columns:repeat(3,1fr); margin-bottom:2rem;}
@media (max-width:760px){.opts{grid-template-columns:1fr;}}
.opt{text-align:left; background:var(--light); border:1.5px solid var(--line-light); border-radius:var(--radius); padding:.95rem 1.05rem; color:var(--ink); cursor:pointer; font-family:var(--font); font-size:.95rem; transition:all .14s;}
.opt:hover{border-color:var(--gold); }
.opt[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-soft);}
.opt .ot{display:block; font-weight:700; color:var(--ink); margin-bottom:.15rem;}
.result{border-top:1px solid var(--line-light); padding-top:1.6rem; margin-top:.4rem;}
.result.empty{color:var(--gold-deep); font-style:italic;}
.finder, .finder p, .finder .result p, .finder li{color:var(--ink);}
.finder .result h3{color:var(--gold-deep);}
.result h3{font-size:1.45rem; color:var(--gold-deep); margin-bottom:.3rem;}
.rec-items{display:grid; gap:.7rem; margin:1.1rem 0;}
.rec-item{display:flex; justify-content:space-between; align-items:center; gap:1rem; background:var(--light); border:1px solid var(--line-light); border-radius:var(--radius); padding:.9rem 1.1rem;}
.rec-item .ri-name{font-weight:700; color:var(--ink);}
.rec-item .ri-desc{font-size:.86rem; color:var(--ink);}
.rec-item .ri-price{color:var(--gold-deep); font-weight:700; white-space:nowrap;}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line-light); border-radius:var(--radius);}
table.data{width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px;}
table.data th,table.data td{text-align:left; padding:.9rem 1.1rem; border-bottom:1px solid var(--line-light); color:var(--ink); vertical-align:top;}
table.data th{font-weight:700; color:#15171c; background:var(--gold-soft);}
table.data tr:last-child td{border-bottom:none;}
table.data td strong{color:var(--gold-deep);}

/* ---------- Evidence cards ---------- */
.evidence{border:1px solid var(--line-light); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; background:var(--card-light); padding:1.5rem 1.6rem;}
.evidence .src-tag{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:.6rem;}
.evidence h3{font-size:1.22rem; margin-bottom:.5rem; color:var(--ink);}
.evidence p{color:var(--ink); font-size:.97rem; margin-bottom:.8rem;}
.evidence .cite{font-size:.82rem; color:var(--ink); border-top:1px dotted var(--line-light); padding-top:.7rem;}
.evidence .cite a{color:var(--gold-deep);}
.section--dark .evidence,.section--surface .evidence{background:var(--card-dark); border-color:var(--line-dark); border-left-color:var(--gold);}
.section--dark .evidence h3,.section--surface .evidence h3{color:var(--white);}
.section--dark .evidence p,.section--surface .evidence p{color:var(--soft-white);}
.section--dark .evidence .src-tag,.section--surface .evidence .src-tag,
.section--dark .evidence .cite,.section--surface .evidence .cite{color:var(--soft-white);}
.section--dark .evidence .cite a,.section--surface .evidence .cite a{color:var(--gold-bright);}

/* ---------- Download cards ---------- */
.dl-card{display:flex; gap:1.1rem; align-items:flex-start; background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.4rem; transition:border-color .18s,transform .18s; box-shadow:0 1px 2px rgba(32,35,29,.04);}
.dl-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.dl-ico{flex:none; width:46px; height:46px; border-radius:var(--radius); background:var(--gold-soft); border:1px solid var(--gold-liner); display:flex; align-items:center; justify-content:center;}
.dl-ico svg{width:24px; height:24px; stroke:var(--gold-deep);}
.dl-card h3{font-size:1.14rem; margin-bottom:.3rem; color:var(--ink);}
.dl-card p{color:var(--ink); font-size:.9rem; margin-bottom:.9rem;}

/* ---------- CTA band (dark) ---------- */
.cta-band{background:var(--dark); border:1px solid var(--line-dark); border-radius:10px; padding:clamp(2rem,5vw,3.4rem); text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -10%,var(--gold-soft),transparent 60%);}
.cta-band>*{position:relative;}
.cta-band h2{font-size:clamp(1.7rem,4vw,2.6rem); max-width:20ch; margin-inline:auto; color:var(--white);}
.cta-band .lede{margin-inline:auto; margin-bottom:1.8rem; color:var(--soft-white);}
.cta-band .tag{color:var(--gold-bright); border-color:var(--line-dark);}
.cta-actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;}
.cta-band .btn--ghost{color:#ffffff; border-color:rgba(255,255,255,.38);}
.cta-band .btn--ghost:hover{border-color:var(--white);}
.cta-band a:not(.btn){color:var(--white); text-decoration:underline;}

/* ---------- Page intro (dark band) ---------- */
.page-intro{background:var(--dark); color:var(--white); padding-block:clamp(2.8rem,6vw,4.4rem); border-bottom:1px solid var(--line-dark); position:relative; overflow:hidden;}
.page-intro::before{content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 90% -10%,var(--gold-soft),transparent 55%);}
.page-intro .wrap{position:relative;}
.page-intro h1{font-size:clamp(2rem,4.6vw,3.3rem); max-width:18ch; color:var(--white);}
.page-intro .lede{color:var(--soft-white);}
.crumbs{font-size:.82rem; color:var(--gold-bright); margin-bottom:1.2rem; letter-spacing:.03em;}
.crumbs a{color:var(--gold-bright);} .crumbs a:hover{color:var(--white);}

/* ---------- Article layout ---------- */
.article-layout{display:grid; grid-template-columns:220px 1fr; gap:3rem; align-items:start;}
@media (max-width:900px){.article-layout{grid-template-columns:1fr;} .toc{display:none;}}
.toc{position:sticky; top:96px; font-size:.9rem;}
.toc .tt{font-size:.71rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:.9rem;}
.toc ul{list-style:none; padding:0; margin:0; display:grid; gap:.1rem;}
.toc a{display:block; padding:.4rem .7rem; border-left:2px solid var(--line-light); color:var(--ink);}
.toc a:hover{border-color:var(--gold); color:var(--gold-deep);}

/* ---------- Footer (dark) ---------- */
.site-footer{background:var(--dark2); color:var(--white); border-top:1px solid var(--line-dark); padding-block:3rem 2rem; margin-top:0;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem;}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h4{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; margin-bottom:1rem;}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem;}
.foot-grid a{color:var(--soft-white); font-size:.92rem;}
.foot-grid a:hover{color:var(--white);}
.foot-brand p{color:var(--soft-white); font-size:.92rem; max-width:34ch;}
.foot-logo{width:180px; height:auto; margin-bottom:1rem; display:block;}
.foot-bottom{border-top:1px solid var(--line-dark); margin-top:2.4rem; padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--soft-white);}
.foot-bottom a{color:var(--gold-bright);}
.foot-disc{max-width:72ch; font-size:.8rem; color:var(--soft-white); margin-top:1rem; line-height:1.6;}

/* ---------- Misc ---------- */
.skip{position:absolute; left:-999px;}
.skip:focus{left:1rem; top:1rem; z-index:100; background:var(--gold); color:#15171c; padding:.6rem 1rem; border-radius:var(--radius);}
.divider{height:1px; background:var(--line-light); border:0; margin:0;}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--line-light); border-radius:100px; padding:.25rem .7rem;}
.center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.lead-form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem;}
.lead-form input[type=email]{flex:1; min-width:220px; background:var(--card-light); border:1.5px solid var(--line-light); border-radius:var(--radius); padding:.78rem 1rem; color:var(--ink); font-family:var(--font); font-size:.95rem;}
.lead-form input::placeholder{color:#5e6157;}
.form-note{font-size:.78rem; color:var(--ink); margin-top:.7rem;}
.section--dark .form-note,.section--surface .form-note{color:var(--soft-white);}

/* ---------- Safety: prose / callout inside dark bands ---------- */
.section--dark .prose p,.section--dark .prose li,.section--surface .prose p,.section--surface .prose li{color:var(--soft-white);}
.section--dark .prose h2,.section--dark .prose h3,.section--surface .prose h2,.section--surface .prose h3{color:var(--white);}
.section--dark .callout,.section--surface .callout{background:rgba(255,255,255,.06);}
.section--dark .callout .t,.section--surface .callout .t,.section--dark .callout p,.section--surface .callout p{color:var(--white);}
.section--dark .prose a,.section--surface .prose a{color:var(--gold-bright);}

/* ====== Engagement components (timeline, comparison, grab grid, guide cards) ====== */
/* scannable bullet columns */
.bullets{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.8rem;}
.bullets li{display:flex; gap:.7rem; color:inherit; font-size:.97rem; line-height:1.5;}
.bullets li::before{content:""; flex:none; width:8px; height:8px; margin-top:.5rem; background:var(--gold); border-radius:2px;}

/* interactive phase timeline */
.timeline{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem;}
.tl-step{flex:1; min-width:130px; text-align:left; background:var(--card-light); border:1.5px solid var(--line-light); border-radius:var(--radius); padding:.8rem 1rem; cursor:pointer; transition:all .16s; font-family:var(--font);}
.tl-step .tl-n{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); display:block;}
.tl-step .tl-t{display:block; font-weight:700; color:var(--ink); margin-top:.2rem; font-size:.98rem; line-height:1.15;}
.tl-step:hover{border-color:var(--gold);}
.tl-step[aria-selected="true"]{background:var(--gold); border-color:var(--gold);}
.tl-step[aria-selected="true"] .tl-n,.tl-step[aria-selected="true"] .tl-t{color:#15171c;}
.tl-panel{background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.6rem 1.7rem; min-height:260px;}
.tl-panel h3{margin-bottom:.15rem; color:var(--ink);}
.tl-panel .when{color:var(--gold-deep); font-weight:700; font-size:.9rem; margin-bottom:1rem;}
.tl-panel ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem;}
.tl-panel li{display:flex; gap:.7rem; color:var(--ink); line-height:1.5;}
.tl-panel li::before{content:""; flex:none; width:8px; height:8px; margin-top:.5rem; background:var(--gold); border-radius:2px;}

/* alert vs order comparison */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
@media (max-width:680px){.vs{grid-template-columns:1fr;}}
.vs-card{border-radius:var(--radius); padding:1.6rem; border:1px solid var(--line-light); background:var(--card-light);}
.vs-card .vs-h{font-weight:700; font-size:1.22rem; margin-bottom:.2rem; color:var(--ink);}
.vs-card .vs-sub{font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.9rem;}
.vs-card.alert{border-top:4px solid var(--gold);}
.vs-card.alert .vs-sub{color:var(--gold-deep);}
.vs-card.order{border-top:4px solid #c0392b;}
.vs-card.order .vs-sub{color:#c0392b;}
.vs-card ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem;}
.vs-card li{display:flex; gap:.6rem; color:var(--ink); font-size:.95rem; line-height:1.45;}
.vs-card li::before{content:""; flex:none; width:7px; height:7px; margin-top:.5rem; border-radius:2px;}
.vs-card.alert li::before{background:var(--gold);}
.vs-card.order li::before{background:#c0392b;}

/* 5-things grab grid */
.grab{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;}
@media (max-width:860px){.grab{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.grab{grid-template-columns:1fr;}}
.grab-item{background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.3rem 1rem; text-align:center;}
.grab-item .gi-ico{width:38px; height:38px; margin:0 auto .7rem; color:var(--gold-deep);}
.grab-item .gi-ico svg{width:38px; height:38px; stroke:var(--gold-deep);}
.grab-item h4{font-size:1rem; margin-bottom:.3rem; color:var(--ink);}
.grab-item p{font-size:.84rem; color:var(--ink); margin:0; line-height:1.4;}

/* visual guide cards (replace bland blog-link prose) */
.guides{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
@media (max-width:680px){.guides{grid-template-columns:1fr;}}
.guide-card{display:flex; gap:1rem; align-items:flex-start; background:var(--card-light); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.4rem; transition:all .16s; text-decoration:none;}
.guide-card:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 24px rgba(32,35,29,.08);}
.guide-ico{flex:none; width:44px; height:44px; border-radius:var(--radius); background:var(--gold-soft); border:1px solid var(--gold-liner); display:flex; align-items:center; justify-content:center;}
.guide-ico svg{width:22px; height:22px; stroke:var(--gold-deep); fill:none;}
.guide-card h4{font-size:1.06rem; margin-bottom:.25rem; color:var(--ink);}
.guide-card p{font-size:.89rem; color:var(--ink); margin:0 0 .5rem; line-height:1.45;}
.guide-card .glink{font-weight:700; color:var(--gold-deep); font-size:.87rem; display:inline-flex; gap:.3rem; align-items:center;}
.guide-card:hover .glink{color:var(--gold);}

/* ---------- Grid background on dark bands (matches your components) ---------- */
.hero,.page-intro,.section--dark,.section--surface,.site-footer{
  background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}