.fg-section { margin-bottom: 4.5rem; }
.fg-section-header { display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:2.5rem;padding:1.5rem 1.75rem;background:#f8fafc;border-radius:12px;border-left:4px solid var(--sky); }
.fg-section-icon { font-size:2.75rem;line-height:1;flex-shrink:0; }
.fg-section-title { font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:.45rem; }
.fg-section-desc { font-size:.875rem;color:var(--charcoal);line-height:1.7;opacity:.8; }
.fg-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.fg-grid .card { display:flex;flex-direction:column;gap:1rem; }

/* ── FIELD GUIDE CAROUSEL — shown instead of the static grid once a
   section has more than 3 guides, same scroll-snap pattern as the
   homepage blog carousel; arrow buttons reuse .tm-btn/.tm-controls
   from testimonials.css ─────────────────────────────────────── */
.fg-carousel { position: relative; }
.fg-grid--carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* overflow-x: auto forces overflow-y to auto too (per spec, since it's
     not left as visible), which was clipping the .card__flag badge
     (it pokes above the card via top:-1px + translateY(-50%)) and the
     hover-lift shadow. Padding gives them room; the equal negative
     margin keeps the track's outer position identical to the static
     .fg-grid so section spacing doesn't shift.
     Top padding specifically needs to clear the badge's own upward
     protrusion (~0.6rem, from translateY(-50%) of its own box) PLUS
     .card:hover's -4px lift on top of that -- 0.75rem covered the
     resting state but was clipped the instant a card was hovered. */
  padding: 1.25rem 0.5rem 1.25rem;
  margin: -1.25rem -0.5rem -1.25rem;
}
.fg-grid--carousel::-webkit-scrollbar { display: none; }
.fg-grid--carousel .card {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
}
.fg-carousel .tm-controls { margin-top: 1.5rem; }
.fg-cta { display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.25rem;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s;border:none;font-family:inherit;text-decoration:none; }
.fg-cta--free { background:var(--sky);color:white; } .fg-cta--free:hover { background:#009fd4; }
.fg-cta--soon { background:#f0f4f8;color:var(--mid);cursor:default; }
#fg-modal { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center; }
.fg-modal-inner { background:white;border-radius:16px;padding:2.5rem;max-width:440px;width:90%; }
.fg-modal-inner h3 { margin-bottom:.5rem;color:var(--navy); }
.fg-modal-inner p { font-size:.85rem;color:var(--mid);margin-bottom:1.5rem; }
@media(max-width:768px){ .fg-grid{grid-template-columns:minmax(0,1fr)} .fg-grid--carousel .card{flex-basis:100%} }
@media(max-width:1024px){ .fg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fg-grid--carousel .card{flex-basis:calc((100% - 1.5rem) / 2)} }