/* MD Moving — SEO landing page layout.
   Loaded AFTER css/style.css and depends on its :root tokens (--navy, --sky, --kraft,
   --paper, --radius, --maxw, ...). This file adds only what the landing pages need on
   top of the existing site styles; it never redefines a brand token, so a brand change
   in style.css flows through here automatically. NO RED anywhere. */

/* ---------- Breadcrumb ---------- */
.seo-crumb{
  background:var(--navy);
  color:var(--muted-dark);
  font-size:13px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.seo-crumb ol{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.seo-crumb li{display:flex;align-items:center;gap:6px;}
.seo-crumb li+li::before{content:"/";opacity:.45;}
.seo-crumb a{color:var(--sky-light);text-decoration:none;}
.seo-crumb a:hover{text-decoration:underline;}
.seo-crumb [aria-current="page"]{color:#fff;font-weight:600;}

/* ---------- Hero ---------- */
.seo-hero{
  background:linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
  padding:54px 0 60px;
}
.seo-hero .eyebrow{
  display:inline-block;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kraft);
  margin-bottom:14px;
}
.seo-hero h1{
  font-size:clamp(28px,5vw,46px);
  margin:0 0 18px;
  max-width:19ch;
}
.seo-hero .seo-intro{
  font-size:clamp(16px,2.1vw,19px);
  color:#DCE6F5;
  max-width:62ch;
  margin:0 0 26px;
  line-height:1.6;
}
.seo-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* Rate chip — the positioning, stated up front. Figures hydrate via data-mdm. */
.rate-chip{
  display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:rgba(79,184,231,.12);
  border:1px solid rgba(79,184,231,.4);
  border-radius:var(--radius);
  padding:12px 16px;
  margin:0 0 24px;
  font-size:15px;color:#EAF4FD;
}
.rate-chip strong{
  font-family:'Archivo Black',Arial,sans-serif;
  font-size:21px;color:#fff;letter-spacing:-.01em;
}
.rate-chip .rate-note{color:var(--muted-dark);font-size:13px;}

/* ---------- Body ---------- */
.seo-body{padding:56px 0;}
.seo-body .seo-section{max-width:74ch;margin:0 auto 42px;}
.seo-body .seo-section:last-child{margin-bottom:0;}
.seo-body h2{
  font-size:clamp(21px,3vw,29px);
  color:var(--navy);
  margin:0 0 16px;
}
.seo-body p{font-size:16.5px;line-height:1.72;color:#22314F;}
.seo-body ul{margin:0 0 1.15em;padding-left:22px;}
.seo-body li{font-size:16.5px;line-height:1.66;color:#22314F;margin-bottom:.5em;}
.seo-body strong{color:var(--navy);font-weight:700;}
.seo-body [data-mdm]{font-variant-numeric:tabular-nums;font-weight:700;}

/* ---------- FAQ ---------- */
.seo-faq{background:var(--paper);border-top:1px solid #E2E9F3;padding:54px 0;}
.seo-faq .section-head{text-align:center;margin-bottom:32px;}
.seo-faq-list{max-width:74ch;margin:0 auto;}
.seo-faq-item{
  background:#fff;
  border:1px solid #E2E9F3;
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.seo-faq-item h3{font-size:17.5px;margin:0 0 9px;color:var(--navy);}
.seo-faq-item p{margin:0;font-size:16px;line-height:1.66;color:#3A4A66;}

/* ---------- Related links (hub + spoke mesh) ---------- */
.seo-related{background:#fff;border-top:1px solid #E2E9F3;padding:50px 0;}
.seo-related h2{font-size:22px;margin:0 0 6px;color:var(--navy);}
.seo-related .rel-sub{color:var(--muted-light);font-size:15px;margin:0 0 22px;}
.seo-related + .seo-related{border-top:1px solid #EEF2F8;}
.rel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
}
.rel-grid a{
  display:block;
  padding:12px 15px;
  background:var(--paper);
  border:1px solid #E2E9F3;
  border-radius:var(--radius-sm);
  color:var(--navy);
  text-decoration:none;
  font-size:14.5px;font-weight:600;
  transition:border-color .15s ease,transform .15s ease;
}
.rel-grid a:hover{border-color:var(--sky);transform:translateY(-1px);}

/* ---------- CTA band ---------- */
.seo-cta{
  background:linear-gradient(170deg,var(--navy-2) 0%,var(--navy) 100%);
  color:#fff;text-align:center;padding:56px 0;
}
.seo-cta h2{font-size:clamp(23px,3.4vw,33px);margin:0 0 12px;}
.seo-cta p{color:#C9D6EA;max-width:56ch;margin:0 auto 24px;font-size:16.5px;}
.seo-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .seo-hero{padding:38px 0 42px;}
  .seo-body{padding:40px 0;}
  .seo-hero-actions .btn,.seo-cta-actions .btn{width:100%;text-align:center;}
  .rel-grid{grid-template-columns:1fr 1fr;}
  .rate-chip{width:100%;}
}
@media (max-width:360px){
  .rel-grid{grid-template-columns:1fr;}
}