/* ============================================================
   Readarific Home Page  —  v1.17.0
   Matches store.readarific.com (production) exactly.

   Measurements taken from production:
     Hero    padding 104px all sides, bg #133642
     Content padding 104px all sides, bg #ffffff, full-width (no container)
     H1/H2   40 px, Inter 400, no text-transform
     Body p  Inter 400, line-height 1.55, color #111111, margin 0
   ============================================================ */

/* ── Shared layout ─────────────────────────────────────────── */
.rfc-home-wrapper {
  font-family: Inter, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  color: #111111;
}

/* Inner container used only in the hero to constrain text width.
   Production hero inner group: ~620 px wide, centred.
   The content section overrides this to full-width below. */
.rfc-home-container {
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════
   HERO  —  dark navy #133642 background
   104 px padding matches the TT4 global-padding used on production.
   ══════════════════════════════════════════════════════════ */
.rfc-home-hero {
  background-color: #133642;
  padding: 104px;
  text-align: center;
}

/* Eyebrow / tagline – green */
.rfc-home-tagline {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6abf59;
  line-height: 1.45;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}

/* H1 — matches production: 40 px, weight 400, pure white */
.rfc-home-title {
  font-size: 40px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 20px;
}

/* Lead paragraph — pure white, regular weight */
.rfc-home-lead {
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.75;
  margin: 0 0 12px;
}

/* Stats line — pure white */
.rfc-home-stat {
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.6;
  margin: 0 0 32px;
}

/* CTA button row */
.rfc-home-cta-wrap {
  margin: 0 0 28px;
}

/* "Purchase Here" button – light bg on dark hero */
.rfc-home-cta-btn {
  display: inline-block;
  background-color: #f4f4f4;
  color: #133642 !important;
  border-radius: 4px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  line-height: 1.35;
}

.rfc-home-cta-btn:hover,
.rfc-home-cta-btn:focus {
  background-color: #e2e2e2;
  color: #133642 !important;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ClassWallet notice — near-white (#f9f9f9) matching production */
.rfc-home-notice {
  font-size: 0.875rem;
  font-weight: 400;
  color: #f9f9f9;
  line-height: 1.6;
  margin: 0;
}

.rfc-home-notice strong {
  color: inherit;
}

.rfc-home-notice a {
  color: #6abf59;
  text-decoration: underline;
}

.rfc-home-notice a:hover {
  color: #88d077;
}

/* ══════════════════════════════════════════════════════════
   CONTENT SECTION
   Full-width to match production (no 860 px container).
   White background (#ffffff) and 104 px padding all sides.
   ══════════════════════════════════════════════════════════ */
.rfc-home-content {
  background-color: #ffffff;
  padding: 104px;
}

/* Override container width: content is full-width, not 620 px */
.rfc-home-content .rfc-home-container {
  max-width: none;
  margin: 0;
}

/* Logo — left-aligned matching production (textAlign: start) */
.rfc-home-logo {
  text-align: left;
  margin-bottom: 32px;
}

.rfc-home-logo img {
  max-width: 300px;
  height: auto;
  display: inline-block;
}

/* Body text — #111111, line-height 1.55, no bottom margin (matches production) */
.rfc-home-content p {
  font-size: 1rem;
  line-height: 1.55;
  color: #111111;
  margin: 0;
}

.rfc-home-content a:not(.rfc-social-link) {
  color: #133642;
}

.rfc-home-content a:not(.rfc-social-link):hover {
  color: #6abf59;
}

/* Section headings — 40 px, weight 400, no uppercase (matches production h2) */
.rfc-home-content h2 {
  font-size: 40px;
  font-weight: 400;
  color: #111111;
  line-height: 1.3;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

/* Spacer between content blocks */
.rfc-home-spacer {
  height: 50px;
}

/* ══════════════════════════════════════════════════════════
   SOCIAL LINKS
   ══════════════════════════════════════════════════════════ */
.rfc-home-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 32px 0 0;
}

.rfc-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #133642 !important;
  color: #ffffff !important;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.25s ease;
  flex-shrink: 0;
}

.rfc-social-link svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* Hover: green background + grow by 10px (44 → 54px = scale 1.227) */
.rfc-social-link:hover,
.rfc-social-link:focus {
  background-color: #6abf59 !important;
  color: #ffffff !important;
  transform: scale(1.227);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .rfc-home-hero {
    padding: 48px 24px;
  }

  .rfc-home-content {
    padding: 48px 24px;
  }

  .rfc-home-content h2 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .rfc-home-hero {
    padding: 32px 16px;
  }

  .rfc-home-content {
    padding: 32px 16px;
  }
}