/* ==========================================================================
   Learningly homepage
   --------------------------------------------------------------------------
   Everything here is scoped to .home-page (set on <main> by index.html) so the
   marketplace styling cannot leak into the signed-in application screens,
   which still use the older base.css tokens. Brand colours come from the
   --ll-* custom properties defined in base.css.

   Section rhythm, deliberately alternating so the page reads in blocks
   without decorative graphics:
     hero cream / trust white / tutors cream / subjects mint / trust peach /
     steps cream / platform dark green / reviews white / safety cream /
     tutor CTA mint / FAQ peach / footer near-black
   ========================================================================== */

.home-page {
  background-color: var(--ll-cream);
  color: var(--ll-body);
  font-family: "Lexend", "Segoe UI", sans-serif;
}

.home-page h1,
.home-page h2,
.home-page h3 {
  color: var(--ll-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* :where() keeps this reset at zero added specificity so individual lists can
   still set their own margins with a single class. */
.home-page :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.home-section { padding-block: 120px; }



.home-page a:focus-visible,
.home-page button:focus-visible,
.home-page select:focus-visible,
.home-page summary:focus-visible {
  outline: 2px solid var(--ll-green);
  outline-offset: 3px;
}

.product-section a:focus-visible,
.product-section summary:focus-visible { outline-color: #fff; }





/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.home-hero { padding-block: 84px 96px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 80px;
  align-items: center;
}

.hero-copy h1 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

/* A circled word needs room for the loop, which is taller than the line box.
   Only the headings that actually carry one open up, so an unmarked heading
   keeps its tight setting. */
.hero-copy h1:has(.marked-circle) { line-height: 1.26; }

.hero-intro {
  max-width: 46ch;
  margin: 26px 0 34px;
  font-size: 1.15rem;
  line-height: 1.65;
}

/* Search — one horizontal unit on desktop, stacked on mobile. */
.tutor-search {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  max-width: 720px;
  padding: 8px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #fff;
}

.search-field {
  min-width: 0;
  padding: 6px 16px;
  border-right: 1px solid var(--ll-line);
}

.search-field label {
  display: block;
  margin-bottom: 3px;
  color: var(--ll-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-field select {
  width: 100%;
  border: 0;
  background-color: transparent;
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  outline: 0;
}

.search-note { margin: 16px 0 0; font-size: 0.92rem; }

/* Hero visual: a tall portrait, a smaller second portrait overlapping it low
   and left, and one profile panel. The sizes and offsets are deliberately
   uneven — that asymmetry is the point — but nothing else floats here. */
.hero-visual {
  position: relative;
  max-width: 520px;
  margin-left: auto;
  padding-bottom: 74px;
  padding-left: 96px;
}

.hero-frames { position: relative; }

.hero-portrait {
  display: block;
  overflow: hidden;
  aspect-ratio: 420 / 500;
  border-radius: 12px;
  background-color: var(--ll-mint);
  transform: rotate(1deg);
}

.hero-portrait img,
.hero-portrait-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The second frame: smaller, squarer, tilted the other way. */
.hero-portrait-small {
  position: absolute;
  bottom: -66px;
  left: -96px;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 200px;
  aspect-ratio: 1 / 1;
  border: 5px solid var(--ll-cream);
  border-radius: 10px;
  background-color: var(--ll-peach);
  transform: rotate(-2.5deg);
}

.hero-portrait-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--ll-line);
}

.hero-portrait-small.hero-portrait-placeholder { border: 5px solid var(--ll-cream); }

.hero-portrait-placeholder span {
  color: var(--ll-green-deep);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* A single flat yellow block, tucked behind the top-right corner of the main
   portrait so it reads as backing rather than a stray shape. */
.hero-flash {
  position: absolute;
  top: -20px;
  right: -30px;
  width: 124px;
  height: 124px;
  border-radius: 10px;
  background-color: var(--ll-yellow);
  transform: rotate(-7deg);
}

.hero-tutor-card {
  position: absolute;
  right: -26px;
  bottom: -6px;
  z-index: 3;
  display: block;
  width: min(272px, 70%);
  padding: 20px 22px;
  border: 1px solid var(--ll-line);
  border-radius: 10px;
  background-color: #fff;
  color: var(--ll-body);
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.hero-tutor-card:hover { border-color: var(--ll-green); }

.hero-tutor-name {
  display: block;
  color: var(--ll-ink);
  font-size: 1.08rem;
  font-weight: 700;
}

.hero-tutor-subjects {
  display: block;
  margin-top: 4px;
  color: var(--ll-green);
  font-size: 0.9rem;
  font-weight: 600;
}

.hero-tutor-levels {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
}

.hero-tutor-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 12px;
  font-size: 0.88rem;
}

.hero-tutor-meta .rating { color: var(--ll-ink); font-weight: 600; }
.hero-tutor-meta .rating i { color: #B5891B; }
.hero-tutor-meta .price { color: var(--ll-ink); font-weight: 700; }

.hero-tutor-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  color: var(--ll-green);
  font-size: 0.88rem;
  font-weight: 600;
}

/* In the empty state the card sits in the flow, so it has to clear the second
   frame's overhang rather than being tucked under it. */
.hero-tutor-card-empty { position: static; width: auto; margin-top: 92px; }
.hero-tutor-card-empty .hero-tutor-subjects { color: var(--ll-body); font-weight: 400; }



/* --------------------------------------------------------------------------
   2. Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  border-block: 1px solid var(--ll-line);
  background-color: #FDFBF7;
}

.trust-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 96px;
  align-items: center;
}

.trust-items li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: var(--ll-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.trust-items i { color: var(--ll-green); font-size: 1rem; }

/* --------------------------------------------------------------------------
   3. Featured tutors
   -------------------------------------------------------------------------- */

.heading-row {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 54px;
}

.heading-row .text-link { margin-top: 0; margin-bottom: 6px; white-space: nowrap; }

.tutor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 34px;
}

/* Every other card drops, and the portraits alternate between a taller and a
   squarer crop, so the row reads as a hand-arranged set rather than a table. */
.tutor-grid > :nth-child(even) { margin-top: 46px; }
.tutor-grid > :nth-child(even) .tutor-photo { aspect-ratio: 1 / 1; }



.mobile-link { display: none; }

/* --------------------------------------------------------------------------
   4. Browse by subject
   -------------------------------------------------------------------------- */

.subject-section { background-color: var(--ll-mint); }

/* Offset the heading slightly so the section does not start on the same
   left rule as every other one. */
.subject-heading { padding-left: clamp(0px, 3vw, 56px); }

/* STEM tiles: the subjects Learningly exists for, given the most weight on
   the page after the tutors themselves. */
.stem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 54px;
}

.stem-grid a {
  display: flex;
  min-height: 118px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(23, 33, 28, 0.12);
  border-radius: 10px;
  background-color: #FBFDFC;
  color: var(--ll-ink);
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.stem-grid a:hover {
  background-color: #fff;
  border-color: var(--ll-green);
  transform: translateY(-3px);
}

.stem-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }

.stem-go {
  display: grid;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 6px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-size: 0.7rem;
}

/* One tile in the row carries the accent, so the yellow appears once here. */
.stem-grid > :nth-child(3) .stem-go { background-color: var(--ll-yellow); color: var(--ll-ink); }

/* Subject + level, one row per level. Lower contrast than the tiles above on
   purpose: same destinations, narrower filter. */
.level-rows { margin-top: 64px; border-top: 1px solid rgba(23, 33, 28, 0.14); }

.level-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid rgba(23, 33, 28, 0.14);
}

.level-row h3 { margin: 0; font-size: 1.15rem; }

.level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.level-chips a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(23, 33, 28, 0.18);
  border-radius: 6px;
  color: var(--ll-ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.level-chips a:hover {
  border-color: var(--ll-green);
  background-color: var(--ll-green);
  color: #fff;
}

.subject-section .text-link { margin-top: 42px; }

/* --------------------------------------------------------------------------
   5. Tutors you can trust
   -------------------------------------------------------------------------- */

.trust-section { background-color: var(--ll-peach); }

/* Photography left, copy right — the mirror of the hero, so the two image
   blocks on the page do not sit on the same side. */
.trust-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 90px;
  align-items: center;
}

.trust-gallery {
  position: relative;
  padding: 10px 0 96px 40px;
}

.gallery-frame {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--ll-mint);
}

