:root{
  --pine:#06302C; --pine-deep:#04201C; --ink:#13211D;
  --brass:#C49A4E; --brass-deep:#A9823B; --patina:#5E9C8F;
  --bone:#F4F1E9; --paper:#FCFBF8; --slate:#3A463F; --taupe:#857F71;
  --line:#E6E0D3; --brick:#B5462F;
  --r-md:12px; --r-lg:18px; --r-pill:999px;
  --shadow:0 1px 1px rgba(6,48,44,.04),0 14px 40px rgba(6,48,44,.06);

  /* fluid type */
  --step-hero: clamp(28px, 8vw, 44px);   /* H1 */
  --step-h2:   clamp(22px, 6vw, 32px);
  --step-h3:   clamp(18px, 5vw, 22px);
  --step-body: clamp(16px, 4.2vw, 18px);
  --step-label:clamp(11px, 3vw, 12px);   /* mono eyebrows */

  /* fluid spacing */
  --pad-section: clamp(40px, 9vw, 96px);
  --pad-x:       clamp(16px, 5vw, 28px);
  --gap:         clamp(12px, 4vw, 24px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--step-body); line-height:1.55; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; max-width:100%;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:inherit; overflow-wrap:anywhere}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty; overflow-wrap:anywhere}

/* ---------- shared layout ---------- */
.wrap{width:100%; max-width:600px; margin-inline:auto; padding-inline:var(--pad-x)}
.section{padding:var(--pad-section) 0}
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:500;
  font-size:var(--step-label); text-transform:uppercase; letter-spacing:.2em; color:var(--taupe);
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.1; letter-spacing:-.01em}
h1,h2,h3{overflow-wrap:anywhere}
.h2{font-size:var(--step-h2); margin-bottom:8px}
.lead{color:var(--slate); font-size:var(--step-body); margin-top:14px}

/* ---------- buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 22px; width:100%;
  font-family:"Sora",sans-serif; font-weight:600; font-size:18px;
  border-radius:var(--r-pill); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:background-color .12s,border-color .12s,color .12s;
  touch-action:manipulation;
}
.btn-brass{background:var(--brass); color:var(--pine-deep); border-color:var(--brass)}
.btn-brass:active{background:var(--brass-deep); border-color:var(--brass-deep)}
.btn-pine{background:transparent; color:var(--pine); border-color:var(--pine)}
.btn-pine:active{background:rgba(6,48,44,.08)}
/* on dark backgrounds, the pine-border button needs bone text */
.on-dark .btn-pine{color:var(--bone); border-color:var(--patina)}
.on-dark .btn-pine:active{background:rgba(244,241,233,.10)}
.btn .ic{width:22px;height:22px;flex:0 0 auto}

.btn-stack{display:flex;flex-direction:column;gap:12px;margin-top:26px}

/* ---------- top bar ---------- */
.topbar{
  background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; color:var(--pine); text-decoration:none}
.brand,.topbar .nav{min-width:0}
.brand .mark{width:30px;height:30px}
.brand .name{font-family:"Sora",sans-serif; font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--pine)}
.call-pill{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  background:var(--brass); color:var(--pine-deep); text-decoration:none;
  font-family:"Sora",sans-serif; font-weight:700; font-size:15px;
}
.call-pill:active{background:var(--brass-deep)}
.call-pill .ic{width:18px;height:18px}

/* ---------- hero ---------- */
.hero{background:var(--pine-deep); color:var(--bone)}
.hero .wrap{padding-top:clamp(36px,8vw,72px); padding-bottom:clamp(44px,9vw,80px)}
.hero .eyebrow{color:var(--patina)}
.hero h1{font-size:var(--step-hero); margin-top:16px; color:var(--bone)}
.hero .lead{color:#D6DDD3; font-size:var(--step-body)}
.trust-inline{
  margin-top:26px; font-family:"JetBrains Mono",monospace; font-weight:500;
  font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--patina); line-height:1.9;
}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--pine); color:var(--bone); padding:18px 0}
.trust-strip .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center}
.trust-strip .item{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500}
.trust-strip .chk{color:var(--brass); flex:0 0 auto}

