/* Home-only sections from the homepage redesign (docs/homepage-redesign-plan.md).
   Linked from index.html alone; bump render.HOME_CSS_VERSION when this changes.
   Breakpoints: mobile < 768, tablet 768-1279, desktop >= 1280. Text on the
   light-blue band is navy or ink, never --blue (4.0:1 there, below AA). */

.home > .tasks, .home > .how { padding: 48px 0 }
@media (min-width: 768px) { .home > .tasks, .home > .how { padding: 64px 0 } }
@media (min-width: 1280px) { .home > .tasks, .home > .how { padding: 80px 0 } }

/* The heading on the hero's try card (hidden by try.js while its panel shows). */
.try-head { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.2; text-align: center; color: var(--navy) }

/* ---- Take a sample test (only while data/home.json has sampleTestUrl) ---- */
.home > .sample { padding: 48px 0; background: var(--paper) }
.sample-grid { display: grid; gap: 24px; align-items: center }
.sample-shot {
  margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(13 59 115 / 16%);
}
.sample-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--line) }
.sample-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line) }
.sample-shot img { display: block; width: 100%; height: auto }
.sample-text h2 { margin-top: 0 }
.sample-text .section-lead { color: var(--ink-soft) }
.sample-actions { margin: 20px 0 0 }
.sample-actions .cta { min-height: 48px; font-size: 1.1rem; padding-left: 28px; padding-right: 28px }
.sample-actions .cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px }
@media (min-width: 768px) {
  .home > .sample { padding: 64px 0 }
  .sample-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px }
}
@media (min-width: 1280px) { .home > .sample { padding: 80px 0 } }

/* ---- What do you want to do today? ---- */
.tasks { background: var(--surface) }
.tasks .section-lead { color: var(--ink-soft) }
.task-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 24px }
@media (min-width: 480px) { .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .task-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px } }
.task {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgb(19 34 56 / 8%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.task:hover { color: var(--ink); border-color: var(--blue); box-shadow: 0 6px 18px rgb(13 59 115 / 12%) }
.task:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px }
.task-ic {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 10px; background: var(--sky-surface); color: var(--navy);
}
.task h3 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.2; color: var(--ink) }
.task p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5 }
.task-go { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--blue) }
@media (min-width: 1280px) { .task h3 { font-size: 1.25rem } }

/* ---- How it works ---- */
.how { background: var(--paper) }
.how-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 32px; counter-reset: how }
.how-step { counter-increment: how; display: grid; gap: 16px; align-content: start }
.how-text { position: relative; padding-left: 52px; min-height: 40px }
.how-text::before {
  content: counter(how); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 1.15rem;
}
.how-text h3 { margin: 6px 0 4px; font-size: 1.15rem; line-height: 1.2 }
.how-text p { margin: 0; color: var(--ink-soft); line-height: 1.5 }
.how-shot { margin: 0 }
.how-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgb(19 34 56 / 8%);
}
.how-shot figcaption { margin-top: 6px; font-size: 0.875rem; color: var(--muted) }
@media (min-width: 768px) and (max-width: 1023px) {
  .how-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center }
}
@media (min-width: 1024px) {
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
  .how-step { grid-template-rows: minmax(7.5rem, auto) auto }
}
@media (min-width: 1280px) { .how-text h3 { font-size: 1.25rem } }

.how-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px }
.how-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0 }
.how-links a { display: inline-block; padding: 10px 0; font-weight: 600 }

/* The demo: a play button standing in for the YouTube player until tapped,
   or the admin's MP4 at its own shape. */
.demo { margin-top: 32px; max-width: 720px }
.demo[hidden] { display: none }
.demo video {
  display: block; max-width: 100%; height: auto; max-height: min(70vh, 560px);
  background: #000; border-radius: 10px;
}
.demo iframe, .demo-play { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px }
.demo-play {
  position: relative; overflow: hidden; cursor: pointer; padding: 0;
  display: grid; place-items: center; align-content: center; gap: 12px;
  background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; font: inherit;
}
.demo-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.demo-play img + .demo-ic { box-shadow: 0 4px 16px rgb(0 0 0 / 35%) }
.demo-ic {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--orange); color: var(--ink);
}
.demo-label { position: relative; font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 3px rgb(0 0 0 / 45%) }
.demo-play:hover .demo-ic { background: var(--orange-hover) }
.demo-play:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px }

