:root{
  --ink:#221D18;
  --ink-soft:#4A4038;
  --paper:#FFFFFF;
  --linen:#F6EEDD;
  --linen-deep:#EDE0C8;
  --accent:#E5602A;
  --accent-deep:#B23A1E;
  --ring: rgba(229,96,42,.45);
  --radius: 20px;
  --maxw: 880px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Manrope',sans-serif; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.6;
}
h1,h2,h3{font-family:'Unbounded',sans-serif; margin:0 0 .5em; line-height:1.15; letter-spacing:-0.01em;}
p{margin:0 0 1em;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--accent);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15.5px;
  padding:15px 28px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:3px;}
.btn-primary{background:var(--accent); color:#FFF8EF;}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(178,58,30,.55);}

/* HEADER */
header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(34,29,24,.08);
}
.nav{max-width:1180px; margin:0 auto; padding:18px 28px; display:flex; align-items:center; justify-content:space-between;}
.logo{
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:22px; text-decoration:none;
  color:var(--ink); display:flex; align-items:center; gap:10px;
}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block;}
.back-link{
  text-decoration:none; font-weight:600; font-size:14.5px; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:8px;
}
.back-link:hover{color:var(--accent-deep);}

/* ARTICLE */
.article-hero{padding:64px 0 32px; background:var(--linen);}
.article-hero h1{font-size:clamp(30px,4.4vw,46px); color:var(--ink);}
.article-hero .lead{font-size:18px; color:var(--ink-soft); max-width:62ch; margin:0;}
.article-meta{color:var(--ink-soft); font-size:14px; font-weight:700; margin-top:18px;}

.article-body{padding:56px 0 24px;}
.article-body h2{font-size:clamp(22px,3vw,28px); margin-top:2.2em;}
.article-body h2:first-child{margin-top:0;}
.article-body h3{font-size:18px; margin-top:1.6em;}
.article-body p{color:var(--ink); font-size:16.5px; max-width:70ch;}
.article-body ul{margin:0 0 1.4em; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; max-width:70ch;}
.article-body ul li{font-size:15.5px; line-height:1.5; color:var(--ink-soft); padding-left:28px; position:relative;}
.article-body ul li::before{
  content:'✓'; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
  background:var(--accent); color:#FFF8EF; font-size:11px; font-weight:800; line-height:18px; text-align:center;
}
.article-body strong{color:var(--ink);}

.article-nav{display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 8px;}
.article-nav a{
  text-decoration:none; font-weight:700; font-size:13.5px; color:var(--accent-deep);
  background:var(--linen); padding:8px 16px; border-radius:100px;
}
.article-nav a:hover{background:var(--linen-deep);}

/* LEAD MAGNET */
.lead-magnet{background:var(--linen); border-radius:24px; padding:36px; margin:56px 0; border:1.5px solid var(--linen-deep);}
.lead-magnet h3{font-size:22px; margin-bottom:8px;}
.lead-magnet .sub{color:var(--ink-soft); font-size:15px; max-width:60ch;}
.lead-form{display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; margin-top:20px;}
.field label{display:block; font-weight:700; font-size:13px; margin-bottom:6px; color:var(--ink-soft);}
.field input{
  width:100%; border:1.5px solid var(--linen-deep); border-radius:12px; padding:13px 15px;
  font-family:'Manrope',sans-serif; font-size:15px; color:var(--ink); background:var(--paper);
}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);}
.lead-note{font-size:12px; color:var(--ink-soft); margin-top:12px; margin-bottom:0;}
.lead-success{display:none; align-items:center; gap:14px; margin-top:20px;}
.lead-success.show{display:flex;}
.lead-success .check{
  width:40px; height:40px; border-radius:50%; background:var(--accent); color:#FFF8EF;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:18px;
}
.lead-success a{font-weight:800; color:var(--accent-deep); text-decoration:underline;}
@media (max-width:640px){
  .lead-form{grid-template-columns:1fr;}
}

/* CROSS-LINKS */
.related{background:var(--linen); padding:48px 0 64px;}
.related h3{font-size:20px;}
.related-grid{display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.related-grid a{
  text-decoration:none; font-weight:700; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--linen-deep); border-radius:14px; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.related-grid a:hover{border-color:var(--accent); color:var(--accent-deep);}

/* FOOTER */
footer{background:var(--ink); color:#C9BFB2; padding:44px 0;}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer-logo{font-family:'Unbounded',sans-serif; font-weight:800; font-size:20px; color:#FFF8EF;}
footer a{color:#E7DECF; text-decoration:none; font-weight:700; font-size:14.5px;}
footer a:hover{color:var(--accent);}

@media (max-width:640px){
  .article-hero{padding:44px 0 28px;}
  .wrap{padding:0 20px;}
}