.gallery-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Two frames, different sizes, overlapping at a slight angle. */
.gallery-frame-1 {
  width: 78%;
  aspect-ratio: 4 / 5;
  margin-left: auto;
  transform: rotate(1.6deg);
}

.gallery-frame-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 54%;
  aspect-ratio: 5 / 4;
  border: 6px solid var(--ll-peach);
  transform: rotate(-2.2deg);
}

.gallery-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid rgba(23, 33, 28, 0.14);
}

.gallery-frame-2.gallery-placeholder { border: 6px solid var(--ll-peach); }

.gallery-placeholder span {
  color: var(--ll-green-deep);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Peeks out from behind the lower frame rather than floating on its own. */
.gallery-flash {
  position: absolute;
  bottom: 44px;
  left: -28px;
  z-index: 1;
  width: 104px;
  height: 104px;
  border-radius: 10px;
  background-color: var(--ll-yellow);
  transform: rotate(9deg);
}

.trust-copy h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  line-height: 1.08;
}

.trust-lead {
  max-width: 50ch;
  margin: 22px 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.trust-points { margin-top: 42px; }

.trust-points li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(23, 33, 28, 0.13);
}

.trust-points li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.trust-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  background-color: #fff;
  color: var(--ll-green);
}

.trust-points h3 { margin: 4px 0 8px; font-size: 1.15rem; }
.trust-points p { margin: 0; line-height: 1.7; }
.trust-points .text-link { margin-top: 12px; font-size: 0.92rem; }

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 100px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   6. How Learningly works
   -------------------------------------------------------------------------- */

