/* ==========================================================================
   SEO Guide page only. Load after site.css:
     <link rel="stylesheet" href="/assets/css/seo-guide.css?v=1">
   Kept out of site.css on purpose, so the other pages (and their ?v=) are
   untouched. Uses site.css tokens only; no inline styles anywhere.
   ========================================================================== */

/* Hero: text on the left, branded banner on the right. */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-split .lead { max-width: 560px; }
.hero-art { width: 100%; max-width: 560px; height: auto; justify-self: end; }

/* "A real page from the guide": explanation on the left, the page on the right. */
.sample {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.sample .lead { max-width: 520px; }
.sample .checks { margin-top: 1.5rem; }
.sample-art { width: 100%; max-width: 480px; height: auto; justify-self: center; }

/* Buttons inside cards sit on their own line with breathing room. */
.grid .card p .btn { margin-top: .5rem; }

@media (max-width: 860px) {
  .hero-split, .sample { grid-template-columns: 1fr; }
  .hero-art { justify-self: start; }
}

/* ---------- Wide hero card: headline, paragraph and artwork in one banner ---------- */
.guide-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 5vw, 56px); border-radius: 28px;
  background: linear-gradient(135deg, #1E448C 0%, #16306B 100%); box-shadow: var(--shadow-lg);
}
.guide-hero::before {
  content: ""; position: absolute; z-index: -1; right: -8%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 168, 77, .45) 0%, rgba(18, 168, 77, 0) 70%);
}
.guide-hero h1 { color: #fff; }
.guide-hero .eyebrow { color: #CFE0FF; }
.guide-hero .lead { color: rgba(255, 255, 255, .88); max-width: 560px; }
.guide-hero .btn-primary { background: #fff; color: #16306B; box-shadow: none; }
.guide-hero .btn-primary:hover { background: #E3F6EA; color: #16306B; }
.guide-hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.guide-hero .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.guide-hero .receive { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .92); }
.guide-hero .receive b { color: #fff; }
.guide-art { width: 100%; max-width: 480px; height: auto; justify-self: center; }
@media (max-width: 860px) { .guide-hero { grid-template-columns: 1fr; } }