/* Homepage below the question: the explained systems as diagram tiles (the
   tile rules live in question-bank.css), one line on Free and Premium, and who
   runs the site. Loaded after styles.css, whose .home-about rules still fade
   this section out while a quiz runs. */

.home-page .home-about { background: #f4f7fa; }

.home-page .home-study {
  width: min(1160px, 100% - 3rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.75rem, 5vw, 4rem);
}

.home-page .home-study-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.home-page .home-study-head h2 { flex: 1 1 auto; }
.home-page .home-study-head a,
.home-page .home-plans-link {
  color: #2369d8;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}
.home-page .home-study-head a:hover,
.home-page .home-study-head a:focus-visible,
.home-page .home-plans-link:hover,
.home-page .home-plans-link:focus-visible { color: #1b4f8f; text-decoration: underline; }

/* styles.css styles every h3 and link inside .home-about; the tiles keep
   the Question bank page's look. */
.home-page .home-study .qb-tile-body h3 { font-size: 1.0625rem; font-weight: 700; }
.home-page .home-study .qb-tile-body h3 a { color: #13283c; }
.home-page .home-study .qb-free { color: #2369d8; }
.home-page .home-study .qb-free:hover,
.home-page .home-study .qb-free:focus-visible { color: #1b4f8f; }

.home-page .home-plans {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #dce3ea;
}
.home-page .home-plans p {
  flex: 1 1 520px;
  color: #3f5568;
  font-size: 1rem;
  line-height: 1.5;
}
.home-page .home-plans strong { color: #13283c; font-weight: 700; }
.home-page .home-plans-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
}

.home-page .home-study-meta {
  margin-top: 0.5rem !important;
  color: #536577;
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 599px) {
  .home-page .home-study { width: auto; padding-inline: 1rem; }
  .home-page .home-study-head h2 { font-size: 1.25rem; }
  .home-page .home-study .qb-tile-body h3 { font-size: 0.95rem; }
  .home-page .home-plans { margin-top: 2rem; padding-top: 1.25rem; }
}