.centred { text-align: center; }
.centred h2 { max-width: none; }
.centred > p:not(.eyebrow) { margin-inline: auto; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 64px;
}

.steps-grid li {
  padding-top: 28px;
  border-top: 3px solid var(--ll-green);
}

/* The middle step sits lower than its neighbours; the third number block
   carries the yellow. */
.steps-grid > :nth-child(2) { margin-top: 40px; }
.steps-grid > :nth-child(3) > span { background-color: var(--ll-yellow); color: var(--ll-ink); }

.steps-grid li > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 6px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-size: 0.88rem;
  font-weight: 700;
}

.steps-grid h3 { margin: 0 0 10px; font-size: 1.3rem; }
.steps-grid p { margin: 0; max-width: 34ch; line-height: 1.7; }

/* --------------------------------------------------------------------------
   7. Platform section
   -------------------------------------------------------------------------- */

.product-section {
  padding-block: 118px;
  background-color: var(--ll-green);
  color: #DCE7E1;
}

.product-section .eyebrow { color: var(--ll-mint); }
.product-section .section-heading h2 { color: #fff; }
.product-section .section-heading > p:not(.eyebrow) { color: #D3E3DB; }
.product-section .home-button { margin-top: 34px; }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 80px;
  align-items: center;
}

.product-ui {
  overflow: hidden;
  border-radius: 12px;
  background-color: #fff;
  color: var(--ll-body);
}

.product-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--ll-line);
}

.product-bar .brand-font { color: var(--ll-ink); font-size: 1.05rem; }
.product-bar-dots { display: flex; gap: 6px; }
.product-bar-dots i { width: 8px; height: 8px; border-radius: 50%; background-color: #E2E5E0; }

.product-content {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 330px;
}

.product-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 16px;
  border-right: 1px solid var(--ll-line);
  background-color: #FAF9F6;
}

.product-sidebar span {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
}

.product-sidebar span.active {
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-weight: 600;
}

.product-main { padding: 34px 36px; }

.product-label {
  margin: 0 0 10px;
  color: var(--ll-green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-main h3 { max-width: 22ch; margin: 0 0 28px; font-size: 1.45rem; }

.lesson-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
}

.lesson-row > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 6px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
}

