/* Homepage layout built on the shared cards, buttons and accordion. */
.home-page section[id] { scroll-margin-top: 92px; }
.section-anchor { display: block; scroll-margin-top: 92px; }
.hero-home { padding-top: 54px; padding-bottom: 56px; }
.hero-home .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 48px; }
.hero-home .eyebrow { line-height: 1.5; }
.hero-home .eyebrow span { flex-shrink: 0; }
.hero-home h1 { font-size: clamp(34px, 3.4vw, 48px); text-wrap: balance; margin: 24px 0 32px; }
.hero-intro { margin: 0 0 24px; color: var(--purple); font-size: 22px; font-weight: 650; line-height: 1.45; }
.hero-description { margin: 0; color: var(--muted); font-size: 17px; font-weight: 450; line-height: 1.7; }
.hero-home .hero-actions { gap: 10px; margin-top: 26px; }
.hero-home .hero-actions .button { padding: 14px 16px; text-align: center; }
.home-trial-note { margin: 14px 0 0; color: #51465f; font-size: 13px; line-height: 1.55; }
.plan-examples .content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.plan-examples .content-card { display: flex; flex-direction: column; }
.plan-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: white; }
.plan-examples .content-info { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.plan-examples .content-info > span { font-size: 12px; }
.plan-examples .content-info h3 { font-size: 20px; line-height: 1.4; margin: 12px 0; }
.plan-examples .content-info p { font-size: 13px; line-height: 1.65; margin: 0 0 20px; }
.plan-examples .content-info > div { margin-top: auto; padding-top: 18px; }
.plan-examples .content-link { font-size: 14px; gap: 10px; }
/* Preserve the full classroom scenes, including faces, worksheets and board logos. */
.classroom-learning { background: linear-gradient(180deg, var(--white), var(--cream)); }
.classroom-learning .section-heading h2 { text-wrap: balance; }
.classroom-learning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.classroom-learning-card { min-width: 0; }
.classroom-learning-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: 24px; background: var(--lav); }
.classroom-learning-card h3 { margin: 22px 0 10px; font-size: 24px; line-height: 1.3; letter-spacing: -.5px; text-wrap: balance; }
.classroom-learning-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
@media (max-width: 760px) {
  .classroom-learning .section-heading { margin-bottom: 36px; }
  .classroom-learning-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .classroom-learning-card h3 { margin-top: 18px; font-size: 22px; }
}
/* Keep the homepage cards; each card's own label and title form its mobile trigger. */
.platform-accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.platform-accordion .feature-card { min-width: 0; padding: 32px; }
.platform-accordion .feature-guidance { background: white; border: 1px solid var(--line); }
.platform-accordion details { width: 100%; }
.platform-accordion summary { position: relative; display: block; list-style: none; cursor: default; }
.platform-accordion summary::-webkit-details-marker { display: none; }
.platform-accordion .feature-copy > span { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; opacity: .75; }
.platform-accordion .feature-card h3 { font-size: 27px; line-height: 1.2; margin: 14px 0; }
.platform-accordion .feature-body p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 24px; }
.platform-accordion .feature-purple p { color: #ddd1f0; }
.platform-accordion .format-pills { justify-content: flex-start; }
.platform-accordion .feature-toggle { display: none; }
@media (min-width: 761px) {
  /* Let the summary and body share the card's full flex height. */
  .platform-accordion details { display: contents; }
  .platform-accordion details::details-content { display: contents; }
  .platform-accordion .feature-body { display: flex; flex-direction: column; flex: 1; }
  .platform-accordion .feature-body > :not(p) { flex-shrink: 0; }
  .platform-accordion .exercise-preview,
  .platform-accordion .classroom-discovery-preview { margin-top: auto; }
}
@media (max-width: 760px) {
  .platform-accordion { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .platform-accordion .feature-card { padding: 28px 24px; }
  .platform-accordion summary { cursor: pointer; padding-right: 30px; }
  .platform-accordion .feature-copy h3 { font-size: 26px; margin: 14px 0 0; }
  .platform-accordion .feature-toggle { display: block; position: absolute; right: 0; top: 0; font-size: 26px; line-height: 1; font-style: normal; }
  .platform-accordion details[open] .feature-toggle { transform: rotate(45deg); }
  .platform-accordion .feature-body { margin-top: 20px; }
  .platform-accordion .format-pills { justify-content: flex-start; margin-top: 24px; }
  .platform-accordion .feature-purple summary:focus-visible { outline-color: var(--mint); }
}
.plan-description strong { display: block; margin-bottom: 6px; color: var(--purple); font-size: 14px; }
.home-page :is(.button, .text-link, summary, .nav a, .menu-button):focus-visible { outline: 3px solid var(--purple-2); outline-offset: 4px; }
@media (max-width: 980px) {
  .hero-home .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-home .hero-copy { max-width: 680px; margin-inline: auto; }
  .plan-examples .content-grid { gap: 16px; }
  .plan-examples .content-info { padding: 18px; }
  .plan-examples .content-info h3 { font-size: 18px; }
}
@media (max-width: 640px) {
  .hero-home { padding-top: 24px; padding-bottom: 36px; }
  .hero-home .hero-grid { gap: 28px; }
  .hero-home h1 { font-size: clamp(30px, 8vw, 36px); margin: 20px 0 28px; line-height: 1.2; }
  .hero-home .eyebrow { border-radius: 14px; font-size: 11px; text-align: left; }
  .hero-intro { font-size: 20px; margin-bottom: 24px; }
  .hero-description { font-size: 15px; }
  .hero-home .hero-actions .button { min-height: 48px; }
  .plan-examples .content-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .plan-examples .content-info { padding: 22px; }
  .plan-examples .content-info h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .content-card { transition: none; }
}
    @media (max-width: 760px) {
      .home-page { --home-visible-offer-height: 0px; padding-bottom: max(var(--home-visible-offer-height), calc(80px + env(safe-area-inset-bottom, 0px))); }
      .home-page.home-offer-visible { --home-visible-offer-height: var(--offer-bar-height); }
      .home-page .offer-bar { visibility: hidden; pointer-events: none; }
      .home-page.home-offer-visible .offer-bar { visibility: visible; pointer-events: auto; }
      .hero-home .hero-actions { flex-direction: column; }
      .hero-home .hero-actions .button { width: 100%; min-height: 48px; }
    }