@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   Feature-page depth sections: FAQ list and related-module cards.

   Also narrows the prose measure. The live pages run a 760 px column at
   16 px — about 95 characters per line, well past the 45–75 band. 620 px
   lands near 70.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── readable measure ── */
.h2-module-text { max-width: 620px; }
.h2-module-text p { max-width: 620px; }

/* ── FAQ ── */
.h2-faq { margin: 28px 0 0; }
.h2-faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--gray-100, #E8E8ED);
}
.h2-faq-item:last-child { border-bottom: 1px solid var(--gray-100, #E8E8ED); }

.h2-faq dt { margin: 0 0 8px; }
.h2-faq dt h3 {
  margin: 0;
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--black, #1D1D1F);
}
.h2-faq dd {
  margin: 0;
  font-size: 15.5px; line-height: 1.66;
  color: var(--gray-600, #6E6E73);
  max-width: 620px;
}

/* ── related modules ── */
.h2-rel {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  max-width: 820px;
}
.h2-rel-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 20px;
  background: var(--white, #FAFAFA);
  border: 1px solid var(--gray-100, #E8E8ED);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.h2-rel-card:hover {
  border-color: var(--accent-medium, rgba(27,67,50,.2));
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.06);
}
.h2-rel-card:focus-visible { outline: 2px solid var(--accent, #1B4332); outline-offset: 2px; }
.h2-rel-t {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--black, #1D1D1F);
}
.h2-rel-t svg { transition: transform .2s ease; flex: none; }
.h2-rel-card:hover .h2-rel-t svg { transform: translateX(3px); }
.h2-rel-d { font-size: 13.5px; line-height: 1.55; color: var(--gray-600, #6E6E73); }

@media (max-width: 900px) {
  .h2-rel { grid-template-columns: 1fr; max-width: none; }
  .h2-faq dt h3 { font-size: 16px; }
  .h2-faq dd { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .h2-rel-card, .h2-rel-t svg { transition: none !important; }
  .h2-rel-card:hover { transform: none; }
}

/* ── the card block is not prose ──────────────────────────────────────
   .h2-module-text caps the measure at 620px for readability, but the
   related-module grid lives inside it and inherited that cap, so three
   cards wrapped 2+1. Cards are scanned, not read: they get the full
   820px the grid was designed for. */
.h2-module-text--wide { max-width: 820px; }
.h2-module-text--wide > p { max-width: 620px; }

/* The module showcase needs the full section width — it is built on a
   1120 unit base. .h2-module-text caps at 620 for readability, so the
   showcase sits beside it, not inside it. */
.h2-msc-slot { max-width: 1120px; margin: 34px auto 0; }
@media (max-width: 900px) {
  .h2-msc-slot { margin-top: 22px; }
}