.lesson-row strong { display: block; color: var(--ll-ink); font-size: 0.95rem; }
.lesson-row small { display: block; margin-top: 2px; font-size: 0.8rem; }

.lesson-status {
  padding: 5px 10px;
  border-radius: 5px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.product-footnote { margin: 20px 0 0; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   8. Reviews (rendered only when genuine reviews exist)
   -------------------------------------------------------------------------- */

/* Peach rather than another off-white: between the dark green platform block
   and the cream safety block, a near-cream section would read as an accidental
   seam instead of a new section. */
.reviews-section { background-color: var(--ll-peach); }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 56px;
}

.review-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(23, 33, 28, 0.1);
  border-radius: 10px;
  background-color: #FDFBF7;
}

.review-stars { margin: 0 0 16px; color: #B5891B; font-size: 0.85rem; letter-spacing: 2px; }

.review-card blockquote {
  margin: 0;
  color: var(--ll-ink);
  font-size: 1.02rem;
  line-height: 1.65;
}

.review-author { margin: auto 0 0; padding-top: 20px; color: var(--ll-ink); font-size: 0.88rem; font-weight: 600; }
.review-author span { color: var(--ll-body); font-weight: 400; }
.review-author a { color: var(--ll-green); text-decoration: none; }
.review-author a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. Safety and privacy
   -------------------------------------------------------------------------- */

.safety-copy { max-width: 54ch; font-size: 1.08rem; line-height: 1.8; }
.safety-copy p:first-child { margin-top: 0; }
.safety-copy p + p { margin-top: 20px; }

/* --------------------------------------------------------------------------
   10. Tutor CTA
   -------------------------------------------------------------------------- */

.tutor-cta {
  padding-block: 76px;
  background-color: var(--ll-mint);
}

.tutor-cta-inner {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
}

.tutor-cta h2 { margin: 0; font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.tutor-cta p:not(.eyebrow) { max-width: 52ch; margin: 12px 0 0; }
.tutor-cta .home-button { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

.faq-section { background-color: var(--ll-peach); }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: 90px;
  align-items: start;
}



/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1279px) {
  .home-section { padding-block: 96px; }
  .home-hero { padding-block: 64px 76px; }
  .hero-grid { gap: 56px; }
  .hero-visual { padding-left: 54px; }
  .hero-portrait-small { width: 160px; left: -54px; bottom: -50px; }
  .split-layout, .product-layout, .trust-layout { gap: 64px; }
  .trust-gallery { padding-left: 24px; }
  .faq-layout { gap: 60px; }
  .tutor-grid { gap: 26px; }

  /* The mockup's panel gets narrow well before the section stacks, so the
     lesson row drops its status onto a second line rather than crushing the
     title into three. */
  .product-content { grid-template-columns: 160px 1fr; }
  .product-main { padding: 28px; }
  .lesson-row { grid-template-columns: 42px 1fr; row-gap: 10px; }
  .lesson-status { grid-column: 2; justify-self: start; }
}

/* Small laptops: the hero is still two columns here, so the search unit has
   only half the page. The button drops to its own row rather than squeezing
   the selects until "Any subject" clips. */
@media (min-width: 992px) and (max-width: 1199px) {
  .tutor-search { grid-template-columns: 1fr 1fr; gap: 4px 6px; }
  .tutor-search .home-button { grid-column: 1 / -1; }
  .search-field { padding-inline: 12px; }
  .search-field:last-of-type { border-right: 0; }
}

/* Tablet */
@media (max-width: 991px) {
  .home-section { padding-block: 78px; }
  .home-hero { padding-block: 52px 64px; }

  /* Hero stacks: search stays above the photography, as on mobile. */
  .hero-grid,
  .split-layout,
  .product-layout,
  .trust-layout,
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 52px; }

  .section-heading h2,
  .trust-copy h2 { max-width: 22ch; }
  .hero-visual { max-width: 460px; margin-inline: 0 auto; }
  .subject-heading { padding-left: 0; }
  .stem-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 44px; }

  /* Photography first, then the copy, so the section still opens with faces. */
  .trust-gallery { max-width: 480px; padding: 0 0 84px 30px; }
  .gallery-flash { top: 30px; }
  .trust-items { grid-template-columns: repeat(2, 1fr); padding-block: 22px; gap: 20px; }
  .trust-items li { justify-content: flex-start; }
  .tutor-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .level-rows { margin-top: 48px; }
  .steps-grid { gap: 40px; }
  .review-grid { grid-template-columns: 1fr; gap: 20px; }
  .product-content { grid-template-columns: 150px 1fr; }
  .product-main { padding: 28px; }
  .tutor-cta-inner { align-items: flex-start; flex-direction: column; gap: 30px; }
}