/* ---------- cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:var(--gap); margin-top:28px;
}
.card{
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,5vw,24px); box-shadow:var(--shadow);
}
.card .num{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--brass-deep)}
.card h3{font-size:var(--step-h3); margin-top:10px}
.card p{color:var(--slate); margin-top:8px}

/* ---------- recent lanes ---------- */
.lanes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:var(--gap); margin-top:28px;
}
.lane{
  background:var(--pine); color:var(--bone); border-radius:var(--r-lg); padding:20px 22px;
}
.lane-top{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap}
.lane-route{font-family:"Fraunces",serif; font-weight:600; font-size:var(--step-h3); color:var(--bone)}
.lane-rate{font-family:"Sora",sans-serif; font-weight:800; font-size:var(--step-h3); color:var(--brass); white-space:nowrap}
.lane-meta{margin-top:8px; font-family:"JetBrains Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--patina)}

/* ---------- testimonial ---------- */
.quote{background:var(--pine-deep); color:var(--bone)}
.quote .wrap{padding-top:56px; padding-bottom:56px}
.quote blockquote{font-family:"Fraunces",serif; font-weight:500; font-style:italic; font-size:clamp(20px,5.5vw,26px); line-height:1.35; color:var(--bone)}
.quote .by{display:flex; align-items:center; gap:14px; margin-top:24px}
.avatar{
  width:50px;height:50px;border-radius:50%; flex:0 0 auto;
  background:var(--brass); color:var(--pine-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:"Sora",sans-serif; font-weight:800; font-size:18px;
}
.quote .who{font-size:14px; color:#CBD3C9; line-height:1.4}
.quote .who b{color:var(--bone); font-weight:600; font-family:"Sora",sans-serif; display:block; font-size:15px}

/* ---------- get started / form ---------- */
.start{background:var(--bone)}
.form-card{
  margin-top:30px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow);
}
.form-card .form-label{font-family:"Sora",sans-serif; font-weight:700; font-size:16px; color:var(--pine)}
.form-card .form-sub{color:var(--taupe); font-size:14px; margin-top:4px; margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--slate); margin-bottom:6px}
.field input{
  width:100%; min-height:52px; padding:0 16px; font-size:17px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff; color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(196,154,78,.22)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{margin-top:14px; font-size:14px; color:var(--taupe); text-align:center}

/* ---------- footer ---------- */
.footer{background:var(--pine-deep); color:var(--bone)}
.footer .wrap{padding-top:48px; padding-bottom:48px}
.footer .lockup{display:flex; align-items:center; gap:12px; color:var(--bone)}
.footer .lockup .mark{width:38px;height:38px}
.footer .lockup .name{font-family:"Sora",sans-serif; font-weight:800; font-size:22px; letter-spacing:.02em}
.footer-links{display:flex; flex-direction:column; gap:12px; margin-top:24px}
.footer-links a{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:0 20px;
  border:1.5px solid var(--patina); border-radius:var(--r-pill);
  text-decoration:none; color:var(--bone); font-family:"Sora",sans-serif; font-weight:600; font-size:17px;
}
.footer-links a:active{background:rgba(244,241,233,.08)}
.footer-links .ic{width:20px;height:20px}
.disclaimer{margin-top:28px; font-size:13px; color:#9AA79C; line-height:1.6}
.copy{margin-top:14px; font-size:13px; color:#7C8A7E}

/* ---------- sticky bottom bar ---------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; width:100%; z-index:50;
  display:flex; gap:10px;
  padding:10px 14px max(10px, env(safe-area-inset-bottom));
  background:rgba(4,32,28,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(94,156,143,.3);
}
.sticky-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-width:0;
  min-height:56px; border-radius:var(--r-pill); text-decoration:none;
  font-family:"Sora",sans-serif; font-weight:700; font-size:clamp(15px,4vw,17px);
  touch-action:manipulation;
}
.sticky-bar .sb-call{background:var(--brass); color:var(--pine-deep)}
.sticky-bar .sb-call:active{background:var(--brass-deep)}
.sticky-bar .sb-wa{background:var(--pine); color:var(--bone); border:1.5px solid var(--patina)}
.sticky-bar .sb-wa:active{background:#052923}
.sticky-bar .ic{width:22px;height:22px;flex:0 0 auto}

/* ---------- equipment ---------- */
.equip{
  display:grid; gap:var(--gap); margin-top:28px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.equip .tile{
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
.equip .tile img{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--line);
}
.equip .tile .t{
  display:block; padding:14px 16px;
  font-family:"Sora",sans-serif; font-weight:700; font-size:16px; color:var(--pine);
}
.equip-note{margin-top:18px; font-size:14px; color:var(--taupe)}

/* ---------- what we handle (checklist) ---------- */
.handle{list-style:none; margin-top:28px; display:grid; gap:14px}
.handle li{display:flex; align-items:flex-start; gap:12px; font-size:var(--step-body); color:var(--ink)}
.handle .chk{flex:0 0 auto; color:var(--brass-deep); margin-top:3px}

/* ---------- reassurance line ---------- */
.reassure{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center;
  font-family:"JetBrains Mono",monospace; font-weight:500; font-size:var(--step-label);
  letter-spacing:.12em; text-transform:uppercase; color:var(--patina);
}
.reassure.dark{color:var(--taupe)}

/* ---------- bilingual band ---------- */
.bilingual{background:var(--pine); color:var(--bone)}
.bilingual .wrap{padding-top:clamp(36px,7vw,56px); padding-bottom:clamp(36px,7vw,56px); text-align:center}
.bilingual .eyebrow{color:var(--patina)}
.bilingual h2{font-size:var(--step-h2); margin-top:10px; color:var(--bone)}
.bilingual p{margin-top:12px; color:#D6DDD3; font-size:var(--step-body)}
.bilingual .so{margin-top:6px; font-style:italic; color:var(--brass)}

/* ---------- FAQ ---------- */
.faq{margin-top:28px; display:grid; gap:12px}
.faq details{
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
.faq summary{
  list-style:none; cursor:pointer; min-height:56px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; font-family:"Sora",sans-serif; font-weight:600; font-size:var(--step-h3);
  color:var(--pine);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{
  flex:0 0 auto; width:24px; height:24px; position:relative; transition:transform .2s;
}
.faq summary .plus::before,.faq summary .plus::after{
  content:""; position:absolute; background:var(--brass-deep); border-radius:2px;
}
.faq summary .plus::before{top:11px; left:3px; width:18px; height:2px}
.faq summary .plus::after{top:3px; left:11px; width:2px; height:18px}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .answer{padding:0 20px 18px; color:var(--slate); font-size:var(--step-body)}

/* ---------- 6-step timeline ---------- */
.timeline{margin-top:28px; display:grid; gap:14px; counter-reset:step}
.tl-step{
  position:relative; background:var(--bone); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px 20px 20px 66px; box-shadow:var(--shadow);
}
.tl-step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:18px; top:20px; width:34px; height:34px; border-radius:50%;
  background:var(--brass); color:var(--pine-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px;
}
.tl-step h3{font-size:var(--step-h3)}
.tl-step p{color:var(--slate); margin-top:6px}

/* ---------- hero secondary link ---------- */
.hero-link{
  display:inline-flex; align-items:center; gap:8px; min-height:52px; margin-top:6px;
  color:var(--brass); text-decoration:none;
  font-family:"Sora",sans-serif; font-weight:600; font-size:16px;
}
.hero-link:active{color:var(--brass-deep)}

/* ---------- fee calculator ---------- */
.calc-card{
  margin-top:28px; background:var(--pine); color:var(--bone);
  border-radius:var(--r-lg); padding:clamp(22px,6vw,32px);
}
.calc-card .clabel{display:block; font-family:"Sora",sans-serif; font-weight:600; font-size:15px; color:var(--bone); margin-bottom:10px}
.calc-input{position:relative}
.calc-input .pre{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--patina); font-family:"JetBrains Mono",monospace; font-size:19px; pointer-events:none}
.calc-card input{
  width:100%; min-height:58px; padding:0 16px 0 36px; font-size:21px;
  font-family:"JetBrains Mono",monospace; font-weight:700;
  border:1.5px solid var(--patina); border-radius:var(--r-md);
  background:var(--pine-deep); color:var(--bone);
}
.calc-card input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(196,154,78,.25)}
.calc-rows{margin-top:22px; display:grid; gap:0}
.calc-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid rgba(94,156,143,.25)}
.calc-row .k{font-size:15px; color:#D6DDD3}
.calc-row .v{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:clamp(18px,5vw,22px); color:var(--bone); white-space:nowrap}
.calc-save{margin-top:20px; background:var(--brass); color:var(--pine-deep); border-radius:var(--r-md); padding:20px; text-align:center}
.calc-save .big{font-family:"Fraunces",serif; font-weight:600; font-size:clamp(22px,6.5vw,30px); display:block; line-height:1.15}
.calc-save .sub{font-size:14px; margin-top:6px; font-weight:500}
.calc-note{margin-top:14px; font-size:13px; color:var(--patina); text-align:center}

/* ---------- MC/DOT readiness check ---------- */
.ready-grid{margin-top:24px; display:grid; gap:12px}
.ready-item{
  display:flex; align-items:center; gap:14px; cursor:pointer; position:relative;
  background:var(--bone); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; min-height:56px; user-select:none;
}
.ready-item input{position:absolute; opacity:0; width:1px; height:1px}
.ready-box{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  border:2px solid var(--taupe); background:#fff; position:relative; transition:.15s;
}
.ready-item input:checked + .ready-box{background:var(--brass); border-color:var(--brass)}
.ready-box svg{position:absolute; inset:0; margin:auto; width:18px; height:18px; color:var(--pine-deep); opacity:0; transition:.15s}
.ready-item input:checked + .ready-box svg{opacity:1}
.ready-item .lbl{font-size:var(--step-body); color:var(--ink); font-weight:500}
.ready-item input:focus-visible + .ready-box{box-shadow:0 0 0 3px rgba(196,154,78,.45)}
.ready-meter{margin-top:22px; background:var(--pine); color:var(--bone); border-radius:var(--r-md); padding:18px 20px}
.ready-meter .label{font-family:"Sora",sans-serif; font-weight:700; font-size:var(--step-h3); color:var(--bone)}
.ready-meter .label b{color:var(--brass)}
.ready-bar{margin-top:12px; height:12px; border-radius:999px; background:var(--pine-deep); overflow:hidden}
.ready-bar span{display:block; height:100%; width:0; background:var(--brass); border-radius:999px; transition:width .25s ease}

/* ---------- sample rate confirmation (proof) ---------- */
.ratecon{
  margin-top:26px; background:var(--bone); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
}
.ratecon .rc-head{
  background:var(--pine); color:var(--bone); padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.1em;
}
.ratecon .rc-head .tag{background:var(--brass); color:var(--pine-deep); padding:3px 9px; border-radius:6px; font-size:11px; letter-spacing:.12em}
.ratecon .rc-body{padding:6px 18px 16px}
.rc-row{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-family:"JetBrains Mono",monospace; font-size:13px}
.rc-row:last-child{border-bottom:none}
.rc-row .k{color:var(--taupe); text-transform:uppercase; letter-spacing:.06em}
.rc-row .v{color:var(--ink); font-weight:700; text-align:right}
.rc-row.rc-total .v{color:var(--brass-deep); font-size:15px}
.ratecon-cap{margin-top:14px; font-size:13px; color:#CBD3C9}

/* ---------- keyboard focus visibility ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,label.ready-item:focus-within{
  outline:2px solid var(--brass); outline-offset:2px;
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:74px}

/* ---------- fade-up animation ---------- */
.fade{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.fade.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .btn-stack{flex-direction:row}
  .footer-links{flex-direction:row; flex-wrap:wrap}
  .footer-links a{flex:1}
}

/* short / landscape phones: trim vertical padding so the hero never clips */
@media (max-height:520px){
  :root{ --pad-section:32px; }
}

@media (prefers-reduced-motion:reduce){
  .fade{opacity:1 !important; transform:none !important; transition:none}
  *{scroll-behavior:auto !important}
}

/* ============================================================
   BLOG / RESOURCES + CAPTURE  (added for blog section)
   ============================================================ */

/* nav link in the top bar */
.topbar .nav{display:flex; align-items:center; gap:clamp(12px,4vw,20px)}
.nav-link{
  font-family:"Sora",sans-serif; font-weight:600; font-size:15px; color:var(--pine);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.nav-link:active{color:var(--brass-deep)}

/* page header for blog (mirrors hero, shorter) */
.page-head{background:var(--pine-deep); color:var(--bone)}
.page-head .wrap{padding-top:clamp(40px,8vw,64px); padding-bottom:clamp(36px,7vw,56px)}
.page-head .eyebrow{color:var(--patina)}
.page-head h1{font-size:var(--step-hero); margin-top:14px; color:var(--bone); font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.08; letter-spacing:-.01em}
.page-head p{margin-top:14px; color:#D6DDD3; font-size:var(--step-body)}
.breadcrumb{font-family:"JetBrains Mono",monospace; font-size:var(--step-label); letter-spacing:.12em; text-transform:uppercase; color:var(--patina)}
.breadcrumb a{color:var(--patina); text-decoration:none}
.breadcrumb a:active{color:var(--brass)}

/* post list cards */
.post-list{display:grid; gap:var(--gap); margin-top:8px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr))}
.post-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,5vw,26px); box-shadow:var(--shadow);
  text-decoration:none; color:var(--ink);
}
.post-card:active{border-color:var(--brass)}
.post-card .pc-meta{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}
.post-card h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:var(--step-h3); color:var(--pine); line-height:1.18}
.post-card p{color:var(--slate); font-size:15px}
.post-card .pc-go{margin-top:auto; font-family:"Sora",sans-serif; font-weight:600; font-size:15px; color:var(--brass-deep)}

/* article / post body */
.post{max-width:680px}
.post .post-meta{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--patina)}
.prose{margin-top:28px}
.prose > p{margin-top:18px; color:var(--ink); font-size:var(--step-body); line-height:1.65}
.prose h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:var(--step-h2); color:var(--pine); margin-top:40px; line-height:1.15}
.prose h3{font-family:"Sora",sans-serif; font-weight:700; font-size:var(--step-h3); color:var(--pine); margin-top:26px}
.prose ul,.prose ol{margin-top:16px; padding-left:22px; color:var(--ink); font-size:var(--step-body); line-height:1.6}
.prose li{margin-top:8px}
.prose a{color:var(--brass-deep); text-decoration:underline; text-underline-offset:2px; font-weight:600}
.prose strong{font-weight:700}
.faq-q{font-family:"Sora",sans-serif; font-weight:700; color:var(--pine); margin-top:22px; font-size:var(--step-h3)}
.faq-a{margin-top:8px; color:var(--slate); font-size:var(--step-body); line-height:1.6}

/* related posts */
.related{margin-top:44px; border-top:1px solid var(--line); padding-top:28px}
.related .eyebrow{margin-bottom:14px}
.related-list{display:grid; gap:12px}
.related-list a{
  display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px;
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 18px; text-decoration:none; color:var(--pine);
  font-family:"Sora",sans-serif; font-weight:600; font-size:16px;
}
.related-list a:active{border-color:var(--brass)}
.related-list a span{color:var(--brass-deep); flex:0 0 auto}

/* ---------- capture component (paying more than 5%?) ---------- */
.capture{
  margin:36px 0; background:var(--pine); color:var(--bone);
  border-radius:var(--r-lg); padding:clamp(24px,6vw,36px); box-shadow:var(--shadow);
}
.capture .eyebrow{color:var(--brass)}
.capture h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:var(--step-h2); color:var(--bone); margin-top:10px; line-height:1.12}
.capture .cap-sub{margin-top:12px; color:#D6DDD3; font-size:var(--step-body)}
.capture form{margin-top:22px; display:grid; gap:14px}
.capture .cfield > label,.capture .clegend{display:block; font-family:"Sora",sans-serif; font-weight:600; font-size:14px; color:var(--bone); margin-bottom:7px}
.capture input[type=text],.capture input[type=email],.capture select{
  width:100%; min-height:54px; padding:0 16px; font-size:17px; font-family:inherit;
  border:1.5px solid var(--patina); border-radius:var(--r-md);
  background:var(--pine-deep); color:var(--bone);
}
.capture select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E9C8F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.capture input::placeholder{color:#7e9a92}
.capture input:focus,.capture select:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(196,154,78,.25)}
.capture .radio-row{display:flex; gap:10px; flex-wrap:wrap}
.capture .radio-opt{
  flex:1 1 120px; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 16px; cursor:pointer; user-select:none;
  border:1.5px solid var(--patina); border-radius:var(--r-md);
  font-family:"Sora",sans-serif; font-weight:600; font-size:16px; color:var(--bone);
}
.capture .radio-opt input{position:absolute; opacity:0; width:1px; height:1px}
.capture .radio-opt:has(input:checked){background:var(--brass); color:var(--pine-deep); border-color:var(--brass)}
.capture .radio-opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(196,154,78,.45)}
.capture button[type=submit]{
  margin-top:4px; min-height:56px; width:100%; cursor:pointer;
  background:var(--brass); color:var(--pine-deep); border:none; border-radius:var(--r-pill);
  font-family:"Sora",sans-serif; font-weight:700; font-size:18px;
}
.capture button[type=submit]:active{background:var(--brass-deep)}
.capture .cap-fine{margin-top:6px; font-size:13px; color:var(--patina)}
.capture .cap-thanks{display:none; text-align:center; padding:14px 0}
.capture .cap-thanks h2{margin-top:6px}
.capture.is-done form{display:none}
.capture.is-done .cap-thanks{display:block}
.capture .cap-thanks .tick{
  width:54px; height:54px; border-radius:50%; background:var(--brass); color:var(--pine-deep);
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px;
}

/* ============================================================
   ANNOUNCEMENT BAR + POP-UP MODAL + OFFER  (free-loads update)
   ============================================================ */

/* announcement ribbon (JS-injected at top of <body>) */
.announce{background:var(--brass); color:var(--pine-deep)}
.announce-in{max-width:600px; margin-inline:auto; padding:9px var(--pad-x);
  display:flex; align-items:center; gap:12px; justify-content:space-between; min-width:0}
.announce p{margin:0; font-family:"Sora",sans-serif; font-weight:600; font-size:clamp(13px,3.4vw,15px); line-height:1.3}
.announce-cta{background:none; border:none; cursor:pointer; padding:4px 2px; min-height:34px;
  font-family:"Sora",sans-serif; font-weight:800; font-size:inherit; color:var(--pine-deep);
  text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.announce-x{background:none; border:none; cursor:pointer; flex:0 0 auto;
  width:36px; height:36px; border-radius:8px; color:var(--pine-deep); font-size:24px; line-height:1}
.announce-x:active{background:rgba(6,48,44,.12)}

/* offer lines */
.hero-offer{margin-top:12px; font-family:"Sora",sans-serif; font-weight:700; font-size:var(--step-body); color:var(--brass)}
.calc-offer{margin-top:16px; font-family:"Sora",sans-serif; font-weight:700; font-size:15px; color:var(--brass-deep); text-align:center}

/* end-of-post CTA (opens modal; replaces the old fixed form) */
.post-cta{margin-top:38px; text-align:center}
.see-rate{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:0 28px; cursor:pointer;
  background:var(--brass); color:var(--pine-deep); border:none; border-radius:var(--r-pill);
  font-family:"Sora",sans-serif; font-weight:700; font-size:17px;
}
.see-rate:active{background:var(--brass-deep)}

/* modal */
body.modal-lock{overflow:hidden}
.modal-backdrop{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(4,32,28,.66); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
.modal-backdrop.is-open{opacity:1}
.modal-backdrop[hidden]{display:none}
.modal-dialog{
  position:relative; width:100%; max-width:440px; margin:0;
  max-height:90vh; max-height:calc(100dvh - 32px); overflow:auto;
  transform:translateY(14px); transition:transform .22s ease;
}
.modal-backdrop.is-open .modal-dialog{transform:none}
.modal-backdrop.no-anim,.modal-backdrop.no-anim .modal-dialog{transition:none}
.modal-x{
  position:absolute; top:10px; right:10px; width:40px; height:40px; cursor:pointer;
  background:rgba(244,241,233,.12); border:none; border-radius:50%;
  color:var(--bone); font-size:24px; line-height:1;
}
.modal-x:active{background:rgba(244,241,233,.24)}
.modal-x:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

@media (max-width:430px){
  h1,h2,h3{text-wrap:normal}
  .topbar .nav{gap:8px}
  .call-pill{padding-inline:14px}
  .sticky-bar{gap:8px; padding-inline:8px}
  .sticky-bar a{font-size:14px; padding-inline:8px}
  .sticky-bar .sb-wa{font-size:0}
  .sticky-bar .sb-wa::after{content:"WhatsApp"; font-size:14px}
}

@media (max-width:360px){
  .topbar .nav-link{display:none}
  .brand .name{font-size:18px}
  .btn{font-size:16px; padding-inline:16px}
  .announce-in{gap:8px}
  .announce-cta{white-space:normal}
  .announce-x{width:32px; height:32px}
}

/* Sticky action-bar clearance lives on the PINE footer (home only) so it never
   shows as a paper gap below the footer. Blog pages have no bar, so no gap. */
body:has(.sticky-bar) .footer .wrap{ padding-bottom:calc(48px + 76px + env(safe-area-inset-bottom)); }