/* ============================================================
   home.css — HOMEPAGE-ONLY COMPONENTS
   Load this ONLY on the homepage (after style.css).

   Every selector is namespaced .home-* (or scoped under .home)
   so nothing here can collide with the shared component styles
   in style.css. All color / type / spacing reads from the
   existing :root tokens, so the homepage re-themes (light/dark)
   automatically with the rest of the site.
   ============================================================ */

.home { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem 4rem; }

/* Section rhythm + shared eyebrow/heading treatment ---------- */
.home-section { padding-top: 4rem; }
.home-eyebrow {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--warm-ink);
  margin: 0 0 0.6rem;
}
.home-h2 {
  font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.18;
  color: var(--text-primary); margin: 0 0 0.75rem; letter-spacing: -0.01em;
}
.home-lede {
  font-size: 17px; line-height: 1.6; color: var(--text-muted);
  margin: 0 0 2rem; max-width: 620px;
}
.home-section--center { text-align: center; }
.home-section--center .home-lede { margin-left: auto; margin-right: auto; }

/* Reusable "read more" arrow link --------------------------- */
.home-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.home-more i { font-size: 16px; transition: transform .15s ease; }
.home-more:hover i { transform: translateX(3px); }

/* ============================================================
   HERO — radial green/amber wash, headline + CTAs
   ============================================================ */
.home-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%),
    radial-gradient(110% 90% at 92% 100%, color-mix(in srgb, var(--warm) 16%, transparent) 0%, transparent 50%),
    var(--bg-callout-strong);
  margin-top: 2rem;
}
.home-hero__inner { padding: 3.5rem 2.75rem; }
.home-hero__cat {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--warm-ink); margin: 0 0 1rem;
}
.home-hero__title {
  font-family: var(--font-head); font-weight: 700; font-size: 42px; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 1.1rem; max-width: 18ch;
}
.home-hero__title em { font-style: normal; color: var(--accent); }
.home-hero__sub {
  font-size: 18px; line-height: 1.6; color: var(--text-body); margin: 0 0 1.9rem; max-width: 34rem;
}
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.home-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  border-radius: var(--radius-md); padding: 12px 22px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.home-btn--primary { background: var(--accent); color: #fff; }
.home-btn--primary:hover { opacity: 0.9; }
.home-btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.home-btn--ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.home-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   GEO-IN-BRIEF — light icon row (newcomer explainer)
   ============================================================ */
.home-brief__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem;
}
.home-brief__cell { text-align: center; padding: 0 0.5rem; }
.home-brief__ico {
  width: 46px; height: 46px; margin: 0 auto 0.85rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-callout-strong); border: 1px solid var(--warm-soft);
}
.home-brief__ico i { font-size: 22px; color: var(--accent); }
.home-brief__cell h3 {
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 0.35rem;
}
.home-brief__cell p { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ============================================================
   SECTION GRID — routing spine (icon + label + blurb)
   ============================================================ */
.home-slist {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.25rem;
  margin-top: 2rem;
}
.home-srow { display: flex; gap: 1rem; text-decoration: none; }
.home-srow__ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-callout-strong); border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease;
}
.home-srow__ico i { font-size: 21px; color: var(--accent); }
.home-srow:hover .home-srow__ico { border-color: var(--accent-soft); }
.home-srow__txt h3 {
  font-family: var(--font-head); font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 0.3rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.home-srow__txt h3 i { font-size: 15px; color: var(--accent); opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; }
.home-srow:hover .home-srow__txt h3 i { opacity: 1; transform: translateX(0); }
.home-srow__txt p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.home-srow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-md); }

/* ============================================================
   OUTCOMES BAND — full-bleed colored row; carousel on mobile
   ============================================================ */
.home-band {
  margin: 4rem calc(50% - 50vw) 0; padding: 3.25rem calc(50vw - 50%);
  background: var(--bg-callout-strong);
}
.home-band__head { text-align: center; margin-bottom: 2rem; }
.home-band__track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.home-ocard {
  background: var(--bg-surface); border: 0.5px solid var(--border);
  border-top: 2px solid var(--warm-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1.5rem 1.4rem;
}
.home-ocard__n {
  font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--warm-ink);
  margin: 0 0 0.7rem;
}
.home-ocard h3 {
  font-family: var(--font-head); font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 0.45rem; line-height: 1.3;
}
.home-ocard p { font-size: 14px; line-height: 1.6; color: var(--text-body); margin: 0; }

/* ============================================================
   FEATURED GUIDES — cards floating over a gray band
   ============================================================ */
.home-feat__band {
  background: var(--bg-callout); border-radius: var(--radius-lg);
  padding: 2.25rem 2rem 0;
}
.home-feat__intro {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem;
  margin-bottom: 1.75rem;
}
.home-feat__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  transform: translateY(2rem); margin-top: -2rem;
}
.home-fcard {
  background: var(--bg-surface); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.3rem 1.4rem 1.4rem;
  text-decoration: none; box-shadow: 0 6px 20px rgba(31,42,38,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.home-fcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(31,42,38,0.1); }
.home-fcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-fcard__cat {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm-ink); margin: 0 0 0.5rem;
}
.home-fcard h3 {
  font-family: var(--font-head); font-size: 17px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 0.4rem; line-height: 1.3;
}
.home-fcard p { font-size: 14px; line-height: 1.55; color: var(--text-body); margin: 0 0 1rem; flex: 1; }
.home-fcard__go {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--accent);
}
.home-fcard__go i { font-size: 15px; transition: transform .15s ease; }
.home-fcard:hover .home-fcard__go i { transform: translateX(3px); }
.home-feat { margin-bottom: 2rem; }

/* ============================================================
   AUTHORITY FEATURE — symmetrical rounded tile, text only
   ============================================================ */
.home-feature {
  position: relative; margin-top: 4rem;
  background: var(--bg-warm-soft); border-radius: var(--radius-lg);
  padding: 2.75rem;
}
.home-feature__inner { max-width: 640px; }
.home-feature__title {
  font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1.22;
  color: var(--text-primary); margin: 0.5rem 0 0.9rem; letter-spacing: -0.01em;
}
.home-feature__body { font-size: 16px; line-height: 1.65; color: var(--text-body); margin: 0 0 1.5rem; }
.home-feature__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.home-feature__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.home-feature__list i { font-size: 18px; color: var(--warm); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .home-hero__inner { padding: 2.25rem 1.5rem; }
  .home-hero__title { font-size: 32px; }
  .home-brief__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .home-slist { grid-template-columns: repeat(2, 1fr); }
  .home-feat__cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home-h2 { font-size: 25px; }
  .home-hero__title { font-size: 28px; }
  .home-brief__grid { grid-template-columns: 1fr 1fr; }
  .home-slist { grid-template-columns: 1fr; }
  .home-feat__intro { grid-template-columns: 1fr; }

  /* Outcomes band → horizontal swipe carousel */
  .home-band__track {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 0.75rem;
    margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .home-band__track::-webkit-scrollbar { display: none; }
  .home-ocard { flex: 0 0 78%; scroll-snap-align: start; }
  .home-band__hint {
    display: block; text-align: center; font-size: 12px; color: var(--text-faint);
    font-family: var(--font-head); margin-top: 0.5rem;
  }
}
.home-band__hint { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .home-reveal { opacity: 0; transform: translateY(10px); animation: homeUp .55s ease forwards; }
}
@keyframes homeUp { to { opacity: 1; transform: none; } }