/* Mobile */
@media (max-width: 767px) {
  .home-section { padding-block: 62px; }
  .home-hero { padding-block: 40px 54px; }
  .hero-copy h1 { font-size: 2.4rem; }
  .hero-intro { margin-bottom: 28px; font-size: 1.05rem; }
  .section-heading h2 { font-size: 2rem; }

  .tutor-search { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
  .search-field { padding: 8px 12px 12px; border-right: 0; border-bottom: 1px solid var(--ll-line); }
  .tutor-search .home-button { width: 100%; margin-top: 6px; }

  .hero-visual { max-width: none; padding: 0 0 30px 40px; }
  .hero-portrait { aspect-ratio: 4 / 3.4; }
  .hero-portrait-small { width: 128px; left: -40px; bottom: -34px; }
  .hero-flash { width: 92px; height: 92px; top: -10px; right: 0; }
  .hero-tutor-card { position: static; width: auto; margin-top: 22px; }
  .hero-tutor-card-empty { margin-top: 58px; }

  .trust-items { grid-template-columns: 1fr; gap: 14px; }
  .heading-row { align-items: flex-start; flex-direction: column; gap: 0; margin-bottom: 34px; }
  .desktop-link { display: none; }
  .mobile-link { display: inline-flex; margin-top: 34px; }

  /* Single column, but laid out as compact listing rows so four tutors stay
     scannable without four screens of scrolling. */
  .tutor-grid { grid-template-columns: 1fr; gap: 24px; }
  .tutor-card {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 18px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ll-line);
  }
  .tutor-card:last-child { padding-bottom: 0; border-bottom: 0; }
  .tutor-photo { aspect-ratio: 1 / 1; }
  .tutor-card-body { padding-top: 0; }
  .tutor-detail { display: none; }
  .tutor-price { margin-top: 12px; padding-top: 12px; }

  .stem-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stem-grid a { min-height: 92px; padding: 16px; }
  .stem-name { font-size: 1rem; }
  .level-row { grid-template-columns: 1fr; gap: 12px; }
  .level-chips a { padding: 8px 13px; }
  .steps-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; }
  .steps-grid > :nth-child(2) { margin-top: 0; }
  .trust-points li { grid-template-columns: 40px 1fr; gap: 14px; }
  .trust-icon { width: 40px; height: 40px; }
  .trust-gallery { padding: 0 0 64px 20px; }
  .gallery-flash { width: 74px; height: 74px; }

  .product-section { padding-block: 72px; }
  .product-content { grid-template-columns: 1fr; }
  .product-sidebar {
    flex-direction: row;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--ll-line);
    overflow-x: auto;
  }
  .product-sidebar span { white-space: nowrap; }
  .product-main { padding: 26px 20px; }
  .product-main h3 { font-size: 1.25rem; }
  .lesson-row { grid-template-columns: 42px 1fr; row-gap: 10px; }
  .lesson-status { grid-column: 2; justify-self: start; }

  .review-card { padding: 24px; }
  .tutor-cta { padding-block: 58px; }
  .faq-list summary { padding: 22px 40px 22px 0; font-size: 1rem; }
  .faq-list details > div { padding-right: 24px; }
}

@media (max-width: 400px) {
  .hero-copy h1 { font-size: 2.1rem; }
  .tutor-card { grid-template-columns: 96px 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page *,
  .home-page *::before,
  .home-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}