/* ---- Teachers using it (only while data/home.json has testimonials) ---- */
.home > .proof { padding: 48px 0; background: var(--paper); border-top: 1px solid var(--line) }
.quote-grid { display: grid; gap: 16px; margin-top: 24px }
@media (min-width: 768px) { .quote-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px } }
.quote {
  margin: 0; padding: 20px; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 14px; background: var(--paper);
}
.quote blockquote { margin: 0 0 12px; font-size: 1.1rem; line-height: 1.5; color: var(--ink) }
.quote blockquote p { margin: 0 }
.quote figcaption { font-size: 0.95rem; color: var(--muted) }
.quote figcaption b { color: var(--ink) }

/* ---- One toolkit for your whole week: four tabs, one panel each ---- */
.home > .toolkit { padding: 48px 0; background: var(--surface) }
@media (min-width: 768px) { .home > .toolkit, .home > .proof { padding: 64px 0 } }
@media (min-width: 1280px) { .home > .toolkit, .home > .proof { padding: 80px 0 } }
/* Without the script the tabs stay hidden and every panel shows, stacked. */
.tk-tabs { display: none }
.toolkit.js-tabs .tk-tabs {
  display: flex; gap: 8px; margin: 24px 0; padding: 2px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.toolkit.js-tabs .tk-tabs::-webkit-scrollbar { display: none }
/* Phones: all four tabs in view as a 2 x 2 grid rather than a row that scrolls. */
@media (max-width: 479px) {
  .toolkit.js-tabs .tk-tabs { display: grid; grid-template-columns: 1fr 1fr }
  .tk-tabs button { padding: 0 8px }
}
.tk-tabs button {
  flex: none; scroll-snap-align: start; cursor: pointer; min-height: 44px;
  font: inherit; font-weight: 700; font-size: 1rem; white-space: nowrap;
  padding: 0 18px; border-radius: 999px;
  background: var(--paper); color: var(--navy); border: 1px solid var(--line);
}
.tk-tabs button:hover { border-color: var(--navy) }
.tk-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy) }
.tk-tabs button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px }

.tk-panel {
  display: grid; gap: 16px; align-content: start; margin-top: 32px;
  padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
}
.tk-panel[hidden] { display: none }
.toolkit.js-tabs .tk-panel { margin-top: 0 }
.tk-panel h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; color: var(--ink) }
.tk-shot { margin: 0; max-width: 640px }
.tk-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px }
.tk-shot figcaption { margin-top: 6px; font-size: 0.875rem; color: var(--muted) }
.tk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.tk-points li { position: relative; padding-left: 28px; color: var(--ink-soft); line-height: 1.5 }
.tk-points li::before {
  content: ""; position: absolute; left: 4px; top: 0.35em; width: 6px; height: 11px;
  border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.tk-badge {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gold-surface); color: var(--gold-ink); border: 1px solid #ecd48a; border-radius: 999px; padding: 0 8px;
}
.tk-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 }
.tk-links a { display: inline-block; padding: 10px 0; font-weight: 700; color: var(--blue) }
.tk-links .tk-more { font-weight: 600 }
@media (min-width: 768px) { .tk-panel { padding: 28px } }
@media (min-width: 1280px) {
  .tk-panel {
    grid-template-columns: minmax(0, 1fr) 600px; column-gap: 48px;
    grid-template-areas: "title shot" "points shot" "links shot"; grid-template-rows: auto auto 1fr;
  }
  .tk-panel h3 { grid-area: title; font-size: 1.25rem }
  .tk-shot { grid-area: shot }
  .tk-points { grid-area: points }
  .tk-links { grid-area: links; align-self: start }
}

/* ---- Made for every kind of teacher: the task-card look (.tasks) on the light band ---- */
.audiences .task-grid { margin-top: 24px }

