/* ============================================================
   home.css - refreshed homepage (termtalk.com.au)
   ------------------------------------------------------------
   Two things live here:
     1. The refreshed site shell (gradient header + light footer).
        This is the canonical shell for the visual refresh. It is
        homepage-only for now; the content and product pages adopt
        it in the later prompts, at which point it can move into a
        shared stylesheet and the legacy nav.css shell retires.
     2. The homepage's own section layouts.
   Tokens and shared components come from css/styles.css. Nothing
   here leaks onto the un-refreshed pages because they do not load
   this file.
   ============================================================ */

/* ------------------------------------------------------------
   Canvas - a faint brand-tinted wash with two soft blooms.
   ------------------------------------------------------------ */
body.home {
  background: var(--gradient-canvas);
}
body.home::before,
body.home::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
body.home::before {
  top: -160px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(78, 205, 196, 0.16), transparent);
}
body.home::after {
  bottom: -220px;
  left: -180px;
  width: 620px;
  height: 620px;
  background: radial-gradient(closest-side, rgba(46, 109, 180, 0.10), transparent);
}

/* Anchor offset tuned to the refreshed 64px header. */
.home [id] {
  scroll-margin-top: calc(64px + var(--space-4));
}

/* ------------------------------------------------------------
   Headings - page-level headings use the rounded display face.
   styles.css carries no bare h1/h2/h3 rules, so set them here.
   ------------------------------------------------------------ */
.home h1,
.home h2,
.home h3 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.home h1,
.home h2 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.home h1 { font-size: var(--display-h1); line-height: 1.1; }
.home h2 { font-size: var(--display-h2); }
.home h3 { font-size: var(--text-lg); }

/* Refreshed eyebrows read as a quiet grey label above the heading. */
.home .eyebrow {
  color: var(--color-ink-faint);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.section__heading { margin-bottom: var(--space-8); }
.section--soft { background: rgba(255, 255, 255, 0.55); }

/* ============================================================
   ICON - shared inline SVG sizing
   ============================================================ */
.tt-icon { flex: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}
.hero-title { margin-bottom: var(--space-4); }
.hero-lead {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}
.hero-actions {
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.hero-note { margin: 0; }

/* ReportReady demo card */
.demo-card {
  border-top: 4px solid var(--accent-report);
}
.demo-card__head {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.demo-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent-report);
  background: color-mix(in srgb, var(--accent-report) 14%, white);
}
.demo-card__meta { grid-template-columns: 1fr 1fr; }
.demo-card__grade { font-weight: var(--weight-bold); font-size: var(--text-lg); }
.demo-card__code { font-family: var(--font-mono); font-size: var(--text-sm); }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHAT'S INSIDE - tool cards
   ============================================================ */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tool-card--report    { --accent: var(--accent-report); }
.tool-card--parent    { --accent: var(--accent-parentbridge); }
.tool-card--cyber     { --accent: var(--accent-cyber); }
.tool-card--lessonlift { --accent: var(--accent-lessonlift); }
.tool-card--potentialpath { --accent: var(--accent-potentialpath); }
.tool-card--resources { --accent: var(--accent-resources); }
.tool-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, white);
}
.tool-card__name { margin: 6px 0 0; }
.tool-card__desc { margin: 0; flex: 1; }
.tool-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
}
.tool-card__more:hover { text-decoration: none; filter: brightness(0.92); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.section__lead {
  max-width: 60ch;
  margin-bottom: var(--space-8);
  color: var(--color-ink-muted);
}
.how-steps { gap: var(--space-8); }
.how-step__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.how-step__title { display: block; margin-bottom: 4px; }
.how-step__text { margin: 0; }
.how-card__note { margin: var(--space-6) 0 0; }

/* ============================================================
   PROOF - stats + testimonials
   ============================================================ */
.stats-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-around;
  margin-bottom: var(--space-8);
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  color: var(--color-blue);
}
.proof__lead {
  max-width: 64ch;
  margin: 0 auto var(--space-8);
}
.testimonial {
  border-top: 4px solid var(--color-teal);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.testimonial__stars {
  gap: 2px;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}
.testimonial__quote {
  margin: 0;
  flex: 1;
  font-style: italic;
  color: var(--color-ink);
}
.testimonial__author { margin: 0; font-weight: var(--weight-bold); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-card__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}
.pricing__note { margin-top: var(--space-6); }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-12);
  align-items: center;
}
.about__photo-wrap {
  position: relative;
  align-self: stretch;
}
/* Photo fills the wrapper, which stretches to match the text column's height. */
.about__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 30px rgba(46, 109, 180, 0.16));
}
.about__body p { color: var(--color-ink-muted); }
.about__list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: 0;
}
.about__list li {
  gap: var(--space-2);
  color: var(--color-ink);
}
.about__check { color: var(--color-teal); display: inline-flex; }
.about__pull {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--color-blue);
}

@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo-wrap { position: static; }
  .about__photo {
    position: static;
    height: auto;
    max-width: 360px;
    margin-inline: auto;
  }
}

/* ============================================================
   FAQ - native <details> accordion
   ============================================================ */
.faq__inner { max-width: 760px; }
.faq-item { padding: 0; }
.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .tt-icon {
  transition: transform 0.2s var(--ease-out);
  color: var(--color-ink-muted);
}
.faq-item[open] .faq-q .tt-icon { transform: rotate(180deg); }
.faq-a {
  padding: 0 var(--space-6) var(--space-5);
  margin: 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-section {
  background: var(--gradient-brand);
  padding: var(--space-20) 0;
  text-align: center;
}
.cta-section h2 {
  color: #fff;
  margin-bottom: var(--space-3);
}
.cta-section__sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}
.cta-section__btn {
  background: #fff;
  color: var(--color-blue);
  border-color: transparent;
}
.cta-section__btn:hover,
.cta-section__btn:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-blue);
}

/* ============================================================
   SCROLL-TO-TOP FAB (behaviour in js/index-page.js)
   ============================================================ */
.scroll-fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradient-button);
  color: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 90;
}
.scroll-fab.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}