/* ---- Teach from your phone (navy band) ---- */
.home > .app-band { padding: 48px 0; background: var(--navy); color: #fff }
.app-band h2 { color: #fff }
.app-band .section-lead { color: #dbe9fb }
.app-inner { display: grid; gap: 32px; align-items: center }
.app-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px }
.app-points li { position: relative; padding-left: 28px; color: #fff }
.app-points li::before {
  content: ""; position: absolute; left: 4px; top: 0.35em; width: 6px; height: 11px;
  border: solid var(--gold); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.app-actions { margin: 0 0 8px }
.app-actions .cta { min-height: 48px }
.app-actions .cta:focus-visible, .final-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 3px }
.app-note { margin: 0; font-size: 0.9rem; color: #cfe0ff }
.app-tile {
  justify-self: center; width: 160px; height: 160px; border-radius: 36px; display: grid; place-items: center;
  background: #fff; box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
}
.app-tile img { border-radius: 20px }
.app-shots { display: flex; gap: 12px; justify-content: center }
.app-phone {
  width: 31%; max-width: 160px; padding: 6px; border-radius: 22px; background: #0a2b55;
  border: 2px solid var(--sky); box-shadow: 0 12px 30px rgb(0 0 0 / 35%);
}
.app-phone img { display: block; width: 100%; height: auto; border-radius: 16px }
@media (min-width: 768px) {
  .home > .app-band { padding: 64px 0 }
  .app-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px }
  .app-shots { width: 480px }
}
@media (min-width: 1280px) { .home > .app-band { padding: 80px 0 } }

/* ---- Start free. Upgrade when you need more. ---- */
.home > .plans-home { padding: 48px 0; background: var(--paper) }
.plans-home .offer { margin: 0 0 24px }
.plan-mini { border-radius: 14px }
.plan-mini.featured { position: relative; padding-top: 2.4rem }
.plan-ribbon {
  position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 0.25rem 0; max-width: none;
  border-radius: 12px 12px 0 0; text-align: center; font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; background: var(--gold); color: var(--navy);
}
.plan-mini .plan-price span { display: block; margin-top: 2px; line-height: 1.4 }
.plan-best { margin: 0; font-size: 0.95rem; color: var(--ink-soft) }
.plan-best b { color: var(--ink) }
.plan-mini .ticks li::before { color: var(--navy) }
.plan-go { margin-top: auto; padding: 10px 0 0; font-weight: 700; color: var(--blue) }
.plan-promises { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-soft) }
.plan-promises li { position: relative; padding-left: 22px; max-width: none }
.plan-promises li::before { content: "✓"; position: absolute; left: 0; color: var(--navy); font-weight: 700 }
.plan-compare { margin: 16px 0 0 }
.plan-compare a { display: inline-block; padding: 10px 0; font-weight: 700; color: var(--navy) }
@media (min-width: 768px) { .home > .plans-home { padding: 64px 0 } }
@media (min-width: 1280px) { .home > .plans-home { padding: 80px 0 } }

/* ---- Questions teachers ask ---- */
.home > .home-faq { padding: 48px 0; background: var(--surface) }
.faq-list { max-width: 820px; margin-top: 16px }
.home-faq .faq-item summary { min-height: 44px; display: flex; align-items: center }
.home-faq .faq-item p { max-width: 70ch }
.home-faq .faq-item a { color: var(--navy); font-weight: 600 }
@media (min-width: 768px) { .home > .home-faq { padding: 64px 0 } }

/* ---- Final call to action ---- */
.home > .final-cta {
  padding: 56px 0; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
}
.final-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem) }
.final-lead { margin: 8px auto 20px; color: #fff; max-width: 40rem }
.final-cta a:not(.cta) { color: #fff; font-weight: 700 }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin: 0 auto; max-width: none }
.final-actions .cta { min-height: 48px }
.final-hindi { margin: 20px auto 0; max-width: none }
.final-hindi a { display: inline-block; padding: 10px 0 }

/* ---- Phone sticky bar (home, < 768 px); site-home.js shows it after the hero ---- */
.sticky-cta { display: none }
@media (max-width: 767px) {
  .sticky-cta:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 10px; align-items: center;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgb(19 34 56 / 12%);
  }
  .sticky-cta .cta { flex: 1; min-height: 48px }
  .sticky-wa {
    flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #fff;
  }
  .sticky-wa .ic { width: 26px; height: 26px }
  .sticky-wa:focus-visible, .sticky-cta .cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px }
  html.try-open .sticky-cta { display: none }
  html.sticky-on .site-foot { padding-bottom: 80px }
  /* The bar carries WhatsApp on phones, so the round button goes. */
  main.home ~ .wa-float { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .task { transition: none }
}